화면 설계 · 와이어프레임

AI 가상 피팅 서비스

화면에 무엇이 있어야 하고 어떤 상태를 갖는지를 확인하기 위한 문서입니다. 배치·색·타이포는 정의하지 않습니다.

기준 문서 PRD.md · SCREENS.md 범위 P0 9 + P1 1 = 10개 화면 작성 2026-08-09
이 목업은 시안이 아닙니다. 의도적으로 무채색이며, 요소의 존재와 상태 변화만 담았습니다. 시각 디자인은 디자이너가 정합니다. 다만 각 화면의 정보 우선순위지켜야 할 것은 제품 로직과 연결되어 있어 디자인 재량의 대상이 아닙니다.
FLOW

이동 지도

┌─ 로그인 불필요 ────────────────────────────────────────┐ │ S-01 랜딩 │ │ │ │ │ ▼ │ │ S-09 로그인 · 가입 (이메일 + 비밀번호 · 인증 코드) │ └─────┬──────────────────────────────────────────────────┘ ▼ ┌─ 로그인 필요 ──────────────────────────────────────────┐ │ S-02 프로필 1단계 (필수) ── 키 · 몸무게 · 성별 │ │ │ │ │ ▼ │ │ S-03 프로필 2단계 (선택) ────── 건너뛰기 ───┐ │ │ │ │ │ │ ▼ │ │ │ S-04 전신 사진 ◄──────────────────────────┘ │ │ ├── 업로드함 │ │ └── 건너뜀 (F-09) │ │ │ │ │ ▼ │ │ S-05 의류 등록 (사이즈표는 사용자가 직접 입력) │ │ │ │ │ ├── 사진 있음 ──▶ S-06 생성 대기 ──▶ S-07 결과 │ │ └── 사진 없음 ────────────────────▶ S-07 결과 │ │ │ │ │ ▼ │ │ S-10 사이즈 비교(P1) │ │ │ │ S-08 내 피팅 ◄─── 로그인 후 모든 화면의 헤더에서 진입 │ └────────────────────────────────────────────────────────┘
익명 이용은 지원하지 않습니다. 전신 사진과 신체 치수를 익명으로 받으면 데이터 주체를 확인할 수 없어 삭제·열람 요청에 응할 수 없고, 주인 없는 사진이 서버에 남습니다. 인증은 이메일 + 비밀번호이고, 새 기기에서는 이메일 인증 코드를 한 번 더 받습니다. 신체 사진을 보관하는 서비스이므로 이 조합을 약화시키지 않습니다.
S-01

랜딩P0

3초 안에 "이게 나한테 필요한 서비스인지" 판단하게 한다.

로그인
반품 안 되는 옷,
사기 전에 맞는지 확인하세요
중고 거래 · 해외 직구
실측 치수로 계산해 드립니다
이런 결과를 받아요
세미오버핏
가슴+18cm
기장엉덩이 중간
💡 M이라면 레귤러핏에 가까워요
시작하기
사진과 몸 정보를 안전하게 보관하려고 계정을 받아요
이미 계정이 있어요
로그인 전에 볼 수 있는 유일한 화면입니다. 가입할 가치가 있는지를 여기서 전부 설득해야 합니다.

필요한 요소

  • 필수헤드라인 — 반품 안 되는 상황을 정면으로 지목
  • 필수서브카피 — 대상(중고·해외직구)과 방법(실측 치수 계산)
  • 필수핏 리포트 예시 — 가입 전 유일한 판단 재료
  • 필수시작 버튼 — 로그인 화면(S-09)으로
  • 필수가입 안내 — 왜 계정이 필요한지 (개인정보 보호 근거)
  • 필수로그인 진입점 — 이미 계정이 있는 사용자용

정보 우선순위

  1. 헤드라인 — 내 상황인지 판단
  2. 핏 리포트 예시 — 가입할 가치가 있는지 판단하는 유일한 근거
  3. 시작 버튼
  4. 로그인 안내 — 가입 부담 해소

상태

최초 방문로그인된 상태 → 랜딩 건너뜀

