전체 구성 개요
총 영문 10개 + 한글 18개 섹션, 37개 디자인 토큰, 아토믹 디자인 패턴(원자 → 분자 → 유기체)으로 구성됩니다. 한글 버전에는 다크 모드, 그림자 시스템, 토스트, 모달, 드롭다운, 내비게이션 보조 요소, 접근성, 사용 가이드 등 8개 섹션이 추가로 확장되어 있습니다.
영문 버전 (원본, 좌측 x:0)
| # |
섹션 |
내용 |
| 01 |
Cover |
프로젝트명, 버전, 날짜, 영감 출처 |
| 02 |
Color System |
기본 배경색, 텍스트 색상, 시맨틱 액센트 |
| 03 |
Typography |
폰트 패밀리 (Instrument Serif / Inter / JetBrains Mono), 타입 스케일 |
| 04 |
Spacing |
스페이싱 스케일 (xs~4xl), 테두리 반경 |
| 05 |
Components / Atoms |
버튼, 입력 필드, 뱃지/태그, 토글/체크박스, 아바타 |
| 06 |
Components / Molecules |
검색 바, 블로그 카드, 내비게이션 탭, 코드 블록 |
| 07 |
Components / Organisms |
헤더/내비게이션 바, 푸터, 아티클 콘텐츠 블록 |
| 08 |
Grid & Layout |
레이아웃 패턴 (1단/2단/카드 그리드), 브레이크포인트 |
| 09 |
Iconography |
Lucide 아이콘 16종, 사이즈/선 두께 가이드 |
| 10 |
States & Interactions |
버튼/입력/카드 상태, 모션/트랜지션 |
한글 버전 (번역 + 확장, 우측 x:1640)
| # |
섹션 |
내용 |
비고 |
| 01 |
표지 |
프로젝트명, 버전, 날짜, 영감 출처 |
영문 번역 |
| 02 |
색상 시스템 |
기본 배경색, 텍스트 색상, 시맨틱 액센트 |
영문 번역 |
| 03 |
타이포그래피 |
Noto Serif KR / Noto Sans KR / JetBrains Mono, 타입 스케일 |
한글 폰트 적용 |
| 04 |
간격 |
스페이싱 스케일, 테두리 반경 |
영문 번역 |
| 05 |
컴포넌트 / 원자 |
버튼, 입력 필드, 뱃지/태그, 토글/체크박스, 아바타 |
영문 번역 |
| 06 |
컴포넌트 / 분자 |
검색 바, 블로그 카드, 내비게이션 탭, 코드 블록 |
영문 번역 |
| 07 |
컴포넌트 / 유기체 |
헤더, 푸터, 아티클 콘텐츠 블록 |
영문 번역 |
| 08 |
그리드 및 레이아웃 |
레이아웃 패턴, 브레이크포인트 |
영문 번역 |
| 09 |
아이콘 |
Lucide 아이콘 16종 |
영문 번역 |
| 10 |
상태 및 인터랙션 |
버튼/입력/카드 상태, 모션/트랜지션 |
영문 번역 |
| 11 |
다크 모드 |
배경/텍스트/테두리 색상 매핑, 다크 컴포넌트 미리보기 |
신규 추가 |
| 12 |
그림자 시스템 |
4단계 엘리베이션 (xs/sm/md/lg), CSS 값, 용도 |
신규 추가 |
| 13 |
토스트 및 알림 |
성공/오류/경고/정보 토스트, 표시 사양 |
신규 추가 |
| 14 |
모달 및 다이얼로그 |
확인 다이얼로그, 폼 다이얼로그 |
신규 추가 |
| 15 |
드롭다운 및 셀렉트 |
드롭다운 메뉴, 셀렉트 상태 (기본/선택/비활성) |
신규 추가 |
| 16 |
내비게이션 보조 요소 |
페이지네이션, 브레드크럼, 툴팁 |
신규 추가 |
| 17 |
접근성 가이드 |
색상 대비 비율 (AAA/AA), 키보드 포커스, 스크린 리더 |
신규 추가 |
| 18 |
사용 가이드 |
Do/Don't 비교, 네이밍 컨벤션 (색상/간격/반경 토큰) |
신규 추가 |
예시 화면 (x:3280)
| # |
화면 |
내용 |
상태 |
| — |
블로그 포스트 — 데스크톱 |
디자인 시스템 적용 예시 페이지 |
프레임 생성됨, 콘텐츠 미완성 |
디자인 토큰 요약
| 카테고리 |
토큰 수 |
예시 |
| 배경색 |
5개 |
$bg-primary, $bg-secondary, $bg-dark |
| 텍스트 |
5개 |
$text-primary, $text-secondary, $text-inverse |
| 액센트 |
10개 |
$accent-blue, $accent-red-light |
| 테두리 |
3개 |
$border-light, $border-default, $border-dark |
| 간격 |
8개 |
$spacing-xs(4) ~ $spacing-4xl(96) |
| 반경 |
6개 |
$radius-sm(4) ~ $radius-full(999) |
| 폰트 |
4개 |
$font-display, $font-body, $font-mono |
폰트 매핑
| 역할 |
영문 |
한글 |
| 디스플레이/제목 |
Instrument Serif |
Noto Serif KR |
| 본문/UI |
Inter |
Noto Sans KR |
| 코드 |
JetBrains Mono |
JetBrains Mono |
1. 표지 (Cover)
- 프로젝트명 / 브랜드명
- 버전 정보 (v1.0)
- 작성 날짜
- 영감 출처 / 태그라인
2. 색상 시스템 (Color System)
- 기본 색상 — 배경색 (Primary, Secondary, Tertiary, Dark)
- 텍스트 색상 — 주요/보조/3차/뮤트/반전 텍스트
- 시맨틱 액센트 — Blue, Green, Red, Yellow, Purple (기능적 의미 부여)
3. 타이포그래피 (Typography)
- 폰트 패밀리 — 디스플레이, 본문/UI, 코드용 각각 지정
- 타입 스케일 — 48px → 12px까지 단계별 크기, weight, line-height 정의
- 한글/영문 각각의 폰트 매핑
4. 간격 (Spacing)
- 스페이싱 스케일 — xs(4) ~ 4xl(96)까지 단계별 간격 토큰
- 테두리 반경 — sm(4) ~ full(999)까지 단계별 라운딩 토큰
5. 컴포넌트 / 원자 (Atoms)
| 컴포넌트 |
변형 |
| 버튼 |
Primary, Secondary, Outline, Ghost, Danger + 크기 변형(S/M/L) + 아이콘 버튼 |
| 입력 필드 |
Default, Focused, Error 상태 |
| 뱃지/태그 |
Default, Info, Success, Warning, Error, Feature, Neutral |
| 토글/체크박스/라디오 |
On/Off 상태 |
| 아바타 |
S(32) / M(40) / L(48) / XL(64) 크기 변형 |
6. 컴포넌트 / 분자 (Molecules)
- 검색 바 — 아이콘 + 플레이스홀더 + 키보드 단축키
- 블로그 게시글 카드 — 이미지 + 태그 + 제목 + 설명 + 날짜/읽기 시간
- 내비게이션 탭 — 활성/비활성 상태
- 코드 블록 — 언어 표시 + 복사 버튼 + 구문 강조
7. 컴포넌트 / 유기체 (Organisms)
- 헤더/내비게이션 바 — 로고 + 메뉴 + 검색/테마 토글
- 푸터 — 브랜드 + 태그라인 + 링크 컬럼 + 저작권
- 아티클 콘텐츠 블록 — 메타정보 + 제목 + 본문 + 소제목 구조
8. 그리드 및 레이아웃 (Grid & Layout)
- 레이아웃 패턴 — 단일 컬럼(아티클), 2단(사이드바), 카드 그리드
- 브레이크포인트 — Mobile(<640), Tablet(640-1024), Desktop(>1024)
9. 아이콘 (Iconography)
- 아이콘 세트 선정 (Lucide)
- 자주 사용하는 아이콘 16종 + 사이즈/선 두께 가이드
10. 상태 및 인터랙션 (States & Interactions)
| 영역 |
항목 |
| 버튼 상태 |
Default, Hover, Active, Focus, Disabled |
| 입력 필드 상태 |
Default, Focused, Error, Success, Disabled |
| 카드 인터랙션 |
Default, Hover(shadow), Selected(accent border) |
| 모션/트랜지션 |
Micro(150ms), Standard(250ms), Expressive(400ms) + easing 함수 |
11. 다크 모드 (한글 전용)
- 배경/텍스트/테두리 색상 매핑
- 다크 컴포넌트 미리보기
12. 그림자 시스템 (한글 전용)
- 4단계 엘리베이션 (xs/sm/md/lg)
- CSS 값 및 용도 정의
13. 토스트 및 알림 (한글 전용)
14. 모달 및 다이얼로그 (한글 전용)
15. 드롭다운 및 셀렉트 (한글 전용)
- 드롭다운 메뉴
- 셀렉트 상태 (기본/선택/비활성)
16. 내비게이션 보조 요소 (한글 전용)
17. 접근성 가이드 (한글 전용)
- 색상 대비 비율 (AAA/AA)
- 키보드 포커스
- 스크린 리더
18. 사용 가이드 (한글 전용)
- Do/Don't 비교
- 네이밍 컨벤션 (색상/간격/반경 토큰)
추가로 고려된 요소
- 디자인 토큰 변수화 — 색상, 간격, 반경 등을 변수로 관리
- 아토믹 디자인 패턴 적용 (Atom → Molecule → Organism)
- 다국어 지원 — 영문/한글 버전 병렬 제작, 각 언어에 맞는 폰트 매핑
총 영문 10개 + 한글 18개 섹션, 37개 디자인 토큰, 50+ 컴포넌트 상태로 구성되어 있습니다.