DOGUHAM · DESIGN SYSTEM작은 요소부터,
작은 요소부터,
같은 사용 경험으로.
도구함의 모든 도구를 연결하는 공용 컴포넌트.
숫자 한 자리부터 선택하는 순간까지, 일관되게 만듭니다.
FOUNDATIONS → COMPONENTS도구함 UI
입력 · 선택 · 동작 · 피드백
실제 서비스와 같은 컴포넌트01
읽기 쉬운 숫자 입력
금액·수량·치수에 기본 적용되는 천 단위 구분. 소수와 음수도 그대로 유지합니다.
기본 · 금액
입력하는 동안 천 단위로 구분합니다. 계산에는 원래 숫자를 사용합니다.
소수 · 단가
음수 · 증감
비활성
오류
숫자로 입력해 주세요.
02
차분하고 명확한 선택
긴 항목은 자연스럽게 줄을 바꾸고, 선택된 항목에는 체크 표시를 보여줍니다.
긴 문장
방향키로 탐색 · Enter로 선택 · Esc로 닫기
기본 / 비활성
03
폼의 기본 요소
레이블, 도움말, 입력 상태를 함께 사용합니다.
텍스트 / 날짜
여러 줄 / 선택
파일 선택
파일은 현재 브라우저에서만 선택합니다.
범위 / 색상
04
동작의 우선순위
주요 실행은 선명하게, 보조 동작은 가볍게 구분합니다.
05
결과와 피드백
결과, 오류 안내, 표, 카드는 공통된 색상과 간격을 따릅니다.
계산 결과3,000,000원
천 단위 구분으로 금액을 빠르게 확인합니다.
입력한 날짜의 순서를 확인해 주세요.
비교 결과
| 상품 | 가격 | 수량 |
|---|---|---|
| 상품 A | 12,000원 | 3개 |
| 상품 B | 18,000원 | 5개 |
결과 표의 숫자는 고정 너비 숫자를 사용합니다.
06
하나의 디자인 언어
기초 값 → 의미 → 컴포넌트. 토큰을 바꾸면 전체 UI가 함께 바뀝니다.
배경
--color-background표면
--color-surface본문
--color-text강조
--color-accent테두리
--color-border결과
--color-result-bg간격 · Spacing
space-14pxspace-28pxspace-312pxspace-416pxspace-624pxspace-832px라운드 · Radius
8px입력 / 버튼
12px카드 / 메뉴
16px큰 컨테이너
공용 컨트롤 높이 48px · 포커스 2px · 모바일 입력 글자 16px