모바일 파트너 코드 입력 키보드 한글 이탈 문제 해결로 가입 전환율 4%p

모바일 키보드 첫 진입이 한글이면 사용자 이탈함

파트너 코드 입력 필드, PC 에서는 멀쩡했는데 모바일 가입 전환율이 유독 낮았음. QA 팀에서 "코드 입력하다가 자판 바꾸느라 짜증났다"는 사용자 인터뷰 클립을 들고 와서야 원인이 잡힘.

파트너 코드 정책상 영문 + 숫자 조합인데, 안드로이드 기본 키보드가 한글 자판으로 떠 있으면 사용자가 매번 한영 전환을 눌러야 했음. 거기다 자동완성/자동수정이 끼어들어서 "AB12CD"를 "압12cd"로 바꿔놓는 케이스도 있었음.

시도했다가 버린 것들

처음엔 type="email" 로 바꾸면 영문 자판이 뜬다는 글을 보고 적용했음. 결과는 별로였음.
- iOS 에서는 @ 키가 강제로 노출돼서 UI 가 어색해짐
- 안드로이드는 여전히 한글 자판 우선
- 시맨틱이 아예 다른 필드에 트릭으로 쓰는 게 찜찜함

결국 정공법으로 돌아옴.

적용한 속성

<input
  name="partnerCode"
  inputmode="latin"
  autocapitalize="characters"
  autocomplete="off"
  autocorrect="off"
  spellcheck="false"
  pattern="[A-Za-z0-9]+"
/>

각 속성이 막아주는 것:

type 은 text 그대로 둠. 시맨틱이 맞고, 추가로 한국어 IME 가 끼어드는 걸 inputmode 가 막아줌.

검증 과정에서 걸린 케이스

QA 단말 6종 (iOS 2, 안드로이드 4) 에서 돌렸는데 삼성 갤럭시 기본 키보드가 inputmode="latin" 을 부분적으로 무시함. 한글 자판이 메모리에 남아있으면 그대로 뜨는 이슈.

이건 클라이언트로 100% 해결 불가라서 입력 필드 위에 작은 헬퍼 텍스트를 추가:

• "영문 + 숫자 조합 (대소문자 구분)"
• 입력값에 한글이 들어오면 즉시 replace(/[^A-Za-z0-9]/g, '') 로 필터링하고 토스트 띄움

서버 검증 정규식은 원래 있던 걸 그대로 두고, 클라이언트에서 한 번 더 잡아주는 방어 계층만 추가.

회고

• 폼 접근성은 type 만 잘 고른다고 끝나는 게 아님. inputmode / autocapitalize / autocorrect 4종 세트로 묶어서 봐야 함
• 모바일 가입 퍼널은 키보드 한 번 헛돌면 바로 이탈로 직결됨. 코드 한 줄짜리 수정인데 다음 주 가입 전환율 4.2%p 올라감
• IME 이슈는 단말마다 동작이 달라서 실기기 테스트 필수. 시뮬레이터로는 절대 안 잡힘

다음