docs(repo): 디자인 토큰 결정 및 design.md 작성

[ehlung]

목표

컬러·타이포그래피·스페이싱 등 디자인 토큰을 결정하고 docs/design.md에 문서화한다. 이후 화면 흐름·컴포넌트 명세(2단계)를 위한 기반을 마련한다.

배경 / 필요성

Tailwind CSS tailwind.config.ts와 NativeWind 설정에 디자인 토큰을 중앙 관리해야 웹·앱 간 색상·폰트가 일관되게 유지된다. 토큰 결정 없이 컴포넌트 구현을 시작하면 나중에 전체 수정 비용이 크다.

이슈는 2단계로 분리한다:

• 이 이슈 (1단계) — 토큰 결정 + design.md 뼈대 작성 (와이어프레임 불필요)
• 2단계 — 화면 흐름·컴포넌트 명세 (와이어프레임 완료 후 별도 이슈 생성)

작업 범위

• 디자인 원칙 3~5개 키워드 결정
• 컬러 팔레트 결정 — Primary, Gray, Semantic(success/warning/error) + 다크모드 고려 여부
• 타이포그래피 결정 — 폰트 패밀리, 사이즈 스케일(xs~3xl), 굵기
• 스페이싱·레이아웃 그리드 결정 — 4px 기반 스케일, 컨테이너 최대 너비
• shadcn/ui 컴포넌트 사용 목록 초안 작성 (웹 기준)
• Gluestack UI 컴포넌트 사용 목록 초안 작성 (앱 기준)
• docs/design.md 작성
• tailwind.config.ts 디자인 토큰 반영

완료 조건 (Acceptance Criteria)

• docs/design.md에 디자인 원칙, 컬러 팔레트, 타이포그래피, 스페이싱 섹션이 작성되어 있다.
• tailwind.config.ts에 커스텀 컬러·폰트 토큰이 반영되어 있다.
• 웹(apps/web)과 앱(apps/mobile) 양쪽에서 동일한 토큰 이름으로 참조 가능하다.
• 화면 흐름·컴포넌트 명세(2단계) 이슈가 별도 생성되어 있다.

제안하는 구현 방식

design.md 섹션 구성안

1. 디자인 원칙
2. 컬러 시스템 (Tailwind 토큰 이름 포함)
3. 타이포그래피
4. 스페이싱 & 그리드
5. 컴포넌트 사용 목록 (shadcn/ui / Gluestack UI)
6. 접근성 체크리스트 (WCAG AA, 최소 폰트 14px)

참고: docs/stack.md에 shadcn/ui(웹), Gluestack UI v2(앱) 확정되어 있음.

[ehlung]

현재 프로젝트의 웹 스타일링 기준을 점검한 결과, apps/web은 Tailwind CSS 4.x를 사용하므로 디자인 토큰 반영 위치를 기존 이슈 본문의 tailwind.config.ts가 아니라 CSS-first 방식으로 정리합니다.

반영 기준 변경

• 웹 디자인 토큰은 apps/web/src/app/globals.css의 CSS 변수와 @theme 매핑으로 관리합니다.
• shadcn/ui 컴포넌트는 Tailwind v4 + CSS 변수 기반 토큰을 참조합니다.
• 앱 NativeWind/Gluestack 토큰 매핑은 모바일 구현 단계에서 별도 확인합니다.

이슈 범위 조정

이 이슈는 다음 범위로 유지합니다.

• docs/design.md 작성
• 웹 기준 디자인 원칙, 컬러, 타이포그래피, 스페이싱 정리
• Tailwind CSS 4 기준 웹 토큰 매핑
• CLAUDE.md/스택 문서에서 디자인·용어 기준 정리

화면 UI 구현은 별도 이슈로 분리합니다.

[ehlung]

PR #18(feat(web): 관리자 초기 화면 UI 구현)에서 이 이슈의 작업이 처리됐습니다. PR당 이슈 1개 원칙으로 재정리하여 #23으로 통합합니다.