kotalk/docs/archive/windows-messenger-planning/01-visual-interaction-direction.md

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 데스크톱에서 자연스러운가
• 장시간 사용 시 피로를 줄이는가
• 색 없이도 상태를 이해할 수 있는가
• 마우스와 키보드 모두에서 효율적인가
• 익숙함을 해치지 않으면서도 더 세련된가
• 웹 앱처럼 보이지 않는가

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