kotalk/문서/12-first-usable-windows-ux-slice.md

12. First Usable Windows UX Slice

목적

첫 실제 구현 슬라이스는 가입이 바로 끝나고, 최근 대화가 바로 보이며, 메시지를 실제로 보내고, 다시 켜도 바로 복귀되는 상태를 만드는 것이다.

이 문서는 현재 기획 문서의 합의사항을 실제 첫 구현 단위로 압축한 기준서다.

이 슬라이스가 포함해야 하는 범위

• Alpha 가입: 이름 + 초대코드
• 최근 대화 목록
• 단일 대화 읽기/쓰기
• 초안 자동 보존
• 전역 검색 진입 affordance
• 빈 상태, 로딩 상태, 오류 상태
• 앱 재실행 시 최근 대화 복귀

이번 슬라이스에서는 아래를 의도적으로 제외한다.

• 그룹 관리 고도화
• 파일 업로드 완성형
• 반응, 멘션, 고급 필터
• 우측 정보 패널 상세 기능
• 설정 전체

완료 기준

사용자는 도움 없이 아래를 끝낼 수 있어야 한다.

1. 앱 실행 후 30~60초 안에 가입
2. 자동 생성된 첫 대화 또는 나에게 메시지 확인
3. 메시지 1건 전송
4. 검색창 진입이 어디 있는지 즉시 이해
5. 앱을 껐다 켜도 최근 대화로 복귀

첫 화면 계층

1. Launch Gate

조건:

• 유효 세션 있음: 메인 셸로 즉시 이동
• 유효 세션 없음: 가입 화면 진입

화면 목적:

• 로고 연출보다 판단 속도
• 이 앱은 바로 들어가 쓸 수 있다는 인상 제공

표시 요소:

• 앱 이름
• 한 줄 설명: 이름과 초대코드만 있으면 바로 시작할 수 있어요
• 최근 로그인 기기 복귀 버튼은 후순위로 두고, 1차는 숨겨도 됨

2. Alpha Onboarding

필수 필드:

• 이름
• 초대코드

필수 버튼:

• 시작하기

보조 요소:

• 이 PC에서 계속 로그인
• 에러 위치 바로 아래 인라인 문구

금지:

• 프로필 사진 업로드 강제
• 상태메시지 입력 강제
• 다단계 도움말 캐러셀

완료 후 이동:

• 나에게 메시지 또는 inviter와의 기본 대화가 선택된 메인 셸

3. Main Shell

레이아웃:

• 좌측 내비게이션 레일
• 중앙 채팅 목록
• 우측 대화 패널

첫 슬라이스에서는 3열 구조를 유지하되, 실제 인지 방식은 목록 + 현재 대화 2영역처럼 느껴지게 해야 한다.

초기 화면 계층 상세

좌측 내비게이션 레일

이번 슬라이스에서 노출할 항목:

• 대화
• 알림
• 보관함
• 더보기

실제 활성은 대화만 우선 완성한다.

상단 고정 요소:

• 앱 워드마크 또는 심볼
• Ctrl+K 힌트가 있는 검색 진입 버튼

하단 고정 요소:

• 현재 사용자 이름
• 연결 상태 점

중앙 채팅 목록

상단:

• 검색 진입 버튼 또는 입력형 검색 박스
• 새 대화 버튼

리스트 아이템 최소 요소:

• 대화 이름
• 마지막 메시지 1줄
• 마지막 시간
• 읽지 않음 배지
• 선택 상태

첫 슬라이스에서 중요한 점:

• 데이터가 늦어도 스켈레톤 또는 로컬 캐시를 먼저 보여 준다
• Hover 시 과도한 액션을 노출하지 않는다
• 클릭 타깃을 넓게 잡는다

우측 대화 패널

상단 헤더:

• 대화 이름
• 참여자 요약
• 검색 버튼

메시지 타임라인:

• 날짜 구분선
• 내 메시지 / 상대 메시지 구분
• 보낸 시각
• 전송 상태 아이콘: 보내는 중, 보냄, 실패

하단 작성 영역:

• 멀티라인 입력창
• 첨부 버튼은 비활성 또는 준비중 상태로 둘 수 있음
• 전송 버튼

이번 슬라이스에서는 작성 경험이 무엇보다 중요하다.

가장 작은 상호작용 세트

이 목록은 프로토타입을 넘었다고 느끼게 하는 최소 기준이다.

1. 이름/초대코드 입력 후 엔터 또는 버튼으로 가입
2. 가입 성공 시 즉시 메인 셸 진입
3. 자동 생성된 첫 대화가 선택된 상태로 열림
4. 메시지 입력 중 초안 자동 저장
5. 엔터 전송, Shift+Enter 줄바꿈
6. IME 조합 중 엔터가 전송으로 오작동하지 않음
7. 메시지 전송 직후 optimistic row 표시
8. 전송 실패 시 같은 버블에서 다시 보내기
9. 목록에서 다른 대화 클릭 시 우측 패널 즉시 전환
10. Ctrl+K 또는 검색 버튼으로 검색 진입 UI 열림
11. 앱 재실행 시 마지막 대화 복귀

