공개: KoTalk 최신 기준선

문서/18-white-material-compact-ui-system.md

@@ -0,0 +1,59 @@
+# 18. White Material Compact UI System
+
+## 목적
+
+이 문서는 KoTalk 전 화면에 적용하는 UI 헌장이다.
+기준은 `화이트 원톤`, `플랫`, `각진 구조`, `머터리얼 계열의 질서`, `텍스트 최소화`, `고밀도`, `멀티 윈도우 친화성`이다.
+
+## 고정 미감
+
+- 기본 배경은 밝은 회백색이다.
+- 그라데이션, 유리효과, 부피감 있는 그림자, 떠 있는 카드 톤은 기본값으로 쓰지 않는다.
+- 반경은 짧고 단단하게 유지한다. 둥근 인상보다 정돈된 직각감을 우선한다.
+- 브랜드 감도는 색이 아니라 `정렬`, `간격`, `밀도`, `아이콘 문법`으로 만든다.
+
+## 텍스트 최소화 원칙
+
+- 화면은 `읽는 앱`이 아니라 `판단하고 이동하는 앱`처럼 보여야 한다.
+- 내비게이션은 아이콘 중심으로 두고, 라벨은 필요한 순간에만 드러낸다.
+- 빈 상태 설명도 1문장 이내로 제한한다.
+- 버튼은 2~5자 수준의 동사형을 우선한다.
+
+## 데스크톱 원칙
+
+- 좌측 목적지 레일 + 대화 목록 + 본문 + 보조 패널의 역할을 분리한다.
+- 리스트 밀도는 느슨한 카드보다 촘촘한 행 구조를 우선한다.
+- 멀티 윈도우는 예외 기능이 아니라 기본 생산성 기능으로 본다.
+- 창 크기 변화에 따라 레일, 목록, 보조 패널이 자연스럽게 숨고 드러나야 한다.
+
+## 모바일/웹 공통 원칙
+
+- 하단 내비는 목적지 전환용으로만 쓰고, 필터는 본문 안에서 처리한다.
+- 라벨은 활성 탭 또는 현재 맥락에서만 길게 보여 준다.
+- 메시지, 검색, 보관은 서로 다른 목적을 가진 표면으로 분리한다.
+
+## 컬러 토큰
+
+- `App Background`: `#F3F4F6`
+- `Surface`: `#FFFFFF`
+- `Surface Muted`: `#FAFAFA`
+- `Selected`: `#EEF2F6`
+- `Border Subtle`: `#E7E9EC`
+- `Border Strong`: `#D8DDE3`
+- `Text Strong`: `#111418`
+- `Text Default`: `#2A3138`
+- `Text Muted`: `#6B7480`
+- `Focus`: `#1A73E8`
+
+## 반경과 간격
+
+- 반경은 `6 / 8 / 10`만 쓴다.
+- 간격은 `4 / 8 / 12 / 16 / 20 / 24` 스케일로 제한한다.
+- 패널 간 구분은 그림자보다 `보더`와 `배경 대비`로 만든다.
+
+## 검수 질문
+
+- 텍스트 없이도 어디를 눌러야 할지 보이는가
+- 둥근 장식과 부피감 없이도 계층이 보이는가
+- 멀티 윈도우와 작은 창 크기에서 정보 손실이 최소화되는가
+- 라벨이 길어지지 않았는가