지켜야 할 것

  • 예시로 착용 사진을 쓰지 마세요. 이 서비스가 파는 건 합성 사진이 아니라 판단 근거입니다. 착용 사진을 앞세우면 "AI로 옷 입혀보는 앱"으로 읽히고, 그 자리엔 이미 경쟁자가 많습니다.
  • 핏 리포트 예시를 대충 넣지 마세요. 로그인 필수 구조에서는 이 예시가 가입 결정을 좌우하는 유일한 재료입니다. 실제 결과와 같은 밀도로 보여주세요.
  • 계정이 필요한 이유를 랜딩에서 미리 알리세요. 가입이 필수라는 사실이 이탈 요인입니다. "정보를 모으려는 게 아니라 사진을 안전하게 지키려는 것"이라는 맥락을 버튼을 누르기 전에 줘야 효과가 있습니다.
S-09

로그인 · 가입P0F-08

이메일과 비밀번호로 계정을 만들고 로그인한다. 전신 사진을 지키는 자물쇠 역할을 한다.

로그인
이메일로 시작하기
전신 사진과 몸 정보를 안전하게 보관하려면 계정이 필요해요. 언제든 전부 삭제하실 수 있습니다
이메일
you@example.com
다음
이메일을 넣으면 서버가 판단해
비밀번호 화면 또는 가입 화면으로 분기
비밀번호를
입력해 주세요
비밀번호
••••••••보기
로그인
비밀번호를 잊었어요
비밀번호를
입력해 주세요
비밀번호
••••••••보기
5번 틀려서 10분간 잠겼어요.
비밀번호를 잊으셨다면 다시 설정하실 수 있어요
로그인
비밀번호 다시 설정하기
이메일로 이상 로그인 알림 발송
메일로 받은
6자리 숫자를 넣어주세요
처음 보는 기기라서 한 번만 더 확인할게요.
내 사진을 지키기 위한 절차예요
인증 코드
4 1 9 2 0 _
48초 후 다시 보낼 수 있어요
확인
유효 10분 · 5회 초과 시 코드 폐기
비밀번호를
만들어 주세요
비밀번호
••••••••••보기
✓ 8자 이상
✓ 영문 + 숫자
입력하는 동안 실시간으로 충족 여부 표시
확인 재입력란은 없습니다 — 보기 토글로 대체
완료
모든 사용자가 반드시 거치는 화면입니다. 익명 이용을 지원하지 않으므로, 이 화면의 이탈률이 곧 서비스 전체의 이탈률입니다.

인증 방식

가입 : 이메일 → 6자리 코드로 소유 확인 → 비밀번호 설정 → 완료 로그인 : 이메일 + 비밀번호 └ 처음 보는 기기일 때만 6자리 코드 1회 추가 재설정 : 이메일 → 6자리 코드 → 새 비밀번호 → 자동 로그인

왜 비밀번호가 반드시 필요한가

위험설명
메일함 접근 = 사진 접근공용 PC나 잠금 없는 휴대폰에서 메일이 열려 있으면, 그 사람이 곧바로 타인의 전신 사진을 봅니다
지식 요소 부재본인만 아는 정보가 하나도 없어, 계정 보안이 전적으로 이메일 서비스에 종속됩니다
사용자 신뢰신체 사진을 맡기는 사용자는 비밀번호가 없는 것을 "허술함"으로 읽습니다

비밀번호는 사용자가 아는 것, 이메일 코드는 사용자가 가진 것입니다. 민감정보를 다루는 서비스는 이 둘을 함께 요구해야 합니다.

단계별 요구 사항

상황요구
이미 로그인한 기기없음 (세션 유지)
기존 기기에서 재로그인비밀번호
처음 보는 기기·브라우저비밀번호 + 이메일 코드
비밀번호 분실이메일 코드 → 새 비밀번호 설정

