손님은 문의 폼의 빈칸 열 개를 마주하고 '나중에 하지' 하며 창을 닫는다 — 작은 회사 웹사이트 문의 폼(입력 양식) 설계의 5가지 원칙

손님은 문의 폼의 빈칸 열 개를 마주하고 '나중에 하지' 하며 창을 닫는다 — 작은 회사 웹사이트 문의 폼(입력 양식) 설계의 5가지 원칙
문의 폼 설계 대표 이미지

손님이 전화 대신 문의 폼을 누른다는 건, 이미 마음을 상당히 먹었다는 뜻이다. 그런데 막상 열어 보니 이름·연락처·이메일·업체명·예산·희망일·상세 내용까지 빈칸 열 개가 줄지어 있다. 손님은 잠깐 망설이다 '나중에 제대로 써서 보내지' 하고 창을 닫는다. 그 '나중'은 대개 오지 않는다. 문의 폼은 손님이 마음먹고 도달한 마지막 문인데, 많은 작은 회사 사이트가 바로 그 문 앞에서 손님을 돌려보낸다. 이탈을 줄이는 입력 양식 설계의 원칙 다섯 가지를 정리한다.

1. 칸의 개수가 곧 이탈률이다

문의 폼에서 가장 강력한 개선은 '칸을 지우는 것'이다. 지금 당장 연락이 오가는 데 꼭 필요한 정보가 무엇인지부터 따져 보자. 대개는 연락 가능한 수단 하나와 문의 내용 한 줄이면 충분하다. 예산·업체 규모·유입 경로 같은 항목은 사장님에게는 궁금하지만 손님에게는 부담이다. 그런 정보는 상담이 시작된 뒤 자연스럽게 물어도 늦지 않는다. 칸 하나를 지울 때마다 문의 전환율은 눈에 띄게 올라간다.

2. 한 줄에 한 질문, 위에서 아래로 흐르게

칸을 좌우로 두 개씩 붙여 놓으면 화면은 짧아 보여도 손님의 눈은 지그재그로 헤맨다. 특히 화면이 좁은 휴대폰에서는 칸이 찌그러지거나 옆으로 삐져나온다. 한 줄에 하나씩, 위에서 아래로 곧게 흐르는 배치가 가장 채우기 쉽다. 라벨(항목 이름)은 칸 안이 아니라 칸 바로 위에 둔다. 칸 안에만 안내 글자를 넣으면, 손님이 타이핑을 시작하는 순간 그 글자가 사라져 '여기가 무슨 칸이었지'를 잊게 된다.

3. 무엇을 어떻게 적어야 하는지 미리 보여준다

손님이 멈칫하는 순간은 대부분 '여기에 뭘 어떻게 쓰라는 거지' 하는 지점이다. 연락처 칸 아래에 '010-1234-5678'처럼 형식 예시를 흐린 글씨로 깔아 두고, 문의 내용 칸에는 '어떤 업종의 어떤 홈페이지가 필요하신지 한두 줄이면 됩니다'처럼 무엇을 적으면 되는지 힌트를 준다. 손님은 백지 앞에서 가장 크게 망설인다. 채우는 방법을 먼저 보여주면 그 망설임이 사라진다.

4. 틀리면 그 자리에서, 부드럽게 알려준다

다 채우고 '보내기'를 눌렀더니 맨 위로 튕겨 올라가 '입력값을 확인하세요'라는 빨간 한 줄만 뜬다면, 손님은 어디가 틀렸는지 찾다 지쳐 떠난다. 검증은 손님이 칸을 벗어나는 그 순간, 해당 칸 바로 아래에서 이뤄져야 한다. 문구도 '오류' 같은 질책이 아니라 '연락처는 숫자만 입력해 주세요'처럼 다음에 뭘 하면 되는지를 알려주는 말이어야 한다. 잘 채운 칸에는 초록 체크 하나를 띄워 주면 손님은 안심하고 끝까지 나아간다.

5. 보내고 난 뒤를 비워 두지 않는다

'보내기'를 눌렀는데 화면이 그대로거나 페이지만 새로 뜨면, 손님은 접수가 됐는지 몰라 같은 문의를 두세 번 더 보내거나 불안한 채로 떠난다. 전송 직후에는 '문의가 접수됐습니다. 영업일 기준 하루 안에 연락드리겠습니다'처럼 접수 확인과 다음 일정을 분명히 보여줘야 한다. 여기에 카카오톡 채널이나 대표 전화 같은 '급하면 이쪽으로'를 함께 안내하면, 기다리는 동안의 불안까지 덜어 준다.

작은 문 하나가 매출을 가른다

문의 폼은 홈페이지에서 가장 작아 보이지만, 손님이 '연락'이라는 행동으로 넘어가는 유일한 통로다. 이 문이 좁고 삐걱거리면 앞단에서 아무리 좋은 첫인상을 줘도 마지막에 새어 나간다. CYAN 에이전시는 작은 회사 웹사이트를 만들 때 이 마지막 문을, 손님이 3초 안에 부담 없이 통과하도록 설계한다. 지금 우리 사이트의 문의 폼을 손님의 눈으로 한번 열어 보길 권한다. 빈칸이 몇 개인지 세어 보는 것만으로도 고칠 곳이 보인다.