TIL - 회원가입 폼 퍼널 구조로 개선, 로그인 유지 기능 구현

오늘은 기존 회원가입 폼을 개선하고, 퍼널 구조로 변환하여 사용자 경험(UX)을 향상시키는 작업을 진행했습니다.

주요 작업 내용

1. 회원가입 폼 개선:
   • 기존 회원가입 폼을 퍼널 구조로 개선
   • 각 단계별로 유효성 검사를 추가하여 입력 데이터의 무결성을 보장
2. 유효성 검사 규칙 설정:
   • 이메일 유효성 검사: 입력 값에 "@" 기호가 포함되어 있는지 확인.
   • 닉네임 유효성 검사: 닉네임이 최소 2자 이상인지 확인.
   • 비밀번호 유효성 검사: 비밀번호가 기준을 충족하는지 확인 (예: 최소 길이, 특수 문자 포함 등).
3. 단계별 회원가입 과정:
   • 이메일 입력: 유효한 이메일 주소인지 검사.
   • 닉네임 입력: 닉네임이 적절한지 검사.
   • 비밀번호 입력: 비밀번호와 비밀번호 확인이 일치하는지 검사.
   • 회원가입 완료: 회원가입 성공 메시지와 함께 홈으로 이동할 수 있는 링크 제공.
4. 기타 기능 구현:
   • 로그인 상태 유지 옵션: 사용자가 로그인 상태를 유지할 수 있도록 체크박스 옵션 추가.
   • 쿠키 설정: 로그인 상태 유지를 위해 쿠키를 설정 및 삭제하는 로직 구현.

배운 점

퍼널 구조(Funnel Structure): 퍼널 구조는 사용자 경험(UX)을 향상시키기 위해 큰 목표를 작은 단계로 나누는 방식입니다. 회원가입 폼을 예로 들면, 사용자에게 한 번에 모든 정보를 입력하게 하기보다 단계별로 나누어 정보를 입력하게 합니다.

장점:

• 사용자 피로도 감소: 한 번에 많은 정보를 입력하는 것보다 단계별로 정보를 입력하면 사용자의 피로도 감소
• 데이터 수집 용이: 각 단계별로 필요한 데이터를 수집할 수 있어 관리가 용이
• 오류 감소: 단계별로 유효성 검사를 하여 입력 오류 방지

단점:

• 복잡성 증가: 여러 단계로 나누면 구현과 관리가 복잡성 증가
• 사용자 이탈 가능성: 사용자가 여러 단계를 거치는 동안 이탈할 가능성 

내일 할 일

• 회원가입 구조를 개선하여 사용자 개인 정보(몸무게, 프로필 사진, 키)를 입력할 수 있는 페이지로 나눌 예정
• 이메일과 닉네임 중복 확인 기능을 구현할 계획