디자인 시스템

왜 토큰부터인가

디자이너가 따로 없는 팀에서 화면 일관성은 각자의 감각이 아니라 공유된 값에서 나옵니다. 색·간격·글자 크기를 각자 정하면 웹과 앱이 다른 제품처럼 보이고, 나중에 맞추는 비용이 훨씬 큽니다.

웹(FE-02)과 앱(APP-03)이 같은 토큰 값을 쓰는 것이 이 문서의 유일한 목표입니다.

토큰 (자리표시자 — 영상 반영 필요)

색

상태색(danger/warn/success) 3종은 컨셉과 무관하게 통용되는 값이라 먼저 고정합니다.

간격 · 반경

4px 배수로 통일합니다. 중간값을 쓰고 싶어지면 대개 레이아웃이 잘못된 것입니다.

spacing   4 · 8 · 12 · 16 · 24 · 32 · 48
radius    sm 6 · md 10 · lg 16 · full 999

타이포

한글 본문 행간은 1.6 이상을 씁니다. 영문 기준(1.4)을 그대로 쓰면 한글은 답답해 보입니다. 줄바꿈은 word-break: keep-all 로 어절 단위를 유지합니다.

공통 컴포넌트

웹·앱 양쪽에서 같은 이름, 같은 상태를 갖습니다. 이름이 다르면 논의할 때마다 번역이 필요해집니다.

화면 상태 3종 — 전부 만든다

1. 로딩 — 스켈레톤. 스피너만 도는 화면은 얼마나 기다릴지 알 수 없어 답답합니다.
2. 비어 있음 — 왜 비었는지 + 무엇을 하면 되는지. “데이터가 없습니다” 만 쓰지 않습니다.
3. 오류 — 무슨 일이 있었는지 + 재시도 버튼. 여기서 error.code 별로 문구가 갈립니다.

대화 UI

AI 대화는 이 제품의 얼굴입니다. 웹·앱이 동일하게 동작해야 합니다.

• 스트리밍 중에는 글자가 실시간으로 쌓이고, 중단 버튼이 보인다.
• 툴 호출 중에는 “~를 찾는 중” 같은 진행 표시를 낸다 (event: tool).
• 오류는 말풍선 안에 표시하고 재시도 버튼을 붙인다. 화면 전체를 오류로 덮지 않는다.
• 자체 타임아웃(예: 60초)을 걸어 무한 로딩을 막는다.

접근성 최소선

14일 안에 완벽할 수 없으니 아래 4개만 지킵니다.

• 본문 대비비 4.5:1 이상
• 터치 영역 최소 44×44
• 주요 플로우를 키보드만으로 완주 가능 (웹)
• 시스템 글자 크기 확대 시 잘림 없음 (앱)

기획서 v6 · 컨셉 영상 대조

• 색 토큰 7종을 영상 컨셉의 실제 HEX 로 교체
• 다크/라이트 중 무엇이 기본인지 확정
• 모션 성격 확정 (전환 속도·이징)
• 정보 밀도 확정 (대시보드형 / 카드형)
• 대화 UI 위치 확정 (전용 탭 / 전역 플로팅)
• 로고·아이콘 에셋 확보 → 앱 아이콘·스플래시(APP-24)

결정 로그