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

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 스케일로 제한한다.
• 패널 간 구분은 그림자보다 보더와 배경 대비로 만든다.

검수 질문

• 텍스트 없이도 어디를 눌러야 할지 보이는가
• 둥근 장식과 부피감 없이도 계층이 보이는가
• 멀티 윈도우와 작은 창 크기에서 정보 손실이 최소화되는가
• 라벨이 길어지지 않았는가