결제 직전, 손님은 이름·휴대폰 번호·주소·카드번호를 빈칸마다 처음부터 손으로 두드립니다. 오타가 나면 지우고 다시 치고, 우편번호를 찾으러 다른 창을 열었다가, 결국 "다음에 하지" 하고 창을 닫습니다. 사실 손님의 브라우저와 휴대폰에는 그 정보가 이미 저장돼 있습니다. 우리 폼이 그걸 꺼내 쓸 수 있게 몇 글자만 표시해 주면 입력은 한 번의 탭으로 끝납니다. 작은 회사일수록 문의·주문 폼 한 칸의 마찰이 곧 매출로 직결됩니다.
1. autocomplete 속성에 '정확한 이름표'를 달아라
브라우저는 칸 이름을 눈치로 맞추지 않습니다. 표준 토큰을 정확히 적어 줘야 저장된 값을 꺼냅니다.
- 이름·연락처: name, tel, email
- 주소: postal-code(우편번호), street-address(도로명)
- 카드: cc-number, cc-exp, cc-name
한 글자만 틀려도 자동입력은 조용히 작동을 멈춥니다. 속성값은 추측하지 말고 표준 목록에서 그대로 옮겨 적으세요.
2. 모바일 키보드를 칸에 맞춰 열어라
손님 열에 일곱은 휴대폰으로 들어옵니다. 전화번호 칸에 일반 키보드가 뜨면, 손님은 숫자를 찾아 자판을 헤맵니다.
type="email"은 @ 키를, type="tel"과 inputmode="numeric"은 숫자 패드를 곧바로 띄웁니다. 칸의 성격에 맞는 키보드 하나가 입력 시간을 절반으로 줄입니다.
3. 문자 인증번호는 손님이 옮겨 적게 두지 마라
인증번호를 받으려고 문자 앱과 폼을 오가며 여섯 자리를 외우는 건 흔한 이탈 지점입니다. 인증번호 칸에 autocomplete="one-time-code"를 달면, 방금 도착한 문자의 번호를 키보드 위에 버튼 하나로 띄워 줍니다. 손님은 탭 한 번으로 인증을 끝냅니다.
4. 자동완성을 '꺼서' 막지 마라
디자인이 흐트러진다는 이유로 autocomplete="off"를 습관처럼 붙이는 경우가 많습니다. 그 순간 손님의 편의는 사라집니다.
- 비밀번호·인증번호처럼 정말 필요한 칸에만 최소한으로 사용하세요.
- 각 칸에 label을 명확히 연결하면 브라우저가 용도를 더 잘 알아챕니다.
5. 자동입력 뒤에도 '틀림'은 다 친 뒤에 알려라
자동입력으로 값이 채워지자마자 빨간 경고부터 띄우면, 멀쩡한 정보에도 손님은 겁을 먹습니다. 검증은 입력이 끝난 시점에 하고, 무엇이 왜 틀렸는지를 칸 바로 옆에 한 문장으로 안내하세요. 채워 주고, 방해하지 않고, 끝에 딱 한 번 확인해 주는 흐름이 완주율을 끌어올립니다.
작은 마찰이 사라지면, 문의가 쌓입니다
자동완성은 화려한 기능이 아니라 손님의 손가락을 아껴 주는 배려입니다. 이 다섯 가지는 코드 몇 줄이면 끝나지만, 완주하지 못하고 떠나던 손님을 붙잡아 줍니다. CYAN 에이전시는 작은 회사의 문의·주문 폼을 이렇게 손님의 입장에서 한 칸씩 다듬어, 들어온 방문이 실제 연락으로 이어지게 만듭니다.