검색 affordance 정의

첫 슬라이스에서 검색은 완전한 검색 기능보다 검색 진입이 매우 쉽다를 먼저 만든다.

필수 요소:

• 좌측 상단 검색 진입 버튼
• placeholder: 검색 Ctrl+K
• 대화 헤더에도 검색 버튼 제공

첫 구현 동작:

• Ctrl+K 누르면 중앙 오버레이 검색창 오픈
• 검색 결과는 3종만 우선 지원
  • 대화
  • 사람
  • 메시지 최근 결과

검색 결과가 아직 제한적이어도 괜찮다. 대신 아래는 지켜야 한다.

• 키보드 방향키 이동
• Enter 진입
• Esc 닫기
• 결과 없음 상태에서 다음 행동 제안

빈 상태 설계

가입 직후 빈 상태

금지한다. 대신 아래 둘 중 하나를 강제한다.

• 나에게 메시지 자동 생성
• inviter와의 기본 대화 자동 생성

채팅 목록 빈 상태

문구:

• 아직 대화가 없습니다
• 새 대화를 시작하거나 초대 링크를 복사해 보세요

행동:

• 새 대화
• 초대 링크 복사

대화 패널 빈 상태

조건:

• 목록은 있으나 아직 선택된 대화가 없음

문구:

• 대화를 선택하면 여기에서 바로 이어서 볼 수 있어요

행동:

• 없음 또는 첫 대화 열기

로딩 상태 설계

앱 시작 로딩

• 전체 스피너만 두지 않는다
• 셸 골격을 먼저 보여 주고, 목록과 타임라인에 스켈레톤을 넣는다

목록 로딩

• 6~8개 정도의 스켈레톤 행
• 마지막 시간, 이름, 미리보기 형태가 보이도록 구성

대화 로딩

• 상단 헤더는 먼저 보여 주고
• 메시지 영역만 스켈레톤 말풍선 표시

오류 상태 설계

가입 실패

원칙:

• 필드 인근에서 바로 이유를 말한다
• 사용자가 다음 행동을 즉시 알 수 있어야 한다

예:

• 초대코드를 확인해 주세요
• 이름은 2자 이상 입력해 주세요
• 서버에 연결하지 못했습니다. 잠시 후 다시 시도해 주세요

목록 불러오기 실패

문구:

• 대화 목록을 불러오지 못했습니다

행동:

• 다시 시도

보조:

• 마지막 로컬 캐시가 있으면 함께 표시

메시지 전송 실패

표현:

• 실패한 메시지를 그대로 남긴다
• 버블 하단에 전송하지 못함
• 인라인 다시 보내기

첫 슬라이스가 bare prototype보다 나아 보이는 이유

• 가입 직후 빈 화면이 없다
• 목록과 대화가 동시에 보여서 구조가 즉시 이해된다
• 입력 중 초안이 살아 있어서 실제 앱처럼 느껴진다
• IME와 엔터 규칙이 맞아서 한국어 입력이 불안하지 않다
• 실패가 사라지지 않고 복구 가능하다
• 검색이 아직 완전하지 않아도 진입 경험은 완성형에 가깝다

첫 구현 우선순위

1. Launch Gate와 Alpha 가입
2. 메인 셸 3열 골격
3. 채팅 목록 로컬 우선 렌더
4. 대화 읽기와 메시지 전송
5. 초안 자동 저장과 마지막 대화 복귀
6. Ctrl+K 검색 오버레이
7. 빈/로딩/오류 상태 정교화

화면별 핵심 카피 초안

가입:

• 이름만 입력하면 바로 시작할 수 있어요
• 초대코드를 붙여넣으면 바로 들어갈 수 있어요

목록 빈 상태:

• 아직 대화가 없습니다
• 새 대화를 시작하면 여기에 표시됩니다

대화 빈 상태:

• 대화를 선택하면 여기에서 바로 이어서 볼 수 있어요

전송 실패:

• 전송하지 못했습니다
• 네트워크를 확인하고 다시 보내세요

검색 결과 없음:

• 검색 결과가 없습니다
• 대화 이름이나 메시지 내용을 다시 확인해 보세요

구현 메모

• 첫 버전에서는 대화, 검색, 작성 경험에 집중한다.
• 업무형/친근형 공존은 구조가 아니라 문맥 레벨에서 처리한다.
• 첫 슬라이스가 좋으면 이후 파일, 링크, 알림, 보관함을 붙여도 구조가 흔들리지 않는다.