#04. ttip(띱) - 회원가입 프로세스 개편 & 로그인 UI 통일

이번 포스팅에서는 회원가입 프로세스를 전면 개편하고

로그인 UI를 통일한 작업을 진행했습니다.

 

1. 회원가입 프로세스 개편

1-1 약관동의 페이지 추가

기존 회원가입은 가입 후 이메일 인증 메일을 따로 받아야 했는데
이 방식이 이탈률을 높인다는 판단 하에 전면 개편했습니다.

1단계 — 약관 동의
- 서비스 이용약관 동의 (필수)
- 개인정보처리방침 동의 (필수)
- 동의 시각과 IP를 DB에 함께 저장 (법적 근거 확보)

2단계 — 정보 입력
- 닉네임: 실시간 중복 체크 (400ms 디바운스), 최소 2자
- 이메일: 6자리 OTP 발송 → 3분 카운트다운 → 즉시 인증
- 비밀번호 설정
- OTP 인증 완료 + 닉네임 사용 가능 상태일 때만 가입 버튼 활성화

 

1-2 이메일 OTP 인증 방식으로 전화

 

기존: 가입 완료 → 인증 메일 발송 → 메일함 확인 → 인증 클릭
변경: 가입 중 OTP 입력 → 즉시 인증 완료 → 바로 서비스 이용
Laravel Cache로 6자리 코드를 10분간 관리하고
인증 완료 시 email_verified_at을 즉시 설정합니다.
가입 후 별도 인증 과정이 사라져 사용자 경험이 훨씬 간결해졌습니다.

 

2. 로그인 UI 통일

회원가입 페이지가 새 디자인으로 바뀌면서
로그인 페이지와 디자인이 따로 노는 문제가 생겼어요.
통일한 디자인 요소:
- 둥근 모서리 인풋 (rounded-xl)
- rounded-full 버튼 스타일
- font-black 타이포그래피
- 카카오 간편로그인 버튼 스타일
비밀번호 찾기 링크도 패스워드 라벨 옆으로 이동해
더 자연스러운 UX 흐름을 만들었습니다.

 

## 마무리

회원가입 이탈률을 줄이는 게 이번 작업의 핵심 목표였어요.
OTP 인증을 가입 과정에 녹여내면서 인증된 사용자만
활동할 수 있는 구조도 함께 갖추게 됐습니다.

---

앞으로도 웹 서비스를 계속 개선할 예정이니 한번씩 방문해서 구경와 주세요~~

ttip - 대구를 더 잘 알고 싶다면