나눔웹 UX/UI 꿀팁
고객의 이탈을 막는 1초 디테일, '모바일 맞춤형 키보드' 세팅법
스마트폰으로 회원가입이나 상담 문의를 남길 때, '전화번호'를 입력하려고 칸을 터치했는데 한글 자판이 먼저 떠서 일일이 숫자 패드로 바꿔서 입력하신 경험 있으신가요?
사소해 보이지만, 고객이 지갑을 열거나 개인정보를 남기는 마지막 관문에서 이런 1초의 번거로움은 치명적인 이탈(Drop-off)을 유발합니다.
💡 왜 엉뚱한 키보드가 뜰까요?
웹사이트를 만들 때 모든 입력창을 기본값인 일반 텍스트(Text) 전용으로 만들어 두었기 때문입니다. 스마트폰이 "아, 여기는 숫자를 적는 곳이구나!"라고 스스로 인식하게끔 HTML에 작은 꼬리표를 달아주어야 합니다.
1. 상황별 완벽한 모바일 키보드 호출법
HTML 입력 태그의 type 속성과 inputmode 속성을 활용하면, 고객의 스마트폰에 우리가 원하는 형태의 자판을 강제로 띄울 수 있습니다.
<!-- 1. 이메일 입력창: 키보드에 '@'와 '.com' 버튼이 바로 뜹니다 -->
<input type="email" placeholder="이메일을 입력하세요">
<!-- 2. 전화번호 입력창: 다이얼 형태의 큼직한 숫자 패드가 뜹니다 -->
<input type="tel" placeholder="010-1234-5678">
<!-- 3. 인증번호/금액 입력창: 일반 숫자 키보드 배열이 뜹니다 -->
<input type="text" inputmode="numeric" pattern="[0-9]*" placeholder="숫자만 입력">
<!-- 4. URL 주소 입력창: 키보드에 '.com'이나 '/' 버튼이 추가됩니다 -->
<input type="url" placeholder="https://">
2. 한 걸음 더! '다음' 버튼 제어하기 (enterkeyhint)
스마트폰 키보드 우측 하단에 있는 파란색 버튼(엔터 키)의 글자도 마음대로 바꿀 수 있다는 사실, 알고 계셨나요?
enterkeyhint 속성을 사용하면 '이동', '완료', '검색', '다음' 등 고객이 다음에 해야 할 행동을 명확하게 지시할 수 있습니다.
<!-- 키보드 우측 하단 엔터키가 '검색(Search)' 돋보기로 바뀝니다 -->
<input type="text" enterkeyhint="search" placeholder="검색어 입력">
<!-- 여러 칸을 입력할 때, 엔터키가 '다음(Next)' 버튼으로 바뀝니다 -->
<input type="text" enterkeyhint="next" placeholder="이름 입력">
"훌륭한 UI는 사용자를 생각하게 만들지 않습니다."
나눔웹은 고객이 최종 목표(결제, 상담)에 도달하는 모든 마이크로 여정을 치밀하게 분석하여,
가장 매끄러운 폼(Form) 인터페이스를 구축합니다.