고객 검토용 · participant-web 화면 기획서

국민팡 참가자 웹 화면 기획서

QR 촬영부터 서버 검증, 개인정보 입력, 응모 완료, 당첨조회, 리뷰작성, 알림 안내까지 전체 사용자 여정과 예외 화면을 더미 데이터 기준으로 정리했습니다.

Screenshots

64

전체 경우의 수 캡처

Data

Dummy

개인정보·운영데이터 미사용

Flow

Success → Form

성공 결과 중간 화면 생략

core 5qr_validation 13entry_instant 9entry_lose 9entry_auto 9winners 9review 9notifications 1

Overview

문서 목적과 사용 안내

이 문서는 고객 승인 및 내부 검토를 위한 정적 HTML 기획서입니다. index.htmlscreenshots/ 폴더를 같은 위치에 업로드하면 화면 캡처와 설명을 함께 확인할 수 있습니다.

검토 범위

participant-web의 모든 주요 페이지, 성공/실패, 로딩, 빈 상태, 입력 검증, 제출/조회 오류 화면을 포함합니다.

데이터 주의

모든 QR UID, 이름, 휴대폰 번호, 리뷰 이미지와 목록 데이터는 고객 공유용 더미 데이터입니다.

Executive Journey

전체 사용자 여정

Step 1

QR촬영

Step 2

서버 검증

Step 3

입력 화면 이동

Step 4

개인정보 제출

Step 5

조회·리뷰·알림

성공 흐름

