정성껏 데려온 손님이 열두 칸짜리 문의 양식 앞에서 반쯤 쓰다 창을 닫는다 — 작은 회사 웹사이트 입력 폼(문의·신청 양식) 설계의 5가지 원칙

어렵게 광고와 검색으로 손님을 홈페이지까지 데려왔습니다. 그런데 정작 '문의하기' 화면에서 이름·연락처·업체명·예산·희망일정·상세내용까지 열두 칸이 줄줄이 펼쳐지면, 손님은 반쯤 쓰다 창을 닫습니다. 입력 폼은 손님이 마지막으로 마음을 정하는 관문인데, 여기서 무너지면 앞선 모든 노력이 물거품이 됩니다. 작은 회사 웹사이트의 문의·신청 양식을 설계할 때 지켜야 할 다섯 가지 원칙을 정리합니다.

1. 칸은 꼭 필요한 만큼만 둔다

입력 칸이 하나 늘 때마다 작성을 포기하는 손님이 생깁니다. '나중에 참고하면 좋을 것 같아서' 넣은 칸이 실제로는 전환을 갉아먹습니다.

  • 첫 문의는 세 칸이면 충분합니다. 이름, 연락처(또는 이메일), 문의 내용. 예산이나 상세 요구사항은 통화나 다음 단계에서 물어도 늦지 않습니다.
  • 꼭 받아야 하는 정보와 '있으면 좋은' 정보를 나눠, 후자는 과감히 덜어냅니다.

2. 무엇을 적어야 하는지 한눈에 알린다

안내 문구를 입력창 안에만 흐릿하게 넣으면(플레이스홀더), 손님이 타이핑을 시작하는 순간 사라져 '내가 뭘 적던 칸이었지' 하고 헤맵니다.

  • 라벨은 입력창 위에 항상 보이게 둡니다. 클릭해도 사라지지 않아야 합니다.
  • 형식이 헷갈리는 칸에는 예시를 붙입니다. 예: '연락처 — 010-1234-5678'.

3. 엄지손가락 하나로 채울 수 있게 한다

요즘 문의의 절반 이상은 휴대폰에서 들어옵니다. 데스크톱에서만 확인하고 넘기면, 모바일 손님은 좁은 칸과 어긋난 버튼에 지쳐 떠납니다.

  • 입력창과 버튼은 손가락으로 누르기 넉넉한 크기로 키웁니다.
  • 칸의 성격에 맞는 키보드가 뜨게 합니다. 전화번호 칸에는 숫자 키패드, 이메일 칸에는 @가 있는 자판이 바로 올라오도록 지정합니다.

4. 실수는 그 자리에서 친절하게 짚는다

다 채워 '보내기'를 눌렀더니 화면이 새로 뜨며 적은 내용이 전부 지워지고 '오류'라는 빨간 글씨만 남는다면, 손님은 두 번 다시 시도하지 않습니다.

  • 어느 칸이 왜 잘못됐는지 바로 옆에 표시합니다. '이메일 형식을 확인해 주세요'처럼 구체적으로요.
  • 오류가 나도 이미 적은 내용은 그대로 남겨, 처음부터 다시 쓰게 만들지 않습니다.

5. 보낸 다음을 반드시 설계한다

많은 폼이 '전송'까지만 신경 쓰고 그 이후는 비워 둡니다. 손님은 문의가 제대로 갔는지, 언제 답을 받을지 몰라 불안해합니다.

  • 전송에 성공하면 확인 메시지를 분명히 보여 줍니다. '문의가 접수되었습니다. 영업일 기준 하루 안에 연락드립니다'처럼 다음 일정까지 알려 주면 신뢰가 쌓입니다.
  • 스팸을 막는 장치는 손님이 눈치채지 못하게 뒤에서 조용히 작동하도록 합니다. 사람을 골라내겠다고 손님까지 번거롭게 만들면 진짜 문의가 줄어듭니다.

좋은 폼은 '문턱'이 아니라 '지름길'이다

입력 폼은 손님을 시험하는 관문이 아니라, 하고 싶은 말을 가장 빠르게 전하도록 돕는 지름길이어야 합니다. 칸을 줄이고, 라벨을 분명히 하고, 모바일을 배려하고, 실수를 감싸 주고, 보낸 뒤를 안내하는 것만으로 문의 수는 눈에 띄게 달라집니다.

CYAN은 작은 회사의 웹사이트를 만들 때 화면 디자인만큼이나 '문의가 실제로 도착하기까지의 과정'을 중요하게 봅니다. 손님이 망설임 없이 첫 연락을 남기는 폼, 그 뒤의 알림과 스팸 방어까지 함께 설계합니다.