kotalk/문서/16-mobile-webapp-product-and-ux-strategy.md

# 16. Mobile Webapp Product And UX Strategy

## 문서 목적

이 문서는 `https://vstalk.phy.kr`를 기반으로 하는 모바일뷰 웹앱이 왜 필요한지, 어떤 제품 원칙과 UX 기준으로 설계해야 하는지 정리한다. 목표는 기존 데스크톱 채널을 얇게 복제하는 것이 아니라, `이동 중 확인과 즉답`에 최적화된 별도 병렬 트랙을 설계하는 것이다.

## 제품 포지션

- 서비스명 가칭: `VSTalk Web`
- 진입점: `https://vstalk.phy.kr`
- 1차 타깃: 모바일 브라우저에서 설치 없이 바로 진입하려는 사용자
- 역할: `업무와 친근한 대화를 모두 자연스럽게 이어 주는 모바일 웹앱`

이 트랙은 Windows와 Android를 대체하지 않는다. 대신 아래의 공백을 메운다.

- 새 기기에서 앱 설치 없이 바로 대화에 들어가야 할 때
- 링크를 열고 곧바로 초대, 확인, 답장을 처리해야 할 때
- 개인 폰, 회사 폰, 태블릿 브라우저처럼 설치 제약이 있는 환경에서 임시 또는 반복 사용이 필요할 때
- 데스크톱 중심 사용자라도 외부 이동 중 `읽기`, `확인`, `짧은 답장`만은 끊기지 않아야 할 때

## 왜 모바일 웹앱이 필요한가

모바일 웹은 네이티브 앱보다 화려한 권한 통합이나 백그라운드 제어에서 불리하다. 그럼에도 이 프로젝트에서 웹앱이 필요한 이유는 분명하다.

### 1. 설치 전 저항을 크게 낮춘다

메신저는 기능 수보다 `지금 바로 대화에 들어갈 수 있는가`가 먼저다. 웹앱은 앱스토어를 거치지 않고 링크만으로 진입할 수 있기 때문에, 초대 수락과 첫 대화 시작 시간을 크게 줄일 수 있다.

### 2. 업무 흐름에서 접근성을 높인다

업무 대화는 종종 `설치 가능 여부`보다 `당장 열 수 있는지`가 중요하다. 브라우저 기반 접근은 사내 제한 기기, 임시 기기, 외부 회의 환경에서 진입성을 높인다.

### 3. 친근한 소통에서도 복귀가 빠르다

사적인 대화도 설치 전환을 강하게 요구하면 피로해진다. 웹앱은 공유 링크, 초대 링크, 알림 링크를 따라 들어왔을 때 바로 맥락을 이어 붙이기 좋다.

### 4. 제품의 설명 가능성을 높인다

`Windows 앱`, `Android 앱`, `모바일 웹`이 같은 계정과 같은 대화를 공유하면 사용자는 상황에 맞게 채널을 선택할 수 있다. 이 유연성은 제품 신뢰를 높인다.

## 병렬 트랙 운영 원칙

- 모바일 웹은 `독립 병렬 트랙`으로 기획한다.
- 서버 계약, 계정, 대화 데이터는 데스크톱/Android와 공유한다.
- UX 결정은 모바일 맥락을 우선하며, 데스크톱 UI를 축소 복제하지 않는다.
- 웹앱의 성공 기준은 `설치 대체`가 아니라 `빠른 진입과 안정적 핵심 루프`다.
- 릴리즈 메시지는 과장보다 준비도와 제약을 솔직하게 설명한다.

## 모바일 제품 전략

### 핵심 문장

`vstalk.phy.kr은 설치가 막히는 순간에도 대화를 이어 주는 가장 가벼운 진입점이다.`

### 역할 분담

- Windows: 오래 켜 두고 일하는 사용자를 위한 주력 생산성 채널
- Android: 푸시와 즉답 중심의 병렬 네이티브 채널
- Mobile Web: 링크 진입, 빠른 확인, 설치 전 체험과 저마찰 복귀 채널

이 세 채널은 경쟁하지 않는다. 각자 강점이 다르며, 같은 계정과 같은 대화를 서로 보완한다.

## 모바일 UX 원칙

### 공통 원칙

- 한 손 조작을 기준으로 한다.
- 첫 화면은 `대화`와 `복귀`에 집중한다.
- 읽지 않은 것, 급한 것, 내가 답해야 할 것을 먼저 드러낸다.
- 입력창과 전송 흐름은 항상 예측 가능해야 한다.
- 과장된 모션보다 스크롤 안정성과 응답성을 우선한다.
- 화면을 비웠다면 반드시 `다음 행동`을 함께 제시한다.

### 업무 소통 기준

- 읽지 않은 멘션, 중요한 대화, 최근 파일/링크 재확인이 빨라야 한다.
- 길게 쓰기보다 `짧게 확인하고 넘기는` 흐름이 빨라야 한다.
- 회의나 이동 중에도 방해를 줄이는 조용한 확인 모드가 필요하다.
- 대화 중간에 데스크톱으로 넘겨야 할 항목은 `나중에 PC에서 이어보기`처럼 부드럽게 연결할 수 있어야 한다.

### 친근한 소통 기준

