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
FAQ 답변의 환불 기한·환불 범위 안내는 펼침 동작을 보여 주기 위한 레이아웃 시연용 더미 데이터이며, 실제 코드잇 환불 정책이 아닙니다.
결제일로부터 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