# Windows-first 메신저 시각/인터랙션 설계 방향

## 1. 디자인 테제

이 제품의 목표는 "카카오톡 PC의 즉시성, 익숙한 효율, 낮은 진입장벽"은 유지하면서, Windows 데스크톱 환경에서 더 차분하고 세련되며 오래 써도 피로하지 않은 메시징 경험을 제공하는 것이다.

핵심 방향은 다음과 같다.

- 한눈에 읽히는 정보 밀도: 화면을 넓게 쓰는 PC 환경에서 정보량은 충분히 담되 답답하거나 복잡해 보이지 않아야 한다.
- 즉시 조작 가능한 구조: 클릭 한두 번 안에 이동, 검색, 파일 전송, 대화 전환, 알림 확인이 끝나야 한다.
- 차분한 고급감: 과한 장식 대신 균형 잡힌 비율, 재질감, 미세한 움직임, 명확한 위계를 통해 프리미엄 감각을 만든다.
- Windows 네이티브 감성: 타이틀 바, 창 상태, 포커스, 컨텍스트 메뉴, 단축키, 다중 창 사용 방식에서 데스크톱 소프트웨어다워야 한다.
- 장시간 사용 최적화: 업무 중 하루 종일 켜두는 앱이라는 전제 하에 대비, 타이포, 상태 표현, 알림 피로도를 설계한다.

한 문장으로 정리하면 다음과 같다.

`친숙한 메신저 구조 위에, 생산성과 심미성이 정교하게 올라간 Windows용 프리미엄 데스크톱 메신저`

## 2. 데스크톱 정보구조

기본 정보구조는 3단 구성을 중심으로 설계한다.

- 1단: 좌측 글로벌 내비게이션
- 2단: 리스트 영역
- 3단: 메인 콘텐츠 영역

필요 시 우측 보조 패널이 열리는 4단 구조까지 확장한다.

상위 메뉴는 다음 정도로 제한한다.

- 채팅
- 친구 또는 연락처
- 알림
- 보관함 또는 자료함
- 설정

기본 진입점은 `채팅`이다. 메신저의 중심 과업이 대화라는 점을 흐리지 않는다. 친구 목록과 기타 기능은 중요하지만 1차 목적을 방해하지 않도록 한 단계 낮은 밀도로 둔다.

권장 구조는 다음과 같다.

- 좌측 아이콘 바: 전역 기능 전환
- 중앙 리스트 패널: 채팅방, 친구, 알림, 검색 결과 등 현재 선택된 전역 기능의 목록
- 우측 메인 패널: 대화 스레드, 친구 상세, 알림 상세, 설정 화면
- 필요 시 우측 인스펙터 패널: 참여자 목록, 첨부 파일, 링크, 검색 내역, 채팅방 정보

이 구조의 장점은 카카오톡 PC 사용자의 정신 모델을 크게 벗어나지 않으면서, Slack이나 Discord류 데스크톱 협업 앱처럼 "맥락 패널"을 유연하게 붙일 수 있다는 점이다.

## 3. 셸과 내비게이션

### 3.1 앱 셸 원칙

- Windows 타이틀 바와 자연스럽게 어울리는 상단 영역을 설계한다.
- 커스텀 크롬을 쓰더라도 창 이동, 스냅, 최대화, 최소화, 시스템 메뉴 등 기본 OS 동작을 해치지 않는다.
- 상단은 과하게 비워두지 말고, 검색, 빠른 실행, 현재 상태 같은 핵심 기능을 밀도 있게 담는다.

권장 셸 구성은 다음과 같다.

- 상단 바: 앱명 또는 현재 컨텍스트, 통합 검색, 빠른 새 채팅, 사용자 상태/프로필, 창 컨트롤
- 좌측 내비게이션 레일: 아이콘 중심, 선택 상태가 강하게 드러나는 구조
- 중앙 작업 영역: 콘텐츠 중심

### 3.2 내비게이션 패턴

- 전역 전환은 좌측 레일에 고정한다.
- 각 전역 섹션 안의 세부 이동은 중앙 리스트에서 해결한다.
- 우측 패널은 탐색이 아니라 "맥락 확장" 용도로만 쓴다.
- 브레드크럼은 사용하지 않는다. 메신저에서는 깊은 계층보다 현재 컨텍스트 표시가 중요하다.

### 3.3 검색 경험

검색은 데스크톱 메신저의 핵심 경쟁력이다. 상단 통합 검색은 다음을 지원해야 한다.