필요한 요소

  • A계정이 필요한 이유 — 개인정보 보호 근거 한 줄
  • A이메일 입력
  • A약관 · 개인정보 동의 — 만 14세 이상 확인 포함 (신규만)
  • B·D비밀번호 입력 — 보기 토글 포함
  • B비밀번호 찾기 진입점
  • D비밀번호 규칙 실시간 표시
  • C인증 코드 입력 — 숫자 6자리
  • C발송 주소 확인 + 수정 경로
  • C새 기기 안내 — 왜 코드를 또 받는지
  • 조건부남은 시도 안내

동작 규칙

항목규칙
가입 / 로그인 구분없음 — 이메일 입력 후 서버가 분기
가입 순서이메일 소유 확인(코드) 먼저, 비밀번호 설정 나중
비밀번호 규칙8자 이상 · 영문/숫자/기호 중 2종 이상
비밀번호 확인 입력받지 않음 — 보기 토글로 대체
비밀번호 저장평문 금지 — 단방향 해시(솔트)로만
인증 코드숫자 6자리 · 유효 10분 · 재발송 60초 후
코드 시도5회 초과 시 폐기
비밀번호 시도5회 실패 시 10분 잠금 + 이메일 알림
재설정 완료 시기존 세션 전부 종료
완료 후 이동프로필 없으면 S-02, 있으면 원래 가려던 화면

정보 우선순위

  1. 현재 단계의 입력 하나 — 한 화면에 입력은 하나만
  2. 계정이 필요한 이유 (A) — 가입 필수 구조에서 사용자를 설득하는 유일한 문장
  3. 발송 주소 확인 (C) — 오타로 못 받는 상황이 가장 흔한 실패
  4. 비밀번호 찾기 진입점 (B) — 저빈도 서비스라 잊는 사람이 많음

지켜야 할 것

  • 계정이 필요한 이유를 반드시 쓰세요. 가입을 강제하는 구조에서 이유를 설명하지 않으면 사용자는 "정보나 모으려는 거구나"로 읽습니다. 개인정보를 지키기 위해 계정을 받는다는 것이 실제 이유이므로 그대로 말하면 됩니다.
  • "언제든 삭제할 수 있다"를 같이 말하세요. 전신 사진을 맡기는 부담을 줄이는 가장 효과적인 문장입니다.
  • 비밀번호 확인란(재입력)을 만들지 마세요. 보기 토글이 오타 방지 효과는 같으면서 입력은 절반입니다.
  • 비밀번호 규칙을 제출 후에 알려주지 마세요. 입력하는 동안 어떤 조건이 충족됐는지 실시간으로 보여야 합니다. 눌러보고 나서 퇴짜맞는 것이 가장 짜증나는 경험입니다.
  • 새 기기에서 코드를 요구할 때 이유를 설명하세요. 설명 없이 코드 화면이 뜨면 "왜 또?"가 되지만, "내 사진을 지키기 위한 절차"라고 하면 오히려 신뢰가 올라갑니다.
  • 발송한 이메일 주소를 코드 화면에 반드시 표시하고, 수정 경로를 두세요. 오타로 메일을 못 받는 것이 이 흐름에서 가장 흔한 실패입니다.
  • 남은 시도 횟수를 알려주세요. 조용히 잠기면 사용자는 서비스가 고장난 줄 압니다.
  • 비밀번호 찾기를 숨기지 마세요. 한 달에 한두 번 쓰는 서비스라 잊는 사람이 많습니다. 여기서 막히면 계정과 사진을 통째로 잃습니다.
S-02

프로필 등록 1단계P0F-01

최소 입력으로 나머지 치수를 추정할 수 있게 한다.

내 몸 정보내 피팅
1 / 4
내 몸 정보를 알려주세요
3개만 입력하면 나머지는 자동으로 채워드려요
숫자 입력cm
몸무게
숫자 입력kg
성별
남성여성밝히지 않음
ⓘ 체형 평균값 계산에만 사용해요
다음
1 / 4
내 몸 정보를 알려주세요
3개만 입력하면 나머지는 자동으로 채워드려요
173cm
몸무게
68kg
성별
남성여성밝히지 않음
ⓘ 체형 평균값 계산에만 사용해요
다음
1 / 4
내 몸 정보를 알려주세요
235cm
키는 100~220cm 사이로 입력해 주세요
몸무게
68kg
성별
남성여성밝히지 않음
다음
경고만 하고 진행은 막지 않음

