공개: KoTalk 최신 기준선

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

@@ -0,0 +1,359 @@
+# 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 데스크톱에서 자연스러운가
+- 장시간 사용 시 피로를 줄이는가
+- 색 없이도 상태를 이해할 수 있는가
+- 마우스와 키보드 모두에서 효율적인가
+- 익숙함을 해치지 않으면서도 더 세련된가
+- 웹 앱처럼 보이지 않는가
+
+이 체크리스트를 통과하지 못하면 화려해 보여도 채택하지 않는다.