- 채팅방 검색
- 사람 검색
- 메시지 본문 검색
- 파일/링크 검색
- 최근 검색

검색 UI는 단순 입력창이 아니라 커맨드 팔레트와 리스트 검색의 중간 형태가 좋다. 입력 즉시 그룹화된 결과가 드롭다운으로 뜨고, 방향키와 엔터로 이동 가능해야 한다.

## 4. 리스트, 채팅, 디테일 패널 동작

## 4.1 리스트 패널

리스트는 단순 나열이 아니라 생산성 도구여야 한다.

필수 항목 구성
- 아바타
- 이름
- 마지막 메시지 미리보기
- 시간
- 읽지 않음 배지
- 고정 또는 알림 해제 상태

동작 원칙
- 행 높이는 너무 좁지 않게 설정하되, 기본 밀도는 "업무용으로 충분히 빽빽한 수준"을 유지한다.
- 마우스 호버 시 보조 액션이 은근히 드러난다.
- 우클릭 컨텍스트 메뉴가 풍부해야 한다.
- 드래그 앤 드롭으로 고정 순서 변경, 파일 전송, 창 분리 같은 데스크톱 행동을 적극 수용한다.

상태 표현
- 선택 상태는 배경색 + 얇은 강조선 + 타이포 웨이트 조합으로 표현한다.
- 읽지 않음은 색 하나에만 의존하지 말고 배지, 굵기, 프리뷰 톤까지 조합한다.
- 음소거/보관/고정 상태는 아이콘 크기를 작게 유지해 시각적 소음을 줄인다.

### 4.2 채팅 패널

채팅 패널은 이 제품의 중심이다. "읽기 쉬움"과 "입력 흐름의 부드러움"이 최우선이다.

기본 구조
- 상단 헤더: 채팅방 이름, 참여자 수, 상태, 검색, 통화/추가 액션
- 메시지 영역: 타임라인
- 하단 입력 영역: 입력창, 첨부, 이모지, 전송, 보조 액션

권장 동작
- 새 메시지가 들어와도 사용자가 과거 메시지를 읽는 중이면 자동 하단 점프를 강요하지 않는다.
- "새 메시지 n개" 점프 배너를 제공한다.
- 날짜 구분선, 읽음 기준선, 시스템 메시지는 메시지 버블보다 한 단계 낮은 시각 강도로 표현한다.
- 메시지 선택 모드, 멀티 선택, 복사/전달/삭제 등 PC다운 조작을 지원한다.
- 긴 대화에서 스크롤 성능과 가상화 품질을 매우 높게 가져간다.

메시지 레이아웃 원칙
- 내 메시지와 상대 메시지는 명확히 분리하되, 카카오톡처럼 지나치게 장난스럽지 않게 정제한다.
- 버블 최대 폭은 넓은 모니터에서도 읽기 좋은 선에서 제한한다.
- 텍스트, 이미지, 파일, 답장, 링크 프리뷰, 시스템 공지의 규칙이 일관돼야 한다.
- 연속 메시지는 아바타와 여백을 절약해 리듬감을 준다.

입력창 원칙
- 한 줄 입력을 기본으로 하되 여러 줄로 자연스럽게 확장된다.
- 첨부, 캡처, 파일 끌어놓기, 클립보드 이미지 붙여넣기 등 PC 특화 행동을 막지 않는다.
- 입력 보조 버튼이 너무 많아져 웹 툴바처럼 보이지 않게 한다.

### 4.3 디테일 패널

우측 디테일 패널은 선택적으로 열리고 닫혀야 한다.

용도
- 채팅방 정보
- 참여자
- 공유 파일
- 링크
- 미디어
- 대화 내 검색 결과

원칙
- 항상 고정 노출하지 않는다.
- 메인 채팅 공간을 잠식하지 않도록 기본 너비를 절제한다.
- 탭이 많아지면 세그먼트드 컨트롤 또는 상단 탭으로 정리한다.

## 5. 타이포그래피, 컬러, 머티리얼

### 5.1 타이포그래피

Windows 데스크톱에서는 가독성과 밀도가 핵심이다. 기본 방향은 다음과 같다.

- 기본 UI 폰트는 Windows 환경과 잘 맞는 높은 가독성의 산세리프를 사용한다.
- 채팅 본문과 리스트 본문은 숫자와 한글, 영문 혼합 시 안정적인 폰트를 우선한다.
- 제목용 폰트와 본문용 폰트의 역할을 지나치게 벌리지 않는다.

