제품 · 홈페이지 · 브랜드 에셋 셋이 같은 시스템에서 작동하도록, 21개 결정을 4-layer 구조에 매핑.
사용법: 투표자 추가 → 활성 투표자 선택(클릭) → 옵션(A/B/C) 클릭으로 투표 (같은 옵션 다시 클릭 = 취소) → 결정마다 코멘트 작성·저장. 표·코멘트는 Supabase에 저장돼 모든 사용자에 실시간 공유.
이 페이지의 결정은 DESIGN.md(업스DS 마스터 문서)의 특정 섹션을 갱신·확장하는 형태로 반영됩니다. 본문 안의 §X.Y 표시 위에 마우스를 올리면 풀이가 나옵니다.
DESIGN.md는 이미 셋(제품·홈페이지·에셋) 공통 시스템을 4-layer로 분리. 결정의 위치가 어느 layer냐에 따라 셋에 미치는 영향이 달라집니다.
--color-brand-500: #5A52FF--font-headline4 / 8 / 12 / 16px--primary--border-mediumBody 1× → Hero 1.5–2.0×--ups-purple (Marketing only)--button-normal-bg (Product)각 항목이 어느 layer에 속하고, DESIGN.md 어느 §을 건드리는지, 현 상태가 어떤지.
| ID | 항목 | Layer | DESIGN.md 위치 | 현 상태 | 핵심 결정 |
|---|---|---|---|---|---|
| A. Color · 컬러 | |||||
| A1 | Brand Primary | L1+L4 | §2.1 + §2.4 | 분기 존재 | #5A52FF · #5B52FF 통합 여부 |
| A2 | Neutral Palette | L1+L4 | §2.1 + §2.4 | 분기 존재 | 240 hue zinc · ink scale 통합 |
| A3 | Categorical 개수 | L1 | §2.1 | 10색 정의 | 10 → 8 축소 여부 |
| A4 | Categorical 이름 | L1 | §2.1 + §13 | 정의됨 | coral/skyblue → orange/sky 표준화 |
| A5 | Additional Purple | L4 → ? | §2.4 | --ups-purple 정의 | L1으로 승격 여부 |
| B. Typography · 타이포그래피 | |||||
| B1 | Display 70px Hero | L3 | §3.4 + §3.12 | 72–88px 정의 | 70px 범위에 포함시키기 |
| B2 | Body 18px | L4 | §3.3 + §3.4 | Product만 18px 있음 | Marketing 컨텍스트 허용 여부 |
| B3 | Typography 20 composite | L3 | §3.3/§3.4/§3.5 + §3.12 | 셋 공통 비율 정의 | (변경 없음 권고) |
| C. Layout / Spacing · 레이아웃 | |||||
| C1 | Layout Grid (max-width) | L1 | §4 | Marketing/Asset 토큰 부재 | 1200/1000/384 토큰 신설 |
| C2 | Spacing Scale | L1 | §4 | 8단계 | 11단계 확장 + 큰 값 처리 |
| C3 | Figma↔Code 매핑 정책 | 정책 | §13 | color만 정의 | spacing/radius 매핑 추가 |
| C4 | Border Radius | L1 | §4 | Marketing만 12px | 12px를 Product에도 추가 |
| D. Components · 컴포넌트 | |||||
| D1 | Button | L4 | §5A + §5B? | §5A 정의 | Marketing 호출 방식 / S·M·L |
| D2 | Card | L4 | §5A + §5B | §5B 정의 | width 384 명시 / border 통일 |
| D3 | Leadform / Input | L4 | §5A + §5B? | §5A box만 | underline 패턴 신규 정의 |
| D4 | Nav / Footer | L4 | §5A + §5B | 웹 nav 미정의 | 브랜드홈 web nav 위치 |
| D5 | Section System | L4 | §5B | homeheader 미정의 | homeheader 추가 여부 |
| D6 | Component Token 70개 | L4 | §2.3 | Product 70개 | 70→28 + Marketing 영역 |
| D7 | Border Tier | L2 | §2.2 | 6-tier 정의 | (유지 권고) |
| E. Migration · 마이그레이션 | |||||
| E1 | Alias 라이프사이클 | 정책 | 신규 §14 | 정책 부재 | Deprecate 시점 + codemod |
| F. Asset · 자산 | |||||
| F1 | KV / Cover Graphic | L4 | 신규 §8B | 시스템 부재 | KV/Cover 시스템 신설 |
어느 섹션이 가장 많이 갱신되는지 시각화. 보라 강조: 결정 3건 이상 영향. 노랑: 1–2건. 회색: 변경 없음.
DESIGN.md layer 구조상 하위 layer가 정해져야 상위 layer 옵션이 좁혀집니다. 1순위 끝나기 전엔 나머지 보류 권고.
별도 트랙: C3 (§13 매핑 정책) · E1 (마이그) — 토큰 결정과 병행 가능
--color-brand-500: #5A52FF · §2.4 --key-palette: #5B52FF. hex 1단위 차이로 분기 중.#0D0D12 알파). 두 시스템이 명백히 다름.부수 결정: 외주 slate(#0f1729) 흡수 여부 — 어느 옵션이든 거부 권고.
coral, skyblue, olive 등. Tailwind 표준은 orange, sky.--ups-purple: #805CFB Marketing 토큰 · §5B Featured Card border + Section Eyebrow color로 사용 중. Product에서 같은 보라가 필요할 때는 §2.1 --color-purple-400 #8D5DF4 사용. 외주 "신규" 제안은 사실 이미 marketing 토큰임.부수 결정: Marketing rule "버튼에 사용 금지"는 어느 옵션이든 유지.
Body/B1 18px 이미 정의. §3.4 Marketing 본문은 12–13px가 표준 (dense layout). Product 토큰은 있지만 marketing에서 18px 사용은 §3.4 표 밖.width-chat-content: 720px — product만). Marketing/Asset용 max-width 토큰 부재. 외주 1200/120/1000/384 패턴 미정의.4 / 8 / 10 / 12 / 16 / 18-20 / 24 / 32-36 / 44). product+marketing 혼합 표기. 외주는 5/7/10 (20/28/40) 추가 + 큰 값 64/120 사용.sm 4 / md 6 / lg 8 / xl 16 + Marketing 관행 4 / 8 / 10 / 12 / 16. §5B Card는 12px 사용. Product에는 12px 토큰 없음.부수: S/M/L size 추가 여부.
padding 24 / border --ink-20 / radius 12 + Card (Featured) border 1.5px #805CFB. §5A에 product card 별도. 이미 분기.부수: Announcement banner를 §5B 공통 컴포넌트로 추가 여부.
subtle / border / medium / strong / dark / bold). 셋 공통 semantic.
INPUT 1 — raw/reports/design system/Codex 분석 및 결정사항 리스트.html (14 패턴)
INPUT 2 — raw/reports/design system/Claude Code 분석 및 결정사항 리스트.html (12 R-결정)
REFERENCE — raw/docs/design/DESIGN.md (1982 lines)