QR 검증이 성공하면 즉시당첨, 재응모, 자동응모 유형에 맞는 /entry/*/:qrUid 화면으로 자동 이동합니다. 사용자는 이름, 휴대폰 번호, 개인정보 동의를 입력하고 제출합니다.

실패 흐름

QR이 없거나 사용할 수 없는 경우, 사용자가 이해할 수 있는 한 문장 사유와 QR촬영 복귀 버튼을 제공합니다. 기술 코드와 그룹 정보는 사용자 화면에 노출하지 않습니다.

Route Map

라우트 맵과 하단 내비게이션

participant-web는 하단 탭 중심의 간단한 구조를 유지하고, QR 검증 및 참여 입력 화면은 촬영 결과에 따라 연결되는 지원 라우트로 구성합니다.

/winners

당첨자 조회

당첨자 목록과 휴대폰 번호 조회

/scan

QR촬영

이벤트 QR 촬영 및 참여 시작

/review

리뷰작성

리뷰 제출과 공개 리뷰 목록

/notifications

알림 설정

웹/앱 알림 범위 안내

경로 화면/역할 사용자 목적 운영 메모
/scan QR촬영 탭 / 시작 화면 참가자가 QR 이벤트 참여를 시작합니다. 하단 내비게이션 기본 진입점
/scan/camera QR 촬영 화면 카메라 안내와 더미 QR 준비 상태를 보여줍니다. 실서비스에서는 실제 QR 인식 흐름과 연결
/scan-result/:qrUid QR 검증 처리 서버 검증을 수행합니다. 성공 시 자동 이동, 실패 시에만 사유 화면을 노출합니다. 성공 결과 중간 페이지는 노출하지 않음
/entry/instant-win/:qrUid 즉시당첨 참여 입력 이름·휴대폰 번호·개인정보 동의 후 즉시당첨 참여를 완료합니다. QR 유형 불일치 차단
/entry/lose-retry/:qrUid 재응모 참여 입력 재응모 대상 QR의 개인정보 입력 및 접수를 처리합니다. QR 유형 불일치 차단
/entry/auto-entry/:qrUid 자동응모 참여 입력 자동응모 대상 QR의 개인정보 입력 및 접수를 처리합니다. QR 유형 불일치 차단
/winners 당첨자 조회 공개 당첨자 목록과 휴대폰 번호 기반 본인 당첨 조회를 제공합니다. 마스킹 데이터 노출
/review 리뷰작성 리뷰 텍스트·이미지 제출과 승인된 리뷰 목록을 제공합니다. 승인 대기 정책
/notifications 알림 설정 안내 웹과 Android 앱 알림 기능 범위를 안내합니다. 네이티브 푸시는 앱 범위
기타 주소 QR촬영 화면으로 복귀 정의되지 않은 주소 접근 시 시작 화면으로 돌려보냅니다. 사용자 혼란 최소화

01 · 시작과 촬영

QR 촬영 시작·카메라·알 수 없는 주소 처리

참가자가 이벤트 QR을 촬영하기 전후에 보게 되는 기본 진입 화면과 카메라 안내, 테스트 QR 준비 상태, 잘못된 주소 접근 시 복귀 정책을 정리했습니다.

  • QR촬영 탭은 전체 참여 여정의 기본 시작점입니다.
  • 카메라 화면은 QR을 중앙에 맞추도록 안내하고, 문서 캡처에서는 더미 QR 준비 버튼으로 각 유형을 재현합니다.
  • 정의되지 않은 주소는 사용자를 혼란스럽게 하지 않도록 QR촬영 시작 화면으로 되돌립니다.

화면 01

QR 촬영 시작 화면

기본 화면
QR 촬영 시작 화면 스크린샷

참가자가 QR 이벤트 참여를 시작하는 첫 화면입니다. QR촬영 버튼을 통해 카메라 화면으로 이동합니다.

경로
/scan
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 02

QR 촬영 화면

기본 화면
QR 촬영 화면 스크린샷

QR을 화면 중앙에 맞추도록 안내하는 카메라 화면입니다.

경로
/scan/camera
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 03

QR 준비 중 상태

QR 준비 중
QR 준비 중 상태 스크린샷

QR 확인 요청을 준비하는 동안 처리 중 상태를 보여줍니다.

경로
/scan/camera
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 04

QR 준비 실패 상태

QR 준비 실패
QR 준비 실패 상태 스크린샷

QR 준비에 실패했을 때 같은 화면 안에서 실패 사유를 안내합니다.

경로
/scan/camera
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 05

알 수 없는 주소 처리

QR 촬영 화면으로 복귀
알 수 없는 주소 처리 스크린샷

정의되지 않은 주소로 접근하면 QR 촬영 시작 화면으로 되돌리는 정책을 설명합니다.

경로
/unknown-doc-route
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

02 · QR 검증

QR 검증 성공·실패 처리

QR UID는 서버에서 반드시 검증하되, 성공 시에는 중간 결과 페이지를 노출하지 않고 참여 입력 화면으로 바로 이동합니다. 실패 시에만 간단한 사유와 QR촬영 복귀 동선을 제공합니다.

  • 검증 성공: 결과 화면을 따로 보여주지 않고 즉시당첨·재응모·자동응모 입력 화면으로 자동 이동합니다.
  • 검증 실패: “유효하지 않은 QR”, “이미 참여한 QR”, “참여 기간 종료”처럼 고객이 이해할 수 있는 사유만 노출합니다.
  • 사용자 화면에서는 상태 코드나 그룹 유형 같은 기술 메타 정보는 숨기는 것을 원칙으로 합니다.

화면 10

QR 확인 중

확인 중
QR 확인 중 스크린샷

QR UID를 서버에 검증하는 동안 사용자에게 진행 중 상태를 보여줍니다.

경로
/scan-result/DOC-INSTANT-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 11

즉시당첨 QR 성공 후 입력 화면

성공 → 즉시당첨 입력 화면
즉시당첨 QR 성공 후 입력 화면 스크린샷

검증 성공 결과 페이지를 따로 보여주지 않고 즉시당첨 개인정보 입력 화면으로 바로 이동합니다.

성공 검증 결과를 별도 페이지로 보여주지 않고 즉시당첨 입력 화면으로 자동 이동한 상태입니다.

경로
/scan-result/DOC-INSTANT-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 12

재응모 QR 성공 후 입력 화면

성공 → 재응모 입력 화면
재응모 QR 성공 후 입력 화면 스크린샷

재응모 QR 검증 성공 시 재응모 개인정보 입력 화면으로 바로 이동합니다.

성공 검증 결과를 별도 페이지로 보여주지 않고 재응모 입력 화면으로 자동 이동한 상태입니다.

경로
/scan-result/DOC-LOSE-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 13

자동응모 QR 성공 후 입력 화면

성공 → 자동응모 입력 화면
자동응모 QR 성공 후 입력 화면 스크린샷

자동응모 QR 검증 성공 시 자동응모 개인정보 입력 화면으로 바로 이동합니다.

성공 검증 결과를 별도 페이지로 보여주지 않고 자동응모 입력 화면으로 자동 이동한 상태입니다.

경로
/scan-result/DOC-AUTO-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 14

QR 정보 없음

QR 정보 없음
QR 정보 없음 스크린샷

QR UID가 없는 잘못된 접근이면 촬영 화면으로 돌아가도록 안내합니다.

경로
/scan-result/%20
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 15

유효하지 않은 QR

유효하지 않은 QR
유효하지 않은 QR 스크린샷

등록되지 않았거나 형식이 맞지 않는 QR을 촬영했을 때의 안내입니다.

경로
/scan-result/DOC-INVALID-QR
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 16

이미 참여한 QR

이미 참여한 QR
이미 참여한 QR 스크린샷

이미 응모에 사용된 QR을 다시 촬영했을 때의 안내입니다.

경로
/scan-result/DOC-ALREADY-USED
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 17

아직 시작 전인 이벤트

이벤트 시작 전
아직 시작 전인 이벤트 스크린샷

이벤트 시작 전 QR을 촬영했을 때 참여 가능 시점 전임을 안내합니다.

경로
/scan-result/DOC-NOT-STARTED
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 18

참여 기간 종료

참여 기간 종료
참여 기간 종료 스크린샷

참여 가능 기간이 지난 QR을 촬영했을 때의 안내입니다.

경로
/scan-result/DOC-EXPIRED
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 19

비활성화된 이벤트

비활성 이벤트
비활성화된 이벤트 스크린샷

운영자가 비활성화한 이벤트 QR을 촬영했을 때의 안내입니다.

경로
/scan-result/DOC-INACTIVE-GROUP
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 20

사용할 수 없는 QR

사용 불가 QR
사용할 수 없는 QR 스크린샷

발급 상태나 운영 상태 때문에 현재 사용할 수 없는 QR 안내입니다.

경로
/scan-result/DOC-UNAVAILABLE-QR
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 21

QR 확인 실패

QR 확인 실패
QR 확인 실패 스크린샷

네트워크나 알 수 없는 오류로 상태를 확인하지 못했을 때 재조회/복귀 동선을 보여줍니다.

경로
/scan-result/DOC-UNKNOWN
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 22

지원하지 않는 QR 유형

지원하지 않는 QR 유형
지원하지 않는 QR 유형 스크린샷

검증은 성공했지만 participant-web에서 처리하지 않는 QR 유형일 때의 안내입니다.

경로
/scan-result/DOC-UNSUPPORTED-GROUP-TYPE
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

03-A · 즉시당첨

즉시당첨 QR

즉시당첨 개인정보 입력·참여 완료

즉시당첨 QR 검증 성공 후 이동하는 입력 화면입니다. 이름, 휴대폰 번호, 개인정보 동의 입력 후 즉시당첨 참여를 완료합니다.

  • 참여 화면 진입 시 QR 상태를 다시 확인해 잘못된 접근을 차단합니다.
  • 공통 입력값은 이름, 휴대폰 번호, 개인정보 수집·이용 동의입니다.
  • 제출 완료, 제출 실패, QR 확인 실패, 유형 불일치, QR 없음 상태를 모두 포함했습니다.

화면 30

즉시당첨 QR 상태 재확인 중

확인 중
즉시당첨 QR 상태 재확인 중 스크린샷

즉시당첨 플로우: 참여 화면 진입 시 QR 상태를 다시 확인하는 로딩 상태입니다.

경로
/entry/instant-win/DOC-INSTANT-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 31

즉시당첨 개인정보 입력 화면

입력 폼 기본
즉시당첨 개인정보 입력 화면 스크린샷

즉시당첨 플로우: 이름, 휴대폰 번호, 개인정보 동의를 입력하는 기본 참여 화면입니다.

경로
/entry/instant-win/DOC-INSTANT-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 32

즉시당첨 입력값 검증 오류

입력값 검증 오류
즉시당첨 입력값 검증 오류 스크린샷

즉시당첨 플로우: 필수 입력값이나 개인정보 동의가 누락되었을 때 화면 안에서 오류를 안내합니다.

경로
/entry/instant-win/DOC-INSTANT-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 33

즉시당첨 참여 제출 중

제출 중
즉시당첨 참여 제출 중 스크린샷

즉시당첨 플로우: 사용자가 정보를 제출한 뒤 서버 응답을 기다리는 처리 중 상태입니다.

경로
/entry/instant-win/DOC-INSTANT-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 34

즉시당첨 참여 완료

제출 완료
즉시당첨 참여 완료 스크린샷

즉시당첨 플로우: 응모 또는 접수가 성공적으로 완료되었음을 안내하고 후속 확인 방법을 설명합니다.

경로
/entry/instant-win/DOC-INSTANT-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 35

즉시당첨 참여 제출 실패

제출 실패
즉시당첨 참여 제출 실패 스크린샷

즉시당첨 플로우: 제출 실패 시 오류 안내와 재시도 동선을 제공합니다.

경로
/entry/instant-win/DOC-INSTANT-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 36

즉시당첨 QR 상태 확인 실패

QR 재확인 실패
즉시당첨 QR 상태 확인 실패 스크린샷

즉시당첨 플로우: 참여 화면에서 QR 상태 재확인에 실패했을 때 재조회와 QR촬영 복귀를 제공합니다.

경로
/entry/instant-win/DOC-INSTANT-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 37

즉시당첨 QR 유형 불일치

QR 유형 불일치
즉시당첨 QR 유형 불일치 스크린샷

즉시당첨 플로우: 접근한 참여 화면과 QR 유형이 다를 때 잘못된 참여를 막습니다.

경로
/entry/instant-win/DOC-INSTANT-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 38

즉시당첨 참여할 QR 없음

QR 정보 없음
즉시당첨 참여할 QR 없음 스크린샷

즉시당첨 플로우: QR UID 없이 참여 화면에 접근했을 때 촬영 화면으로 복귀시킵니다.

경로
/entry/instant-win/%20
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

03-B · 재응모

재응모 QR

재응모 개인정보 입력·참여 완료

재응모 QR 검증 성공 후 이동하는 입력 화면입니다. 기본 입력 구조는 동일하며 재응모 접수 완료 메시지로 구분합니다.

  • 참여 화면 진입 시 QR 상태를 다시 확인해 잘못된 접근을 차단합니다.
  • 공통 입력값은 이름, 휴대폰 번호, 개인정보 수집·이용 동의입니다.
  • 제출 완료, 제출 실패, QR 확인 실패, 유형 불일치, QR 없음 상태를 모두 포함했습니다.

화면 40

재응모 QR 상태 재확인 중

확인 중
재응모 QR 상태 재확인 중 스크린샷

재응모 플로우: 참여 화면 진입 시 QR 상태를 다시 확인하는 로딩 상태입니다.

경로
/entry/lose-retry/DOC-LOSE-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 41

재응모 개인정보 입력 화면

입력 폼 기본
재응모 개인정보 입력 화면 스크린샷

재응모 플로우: 이름, 휴대폰 번호, 개인정보 동의를 입력하는 기본 참여 화면입니다.

경로
/entry/lose-retry/DOC-LOSE-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 42

재응모 입력값 검증 오류

입력값 검증 오류
재응모 입력값 검증 오류 스크린샷

재응모 플로우: 필수 입력값이나 개인정보 동의가 누락되었을 때 화면 안에서 오류를 안내합니다.

경로
/entry/lose-retry/DOC-LOSE-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 43

재응모 참여 제출 중

제출 중
재응모 참여 제출 중 스크린샷

재응모 플로우: 사용자가 정보를 제출한 뒤 서버 응답을 기다리는 처리 중 상태입니다.

경로
/entry/lose-retry/DOC-LOSE-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 44

재응모 참여 완료

제출 완료
재응모 참여 완료 스크린샷

재응모 플로우: 응모 또는 접수가 성공적으로 완료되었음을 안내하고 후속 확인 방법을 설명합니다.

경로
/entry/lose-retry/DOC-LOSE-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 45

재응모 참여 제출 실패

제출 실패
재응모 참여 제출 실패 스크린샷

재응모 플로우: 제출 실패 시 오류 안내와 재시도 동선을 제공합니다.

경로
/entry/lose-retry/DOC-LOSE-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 46

재응모 QR 상태 확인 실패

QR 재확인 실패
재응모 QR 상태 확인 실패 스크린샷

재응모 플로우: 참여 화면에서 QR 상태 재확인에 실패했을 때 재조회와 QR촬영 복귀를 제공합니다.

경로
/entry/lose-retry/DOC-LOSE-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 47

재응모 QR 유형 불일치

QR 유형 불일치
재응모 QR 유형 불일치 스크린샷

재응모 플로우: 접근한 참여 화면과 QR 유형이 다를 때 잘못된 참여를 막습니다.

경로
/entry/lose-retry/DOC-LOSE-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 48

재응모 참여할 QR 없음

QR 정보 없음
재응모 참여할 QR 없음 스크린샷

재응모 플로우: QR UID 없이 참여 화면에 접근했을 때 촬영 화면으로 복귀시킵니다.

경로
/entry/lose-retry/%20
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

03-C · 자동응모

자동응모 QR

자동응모 개인정보 입력·참여 완료

자동응모 QR 검증 성공 후 이동하는 입력 화면입니다. 자동응모 이벤트 참여 접수에 필요한 개인정보 입력과 예외 상태를 포함합니다.

  • 참여 화면 진입 시 QR 상태를 다시 확인해 잘못된 접근을 차단합니다.
  • 공통 입력값은 이름, 휴대폰 번호, 개인정보 수집·이용 동의입니다.
  • 제출 완료, 제출 실패, QR 확인 실패, 유형 불일치, QR 없음 상태를 모두 포함했습니다.

화면 50

자동응모 QR 상태 재확인 중

확인 중
자동응모 QR 상태 재확인 중 스크린샷

자동응모 플로우: 참여 화면 진입 시 QR 상태를 다시 확인하는 로딩 상태입니다.

경로
/entry/auto-entry/DOC-AUTO-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 51

자동응모 개인정보 입력 화면

입력 폼 기본
자동응모 개인정보 입력 화면 스크린샷

자동응모 플로우: 이름, 휴대폰 번호, 개인정보 동의를 입력하는 기본 참여 화면입니다.

경로
/entry/auto-entry/DOC-AUTO-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 52

자동응모 입력값 검증 오류

입력값 검증 오류
자동응모 입력값 검증 오류 스크린샷

자동응모 플로우: 필수 입력값이나 개인정보 동의가 누락되었을 때 화면 안에서 오류를 안내합니다.

경로
/entry/auto-entry/DOC-AUTO-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 53

자동응모 참여 제출 중

제출 중
자동응모 참여 제출 중 스크린샷

자동응모 플로우: 사용자가 정보를 제출한 뒤 서버 응답을 기다리는 처리 중 상태입니다.

경로
/entry/auto-entry/DOC-AUTO-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 54

자동응모 참여 완료

제출 완료
자동응모 참여 완료 스크린샷

자동응모 플로우: 응모 또는 접수가 성공적으로 완료되었음을 안내하고 후속 확인 방법을 설명합니다.

경로
/entry/auto-entry/DOC-AUTO-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 55

자동응모 참여 제출 실패

제출 실패
자동응모 참여 제출 실패 스크린샷

자동응모 플로우: 제출 실패 시 오류 안내와 재시도 동선을 제공합니다.

경로
/entry/auto-entry/DOC-AUTO-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 56

자동응모 QR 상태 확인 실패

QR 재확인 실패
자동응모 QR 상태 확인 실패 스크린샷

자동응모 플로우: 참여 화면에서 QR 상태 재확인에 실패했을 때 재조회와 QR촬영 복귀를 제공합니다.

경로
/entry/auto-entry/DOC-AUTO-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 57

자동응모 QR 유형 불일치

QR 유형 불일치
자동응모 QR 유형 불일치 스크린샷

자동응모 플로우: 접근한 참여 화면과 QR 유형이 다를 때 잘못된 참여를 막습니다.

경로
/entry/auto-entry/DOC-AUTO-001
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 58

자동응모 참여할 QR 없음

QR 정보 없음
자동응모 참여할 QR 없음 스크린샷

자동응모 플로우: QR UID 없이 참여 화면에 접근했을 때 촬영 화면으로 복귀시킵니다.

경로
/entry/auto-entry/%20
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

04 · 당첨조회

당첨자 목록과 휴대폰 번호 조회

공개 가능한 당첨자 명단과 본인 휴대폰 번호 조회 흐름을 함께 제공합니다. 개인정보는 마스킹된 더미 데이터만 사용했습니다.

  • 공개 명단은 당첨자명·휴대폰 번호를 마스킹해 노출합니다.
  • 휴대폰 번호 조회는 자리수 검증, 조회 중, 결과 있음/없음, 조회 실패를 모두 화면 안에서 처리합니다.
  • 목록 로딩·빈 상태·API 실패 상태를 별도 화면으로 정리해 운영 예외를 확인할 수 있습니다.

화면 60

당첨조회 기본 화면

목록 포함 기본 화면
당첨조회 기본 화면 스크린샷

공개 당첨자 명단과 휴대폰 번호 조회 폼을 함께 보여줍니다.

경로
/winners
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 61

당첨자 명단 로딩

목록 로딩
당첨자 명단 로딩 스크린샷

공개 당첨자 명단을 불러오는 동안 스켈레톤 UI를 보여줍니다.

경로
/winners
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 62

공개 당첨자 없음

목록 없음
공개 당첨자 없음 스크린샷

공개 가능한 당첨자가 아직 없을 때 빈 상태를 안내합니다.

경로
/winners
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 63

당첨자 명단 조회 실패

목록 조회 실패
당첨자 명단 조회 실패 스크린샷

명단 조회 실패 시 재조회 버튼과 안내 문구를 제공합니다.

경로
/winners
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 64

당첨 조회 입력 오류

조회 입력 오류
당첨 조회 입력 오류 스크린샷

휴대폰 번호 자리수가 부족할 때 로컬 검증 오류를 보여줍니다.

경로
/winners
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 65

당첨 조회 중

조회 중
당첨 조회 중 스크린샷

휴대폰 번호로 당첨 내역을 조회하는 진행 상태입니다.

경로
/winners
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 66

당첨 조회 결과 있음

조회 결과 있음
당첨 조회 결과 있음 스크린샷

마스킹된 당첨 내역을 보여주며 개인정보 노출을 제한합니다.

경로
/winners
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 67

당첨 내역 없음

조회 결과 없음
당첨 내역 없음 스크린샷

조회한 번호에 당첨 내역이 없을 때 간단히 안내합니다.

경로
/winners
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 68

당첨 조회 실패

조회 실패
당첨 조회 실패 스크린샷

휴대폰 번호 조회 API 실패 시 화면 안에서 오류를 안내합니다.

경로
/winners
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

05 · 리뷰작성

리뷰 작성과 공개 리뷰 목록

참가자가 리뷰 텍스트와 이미지를 제출하고, 승인된 리뷰만 공개 목록에 노출되는 정책을 문서화했습니다.

  • 리뷰는 내용과 이미지가 모두 필요하며 누락 시 제출 전 오류를 안내합니다.
  • 제출 완료 후 즉시 공개가 아니라 승인 대기 상태로 접수되었음을 안내합니다.
  • 공개 리뷰 목록의 로딩·빈 상태·조회 실패까지 포함했습니다.

화면 70

리뷰작성 기본 화면

목록 포함 기본 화면
리뷰작성 기본 화면 스크린샷

리뷰 작성 폼과 공개 승인된 리뷰 목록을 함께 보여줍니다.

경로
/review
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 71

리뷰 이미지 선택 완료

이미지 선택 완료
리뷰 이미지 선택 완료 스크린샷

리뷰 내용과 첨부 이미지가 선택되어 제출 가능한 상태입니다.

경로
/review
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 72

리뷰 입력 오류

입력값 검증 오류
리뷰 입력 오류 스크린샷

내용 또는 이미지가 누락되었을 때 제출 전 오류를 안내합니다.

경로
/review
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 73

리뷰 제출 중

제출 중
리뷰 제출 중 스크린샷

리뷰 등록 요청을 서버로 보내는 동안 제출 중 상태를 보여줍니다.

경로
/review
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 74

리뷰 제출 완료

제출 완료
리뷰 제출 완료 스크린샷

리뷰가 승인 대기 상태로 접수되었음을 안내합니다.

경로
/review
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 75

리뷰 제출 실패

제출 실패
리뷰 제출 실패 스크린샷

리뷰 제출에 실패했을 때 재작성 없이 오류를 안내합니다.

경로
/review
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 76

리뷰 목록 로딩

목록 로딩
리뷰 목록 로딩 스크린샷

공개 리뷰 목록을 불러오는 동안 스켈레톤 UI를 보여줍니다.

경로
/review
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 77

등록된 리뷰 없음

목록 없음
등록된 리뷰 없음 스크린샷

공개된 리뷰가 아직 없을 때 빈 상태를 안내합니다.

경로
/review
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

화면 78

리뷰 목록 조회 실패

목록 조회 실패
리뷰 목록 조회 실패 스크린샷

리뷰 목록 조회 실패 시 재조회 버튼과 안내 문구를 제공합니다.

경로
/review
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

06 · 알림 설정

브라우저 알림 안내와 앱 푸시 범위

participant-web의 알림 화면은 정보성 안내 화면입니다. 실제 FCM 기반 네이티브 푸시는 Android 앱 범위로 분리해 안내합니다.

  • 브라우저 참가자 웹에서는 당첨조회, QR 검증, 응모, 리뷰 제출 등 웹 기능 범위를 안내합니다.
  • 푸시 알림 수신 설정과 FCM 토큰 처리는 Android 앱 구현 범위로 고객에게 명확히 설명합니다.
  • 알 수 없는 주소 처리 화면은 시작 화면 섹션의 “알 수 없는 주소 처리” 캡처를 함께 참고합니다.

화면 90

알림 설정 안내

기본 화면
알림 설정 안내 스크린샷

브라우저 참가자 웹에서는 알림 기능 범위와 Android 앱 전용 FCM 안내를 정보성 화면으로 제공합니다.

경로
/notifications
검토 포인트
사용자가 다음 행동을 이해할 수 있는 문구와 복귀/재시도 동선을 확인합니다.

Exception & Operation Policy

예외 처리와 운영 정책

사용자가 불필요한 중간 화면이나 내부 정보를 보지 않도록, 성공은 빠르게 다음 단계로 이동시키고 실패는 짧고 명확하게 안내하는 정책을 기준으로 합니다.

QR 성공 처리

QR은 서버 검증이 필요하지만, 성공했다는 별도 결과 페이지는 노출하지 않습니다. 사용자는 곧바로 해당 참여 유형의 개인정보 입력 화면을 보게 됩니다.

QR 실패 처리

실패 시에는 “유효하지 않은 QR”, “이미 참여한 QR”, “참여 기간 종료”처럼 이해하기 쉬운 사유와 “QR촬영으로 돌아가기” 동선을 제공합니다.

기술 메타 정보 숨김

사용자 화면에는 상태 코드, 그룹 유형, API 응답 원문 같은 내부 정보가 나오지 않도록 합니다. 문서에서는 검토 목적으로만 상태를 정리합니다.

입력 폼 검증

이름, 휴대폰 번호, 개인정보 수집 동의는 제출 전에 화면 안에서 검증합니다. 사용자가 같은 화면에서 바로 수정할 수 있어야 합니다.

제출·조회 실패

서버 오류나 네트워크 실패는 해당 화면 안에서 재시도 또는 QR촬영 복귀 동선을 제공합니다. 입력값을 불필요하게 잃지 않는 것이 원칙입니다.

개인정보 보호

당첨자·리뷰 공개 데이터는 운영 승인 및 마스킹 정책을 적용합니다. 본 문서의 모든 이름, 휴대폰 번호, 이미지, QR UID는 더미 데이터입니다.

Customer Acceptance Checklist

고객 검토 체크리스트

아래 항목은 화면 개발 완료 여부가 아니라, 고객이 문구·흐름·예외 처리·운영 정책을 승인하기 위한 확인 질문입니다.

  1. 사용자 여정

    QR 촬영 후 성공 시 중간 결과 페이지 없이 개인정보 입력 화면으로 바로 이동하는 흐름에 동의합니다.

  2. 실패 안내

    QR 실패 사유 문구가 고객이 이해할 수 있을 만큼 간단하고 충분합니다.

  3. 개인정보 입력

    이름, 휴대폰 번호, 개인정보 동의 문구와 필수 입력 검증 방식에 동의합니다.

  4. 참여 완료

    즉시당첨·재응모·자동응모별 완료 메시지와 후속 안내가 적절합니다.

  5. 당첨조회

    당첨자 공개 명단과 본인 조회 결과의 마스킹 정책에 동의합니다.

  6. 리뷰작성

    리뷰 내용+이미지 필수, 제출 후 승인 대기 안내, 공개 리뷰 목록 정책에 동의합니다.

  7. 알림 범위

    브라우저 웹은 정보성 안내 화면으로 두고, 실제 FCM 푸시는 Android 앱 범위로 분리하는 데 동의합니다.

  8. 예외 처리

    로딩, 빈 상태, API 실패, 유형 불일치, 잘못된 접근 등 문서의 예외 화면 범위가 충분합니다.

Handoff Quality

전달 전 확인사항

고객에게 전달되는 HTML과 스크린샷 폴더가 함께 업로드될 때 깨지지 않도록, 문서 안에서 참조·순서·전환 상태를 한 번 더 명시합니다.

Reference

64개 캡처 참조

manifest에 정의된 모든 스크린샷을 screenshots/*.png 상대 경로로 연결했습니다.

Transition

성공 QR 자동 이동

화면 11~13은 성공 결과 페이지가 아니라, 검증 성공 후 각 입력 화면으로 자동 이동한 결과 상태입니다.

Duplicate Policy

알 수 없는 주소 복귀

화면 05는 정의되지 않은 주소가 QR촬영 시작 화면으로 복귀하는 중복/전환 상태를 문서화한 캡처입니다.

Appendix

전체 스크린샷 인벤토리

아래 64개 캡처가 본 문서의 모든 화면 카드에 연결되어 있습니다. 모든 이미지는 screenshots/ 폴더의 상대 경로를 사용합니다.

파일 섹션 화면명 경로
01-scan-home-default.png core QR 촬영 시작 화면 /scan
02-scan-camera-default.png core QR 촬영 화면 /scan/camera
03-scan-camera-prepare-loading.png core QR 준비 중 상태 /scan/camera
04-scan-camera-prepare-error.png core QR 준비 실패 상태 /scan/camera
05-wildcard-redirect-scan.png core 알 수 없는 주소 처리 /unknown-doc-route
10-qr-loading.png qr_validation QR 확인 중 /scan-result/DOC-INSTANT-001
11-qr-ok-instant-auto-entry.png qr_validation 즉시당첨 QR 성공 후 입력 화면 /scan-result/DOC-INSTANT-001
12-qr-ok-lose-auto-entry.png qr_validation 재응모 QR 성공 후 입력 화면 /scan-result/DOC-LOSE-001
13-qr-ok-auto-entry.png qr_validation 자동응모 QR 성공 후 입력 화면 /scan-result/DOC-AUTO-001
14-qr-missing.png qr_validation QR 정보 없음 /scan-result/%20
15-qr-invalid-qr.png qr_validation 유효하지 않은 QR /scan-result/DOC-INVALID-QR
16-qr-already-used.png qr_validation 이미 참여한 QR /scan-result/DOC-ALREADY-USED
17-qr-not-started.png qr_validation 아직 시작 전인 이벤트 /scan-result/DOC-NOT-STARTED
18-qr-expired.png qr_validation 참여 기간 종료 /scan-result/DOC-EXPIRED
19-qr-inactive-group.png qr_validation 비활성화된 이벤트 /scan-result/DOC-INACTIVE-GROUP
20-qr-unavailable-qr.png qr_validation 사용할 수 없는 QR /scan-result/DOC-UNAVAILABLE-QR
21-qr-unknown.png qr_validation QR 확인 실패 /scan-result/DOC-UNKNOWN
22-qr-unsupported-group-type.png qr_validation 지원하지 않는 QR 유형 /scan-result/DOC-UNSUPPORTED-GROUP-TYPE
30-entry-instant-loading.png entry_instant 즉시당첨 QR 상태 재확인 중 /entry/instant-win/DOC-INSTANT-001
31-entry-instant-form-default.png entry_instant 즉시당첨 개인정보 입력 화면 /entry/instant-win/DOC-INSTANT-001
32-entry-instant-form-validation-error.png entry_instant 즉시당첨 입력값 검증 오류 /entry/instant-win/DOC-INSTANT-001
33-entry-instant-submit-pending.png entry_instant 즉시당첨 참여 제출 중 /entry/instant-win/DOC-INSTANT-001
34-entry-instant-submit-success.png entry_instant 즉시당첨 참여 완료 /entry/instant-win/DOC-INSTANT-001
35-entry-instant-submit-error.png entry_instant 즉시당첨 참여 제출 실패 /entry/instant-win/DOC-INSTANT-001
36-entry-instant-scan-error.png entry_instant 즉시당첨 QR 상태 확인 실패 /entry/instant-win/DOC-INSTANT-001
37-entry-instant-type-mismatch.png entry_instant 즉시당첨 QR 유형 불일치 /entry/instant-win/DOC-INSTANT-001
38-entry-instant-missing-qr.png entry_instant 즉시당첨 참여할 QR 없음 /entry/instant-win/%20
40-entry-lose-loading.png entry_lose 재응모 QR 상태 재확인 중 /entry/lose-retry/DOC-LOSE-001
41-entry-lose-form-default.png entry_lose 재응모 개인정보 입력 화면 /entry/lose-retry/DOC-LOSE-001
42-entry-lose-form-validation-error.png entry_lose 재응모 입력값 검증 오류 /entry/lose-retry/DOC-LOSE-001
43-entry-lose-submit-pending.png entry_lose 재응모 참여 제출 중 /entry/lose-retry/DOC-LOSE-001
44-entry-lose-submit-success.png entry_lose 재응모 참여 완료 /entry/lose-retry/DOC-LOSE-001
45-entry-lose-submit-error.png entry_lose 재응모 참여 제출 실패 /entry/lose-retry/DOC-LOSE-001
46-entry-lose-scan-error.png entry_lose 재응모 QR 상태 확인 실패 /entry/lose-retry/DOC-LOSE-001
47-entry-lose-type-mismatch.png entry_lose 재응모 QR 유형 불일치 /entry/lose-retry/DOC-LOSE-001
48-entry-lose-missing-qr.png entry_lose 재응모 참여할 QR 없음 /entry/lose-retry/%20
50-entry-auto-loading.png entry_auto 자동응모 QR 상태 재확인 중 /entry/auto-entry/DOC-AUTO-001
51-entry-auto-form-default.png entry_auto 자동응모 개인정보 입력 화면 /entry/auto-entry/DOC-AUTO-001
52-entry-auto-form-validation-error.png entry_auto 자동응모 입력값 검증 오류 /entry/auto-entry/DOC-AUTO-001
53-entry-auto-submit-pending.png entry_auto 자동응모 참여 제출 중 /entry/auto-entry/DOC-AUTO-001
54-entry-auto-submit-success.png entry_auto 자동응모 참여 완료 /entry/auto-entry/DOC-AUTO-001
55-entry-auto-submit-error.png entry_auto 자동응모 참여 제출 실패 /entry/auto-entry/DOC-AUTO-001
56-entry-auto-scan-error.png entry_auto 자동응모 QR 상태 확인 실패 /entry/auto-entry/DOC-AUTO-001
57-entry-auto-type-mismatch.png entry_auto 자동응모 QR 유형 불일치 /entry/auto-entry/DOC-AUTO-001
58-entry-auto-missing-qr.png entry_auto 자동응모 참여할 QR 없음 /entry/auto-entry/%20
60-winners-default.png winners 당첨조회 기본 화면 /winners
61-winners-list-loading.png winners 당첨자 명단 로딩 /winners
62-winners-list-empty.png winners 공개 당첨자 없음 /winners
63-winners-list-error.png winners 당첨자 명단 조회 실패 /winners
64-winners-lookup-validation-error.png winners 당첨 조회 입력 오류 /winners
65-winners-lookup-pending.png winners 당첨 조회 중 /winners
66-winners-lookup-success.png winners 당첨 조회 결과 있음 /winners
67-winners-lookup-empty.png winners 당첨 내역 없음 /winners
68-winners-lookup-error.png winners 당첨 조회 실패 /winners
70-review-default.png review 리뷰작성 기본 화면 /review
71-review-image-selected.png review 리뷰 이미지 선택 완료 /review
72-review-validation-error.png review 리뷰 입력 오류 /review
73-review-submit-pending.png review 리뷰 제출 중 /review
74-review-submit-success.png review 리뷰 제출 완료 /review
75-review-submit-error.png review 리뷰 제출 실패 /review
76-review-list-loading.png review 리뷰 목록 로딩 /review
77-review-list-empty.png review 등록된 리뷰 없음 /review
78-review-list-error.png review 리뷰 목록 조회 실패 /review
90-notifications-default.png notifications 알림 설정 안내 /notifications