응모자가 보는 공개 폼 페이지

Part 12 · 응모자가 보는 공개 폼 페이지

응모자가 실제로 보는 화면을 운영자도 알아두면 운영 중 발생하는 문의에 정확하게 대응할 수 있습니다.

12-1. 공개 URL

https://[브랜드 도메인]/form-events/[이벤트ID]

이 URL은 두 곳에서 빠르게 복사할 수 있습니다.

• 폼 이벤트 목록 한 행의 ⋯ 메뉴 > 링크 복사 (Live 상태일 때만 노출)

• 이벤트 상세 페이지 헤더의 🔗 신청 링크 복사 아이콘

12-2. 페이지의 5가지 상태

응모자가 URL로 접속하면 캠페인 상태와 응모 진행에 따라 5가지 다른 화면을 보게 됩니다.

상태	노출 시점	응모자가 보는 것
로딩	페이지 진입 직후	가운데 회전하는 로더
이벤트 없음 (에러)	잘못된 URL 또는 삭제된 이벤트	"이벤트를 찾을 수 없습니다" 카드
종료됨 / 준비중	캠페인이 마감됐거나 시작 전	정보 카드 + 노랑 안내 박스 (응모 폼 없음)
응모 가능	응모 기간 안 + 운영자가 종료하지 않음	정보 카드 + 동적 응모 폼 + [참가 신청하기] 버튼
응모 완료	응모 제출 성공 후	초록 체크 + 티켓 페이지 링크

12-3. 이벤트 없음 (에러) 화면

표시	내용
카드 제목	"이벤트를 찾을 수 없습니다"
부제	"요청하신 이벤트가 존재하지 않거나 종료되었습니다."

URL이 잘못되었거나 이벤트가 삭제됐을 때 이 화면이 노출됩니다.

12-4. 종료됨 / 준비중 화면

응모 기간이 지났거나(종료됨) 아직 시작 전(준비중)이면 응모 폼 대신 안내가 표시됩니다.

영역	내용
대표 이미지	productImageUrl이 등록되어 있으면 4:3 비율로 노출
제목 + 배지	이벤트 제목 + 회색 배지 (종료됨 또는 준비중)
설명	HTML 설명
노랑 안내 박스	"이 이벤트는 종료되었습니다." 또는 "이 이벤트는 아직 시작되지 않았습니다." + 신청 기간 표시

12-5. 응모 가능 화면 — 응모자가 보는 본 화면

응모 기간이 활성일 때 보이는 화면입니다. 위에서 아래로 다음 영역이 차례대로 노출됩니다.

12-5-1. 이벤트 정보 카드

영역	내용
대표 이미지	productImageUrl 4:3 비율
제목 + 배지	이벤트 제목 + 초록 🎁 신청 가능 배지
설명	HTML 설명 (운영자가 캠페인 설명 탭에서 작성한 본문)
📅 신청 기간 박스	회색 박스에 시작일 ~ 종료일
콘텐츠 요구 안내	(콘텐츠 요구 On 캠페인만) "※ 선정 시 경품 수령 후 콘텐츠(리뷰, 후기 등)를 제출해야 합니다."

12-5-2. 응모 폼 — 3개 카드 구조

응모자가 입력하는 폼은 3개 카드로 분리되어 있습니다.

A. 연락처 정보

필드	필수	플레이스홀더
이름	✅	"홍길동"
이메일	✅	"[e-mail]" — 형식 검증
전화번호	(선택)	"010-0000-0000"

B. 배송 주소

필드	필수	플레이스홀더
전체 주소 (직접 입력)	(선택)	"도로명 주소나 지번 주소를 입력해주세요..." (자유 텍스트, 통합 주소를 한 칸에)
주소 (line1)	✅	"도로명 주소"
상세 주소 (line2)	(선택)	"아파트, 동/호수 등"
도시	✅	"서울시"
시/도	(선택)	"경기도"
우편번호	✅	"12345"
국가	✅	드롭다운 ("국가 선택") — 2자리 ISO 코드

C. 추가 정보

브랜드가 폼 빌더(Part 4)로 만든 커스텀 필드가 여기에 노출됩니다. 폼 빌더에 추가한 필드가 0개면 이 카드 자체가 숨겨집니다.

조건부 표시(Part 4-6)가 설정된 필드는 다른 답변에 따라 보였다 숨겨졌다 합니다.

12-5-3. 제출 버튼

폼 맨 아래에 큰 버튼이 있습니다.

참가 신청하기

(전체 너비, 큰 사이즈. 처리 중에는 로더로 변함)

12-6. 응모 실패 시 메시지 (토스트)

폼 제출 시 검증·서버 응답에 따라 빨간 토스트로 다음 메시지가 표시됩니다.

사유	메시지
중복 이메일	"이미 동일 이메일로 신청이 접수되었습니다. 이메일을 확인해주세요."
신청 기간 외	"현재 신청 가능한 기간이 아닙니다."
유효성 실패	"입력값을 확인해주세요."
기타 오류	"일시적 오류가 발생했습니다. 잠시 후 다시 시도해주세요."

💡 응모자 문의 시 "이미 동일 이메일로 접수됐다"는 메시지를 받았다면 신청자 탭에서 검색해 본인 응모 내역을 안내하세요.

12-7. 응모 완료 화면 — 티켓 페이지 안내

응모 제출이 성공하면 화면이 전환되며 다음이 표시됩니다.

영역	내용
초록 체크 아이콘	✅ CheckCircle2 (큰 원형)
제목	"신청 완료!"
안내문	"신청이 정상적으로 접수되었습니다. 아래 링크로 선정 여부와 배송 현황을 확인할 수 있습니다."
티켓 페이지 링크 박스	회색 박스에 URL + 📋 복사 버튼 + [🔗 티켓 페이지 열기] 큰 버튼
하단 안내	"이 링크를 저장해두세요. 선정 여부와 배송 현황을 확인할 때 필요합니다."
토스트	"신청 완료! / 신청이 정상적으로 접수되었습니다."

12-8. 티켓 페이지의 의미

응모자는 로그인하지 않고도 본인 응모 상태를 확인할 수 있어야 합니다. 이를 위해 응모 후 응모자별 고유 티켓 URL(ticketUrl)이 발급됩니다.

특성	설명
발급 시점	응모 직후 (응모 완료 화면 + 자동 발송 메일에 포함)
인증 방식	URL 자체가 토큰 — 링크를 가진 사람은 누구든 접근 가능하므로 응모자가 외부에 공유하지 않도록 안내
확인 가능 정보	본인 응모 상태(대기중·선정·미선정), 콘텐츠 제출 영역, 배송 현황
용도	응모자가 본인 한정으로 볼 수 있는 운영자 신청자 탭의 거울

12-9. 응모 후 백엔드 흐름 (참고)

응모자 화면 뒤에서 시스템이 다음을 처리합니다.

1. 폼 양식 + 필수 필드 + 형식(이메일·국가 코드) 검증

2. 같은 이메일 중복 응모 차단

3. 신청 기간 외 응모 차단

4. 응모 데이터 저장 + 티켓 URL 생성

5. 신청 안내 메일 자동 발송 (Part 10-2 참고)

6. 운영자 화면(신청자 탭)에 즉시 노출

이후 운영자가 선정/미선정/콘텐츠 요청 등을 처리하면 그에 맞는 메일이 자동으로 응모자에게 발송됩니다 — 자세한 내용은 Part 10 참고.