필요한 요소

  • 필수단계 진행 표시 — 1 / 4
  • 필수부제 — "3개만 입력하면 나머지는 자동으로 채워드려요"
  • 필수 — 숫자, cm, 100~220
  • 필수몸무게 — 숫자, kg, 30~200
  • 필수성별 — 남성 / 여성 / 밝히지 않음
  • 필수성별 사용 목적 안내 + 상세 설명 진입점
  • 필수다음 버튼 — 3개 입력 전 비활성

정보 우선순위

  1. 부제 "3개만" — 이 화면 최대의 설득 포인트
  2. 입력 항목 3개
  3. 성별 안내 문구

상태

빈 값입력 중범위 초과전부 입력상세 시트

지켜야 할 것

  • 성별 선택지 3개는 동등한 시각적 무게로. "밝히지 않음"만 작거나 흐리면 선택하지 말라는 신호로 읽힙니다.
  • 범위를 벗어나도 막지 마세요. 키 195cm는 실제로 존재하고, 그런 사용자가 바로 이 서비스의 타겟입니다. 경고만 하고 진행시킵니다.
S-03

프로필 등록 2단계P0F-01

추정값을 실측값으로 바꾸도록 유도한다. 핏 리포트 신뢰도가 여기서 결정된다.

내 몸 정보내 피팅
2 / 4
더 정확하게 만들어 볼까요?
정확도1/5
직접 잰 치수를 넣을수록 핏 계산이 정확해져요
어깨너비 추정44cm ✎
가슴둘레 추정96cm ✎
허리둘레 추정80cm ✎
팔길이 추정58cm ✎
선호하는 핏 (미선택)
슬림레귤러세미오버오버핏
다음
나중에 입력할게요
2 / 4
더 정확하게 만들어 볼까요?
정확도5/5
핏 계산이 가장 정확한 상태예요
어깨너비 실측46cm ✎
가슴둘레 실측99cm ✎
허리둘레 실측82cm ✎
팔길이 실측60cm ✎
선호하는 핏
슬림레귤러세미오버오버핏
다음

필요한 요소

  • 필수프로필 정확도 표시 — 5단계 (실측 4 + 선호 핏 1)
  • 필수치수 4종 — 어깨너비 · 가슴둘레 · 허리둘레 · 팔길이
  • 필수값 출처 배지 — 항목마다 추정 / 실측
  • 필수수정 진입점 — 항목마다
  • 필수측정 방법 안내 — 일러스트 포함
  • 필수선호 핏 — 4종, 기본 선택 없음
  • 필수건너뛰기 — "나중에 입력할게요"

정보 우선순위

  1. 값 출처 배지 — 이 화면의 존재 이유
  2. 정확도 표시
  3. 치수 항목
  4. 선호 핏

지켜야 할 것

  • 추정 / 실측 구분이 이 화면의 전부입니다. 값이 이미 채워져 있으면 사용자는 "다 됐네" 하고 넘어갑니다. 출처 표시가 "이건 진짜가 아니다"를 계속 알려야 수정합니다.
  • 선호 핏에 기본 선택을 넣지 마세요. 치수는 통계로 추정해도 되지만 취향은 추정할 수 없습니다. 임의로 "레귤러"를 선택해두면 결과 화면이 "선호하시는 레귤러핏보다…"라고 말하는데, 사용자는 그런 말을 한 적이 없습니다.
  • 정확도 표시는 압박이 아니라 안내로. 부족함을 경고처럼 표현하면 죄책감을 줍니다.
S-04

전신 사진 업로드P0F-02 · F-09

쓸 수 있는 사진을 받거나, 쓰지 않는 길을 열어준다.

전신 사진내 피팅
3 / 4
전신 사진을 올려주세요
정면
전신
팔 벌림
밝게
가이드는 글보다 일러스트 중심으로
사진 선택하기
다음
사진 없이 핏 정보만 볼게요
3 / 4
전신 사진을 올려주세요