타이포 위계 예시
- 앱/섹션 타이틀: 강한 존재감, 그러나 과장되지 않음
- 리스트 제목/채팅방명: 명확한 식별성
- 본문: 장시간 읽기에 최적화
- 메타 정보: 시간, 상태, 보조 정보는 한 단계 낮은 대비

디자인 느낌은 "날카로운 스타트업 툴"보다 "매끈한 프리미엄 커뮤니케이션 앱" 쪽이 적합하다.

### 5.2 컬러

카카오톡의 노란색 아이덴티티를 직접 복제하는 대신, 다음 방식이 더 좋다.

- 기본 베이스는 뉴트럴 톤 위주
- 액센트 컬러는 한 가지 메인 색으로 통일
- 읽지 않음, 성공, 주의, 오류는 명확히 분리

권장 컬러 전략
- 배경: 완전한 흰색보다 미세하게 따뜻하거나 차가운 오프 화이트
- 패널 분리: 얇은 구분선보다 톤 차와 표면 재질감 중심
- 액센트: 채팅 전송, 선택 상태, 활성 탭, 주요 CTA에 일관되게 사용
- 경고/오류: 과포화 붉은색 남용 금지

트렌디함은 강한 원색이 아니라, 절제된 중립 팔레트 위에 정확한 강조색을 올리는 방식에서 나온다.

### 5.3 머티리얼과 표면

웹 카드 UI처럼 모든 것을 박스로 자르지 않는다.

권장 원칙
- 좌우 패널은 표면 레이어 차이로 구분
- 모달, 팝오버, 컨텍스트 메뉴는 Windows 특유의 얇은 재질감과 깊이감 사용
- 메시지 버블은 과도하게 둥글거나 젤리처럼 보이지 않게 조절
- 반투명, 블러, 그림자는 최소한으로 정교하게 사용

느낌은 "플랫 + 아주 얕은 입체감"이 적합하다. 과한 유리 효과는 피하고, 정보가 또렷하게 보이는 것을 우선한다.

## 6. 모션 원칙

모션은 눈에 띄기보다 사용 맥락을 설명해야 한다.

핵심 원칙
- 짧고 정확한 응답
- 방향성이 있는 전환
- 상태 변화 설명
- 방해하지 않는 부드러움

권장 모션
- 리스트 항목 선택: 짧은 배경 전이
- 패널 열림/닫힘: 수평 슬라이드 + 페이드
- 새 메시지 도착: 미세한 페이드/슬라이드
- 토스트/배너: 아래 또는 우상단에서 짧게 등장
- 검색 결과 표시: 즉시성 중심, 과한 애니메이션 금지

피해야 할 것
- 모든 클릭에 바운스
- 과장된 스프링
- 모바일 앱 같은 통통 튀는 반응
- 긴 페이드로 인한 느린 인상

## 7. 상태 설계

데스크톱 메신저는 상태 수가 많다. 상태 표현은 미세하지만 분명해야 한다.

필수 상태
- 기본
- 호버
- 포커스
- 활성
- 선택
- 비활성
- 로딩
- 동기화 중
- 오프라인
- 오류
- 전송 중
- 업로드 중
- 읽음/안 읽음
- 입력 중
- 방해 금지

상태 표현 원칙
- 색만으로 상태를 구분하지 않는다.
- 리스트와 채팅, 버튼과 입력창 전반에서 상태 언어를 통일한다.
- 로딩은 스켈레톤과 점진 표시를 기본으로 하고, 의미 없는 무한 스피너 남용을 피한다.

## 8. 온보딩

온보딩은 "설명"보다 "즉시 사용"을 목표로 설계한다.

권장 흐름
1. 첫 실행
2. 로그인 또는 계정 생성
3. 프로필 기본 설정
4. 연락처/친구 연결 또는 건너뛰기
5. 첫 채팅 시작 유도
6. 알림, 시작 프로그램, 트레이 최소화 여부 등 PC 친화 옵션 제안

온보딩 원칙
- 초기 단계 수를 최소화한다.
- 권한 요청은 필요한 순간에만 한다.
- 데스크톱 메신저답게 "항상 켜두는 앱" 설정을 자연스럽게 안내한다.
- 빈 상태 화면이 첫 대화를 열도록 적극적으로 돕는다.

빈 상태 화면에서 추천할 행동
- 새 대화 시작
- 연락처 가져오기
- 테스트 채팅방 입장
- 파일을 끌어 대화 시작하기

