3-2. 프론트 기획 실습(회원가입) (1)
3-3. 프론트 기획 실습(회원가입) (2)
*KEY POINT : 비즈니스 로직, 예외 처리, 데이터 흐름을 개발자와 디자이너가 명확히 이해하도록 돕는 것
1. 개요 및 정책
요약
- 프로젝트 명 : 회원가입 화면 기획
- 목적 : 신규 유저 유입을 위한 간편 회원가입 프로세스 구축 및 데이터 수집
- 대상 : 자사 웹/앱 서비스 이용을 희망하는 신규 사용자
- KPI : 가입 전환율(CR), 가입 중 이탈률 감소
회원가입 목표
- 쉽고 빠른 가입 절차 제공
- 이메일 가입 / SNS 간편 가입 지원
- 필수 정보만 입력하도록 하여 가입 과정 간소화
- 가입 중 이탈률 감소
- 중복 계정 방지
- 신규 가입자 데이터 수집 (?)
- 유효한 사용자 확보
2. 사용자 흐름
기호 정의 (Legend)
사각형 (Rectangle): 화면 (UI)
둥근 사각형 (Rounded): 사용자 액션
마름모 (Diamond): 시스템의 검증/조건 (Yes/No)
작은 말풍선: 에러 메시지 또는 토스트 노출
회원가입 방식
이메일 회원가입
- 가입 방법 : 이메일 & 비밀번호 입력 > 본인 인증 > 약관 동의 > 가입
ㄴ 본인 인증 방법 : 문자, pass 앱, 금융 인증서, SNS 인증서 - 필수 및 선택 입력 항목 : 이름, 아이디, 비밀번호, 전화번호, 이메일
SNS 간편 가입
- 가입 방법 : Google, Apple, Facebook, Naver, Kakao 계정 연동 > 약관 동의 > 가입
- 필수 및 선택 입력 항목 : 없음
가입 절차
- [로그인 페이지 / 홈 > 회원가입 버튼] 에서 회원가입 페이지 진입
- 가입 방법 선택 (이메일, SNS 간편)
- 필수 정보 입력
- 본인 인증 (휴대폰 인증)
- 약관 동의 (필수 및 선택)
- 회원가입 완료
- 웰컴 페이지 이동
3. 상세 기능 명세 (Functional Specifications)
각 필드별 Validation(유효성 검사)과 Edge Case(예외 상황)를 정의합니다.
4. 정책 및 예외처리 (Policy & Exception)
정책
-
비밀번호 보안 정책 적용
ㄴ비밀번호 조건 : 최소 8자 이상, 영문+숫자+특수문자 조합 권장
ㄴ비밀번호 허용 : 영문 대소문자, 숫자, 특수문자(!@#$%^&*)
ㄴ비밀번호 제한 : 공백 입력 불가 -
이메일 및 전화번호 인증 필수
-
중복 가입 방지를 위한 신상, 아이디 중복 체크 기능
ㄴ 이미 가입된 이메일로 시도할 경우, '로그인 하러 가기' 팝업 유도. -
탈퇴 후 동일 정보 30일 이내 재가입 제한 설정
-
이탈 및 상태 유지 정책
ㄴ뒤로 가기/페이지 이탈 : 정보 입력 중 '뒤로 가기' 클릭 시 "작성 중인 내용이 저장되지 않습니다. 나가시겠습니까?" 컨펌창(Confirm) 노출.
ㄴ중복 가입 케이스:
ㄴ(1) 이미 가입된 계정이지만 휴면 상태인 경우: "휴면 계정입니다. 본인 인증 후 휴면을 해제하시겠습니까?" 안내 및 휴면 해제 프로세스 연결.
ㄴ(2) 탈퇴 후 재가입 제한 기간(예: 30일): "탈퇴 후 30일 이내에는 동일한 정보로 가입할 수 없습니다. (재가입 가능일: YYYY-MM-DD)" 안내. -
네트워크 오류
ㄴ가입 요청 중 네트워크 단절 시 "일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요." 토스트 메시지 노출. -
데이터 저장
가입 완료 즉시 마케팅 수신 동의 여부를 DB의 marketing_agreement_fl 컬럼에 업데이트 -
약관 동의 필수 / 선택:
ㄴ(1) 필수 약관 미동의 시 '가입하기' 버튼은 무조건 비활성화.
ㄴ(2) 마케팅 수신(선택) 동의 시, '이메일' 혹은 'SMS' 중 최소 하나는 선택하게 하거나 전체 동의로 유도. -
버전 관리:
ㄴ회원가입 시점에 동의한 약관의 버전 번호(v1.2 등)를 사용자 데이터와 함께 저장하여 향후 분쟁 방지.
5. 분석 태깅 (Logging)
- Event Name: click_signup_submit
- Parameters: method (email, Google, Apple, Facebook, Naver, Kakao), is_success (Y/N)
