public/kotalk

Fork 0

ian debf62f76e 공개: KoTalk 최신 기준선

2026-04-16 09:24:26 +09:00

5.7 KiB

Raw Blame History

02. UX, UI, And Brand Direction

2026-04 고정 기준

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

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

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

디자인 테제

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

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

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

핵심 UX 원칙

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

첫 실행 핵심 사용자 흐름

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

정보 구조

기본 구조

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

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

5.7 KiB Raw Blame History