사진을 확인하고 있어요
다음
사진 없이 핏 정보만 볼게요
3 / 4
전신 사진을 올려주세요
업로드한 사진
머리부터 발까지 나오게 다시 찍어주세요
오류 5종 · 인물 미감지 / 전신 아님 / 정면 아님(경고, 진행 가능) / 해상도 부족 / 부적절 이미지
다음
사진 없이 핏 정보만 볼게요
3 / 4
전신 사진을 올려주세요
✓ 업로드한 사진
다음
사진 없이 핏 정보만 볼게요

필요한 요소

  • 필수촬영 가이드 — 정면 · 전신 · 팔 벌림 · 밝은 조명 (일러스트 중심)
  • 필수사진 선택 영역
  • 필수프라이버시 고지 — 보관 기간 + 학습 미사용
  • 필수다음 버튼 — 검증 통과 전 비활성
  • 필수사진 없이 진행 (F-09)

정보 우선순위

  1. 촬영 가이드 — 재촬영을 줄이는 가장 효과적인 수단
  2. 사진 선택
  3. 사진 없이 진행 — 발견 가능성 확보
  4. 프라이버시 고지

지켜야 할 것

  • "사진 없이 핏 정보만 볼게요"를 작은 텍스트 링크로 처리하지 마세요. 대안 행동으로 명확히 인지돼야 합니다. 프라이버시를 우려하는 사용자가 못 찾으면 그대로 이탈합니다.
  • 프라이버시 고지를 업로드 결정 지점 가까이에. 망설이는 순간에 보여야 효과가 있습니다. 화면 맨 아래로 내리면 읽히지 않습니다.
  • 검증 실패 문구가 사용자를 탓하지 않게. "잘못 올렸습니다"가 아니라 "다시 선택해 주세요".
S-05

의류 등록P0F-03

사이즈표 숫자를 정확하게 받는다. 단면과 둘레를 혼동하면 결과 전체가 틀린다.

옷 정보내 피팅
4 / 4
옷 사진 올리기
종류
티셔츠셔츠니트후디맨투맨
사이즈명L
어깨너비 ⓘ50 cm
가슴단면 ⓘ57 cm
총장 ⓘ72 cm
▽ 더 정확하게 (선택)
피팅 결과 보기
4 / 4
치수 입력
어깨너비50 cm
가슴단면114 cm
가슴단면이 보통 상품보다 커요.
둘레를 넣으신 건 아닌가요?
단면은 옷을 평평하게 놓고 겨드랑이 사이를 잰 값입니다. 둘레의 약 1/2.
단면 측정 일러스트
피팅 결과 보기
4 / 4
어깨너비50 cm
가슴단면57 cm
총장72 cm
△ 더 정확하게 (선택)
소매길이22 cm
허리단면
신축성미입력
신축성 미입력은 "없음"으로 간주 (보수적 판정)
피팅 결과 보기

필요한 요소

  • 필수옷 사진 업로드 — 누끼/평면컷 권장 안내
  • 필수의류 종류 — 티셔츠 / 셔츠 / 니트 / 후디 / 맨투맨
  • 필수사이즈명 — 자유 텍스트
  • 필수가슴단면 — 핏 등급 판정의 유일한 기준값
  • 필수어깨너비 · 총장
  • 필수측정 방법 안내 — 단면 측정 일러스트
  • 필수선택 치수 영역 — 소매길이 / 허리단면 / 신축성, 기본 접힘

정보 우선순위

  1. 가슴단면 — 다른 필수 항목보다 인지적으로 앞서야 함
  2. 나머지 필수 치수 2개
  3. 선택 치수

지켜야 할 것

  • 단면과 둘레 혼동이 이 서비스 최대의 오류 원인입니다. 사용자가 둘레를 단면 칸에 넣으면 결과가 완전히 뒤집힙니다. 이상값 되묻기를 반드시 넣으세요.
  • 측정 방법 안내는 일러스트가 필수입니다. "옷을 평평하게 놓고 겨드랑이 사이를 잰다"는 글로 전달되지 않습니다.
  • 선택 항목은 접어둡니다. 한 화면의 필수 입력은 3개 이하.
  • 사이즈표 자동 인식은 없습니다. 사용자가 상품 페이지를 보며 직접 옮겨 적습니다. 그래서 이 화면은 다른 탭과 오가며 쓰인다는 전제로 설계해야 합니다 — 입력한 값이 사라지지 않고, 어디까지 넣었는지 한눈에 보여야 합니다.
