dsui는 devs7udio가 만들고 쓰는 디자인 시스템입니다. 컴포넌트, 블록, 테마, 일러스트가 들어 있고, 지금도 계속 늘어나고 있습니다.
이 글에서는 그중에서 범용 라이브러리의 기본 목록에서 보기 드문 컴포넌트 여섯 가지를 소개합니다. 모든 라이브러리를 비교해 본 결과가 아니라, 저희가 만들면서 느낀 차이를 고른 것입니다.
생성형 UI는 AI 모델이 OpenUI나 json-render로 쓴 화면을 dsui 컴포넌트로 그립니다. 모델이 만든 화면도 사람이 만든 화면과 같은 토큰, 같은 모션, 같은 소리를 갖습니다. 보러 가기
길게 눌러 확인은 버튼을 일정 시간 누르고 있어야 실행되는 확인 버튼입니다. 누르는 동안 채움이 차오르는 모습이 보이므로, 삭제처럼 되돌리기 어려운 동작에 어울립니다. 보러 가기
탄성 슬라이더는 끝까지 당기면 고무줄처럼 늘어나는 값 조절 슬라이더입니다. 보러 가기
서명 패드는 손이나 펜으로 서명을 그리고 SVG로 내보냅니다. 필압에 따라 획의 굵기가 달라집니다. 보러 가기
단축키 입력은 누른 키 조합을 그대로 기록해 단축키로 보여 줍니다. 사용자가 직접 단축키를 지정하는 화면에 쓸 수 있습니다. 보러 가기
릿지라인 차트는 여러 분포의 모양을 겹쳐 쌓은 능선으로 비교합니다. 보러 가기
블록은 컴포넌트를 모아 한 화면의 한 구역으로 만든 단위입니다. 히어로, 로그인, 설정 패널, 요금제 비교, 알림 센터, 푸터처럼 실제 서비스에서 반복해서 만드는 구역을 담고 있습니다. 지금 읽고 계신 이 글의 색 띠와 큰 제목도 블록으로 만든 것입니다.
테마는 색만 바꾸지 않습니다. 아이콘, 소리, 모션, 글꼴, 모서리, 그림자, 일러스트, 장식을 바꿀 수 있고, 바꾸지 않은 것은 기본 테마를 이어받습니다. 기본 테마 외에 크리스마스, 추석, 핼러윈, 설날 같은 시즌 테마가 있습니다.
dsui는 AI 도구가 읽기 쉬운 문서를 함께 공개합니다. llms.txt와 항목별 마크다운 주소가 있고, MCP 서버로 검색과 소스 조회를 할 수 있습니다. 도구는 일곱 가지이며 모두 읽기 전용입니다. 지금은 API 키가 있어야 연결됩니다. 필요하시면 devs7udio 스튜디오에 문의해 주십시오.
스킬은 AI 코딩 도구가 dsui로 화면을 만드는 순서와 규칙을 알려 주는 지침입니다. 스킬을 켜면 항목 찾기, 설치, 토큰 사용, 라이트와 다크 확인, 마무리 점검을 매번 같은 순서로 합니다.
문서는 AI와 MCP, 생성형 UI, 스킬 페이지에서 볼 수 있습니다.