## 9. 접근성

이 프로젝트는 트렌디함보다 완성도를 우선해야 한다. 접근성은 부가 기능이 아니라 품질 기준이다.

필수 기준
- 키보드만으로 주요 흐름 수행 가능
- 포커스 링 명확
- 충분한 명도 대비
- 축소/확대 환경에서 레이아웃 붕괴 방지
- 스크린 리더용 의미 구조 설계
- 모션 축소 옵션 제공

특히 중요한 항목
- 채팅 리스트와 메시지 타임라인의 키보드 탐색
- 읽지 않음/전송 실패/입력 중 상태의 비색상 표현
- 작은 배지, 시간, 상태 아이콘의 저시력 대응
- 한글/영문/숫자 혼합 가독성

## 10. 카카오톡 PC에서 유지할 것

완전히 새롭게 만들기보다, 사용자가 무의식적으로 기대하는 패턴은 유지하는 편이 좋다.

- 좌측 중심의 익숙한 섹션 전환 구조
- 채팅 리스트 우선 진입
- 읽지 않은 채팅을 빠르게 훑는 흐름
- PC다운 우클릭 중심 조작
- 가벼운 창 크기 조절과 빠른 실행감
- 과도한 학습 없이 바로 채팅 가능한 구조

즉, 사용자는 "낯설지 않다"고 느껴야 하고, 동시에 "왜 이게 더 좋지?"라고 느껴야 한다.

## 11. 현대화할 것

다음 요소는 확실히 현대화하는 것이 좋다.

- 더 정교한 정보 밀도와 위계
- 우측 맥락 패널의 도입
- 검색을 단순 필터가 아닌 핵심 기능으로 승격
- 메시지 타입별 시각 시스템 정교화
- 반응성 높은 다중 상태 설계
- 디스플레이 스케일링과 고해상도 환경 대응
- 다크 모드가 아니라, 먼저 "좋은 라이트 모드" 완성 후 테마 확장
- 알림, 배지, 토스트를 세련되게 통합

추가로 현대화할 가치가 높은 부분
- 멀티 윈도우 또는 팝아웃 채팅
- 드래그 앤 드롭 UX
- 최근 파일/링크/미디어 탐색
- 검색 기반 이동
- 키보드 단축키 체계

## 12. 피해야 할 안티패턴

- 웹 메신저를 데스크톱 창 안에 얹은 듯한 넓은 여백과 느린 반응
- 모바일 UI를 단순 확대해 붙인 큰 버튼과 과도한 둥근 모서리
- 카드 남용으로 인한 조각난 정보 구조
- 색과 그림자 과다 사용
- 기능은 많은데 기본 채팅 흐름이 무거워지는 구조
- 입력창 툴바에 기능을 끝없이 누적하는 방식
- 알림, 배지, 강조색이 동시에 소리치는 시각 언어
- 다크 모드에서만 그럴듯하고 라이트 모드가 약한 설계
- 윈도우 스냅, 다중 모니터, DPI 스케일링을 고려하지 않은 레이아웃
- 상태 피드백이 늦어 사용자가 불안해지는 인터랙션

## 13. 최종 비주얼 톤 제안

가장 적합한 톤은 다음 세 가지 키워드로 정리된다.

- 정제됨
- 민첩함
- 오래 써도 질리지 않음

무드는 "밝은 생산성 툴"과 "프리미엄 개인 메신저"의 중간 지점이 좋다. 지나치게 기업 협업 도구처럼 딱딱하지도 않고, 반대로 캐주얼 메신저처럼 장난스럽지도 않아야 한다.

비주얼 방향을 한 줄로 요약하면 다음과 같다.

`카카오톡 PC의 익숙한 작업 흐름을 유지하되, Windows 11 시대의 고급 생산성 앱 수준으로 정밀하게 다듬은 메신저`

## 14. 디자인 의사결정 체크리스트

새 화면이나 컴포넌트를 만들 때마다 다음 질문으로 검증한다.

- 이 요소는 채팅이라는 핵심 과업을 더 빠르게 만드는가
- Windows 데스크톱에서 자연스러운가
- 장시간 사용 시 피로를 줄이는가
- 색 없이도 상태를 이해할 수 있는가
- 마우스와 키보드 모두에서 효율적인가
- 익숙함을 해치지 않으면서도 더 세련된가
- 웹 앱처럼 보이지 않는가

이 체크리스트를 통과하지 못하면 화려해 보여도 채택하지 않는다.
