59 lines
2.4 KiB
Markdown
59 lines
2.4 KiB
Markdown
# 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` 스케일로 제한한다.
|
|
- 패널 간 구분은 그림자보다 `보더`와 `배경 대비`로 만든다.
|
|
|
|
## 검수 질문
|
|
|
|
- 텍스트 없이도 어디를 눌러야 할지 보이는가
|
|
- 둥근 장식과 부피감 없이도 계층이 보이는가
|
|
- 멀티 윈도우와 작은 창 크기에서 정보 손실이 최소화되는가
|
|
- 라벨이 길어지지 않았는가
|