dsui는 한국어 웹앱을 만들 때 쓰는 React 컴포넌트, 블록, 테마 라이브러리예요. 색, 간격, 모서리, 그림자, 모션을 모두 토큰으로 정해 두고, 컴포넌트는 그 토큰만 읽어요. 토큰을 바꾸면 화면 전체가 같이 바뀌어요.
MIT 라이선스로 공개된 Arc 무료 라이브러리의 컴포넌트 105개와 블록 22개를 바탕으로 삼았어요. 문구를 해요체로 옮기고, 날짜와 숫자를 ko-KR과 Asia/Seoul에 맞추고, 아이콘과 효과음과 모션을 테마가 바꿀 수 있게 넓혔어요. 그 전부터 있던 devs7udio 항목까지 더해서 지금은 컴포넌트 114개, 블록 25개, 테마 2개가 있어요.
- 카탈로그와 데모: 컴포넌트 105개와 블록 22개, 모두 127개 항목에 직접 움직여 볼 수 있는 데모를 붙였어요. 항목마다 컨트롤, 소스, 마크다운 버전이 있어요.
- 테마: 기준이 되는
base와 그 위에 얹은 시즌 테마(할로윈, 설날, 추석, 크리스마스)가 있어요. 테마를 고르면 미리보기의 컴포넌트 색과 모서리가 바로 바뀌어요. - 설치: shadcn 형식의 레지스트리를
/r에 열어 두었어요.npx shadcn명령 한 줄이면 컴포넌트와 필요한 공통 파일이 함께 들어와요. - 문서: 소개, 설치, 테마 만들기, AI와 MCP, 변경 이력을 문서로 정리했어요.
- AI 도구 연결:
llms.txt와 항목별 마크다운, 키로 인증하는 MCP 서버로 AI 도구가 dsui를 검색하고 소스를 받아 갈 수 있어요.
테마를 토큰 위에 올렸어요. 컴포넌트마다 색을 따로 고치면 테마가 늘 때마다 손이 많이 가요. 그래서 컴포넌트는 --accent, --surface 같은 의미 토큰만 읽고, 테마는 그 토큰 값만 바꾸게 했어요. 새 테마는 base를 물려받고 바꾸고 싶은 값만 써요.
설치는 빈 앱에서 확인했어요. 레지스트리가 내 저장소에서만 돌아가면 의미가 없어요. 새로 만든 Next.js 앱에 버튼, 블록, 테마를 설치해 보고, 테마의 라이트·다크 값이 제자리에 들어가는지 확인했어요.
데모는 라이트와 다크에서 모두 열어 봤어요. 데모를 하나씩 라이트와 다크로 열어서 오류가 나거나 화면이 비면 실패로 잡는 점검 스크립트를 두었어요.
문구와 상호작용 규칙을 한 번에 맞췄어요. 모든 문구를 해요체로 바꾸고, 입력 필드는 포커스를 받으면 면을 강조색으로 채우게 했어요. 버튼, 탭, 스위치 같은 컴포넌트에는 효과음을 붙이고, 사용자가 끌 수 있게 했어요.
devs7udio 사이트의 머리글, 푸터, 버튼, 입력 필드가 모두 dsui 항목이에요. 사이트를 만들면서 부족한 점을 찾고, 고친 내용을 다시 라이브러리에 돌려놓고 있어요.