UI MVP

UI MVP

케미방 생성부터 결과 확인까지 화면 8개를 그린 목업입니다. 화면 문구와 규칙은 PRD 와 API 규약 에서, 입력 제약은 database/init/01-schema.sql 에서 가져왔습니다. 임의로 지어낸 값은 없습니다.

모바일 웹이 1차 플랫폼이므로 375 × 812 를 기준으로 그렸습니다. PRD 4장의 최소 지원 폭은 360px 입니다.

방장 흐름

room.status 가 HOST_ANSWERING 에서 OPEN 으로 넘어가는 구간입니다.

번호	화면	내용	근거
01	홈	진입점은 케미방 만들기 하나입니다. 참여는 초대 링크로만 들어옵니다.	PRD 5장
02	방 만들기	방장의 닉네임만 받습니다. 방 이름은 받지 않습니다.	스키마 participant.nickname VARCHAR(12)
03	질문 답변	한 화면에 한 문항을 보여주고 12문항을 순서대로 넘깁니다.	PRD 4장
04	초대 링크	방장이 제출하면 방이 열리고 링크가 나옵니다.	PRD 5장, 11장

방 생성은 room, participant, room.host_participant_id, room_question 12개가 한 트랜잭션입니다. 방장이 답변을 제출하기 전까지 다른 사람은 참여할 수 없습니다.

참여자 흐름

participant.answer_status 가 ANSWERING 에서 SUBMITTED 로 넘어가는 구간입니다.

번호	화면	내용	근거
05	초대 링크 진입	닉네임 중복을 막는 규칙이 화면에 드러나는 곳입니다.	PRD 12장, 409 NICKNAME_DUPLICATED
06	질문 답변	방장이 답한 것과 같은 12문항입니다. 방 생성 시 고정된 스냅샷을 읽습니다.	PRD 8장
07	참여 현황	모두를 기다리지 않습니다. 완료자가 2명이면 결과가 이미 열려 있습니다.	PRD 9장
08	그룹 결과	3명 이상이면 모든 Pair 를 계산하고 내 Pair 를 먼저 보여줍니다.	PRD 6장, 10장, 11장

05 번 화면은 일부러 오류 상태로 그렸습니다. 정상 입력만 그리면 UNIQUE (room_id, nickname_key) 가 실제로 무엇을 막는지 화면에 드러나지 않습니다.

결과 화면의 숫자

08 번 화면의 점수는 PRD 10장 공식으로 역산한 값입니다.

전체 케미 점수 = (일치 답변 수 / 12) × 100
카테고리 점수 = (카테고리 일치 수 / 3) × 100

Pair	일치	전체	대화	여행	생활	소비
민수 × 지은	8 / 12	67	100	67	67	33
민수 × 하늘	7 / 12	58
지은 × 하늘	5 / 12	42

카테고리 일치 수 3 + 2 + 2 + 1 이 전체 일치 수 8과 맞습니다. 화면의 숫자끼리 어긋나지 않으므로 구현할 때 테스트 데이터로 그대로 쓸 수 있습니다.

목업을 그리면서 확인한 것

카테고리 점수가 동점일 때의 규칙이 없습니다. PRD 11장은 "가장 잘 맞는 카테고리" 와 "가장 다른 카테고리" 를 단수로 요구하는데, 카테고리는 3문항뿐이라 점수가 0, 33, 67, 100 네 가지밖에 없습니다. 동점이 자주 나옵니다. PRD 10장의 순위 안정 정렬 규칙은 Pair 순위에 대한 것이고 카테고리에는 적용 대상이 없습니다.

참여자가 3명이면 반전 케미 조합은 후보가 생기지 않습니다. Pair 가 3개인데 PRD 10장은 "전체 TOP 3에 포함되지 않은 Pair 중" 에서 고르라고 하므로 남는 Pair 가 없습니다. 4명부터 의미가 생깁니다.

홈 화면에 코드를 직접 입력하는 진입점이 없습니다. PRD 5장과 11장은 공유를 링크로만 다룹니다. share_code 가 있어서 코드 입력 화면이 있을 법하지만 PRD 에 근거가 없어 넣지 않았습니다.

아직 정하지 않은 것

• 답변 시간 제한: 문항마다 제한 시간을 둘지 논의 중입니다. 도입하면 03 번과 06 번 화면에 타이머가 들어가고, 시간이 끝났을 때 어떻게 처리할지(자동 제출, 미응답 처리, 다음 문항으로 이동)를 함께 정해야 합니다. PRD 9장의 "모든 질문은 필수 답변이다" 와도 맞춰야 합니다.
• room_question.display_order 부여 순서: 카테고리끼리 묶어서 배치할지 전체를 섞을지 정하지 않았습니다. 03 번 화면의 문항 순서가 여기에 달려 있습니다.
• 로딩과 오류 화면: PRD 4장이 각각 명확한 화면으로 제공하라고 요구하지만 아직 그리지 않았습니다.
• 잘못된 링크, 방 준비 중 화면: ROOM_NOT_FOUND 와 ROOM_NOT_OPEN 에 대응하는 화면이 필요합니다.

목업 원본

이미지는 HTML 로 그린 뒤 headless Chrome 으로 내보냈습니다. 원본은 이 위키 저장소의 mockup/ui-mvp.html 입니다.

화면을 고칠 때는 HTML 을 수정하고 아래 명령으로 다시 내보냅니다.

git clone https://github.com/f-lab-edu/chemi_log.wiki.git
cd chemi_log.wiki

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless --disable-gpu --hide-scrollbars --force-device-scale-factor=2 \
  --screenshot=images/ui-mvp.png --window-size=1868,2412 \
  "file://$PWD/mockup/ui-mvp.html"

--window-size 는 캔버스 크기에 맞춘 값입니다. 화면을 추가해서 캔버스가 커지면 이 값도 함께 키워야 합니다. 작으면 잘리고 크면 아래에 빈 배경이 남습니다.