개발 slecs

이커머스 파트너 가입 시 중복확인과 SMS 인증을 단일 동선으로 통합

목차

사업자 회원가입 플로우 정리

이커머스 파트너 회원가입 화면을 손봤음. 기존엔 휴대폰 입력란 옆에 "중복확인" 버튼이 따로 있고, 그 아래 SMS 인증 영역이 또 따로 있었음. 사용자가 두 번 눌러야 가입 진행이 됐고, 동선이 꼬여서 이탈이 많이 났음.

무엇이 문제였나

  • 중복확인 통과 후 SMS 인증 단계로 안 넘어가는 케이스가 많았음
  • 중복확인은 통과했는데 인증 안 한 채 제출하면 서버단에서 막혀서 폼이 통째로 리셋됨
  • 고객센터 문의 대부분이 "가입 버튼이 안 눌려요" 였음
이전 이후
중복확인 + SMS 인증 2단계 SMS 인증 1단계로 통합
중복확인 후 번호 바꾸면 재검증 안 됨 인증요청 시점에 중복+본인확인 동시 처리
가입 완료율 낮음 단일 동선으로 이탈 감소 기대

통합한 방식

인증요청 핸들러에서 휴대폰 중복 체크를 먼저 하고, 통과해야 SMS를 발송함. 인증코드 검증 성공 시점에만 가입 버튼이 활성화되도록 했음.

async function requestSms(phone) {
  const dup = await checkPhoneDuplicate(phone);
  if (dup.exists) {
    showError('이미 가입된 번호임');
    return;
  }
  await sendVerifyCode(phone);
  startResendTimer(180);
}

서버단도 정리함. 인증 성공 토큰을 세션에 저장해두고, 회원가입 제출 시 토큰 일치 + TTL 미만일 때만 통과시킴. 토큰 없으면 422 반환.

작업하면서 배운 것

  • 중복확인 버튼처럼 "안전장치 같아 보이는 UI"가 실제 데이터엔 노이즈만 남기는 경우가 많았음. 검증은 서버가 하고, 클라는 단일 동선으로 유도하는 게 맞음
  • SMS 발송 비용도 줄었음. 이전엔 중복확인만 통과시킨 뒤 다른 번호로 발송하는 어뷰징 로그가 좀 있었는데, 통합 후엔 한 번호로만 발송 가능
  • 폼 검증을 클라/서버 둘 다 손볼 땐 토큰 TTL을 짧게 잡는 게 안전했음. 길게 잡으면 세션 탈취 시 문제 생김

후속 과제

  • 본인인증 결과 캐시 정책 조정. 현재 5분인데 이탈률 보고 늘리거나 줄일 예정
  • 휴대폰 번호 포맷 정규화(하이픈 처리)를 서버단으로 옮기기
  • 가입 전환율 A/B 측정 붙이기

다음

댓글 0

첫 댓글 달아줘.