S-06

생성 대기P0F-05

10분을 기다리게 하는 게 아니라, 이미 결과를 보고 있게 만든다.

결과내 피팅
착용 이미지 만드는 중
약 4분 남음
창을 닫아도 계속 만들어져요
다 되면 [내 피팅]에 담아둘게요
✓ 핏 분석은 끝났어요
코튼 티셔츠 · L
세미오버핏
선호하시는 레귤러핏보다 약간 큽니다
가슴+18cm
어깨드롭숄더로 떨어짐+4cm
기장엉덩이 중간
소매손등 일부 덮음
📏 실측 프로필 · 신뢰도 높음
💡 M이라면 +12cm로 레귤러핏에 가까워요
M 사이즈로 다시 피팅하기
이미지 만들기에 실패했어요
다시 시도
핏 리포트는 그대로 유지 — 사용자는 빈손으로 돌아가지 않음
코튼 티셔츠 · L
세미오버핏
가슴+18cm
어깨드롭숄더로 떨어짐+4cm
기장엉덩이 중간
소매손등 일부 덮음
📏 실측 프로필 · 신뢰도 높음

필요한 요소

  • 필수이미지 자리표시자 + 진행 표시 + 남은 시간
  • 필수이탈 안내 — "창을 닫아도 계속 만들어져요"
  • 필수분석 완료 신호 — "핏 분석은 끝났어요"
  • 필수핏 리포트 카드 (완성본)
  • 조건부사이즈 추천 블록 — 선호 핏이 있을 때만

핏 리포트 카드 구성 — S-06 / 07 / 08 / 10 공통

요소표시 조건
상품명 + 사이즈항상
핏 등급 (고정 5종)항상
선호 핏 대비 문구선호 핏 설정 시에만
가슴 여유 + 게이지항상
어깨 차이항상
기장 (고정 5종)항상
소매 (고정 3종)항상
허리 여유의류 허리단면 입력 시에만
신뢰도 배지항상
실측 입력 유도 링크추정 기반일 때만

정보 우선순위

  1. 핏 리포트 카드 — 화면의 주인공
  2. 이탈 안내 — 이 화면의 설계 목적
  3. 사이즈 추천 블록
  4. 이미지 자리표시자 — 가장 낮음

지켜야 할 것

  • 핏 리포트가 이미지 자리표시자보다 우위에 있어야 합니다.
  • "창을 닫아도 계속 만들어져요"가 놓칠 수 없게. 이 한 문장이 10분 대기 설계 전체를 지탱합니다. 눈에 안 띄면 이탈한 사용자가 돌아오지 않습니다.
  • 진행 표시가 멈춘 것처럼 보이면 안 됩니다. 정확할 필요는 없지만 계속 움직여야 합니다.
  • "핏 분석은 끝났어요"는 성취 신호입니다. "기다리는 중"이 아니라 "절반은 이미 받았다"고 느끼게 하는 장치입니다.
S-07

결과P0F-06

사이즈를 결정하게 만든다. 감상이 아니라 결정.

