Web Guide모바일 폼입력 편의키보드
모바일 폼 키보드 최적화
전화번호 칸에서 한글 키보드가 뜨면 안 됩니다.
작은 설정 하나가 입력 포기를 줄입니다.

01입력 종류별 지정
칸마다 맞는 키보드가 있습니다.
전화번호
숫자 키패드가 바로 뜨게.
이메일
골뱅이가 있는 자판으로.
숫자
수량, 금액은 숫자만.
주소
일반 자판이지만 자동완성 연결.
검색
확인 버튼이 검색으로 표시.
일반 텍스트
이름 등은 기본 자판.
02자동 보정
의도치 않은 변환을 막아야 합니다.
영문 아이디에서 방해가 됩니다.
고유명사가 바뀝니다.
필요 없는 칸은 끕니다.
필요한 칸은 켭니다.
입력 시 화면이 튀지 않게.
막으면 불편합니다.
03화면 동작
키보드가 올라올 때가 문제입니다.
입력칸 가림 키보드에 안 가리게 스크롤.
다음 이동 다음 칸으로 넘어가는 버튼.
제출 버튼 키보드에 가려지지 않게.
고정 요소 하단 바가 튀지 않게.
오류 표시 가려진 곳에 뜨지 않게.
닫기 빈 곳을 눌러 키보드 닫기.
04검증 방식
언제 알려주느냐가 중요합니다.
나쁜 방식
제출 후에야 오류 표시 · 어느 칸인지 불명확 · 입력값이 사라짐
좋은 방식
칸을 벗어날 때 즉시 확인 · 해당 칸 아래 설명 · 입력값 유지 · 첫 오류로 이동
CHECK POINT
□ 전화번호 칸에서 숫자 키패드가 뜨는가
□ 이메일 칸에 맞는 자판이 뜨는가
□ 불필요한 자동 대문자가 꺼져 있는가
□ 주소 자동완성이 동작하는가
□ 입력칸이 키보드에 가려지지 않는가
□ 제출 버튼에 접근할 수 있는가
□ 오류를 즉시 알려주는가
□ 실제 기기에서 처음부터 끝까지 입력해봤는가
#모바일 폼#입력 편의#키보드#자동완성#검증#전환율#UX#반응형#웹비스타#홈페이지 제작