# 02. UX, UI, And Brand Direction

## 2026-04 고정 기준

최신 UI 기준은 아래 문서를 함께 따른다.

- [18-white-material-compact-ui-system.md](18-white-material-compact-ui-system.md)
- [19-desktop-adaptive-window-and-multiwindow-guidelines.md](19-desktop-adaptive-window-and-multiwindow-guidelines.md)
- [20-kakao-public-pattern-benchmark-and-vs-translation.md](20-kakao-public-pattern-benchmark-and-vs-translation.md)

이번 개편부터는 아래 원칙을 고정한다.

- `모던 화이트`
- `그라데이션 금지`
- `플랫 톤`
- `저라운드`
- `짧은 한국어 라벨`
- `목록 우선`
- `PC 가변 창 대응`
- `모바일 한 손 사용 우선`

## 디자인 테제

`조용하고 빠른 한국어 데스크톱 메신저`

이 제품의 목표는 카카오톡 PC의 익숙함을 참고하되, 아래에서 명확히 더 나은 경험을 만드는 것이다.

- 더 적은 클릭
- 더 빠른 검색
- 더 쉬운 가입
- 더 명확한 상태
- 더 자연스러운 Windows 느낌

## 핵심 UX 원칙

- `배우지 않아도 바로 쓴다`
- `첫 5분 안에 가치가 느껴진다`
- `업무와 친근한 대화 모두에 어울린다`
- `빈 화면과 막다른 길이 없다`
- `실수 복구가 쉽다`
- `핵심 액션은 마우스와 키보드 둘 다 편하다`

## 첫 실행 핵심 사용자 흐름

1. 앱 실행
2. 30~60초 안에 가입 또는 로그인
3. 첫 대화 시작
4. 메시지 1건 이상 전송
5. 파일/이미지/검색/알림 중 하나를 바로 체감
6. 앱을 다시 켜도 최근 대화로 즉시 복귀

## 정보 구조

### 기본 구조

- 좌측 전역 내비게이션 레일
- 중앙 대화 목록
- 우측 메인 대화 패널
- 선택형 우측 인스펙터

기본은 2영역처럼 보이고, 필요할 때만 우측 인스펙터가 열린다.

### 상위 메뉴

- 대화
- 사람
- 알림
- 보관함
- 더보기

## 핵심 화면

### 1. 가입/온보딩

- 첫 화면 CTA는 `바로 시작`, `로그인된 기기 다시 열기` 정도로 최소화
- 가입 단계는 최대 2~3단계
- 진행 상태를 상단에 명확히 표시
- 실패 시 원인과 다음 행동을 바로 제시

### 2. 메인 채팅 화면

- 좌측: 최근 대화, 읽지 않음, 고정, 멘션, 음소거 상태
- 중앙: 현재 대화 타임라인
- 상단: 통합 검색, 빠른 새 대화, 현재 상태, 더보기
- 우측: 첨부파일, 링크, 고정, 멤버, 방 정보

### 3. 검색

- 사람, 방, 메시지, 파일을 하나의 전역 검색으로 통합
- 방향키 탐색과 엔터 진입 지원
- `Ctrl+K`로 언제든 열 수 있어야 함

### 4. 설정

- 알림
- 채팅
- 화면
- 보안
- 저장소

설정은 1뎁스 중심으로 유지한다.

## 한국어 UI 원칙

- UI는 한국어 기준으로 먼저 설계한다.
- 버튼은 짧은 동사형
- 오류는 `문제 + 다음 행동`
- 빈 상태는 `설명 + 바로 할 행동`
- 시스템 문구는 중립 존댓말
- 업무형 화면에서도 관공서 문체 금지

예:
- `대화 시작`
- `다시 시도`
- `이메일만 확인하면 바로 시작할 수 있어요`
- `전송하지 못했습니다. 네트워크를 확인하고 다시 보내세요.`

## 업무와 친근한 대화의 공존 방식

이 앱은 업무용 메신저와 친목용 메신저를 따로 만들지 않는다. 같은 구조 안에서 맥락만 다르게 제공한다.

### 업무형 대화에 필요한 것

- 읽지 않은 중요 메시지 빠른 확인
- 파일/링크/고정/공지 회수
- 대화 간 빠른 전환
- 알림 피로도 제어

### 친근형 대화에 필요한 것

- 답장과 반응이 빠름
- 사진/이미지 공유가 쉬움
- 읽기 편한 말풍선과 여백
- 가벼운 실수 복구

구조는 하나로 유지하고, 우측 패널과 상단 액션에서 맥락에 맞는 도구를 보강한다.

## 시각 시스템

### 타이포

- Windows에서 한글 가독성이 안정적인 폰트 우선
- 기본 후보: `Pretendard`, 대안 `SUIT`, 폴백 `Malgun Gothic`
- 본문 13~14px, 보조 12px, 섹션 제목 15~17px 권장
- 한국어 라벨은 2~6자 중심으로 설계

### 컬러

- 카카오 시그니처 컬러 차용 금지
- 중립 베이스 + 하나의 브랜드 포인트 컬러
- 상태색은 명확하지만 과포화 금지

### 표면과 레이아웃

- 카드 남발 금지
- 패널은 레이어 차이로 구분
- 그림자, 블러, 유리효과는 최소화
- 기본 3단 구조, `표준 밀도`와 `압축 밀도` 두 가지 제공

## 상호작용 원칙

### 리스트

- Hover에서 보조 액션이 자연스럽게 드러남
- 우클릭 메뉴 중요
- 읽지 않음, 고정, 음소거, 선택 상태가 한눈에 구분

### 대화 패널

- 과거 메시지를 읽는 중 자동 하단 점프 금지
- `새 메시지 N개` 배너 제공
- 드래그앤드롭, 붙여넣기, 멀티 선택 지원
- 입력창 주변은 `입력`, `첨부`, `이모지`, `전송`만

### 실수 복구

- 실패 메시지는 사라지지 않음
- 재전송 가능
- 초안 자동 저장
- 중요한 파괴 액션은 마지막 확인 제공

## 꼭 넣어야 할 Windows다운 경험

- 트레이 최소화/복귀
- 토스트 클릭 시 정확한 대화방 진입
- 시스템 메뉴와 스냅 동작 자연스러움
- `Ctrl+K` 빠른 검색
- `Ctrl+N` 새 대화
- `Alt+1~5` 주요 탭 전환
- `Esc` 패널 닫기

## 반드시 피해야 할 안티패턴

- 모바일 UI를 확대해 놓은 듯한 과한 여백
- 상단바와 입력창에 아이콘을 과밀 배치하는 것
- 기능이 많다는 이유로 모든 행동을 전면에 노출하는 것
- 한국어 라벨이 잘리는데 대응 규칙이 없는 것
- 빈 화면에서 다음 행동을 안내하지 않는 것
- 오류를 `오류가 발생했습니다` 수준으로만 쓰는 것
- 카카오처럼 보이게 만드는 컬러/말풍선/브랜딩