가입 폼 사용성: 라벨과 오류 메시지부터 고치기

입력 폼의 품질은 실패했을 때 드러난다

정상적인 이메일을 넣고 제출하는 테스트만으로는 가입 폼을 충분히 검수할 수 없다. 주소를 잘못 입력하거나 서버 응답이 늦을 때, 사용자가 무엇을 고쳐야 하는지 알 수 있어야 한다. 디자인을 다시 만들기 전에 라벨과 오류 처리부터 확인하는 이유다.

아래 체크리스트는 작은 웹 서비스의 가입 폼을 가정한다. 전환율 개선을 보장하는 방법이 아니라, 사용자가 입력과 수정 과정을 이해할 수 있게 만드는 기본 점검이다.

라벨은 입력을 시작해도 남아 있어야 한다

입력칸 안에만 있는 예시 문구는 내용을 입력하면 사라진다. 필드 위에 이름을 두고, 형식 안내가 필요하면 별도 설명을 붙이는 구성이 검수하기 쉽다. W3C는 일반적인 입력 요소에 label을 제공하고, 명시적으로 연결할 때 label의 for와 입력 요소의 id를 일치시키도록 안내한다. W3C 폼 라벨 안내

<label for="signup-email">이메일</label>
<input
  id="signup-email"
  name="email"
  type="email"
  autocomplete="email"
  aria-describedby="email-help"
  required
>
<p id="email-help">가입 확인 메일을 받을 주소를 입력하세요.</p>

이 예시는 라벨과 설명을 연결하는 최소 구조다. 서버 요청이나 오류 처리까지 구현한 완성 폼은 아니다. 실제 서비스에서는 제출 결과에 맞춰 오류 설명을 연결하고, 오류가 해결됐을 때 관련 상태도 해제해야 한다.

오류 메시지는 다음 행동을 알려주기

“잘못된 입력입니다”만 표시하면 사용자가 규칙을 추측해야 한다. “이메일 주소에 @가 포함되어 있는지 확인해 주세요”처럼 확인할 대상을 적는다. 반대로 서버 장애를 입력 오류처럼 표시해서도 안 된다. 주소를 수정해도 서버 장애는 해결되지 않기 때문이다.

W3C는 제출 성공 여부를 알려주고, 오류 메시지를 간결하면서 해결 방법이 드러나도록 작성할 것을 권장한다. 필드 주변의 설명과 전체 제출 결과를 함께 설계할 수 있다. W3C 제출 결과 알림 안내

실무에서는 다음 상황을 분리해 문구를 작성해 보자.

상황	사용자에게 필요한 정보
필수값 누락	어느 항목을 채워야 하는지
형식 오류	어떤 형식으로 수정해야 하는지
요청 실패	입력 문제인지 서버 문제인지
제출 성공	완료됐는지, 다음 단계가 무엇인지

오류가 났을 때 이미 입력한 정상적인 값을 유지하는지도 확인한다. 비밀번호 같은 민감한 값의 처리 정책은 따로 정하되, 단순한 연락처 형식 오류 때문에 모든 항목을 처음부터 작성하게 만들지는 않는 것이 좋다.

마우스를 내려놓고 끝까지 진행하기

검수할 때는 키보드만으로 입력칸에 접근하고 제출해 본다. 현재 위치가 보이는지, 이동 순서가 자연스러운지, 오류가 난 뒤 수정할 입력칸을 찾을 수 있는지 기록한다. 자동 검사 결과와 별개로 실제 흐름을 직접 확인하는 과정이다.

마지막으로 빈 값 제출, 잘못된 형식, 느린 응답, 서버 실패, 성공을 각각 실행한다. 제출 버튼을 반복해서 눌렀을 때의 처리도 살핀다. 로딩 표시만 있고 완료 결과가 없다면 사용자는 요청이 끝났는지 알 수 없다.

좋은 폼은 한 번에 맞게 입력하는 사람만을 위한 화면이 아니다. 실수한 사람도 이유를 이해하고 이어서 완료할 수 있는 화면이다.

커버 이미지: Tom Hall · CC BY 4.0. 자료 이미지이며 제품 화면은 아닙니다. 크기 조정 및 WebP 변환.