결과내 피팅
착용 이미지 · 원본 전환
⚠️ AI가 만든 참고용 이미지예요. 사이즈 판단은 아래 숫자를 봐주세요
세미오버핏
선호하시는 레귤러핏보다 약간 큽니다
가슴+18cm
기장엉덩이 중간
📏 실측 프로필 · 신뢰도 높음
💡 M이라면 레귤러핏에 가까워요
M 사이즈로 다시 피팅하기
사이즈 비교
새 옷 피팅
이미지 영역과 AI 고지를 통째로 제거 — 빈 자리를 남기지 않음
코튼 티셔츠 · L
세미오버핏
선호하시는 레귤러핏보다 약간 큽니다
가슴+18cm
어깨드롭숄더로 떨어짐+4cm
기장엉덩이 중간
소매손등 일부 덮음
📏 실측 프로필 · 신뢰도 높음
💡 M이라면 레귤러핏에 가까워요
M 사이즈로 다시 피팅하기
사이즈 비교
새 옷 피팅
착용 이미지
⚠️ AI가 만든 참고용 이미지예요
세미오버핏
가슴+18cm
기장엉덩이 중간
📏 키·몸무게 기반 추정 · 참고용
직접 잰 치수 넣기
신뢰도 배지가 바뀌고 실측 입력 링크가 추가됨
착용 이미지
⚠️ AI가 만든 참고용 이미지예요
세미오버핏
← 선호 핏 대비 문구 없음
가슴+18cm
기장엉덩이 중간
📏 실측 프로필 · 신뢰도 높음
선호하는 핏을 알려주면 맞는 사이즈를 추천해 드려요
설정하기
추천 블록이 통째로 꺼지고 설정 유도로 대체

필요한 요소

  • 조건부착용 이미지 — 원본 사진과 전환 가능
  • 조건부AI 생성 고지 — 이미지 있을 때만
  • 필수핏 리포트 카드 — S-06과 동일 구성
  • 조건부사이즈 추천 블록
  • 필수액션 — 사이즈 비교 / 새 옷 피팅
  • 조건부사진 유도 — 사진 없는 경로일 때만

정보 우선순위

  1. 핏 리포트 카드
  2. 사이즈 추천 블록 — 가치 증명 장치
  3. AI 생성 고지
  4. 착용 이미지
  5. 액션 버튼

지켜야 할 것

  • AI 고지를 이미지와 핏 리포트 사이에 두세요. 이미지에서 리포트로 시선을 넘기는 다리 역할입니다. 화면 맨 아래로 내리면 법적 알리바이만 되고 UX 기능은 못 합니다.
  • "저장" 버튼을 만들지 마세요. 모든 결과는 자동으로 [내 피팅]에 들어갑니다. 저장 버튼이 있으면 "저장 안 하면 사라지나?" 불안을 만듭니다.
  • 추천 블록이 다른 액션보다 우선. 사용자가 스스로 비교하길 기다리지 말고 먼저 제안하는 것이 이 서비스의 가치 증명 장치입니다.
  • 이미지 없는 경로에서 화면이 초라해 보이면 안 됩니다. 빈 영역을 남기지 말고 구성을 재배치해서, 리포트만으로도 완결된 결과처럼 보이게 하세요.
  • 결과를 외부로 내보내는 버튼(공유·다운로드)을 만들지 마세요. 결과에는 사용자의 전신 사진이 들어갑니다. 내보내는 순간 접근 통제와 보관 기간 정책이 무력해집니다.
S-08

내 피팅 (히스토리)P0F-07

10분 뒤에 돌아온 사용자가 결과를 찾는다. 이 화면이 없으면 대기 모델 전체가 무너진다.

내 피팅계정
착용
이미지
코튼 티셔츠 · L
세미오버핏 · 8월 9일
생성중
니트 · M생성중
약 6분
후디 · L실패
핏 정보는 볼 수 있어요
레귤러
셔츠 · M리포트만
레귤러핏 · 8월 8일
미리보기 없는 항목도 같은 비중으로
로그아웃 · 계정 삭제
일러스트
아직 피팅한 옷이 없어요
첫 피팅 시작하기

필요한 요소

  • 필수피팅 목록 — 최신순
  • 필수항목별 미리보기 — 이미지 또는 대체 표현
  • 필수항목별 정보 — 상품명 · 사이즈 · 핏 등급 · 날짜
  • 조건부상태 배지 — 생성중 / 실패 / 리포트만
  • 조건부빈 상태 — 안내 + 첫 피팅 진입점
  • 필수계정 진입점 — 로그아웃 · 계정 삭제

