플레이스홀더

라벨만 붙은 입력 칸 앞에서 사람들이 멈추는 일이 잦았습니다. "전화번호" 라고만 적혀 있으면 하이픈을 넣어야 하는지, 국가 번호를 붙여야 하는지 알 수 없습니다. 반은 하이픈을 넣고 반은 안 넣은 데이터가 쌓이고, 형식이 맞지 않으면 다음 화면으로 넘어가지 못한 채 빨간 문구만 보게 됐습니다.

설명을 붙이면 해결되지만 대가가 따랐습니다. 칸이 열두 개인 가입 폼에 칸마다 라벨과 설명을 달면 화면은 두 배로 길어지고, 작은 화면에서는 스크롤을 세 번 내려야 제출 버튼이 나옵니다. 길어진 폼은 중간에 그만두는 사람을 늘립니다.

그래서 칸 안의 빈 자리를 쓰기로 했습니다. 어차피 비어 있는 공간이니 여기에 예시를 흐리게 띄워 두면 화면은 한 줄도 길어지지 않고 사용자는 무엇을 적을지 알게 됩니다. 문제는 이 문구가 입력을 시작하면 사라진다는 데 있습니다. 공간을 빌려 쓴 대가로, 여기 담은 정보는 정작 입력하는 동안 화면에 없습니다.

칸이 비어 있을 때만 보이고 글자를 한 자라도 넣으면 사라집니다. 본문보다 흐린 회색으로 그려 사용자가 실제로 입력한 값과 구별되게 합니다.

사라진다는 성질 하나가 이 요소의 규칙을 전부 정합니다. 입력하는 동안 필요한 정보는 여기 담지 않습니다. 담아도 되는 것과 담으면 안 되는 것을 갈라 보면 넷입니다.

1. 값의 예시만 담습니다. 전화번호 칸이면 010-1234-5678, 이메일 칸이면 name@company.com 처럼 완성된 형태를 하나 보여 줍니다. 한 줄을 읽는 대신 모양을 보고 알게 되는 것이 이 자리의 쓸모입니다.
2. 라벨을 대신 쓰지 않습니다. 이 칸이 무슨 칸인지 알려 주는 이름은 칸 밖 위에 둡니다. 안에 넣어 두면 입력을 시작한 순간 무슨 칸이었는지 사라지고, 열두 칸을 다 채운 뒤 검토하는 사람은 회색 글자 없이 값만 남은 화면을 읽어야 합니다.
3. 형식 규칙을 넣지 않습니다. "8자 이상, 숫자 하나 포함" 은 지키면서 봐야 하는 문장입니다. 타이핑을 시작하면 사라지는 자리에 두면 규칙을 외운 사람만 통과합니다. 이런 문장은 칸 아래에 상시로 둡니다.
4. 필수인지 아닌지도 넣지 않습니다. 비어 있을 때만 보이니 정작 비워 둔 채 제출하려는 사람에게는 이미 사라진 뒤입니다.

접근성에서도 걸립니다. 스크린 리더는 화면 내용을 소리로 읽어 주는 프로그램인데, 라벨 없이 이 문구만 둔 칸을 무슨 칸인지 읽어 주지 못하는 경우가 있습니다. 흐린 회색이라는 점도 문제가 됩니다. 배경과의 밝기 차이가 작아서 저시력 사용자에게는 빈 칸으로 보입니다. 장애나 상황에 관계없이 쓸 수 있게 만드는 접근성 점검에서 이 두 가지가 자주 지적됩니다.

쓰는 자리는 값의 형태가 여러 가지일 수 있는 칸입니다. 전화번호, 날짜, 금액처럼 같은 값을 여러 방식으로 적을 수 있는 칸에 예시 하나를 띄워 두면 오류가 크게 줄어듭니다. 글자를 직접 받는 인풋이 대상이고, 목록에서 고르는 요소에는 애초에 필요하지 않습니다.

검색 칸도 자주 쓰는 자리입니다. 여기서는 예시가 아니라 검색 범위를 보여 줍니다. "문서 제목이나 본문 검색" 이라고 적어 두면 사용자는 제목만 검색되는 줄 알고 포기하지 않습니다. 자유롭게 쓰는 긴 칸에서도 비슷하게 씁니다. 회의록 제목 칸에 2월 3일 기획 회의 를 띄워 두면 사람들이 대체로 그 모양을 따릅니다.

반대로 안 쓰는 자리가 더 많습니다. 이름이나 이메일처럼 라벨만으로 충분한 칸에는 넣지 않습니다. 모든 칸에 예시를 넣으면 회색 글자가 열두 줄 깔리고, 화면에서 눈이 멈출 자리가 없어집니다. 버튼 위 한 단어처럼 제품 곳곳에 박히는 짧은 문구를 마이크로카피라 부르는데, 그중에서 이 자리는 넣을 이유가 분명할 때만 채우는 쪽입니다.

"라벨을 없애고 플레이스홀더로 대체했는데, 입력 시작하면 무슨 칸인지 사라져요."

공간을 아끼려고 라벨을 안으로 넣었다가 검토 단계에서 문제가 됐다는 말입니다.

"더 흐리게 하면 대비가 기준에 안 맞습니다. 라벨을 밖으로 빼는 게 맞아요."

색을 조절해 해결할 문제가 아니라 구조를 바꿀 문제라는 지적입니다.

"비밀번호 규칙을 여기 넣어 뒀는데 정작 타이핑할 때 안 보입니다."

지키면서 봐야 하는 문장을 사라지는 자리에 담았다는 뜻입니다.

페이지덱 가입 폼에서 민서가 이 문제를 한 번 겪었습니다. 화면을 짧게 만들려고 라벨을 모두 칸 안으로 넣었더니, 사용성 테스트에서 다섯 명 중 둘이 마지막 검토 화면에서 어느 칸이 회사 이메일이고 어느 칸이 개인 이메일인지 몰라 되돌아갔습니다.

민서가 라벨을 칸 밖 위로 다시 빼고 안에는 예시만 남겼습니다. 화면이 한 화면 반으로 길어졌는데 중간에 그만두는 비율은 오히려 줄었습니다. 지현이 그 결과를 보고 폼 화면은 짧은 것보다 되묻지 않는 것이 먼저라고 정리했습니다.

라벨을 대신할 수 있다고 보는 것이 가장 흔한 오해입니다. 칸 안에 이름이 들어가 있으면 화면이 깔끔해 보이고, 디자인 시안에서는 비어 있는 상태만 보이니 문제가 드러나지 않습니다. 실제로는 입력을 시작한 순간부터 그 칸의 이름이 없는 상태가 됩니다. 값을 다 채운 뒤 잘못된 곳을 고치려는 사람은 어느 칸이 무엇인지 다시 세어 봐야 하고, 스크린 리더를 쓰는 사람에게는 이름 없는 칸 열두 개가 됩니다.

흐릴수록 예시처럼 보여 좋다고 생각하는 것도 자주 나옵니다. 입력값과 구별해야 한다는 판단 자체는 맞습니다. 다만 밝기 차이를 계속 줄이면 어느 지점에서 접근성 기준을 넘어가고, 그 뒤로는 저시력 사용자에게 빈 칸과 다르지 않습니다. 구별은 색으로만 하지 않아도 됩니다. 라벨을 밖에 두면 값과 예시를 혼동할 일 자체가 줄어듭니다.