라벨을 없애고 플레이스홀더만 남긴 폼은 깔끔해 보입니다. 입력란이 나란히 서고 글자 수가 줄어드니 시안에서는 분명히 나아 보입니다. 다만 이 정리는 사용자가 아직 아무것도 입력하지 않았을 때만 성립합니다.
플레이스홀더가 라벨이 될 수 없는 세 가지 이유
세 번째 줄은 첫 회차의 대비 문제와 그대로 이어집니다. 플레이스홀더를 진하게 그리면 이번엔 이미 입력된 값처럼 보여서 사용자가 그 칸을 건너뜁니다. 라벨 대신 쓰는 순간 어느 쪽으로도 빠져나갈 수 없는 구조가 됩니다.
플레이스홀더 자체가 나쁜 것은 아닙니다. 라벨이 따로 있고 그 아래에서 입력 예시를 보여 주는 용도라면 아주 유용합니다. 라벨을 대신하게 만드는 것이 문제입니다.
라벨은 항상 보이고, 입력란과 묶여 있어야 합니다
라벨은 입력란 위에 두는 것이 가장 안전합니다. 글자가 길어져도 줄바꿈이 자연스럽고, 모바일에서 확대해도 라벨과 입력란이 함께 보입니다.
여기에 하나가 더 필요합니다 — 라벨과 입력란이 서로를 아는 상태여야 합니다. 제대로 묶여 있으면 라벨을 누르는 것만으로 입력란에 초점이 가고, 낭독기도 “이 칸은 무엇을 묻는 칸” 이라고 함께 읽어 줍니다. 부수적으로 터치 목표가 라벨만큼 넓어져 모바일 입력이 쉬워집니다. 접근성 요건 하나가 사용성 개선으로 그대로 돌아오는 흔한 경우입니다.
라벨이 입력란 안으로 올라갔다 내려오는 방식(플로팅 라벨)을 쓴다면, 축소된 상태의 크기와 대비를 따로 확인합니다. 그 작은 글자가 실제 라벨이기 때문입니다.
오류는 색이 아니라 글로 설명합니다
입력란을 빨갛게 칠하는 것만으로는 부족합니다. 색각 이상이 있는 사용자에게는 아무 변화가 아닐 수 있고, 색이 보이더라도 무엇이 왜 틀렸는지는 여전히 알 수 없습니다.
오류 문구는 다음에 무엇을 하면 되는지를 적습니다. “형식이 올바르지 않습니다” 는 상태 보고이고, “숫자만 입력해 주세요” 는 해결 방법입니다. 긴 폼이라면 화면 위에 오류 요약을 두고 각 항목으로 이동하는 링크를 붙이면 좋지만, 요약만 두고 개별 입력란 옆의 메시지를 빼지는 않습니다.
필수 항목 표시도 같은 원리입니다. 별표 하나만 찍어 두면 그것이 무슨 뜻인지는 관습에 기대는 것이므로, 폼 위에 한 줄로 설명하거나 대부분이 필수라면 반대로 선택 항목을 표시합니다.
우리 서비스 신청 폼도 같은 규칙으로 만들었습니다 — 라벨은 항상 보이고, 필수 항목은 글로 적혀 있습니다. 폼과 화면 구성에 관한 글은 테마 · 플러그인 아카이브에 더 있습니다.
다음 회차
다음 회차는 모션입니다. 애니메이션을 줄여 달라는 설정이 켜져 있을 때, 우리 화면이 차분해지는지 아니면 텅 비는지가 갈리는 지점을 다룹니다.