지켜야 할 것

  • 실패 항목을 목록에서 지우지 마세요. 핏 리포트는 살아 있으므로 여전히 가치가 있습니다. "실패"라고만 쓰면 쓸모없다고 판단하니 "핏 정보는 볼 수 있어요"를 함께 표시.
  • 미리보기 이미지가 없는 항목도 같은 비중으로. 목록이 들쭉날쭉하면 실패와 리포트만 항목이 결함처럼 보입니다.
  • 계정 삭제 경로를 숨기지 마세요. 전신 사진을 보관하는 서비스에서 삭제 경로를 찾기 어렵게 만드는 것은 신뢰 문제이자 개인정보 이슈입니다. 다만 실행 전 확인을 반드시 받으세요.
S-10

사이즈 비교P1F-10

두 사이즈 중 하나를 고르게 한다. 서비스 차별점이 가장 잘 드러나는 화면.

사이즈 비교
코튼 티셔츠
M
L
착용
착용
+12cm
레귤러핏
골반
손목
✓ 선호 핏 일치
+18cm
세미오버핏
엉덩이 중간
손등 일부
다른 사이즈 추가하기
코튼 티셔츠
착용
생성 중
약 5분
+12cm
레귤러핏
+18cm
세미오버핏
이미지는 생성 중이어도 수치는 이미 표시
코튼 티셔츠
이미지 행 전체 제거 — 이 형태로도 화면이 성립해야 함
M
L
+12cm
레귤러핏
골반 · 손목
✓ 선호 핏 일치
+18cm
세미오버핏
엉덩이 중간 · 손등 일부
다른 사이즈 추가하기

필요한 요소

  • 필수사이즈 라벨 — 각 열
  • 필수가슴 여유 + 게이지 — 같은 축에서 비교되게
  • 필수핏 등급 · 기장 · 소매 — 각 열
  • 조건부착용 이미지
  • 조건부선호 핏 일치 표시 — 일치하는 열에만
  • 필수사이즈 추가

정보 우선순위

  1. 여유량 게이지 대비 — 두 사이즈 차이를 한눈에 보여주는 핵심
  2. 핏 등급
  3. 선호 핏 일치 표시 — 결정을 대신 내려주는 신호
  4. 기장 · 소매
  5. 착용 이미지

지켜야 할 것

  • 두 열에서 값이 다른 항목을 강조하세요. 사용자가 봐야 할 건 "무엇이 다른가"입니다. 같은 값은 물러나게.
  • 여유량 게이지를 같은 축에서 그리세요. 두 게이지의 길이 차이가 곧 사이즈 차이입니다. 이 시각적 대비가 화면의 핵심입니다.
  • 좁은 화면에서도 2열을 유지하세요. 나란히 보는 것이 이 화면의 존재 이유입니다. 공간이 부족하면 이미지를 줄이고 수치를 지키세요.
COPY

고정 표현

아래 표현은 화면 전체에서 그대로 씁니다. PRD 계산 로직과 1:1로 연결되어 있어, 새 표현을 만들면 계산 로직에 그 값이 없어서 구현이 막힙니다.

구분고정 표현
핏 등급 (5)너무 작음 · 슬림핏 · 레귤러핏 · 세미오버핏 · 오버핏
기장 (5)허리선 위 · 허리선 · 골반 · 엉덩이 중간 · 엉덩이 아래
소매 (3)손목 위 · 손목 · 손등 일부 덮음
신뢰도 (2)실측 프로필 · 신뢰도 높음 / 키·몸무게 기반 추정 · 참고용

마이크로카피 원칙

원칙
사용자를 탓하지 않는다잘못된 사진입니다다시 선택해 주세요
요구가 아니라 혜택가입해야 저장됩니다다른 기기에서도 보실 수 있어요
불확실성을 숨기지 않는다정확한 결과입니다직접 잰 치수 기준이에요
전문용어를 풀어 쓴다Ease +18cm가슴 여유 18cm · 넉넉함
다음 행동을 알려준다실패했습니다실패했어요. 다시 시도할까요?
FitCheck 화면 설계 · 와이어프레임 v1.3
상위 문서 PRD.md · SCREENS.md — 수치와 표현이 어긋날 경우 PRD가 우선합니다.