모바일에서 문의 폼이나 회원가입 폼을 채울 때 이름, 전화번호, 주소가 자동완성으로 뜨지 않는다면 대부분 입력창에 autocomplete 속성이 빠져 있거나 값이 잘못 들어간 경우입니다.
속성 몇 개만 정확히 넣어도 손가락으로 한 글자씩 치던 항목이 한 번 탭으로 채워지고, 문자로 받은 인증번호도 키보드 위에 바로 제안됩니다.

1. 항목마다 정해진 값을 넣어 주세요

값은 아무 단어나 넣는 게 아니라 HTML 표준에 정해진 이름을 써야 합니다. 문의 폼에서 자주 쓰는 항목은 아래 정도면 충분합니다. type과 inputmode도 함께 맞춰 두면 키보드까지 알맞게 뜹니다.

<input type="text" name="wr_name"
  autocomplete="name">

<input type="tel" name="hp"
  autocomplete="tel">

<input type="email" name="email"
  autocomplete="email">

<input type="text" name="company"
  autocomplete="organization">

2. 주소 칸은 나눠서 지정합니다

우편번호 검색 버튼으로 기본 주소를 채우는 폼이라도, 우편번호와 상세 주소 칸에 값을 따로 주면 브라우저에 저장된 주소를 쓸 때 칸이 엉키지 않습니다.

3. 인증번호 칸에는 one-time-code

휴대폰 본인 확인이나 로그인 인증번호 칸에는 one-time-code를 넣습니다. 아이폰 사파리는 문자로 받은 인증번호를 키보드 위에 제안해 주고, 탭 한 번이면 입력됩니다. 안드로이드는 키보드 앱과 브라우저 버전에 따라 동작이 조금씩 달라서, 실제 기기로 한 번씩 확인해 보는 것이 좋습니다.

<input type="text" name="auth_no"
  inputmode="numeric"
  autocomplete="one-time-code"
  maxlength="6">

4. 작업할 때 주의할 점

• 자동완성이 거슬린다고 폼 전체에 autocomplete="off"를 거는 경우가 있는데, 크롬은 이름이나 주소 칸에서 이 설정을 무시하기도 합니다. 끄기보다 정확한 값을 주는 쪽이 결과가 깔끔합니다.
• 자동완성이 되어도 입력창이 <form> 태그 밖에 있거나 라벨 없이 placeholder만 있으면 인식률이 떨어집니다.
• 수정한 뒤에는 휴대폰에 연락처와 주소가 저장된 상태에서 직접 폼을 열어 보고, 칸마다 맞는 값이 들어가는지 확인하세요.

리뉴얼 작업에서 문의 폼 이탈을 줄여 달라는 요청을 받으면, 디자인보다 먼저 이 속성들을 점검합니다. 입력 단계가 짧아지는 것만으로도 모바일 사용자 입장에서는 체감 차이가 꽤 큽니다.