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. 빈/로딩/오류 상태 정교화

## 화면별 핵심 카피 초안

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

목록 빈 상태:
- `아직 대화가 없습니다`
- `새 대화를 시작하면 여기에 표시됩니다`

대화 빈 상태:
- `대화를 선택하면 여기에서 바로 이어서 볼 수 있어요`

전송 실패:
- `전송하지 못했습니다`
- `네트워크를 확인하고 다시 보내세요`

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

## 구현 메모

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