- 최근 대화 재진입이 빠르고 부담이 없어야 한다.
- 답장, 반응, 사진 확인 같은 가벼운 상호작용이 한 손으로 가능해야 한다.
- 친한 대화 특유의 리듬을 해치지 않도록 입력창과 메시지 영역이 답답하지 않아야 한다.
- 사소한 실수를 복구하기 쉬워야 한다.

## 정보 구조 제안

### 기본 뷰

- 상단: 현재 계정, 검색, 빠른 새 대화
- 본문: 최근 대화 목록
- 하단: `대화`, `활동`, `사람`, `보관함`, `더보기`

### 우선순위 규칙

- 기본 탭은 항상 `대화`
- 앱 재진입 시 마지막 대화 또는 최근 대화 목록으로 즉시 복귀
- 알림 링크, 초대 링크, 공유 링크는 가능한 한 중간 랜딩 없이 목적지로 바로 보낸다

## 핵심 화면

### 1. 링크 진입 랜딩

- 해야 할 일 하나만 보여 준다
- `브라우저에서 계속`, `앱이 있으면 열기` 정도로 단순화한다
- 회원가입보다 `먼저 들어가 보기`가 앞에 온다

### 2. 초간단 가입/로그인

- Alpha 단계는 `이름 + 초대코드` 또는 `링크 승인` 중심
- 베타 이후에는 `이메일 1회 확인` 또는 `기존 기기 승인`
- 입력 필드는 최대 3개를 넘기지 않는다

### 3. 최근 대화 목록

- 읽지 않음, 멘션, 고정, 보관 상태를 한눈에 구분
- 스와이프로 `고정`, `읽지 않음`, `보관`, `음소거`
- 업무/친근 대화를 색이 아니라 정보 구조와 라벨로 구분

### 4. 대화 화면

- 입력창은 키보드가 올라와도 항상 안정적으로 보여야 한다
- 첨부, 답장, 반응, 전송 실패 복구를 지나치게 깊은 메뉴로 숨기지 않는다
- 새 메시지 배너와 읽음 위치 복귀가 명확해야 한다

### 5. 활동 화면

- 멘션, 답장 필요, 초대, 시스템 알림을 한곳에 모은다
- 업무 사용자는 여기서 우선순위를 정리하고, 친근한 사용자는 놓친 대화를 빠르게 찾는다

## MVP 범위

### 포함

- 모바일뷰 반응형 셸
- `vstalk.phy.kr` HTTPS 진입
- 이름 + 초대코드 가입 또는 링크 기반 입장
- 최근 대화 목록
- 1:1 / 그룹 대화 읽기
- 텍스트 전송
- 읽지 않음/고정/음소거 기본 처리
- 대화 검색 1차
- 링크 공유 진입
- 홈 화면 추가 가능 구조

### 제외

- 통화
- 고급 파일 편집
- 무거운 모바일 전용 피드
- 과도한 커스터마이징
- 데스크톱과 동일한 모든 보조 패널 재현

## 이후 확장

### Phase 2

- 이미지/파일 업로드
- 반응과 답장 고도화
- PWA 설치 유도 개선
- 공유 대상 선택과 링크 미리보기
- `나중에 PC에서 이어보기`

### Phase 3

- 오프라인 캐시 범위 확대
- 모바일 알림 품질 고도화
- 멀티 디바이스 세션 제어
- 업무/친근 맥락 전환 보조
- 모바일 검색과 보관함 품질 개선

## 기술 방향

- 1차는 `모바일 우선 웹앱 + PWA 가능한 구조`를 목표로 한다.
- 핵심 API와 WebSocket 계약은 기존 서버와 공유한다.
- 브라우저 제약을 넘기 위해 무리하게 네이티브 흉내를 내지 않는다.
- 성능 기준은 화려한 효과보다 `첫 진입`, `대화 복귀`, `전송 신뢰성`에 둔다.

## 콘텐츠와 문체 원칙

- 제품 설명은 부드럽고 절제된 문장으로 쓴다.
- 경쟁 서비스와의 비교는 공격적 표현 대신 `이 프로젝트가 해결하려는 사용 장면` 중심으로 쓴다.
- 웹앱 소개 문구는 `설치 없이 바로 시작`, `대화에 빠르게 복귀`, `업무와 일상 모두에 어울리는 모바일 흐름` 정도로 정리한다.

## 성공 기준

- 링크 클릭 후 첫 대화 진입까지 60초 이내
- 최근 대화 목록 첫 표시 시간 2초 이내
- 메시지 전송 성공률 99% 이상
- 모바일 웹에서 재방문 시 최근 대화 복귀 성공률 95% 이상
- 설치하지 않고도 `계속 쓸 수 있겠다`는 초기 피드백 확보

## 출시 메시지 원칙

추천 표현:

- `vstalk.phy.kr은 설치 전 단계에서도 대화를 자연스럽게 이어 주기 위한 모바일 웹 채널입니다.`
- `이 웹앱은 이동 중 빠른 확인과 즉답을 우선하며, 업무와 친근한 대화 모두에 무리 없이 어울리는 흐름을 목표로 합니다.`
- `기능 과시보다 링크 진입, 복귀 속도, 읽기와 답장의 편안함을 먼저 다듬습니다.`