Design System
명확한 원칙과 유연한 컴포넌트로 협업을 효율화하고, 더 나은 사용자 경험을 제공합니다. 어디서든 같은 원칙으로 일관된 경험을 전하기 위한 약속입니다.
Foundations 위에 세운 컴포넌트 17종과 패턴 4종. 방향은 제시하되 창의성을 제한하지 않습니다.
Size L·M·S / State default·hover·disabled / Icon-left·right
Color gray·purple / Tertiary는 Full width 불가 / Icon은 유니버설 의미만
Shape round·rectangle / Color 6종 / Invert — 의미가 다르면 컬러도 다르게
Position 8방향 / Color gray·purple / Close icon
State / Color gray·purple / Size L·M·S / Selected / Count / Underline — 항상 정확히 하나만 selected
Filled / Focused / Helper Text / Right Box / Variant default·error·positive
이메일 형식으로 입력해 주세요.
사용할 수 있는 주소입니다.
Word Limit / Filled / State default·disabled·focused / Size L·S — 최소 3줄 이상
한 문단 이내로 작성해 주세요.0 / 500
선택 영역 + 인디케이터 아이콘 — 모바일에서는 Bottom Sheet로 교체
max-height 182px / Checkbox·Description·Search / State / Align — 5개 이상이면 스크롤
Clickable Area = 레이블 포함 행 전체 / 항목 간격 최소 12px / Size L·S
Clickable Area = 행 전체 / 필수라면 기본 선택값 제공 / 5개 이상이면 Dropdown 권장
Row gap 16px / 텍스트 max-width 700px / Focused / Size L·S — 펼친 타이틀은 txt-purple-primary
결제일로부터 7일 이내에 신청하시면 전액 환불됩니다. 자세한 내용은 이용약관을 확인해 주세요.
최대 높이 = 뷰포트 80% / Breakpoint PC·MO — [취소하기]가 있으므로 Close 아이콘은 함께 쓰지 않음
저장하지 않으면 작성한 내용이
모두 삭제됩니다.
상태 아이콘 + 레이블 + 디스크립션 + "라이트 박스"(리워드·수치 변화 전용)
아이콘 / 레이블(Bold) / 디스크립션(한 문단 이내) / 닫기(우측 상단) / Primary Button
더 나은 경험을 만들기 위해 짧은 의견을 들려주세요.
Table Item을 조합하는 컨테이너 / Select · State default·hover — 모바일은 Fill 대신 가로 스크롤
| 이름 | 상태 | 담당 | 수정일 | |
|---|---|---|---|---|
| 기본 설정 | 진행 중 | 김코드 | 2026.07.16 | |
| 알림 설정 | 완료 | 이잇 | 2026.07.14 | |
| 보안 설정 | 종료 | 박디자 | 2026.07.02 |
첫 페이지 · 페이지 버튼 · 페이지 이동 · 마지막 페이지
백드롭·바디 필수 + 헤더·푸터 선택 / 모바일 width 100% — 다중 선택이면 [적용하기] 유지
ESSENTIAL Text + OPTIONAL Icon·Button·Background
표시할 콘텐츠가 없습니다
Filter Button(적용 여부로 on/off) · Header(개수 + 닫기) · Body
Label · Title · Description · Button을 함께 묶는 텍스트 패턴
시맨틱 컬러를 정의하고 모든 컴포넌트의 기준을 세웁니다.
요청한 데이터를 처리 중임을 시각적으로 전달
확보된 시맨틱 22종 중 4종이 diff 전용 / 코드 텍스트는 Menlo 고정폭
function count(items) {- const total = items.length+ const total = items?.length ?? 0 return total}Title 패턴 · Tabs · Text Field · Radio · Checkbox · Button을 한 화면에서 조합
설정
다른 사용자에게 보여지는 정보입니다.
로그인에 사용됩니다.
14 / 500