05 · Service Patterns · 참여
신청 · 예약Apply · Reserve
수련회·봉사·교육 등 여러 정보를 수집하고 최종 제출하는 흐름. 헌금과 달리 ‘돈’이 움직이지 않지만, 수집하는 정보량이 많고 실수 시 담당자 확인이 필요하다는 부담이 있습니다.
전체 흐름
- 안내 — 신청 조건 · 필요 정보 · 처리 기간을 시작 전에 고지.
- 폼 입력 — 기본 정보 · 상세 선택 · 첨부 파일. 여러 단계 폼 참조.
- 검토 화면 — 입력한 내용을 한 번 더 확인. 수정 링크 제공.
- 제출 결과 — 접수 번호 · 다음 일정 · 후속 액션(취소 · 상태 조회).
사전 안내의 중요성
신청 시작 전에 필요한 준비물을 미리 알려야 합니다. “수련회 신청을 위해 교적 번호 · 비상 연락처가 필요합니다”를 첫 화면에 적어두면, 성도는 미리 준비한 뒤 안정적으로 작성할 수 있습니다.
Do· 준비물 · 소요시간 명시
“약 10분 소요 · 교적 번호 준비 필요” — 숫자가 들어가면 성도는 ‘지금 할까 나중에 할까’를 스스로 결정할 수 있습니다.
Don't· 중간에 요구 추가
3단계쯤에서 “건강 문진표 파일을 첨부하세요” 요구를 처음 띄우면 성도는 창을 닫고 포기합니다. 자료 탐색 마찰이 가장 큰 이탈 요인.
폼 구성
- 필드 수가 많으면 여러 단계 폼 패턴을 따라 섹션별로 분할.
- 선택 입력은 “(선택)” 라벨. 필수는 별표 +
aria-required. - 파일 업로드는 허용 확장자 · 최대 용량을 필드 근처에 명시.
- 임시 저장 기능 — 중간에 닫아도 다시 돌아오면 이어서 작성 가능.
검토 화면
제출 결과
- 접수 번호를 눈에 띄게 노출. 사용자가 복사 · 메모할 수 있게 copy 아이콘.
- 처리 소요 시간 · 다음 연락 방법 고지(“영업일 기준 2일 내 이메일 회신”).
- 같은 내용을 이메일로도 재송신. 웹 페이지는 새로고침하면 잃습니다.
- ‘신청 현황 보기’ · ‘취소’ 링크를 함께.
조합되는 컴포넌트
접근성
- 각 단계 제목은
h2로 페이지 최상단에. 단계 전환 시 포커스를 그 제목으로. - 필수 표시는 색 + 기호 +
aria-required세 겹. - 첨부 파일 목록은 삭제 버튼마다
aria-label="{파일명} 삭제".