파트너 코드 입력 검증 누락으로 인한 모바일 가입 실패율 개선

문제 발견

이커머스 플랫폼에서 신규 가입 시 파트너 코드 매칭이 자꾸 실패한다는 문의가 들어옴. 로그를 까보니 입력값에 소문자, 공백, 심지어 한글까지 섞여 있었음. 파트너 코드는 발급 시점부터 대문자+숫자 조합으로 찍히는데, 가입 폼은 아무 글자나 다 받고 있던 거였음.

원인

• 프론트 입력란에 패턴 검증 없음 (그냥 text input)
• 백엔드도 길이만 체크하고 정규식 검증은 없었음
• 모바일에서 한글 IME 기본 상태로 입력 시작하면 첫 글자가 거의 한글로 들어감
• 카톡으로 코드 받아 복붙하면 앞뒤 공백/줄바꿈이 자주 끼어 있음

특히 모바일 가입 실패율이 PC 대비 두 배 가까이 높았는데, 거의 다 입력 정규화 누락 때문이었음.

해결

입력 즉시 비허용 문자를 제거하고 대문자로 변환하는 방향으로 잡음.

input.addEventListener('input', (e) => {
  e.target.value = e.target.value
    .toUpperCase()
    .replace(/[^A-Z0-9]/g, '');
});

HTML 속성으로도 OS 차원에서 유도:

• inputmode="latin" — 영문 키보드 띄우기
• autocapitalize="characters" — 자동 대문자
• autocomplete="off" — 자동완성 차단
• maxlength — 정해진 길이 초과 방지

서버에서도 같은 정규식 ^[A-Z0-9]+$ 으로 한 번 더 검증함. 클라만 믿으면 devtools로 우회되니까.

변경 전후 비교

회고

가입 실패 원인이 어이없을 만큼 단순한 입력 검증 누락이었음. "파트너 코드는 우리가 발급하니까 사용자가 잘 복붙하겠지" 라고 가정한 게 문제. 실제로는 손으로 받아적는 사용자, 카톡에서 공백 끼워서 복붙하는 사용자, IME 안 끄고 입력 시작하는 사용자가 무시 못 할 비율이었음.

가입 직전 단계에서 막히는 건 가장 비싼 이탈임. 회원가입까지 들인 마케팅 비용 다 날아감. CS 문의 부담은 덤. 작은 input 하나라도 도메인 규칙이 있으면 UI에 녹여야 한다는 걸 다시 확인함.

다음에 폼 만들 때 체크리스트로 박아둠:

1. 허용 문자 패턴이 명확한가
2. 입력 즉시 정규화하는가 (대소문자, 공백 트림)
3. inputmode / autocapitalize 같은 HTML 속성을 활용했는가
4. 클라이언트와 서버 양쪽에서 검증하는가
5. 모바일 IME 기본값까지 고려했는가

다음