플레이스홀더와 레이블

왜 플레이스홀더만으로는 부족할까

모바일 화면이 좁다 보니 레이블을 없애고 입력란 안의 회색 글씨로 대신하는 경우가 많아요. 하지만 셔윈(2014)이 정리했듯 글자를 입력하는 순간 안내가 사라져서, 사용자는 '이 칸이 뭐였지?'를 기억에 의존해야 해요. 밀러(1956)가 보인 단기 기억의 한계와 스웰러(1988)의 인지 부하 이론처럼, 이런 불필요한 기억 부담은 실수를 늘려요. 이미 채워진 칸은 빈칸과 구분하기도 어렵고, 입력값을 검토할 때 무엇을 넣은 칸인지 알 수 없어요.

레이블은 밖에, 힌트는 가까이

세클러와 동료들(2014)의 실험에서 레이블을 입력란 위에 두는 등의 양식 지침을 적용하면 오류와 완료 시간이 줄었어요. 모바일에서는 레이블을 입력란 바로 위에 두는 세로 배치가 가장 안정적이에요. '예: 010-1234-5678' 같은 형식 힌트는 크리스천과 동료들(2007)의 연구처럼 입력란 가까이에 두면 첫 시도에 맞게 입력하는 비율이 올라가요. 힌트도 사라지지 않도록 입력란 아래 작은 글씨로 두는 게 좋아요. 입력 중 오류 표시는 인라인 유효성 검사를 참고하세요.

접근성 기준

플레이스홀더는 보통 연한 회색이라 WCAG 2.2(W3C, 2023)의 텍스트 대비 1.4.3 기준을 못 넘는 경우가 많아요. 색채 대비를 높이면 이번엔 이미 입력된 값처럼 보이는 문제가 생겨요. 또 3.3.2 기준은 입력에 필요한 레이블이나 안내를 요구해요. W3C 튜토리얼(n.d.)처럼 label 요소를 입력란과 연결하면 화면낭독기가 이름을 읽어 주고, 레이블을 눌러도 입력란에 초점이 가서 누르는 영역도 넓어져요.

자주 묻는 질문

플레이스홀더를 아예 쓰면 안 되나요?

레이블을 대신하지만 않으면 괜찮아요. 짧은 예시 정도로만 쓰고, 중요한 안내는 항상 보이는 곳에 둬요.

플로팅 레이블은 괜찮은가요?

레이블이 계속 보이므로 플레이스홀더만 쓰는 것보다 낫지만, 작은 글씨의 대비와 크기를 꼭 확인해요.

출처 검토일: 2026-10-27

참고문헌

1. Sherwin, K. (2014, May 11). Placeholders in form fields are harmful. Nielsen Norman Group. 플레이스홀더를 레이블 대신 쓸 때 생기는 문제를 정리한 글이라, 입력란 설계에 참고하면 도움이 돼요.
2. Seckler, M., Heinz, S., Bargas-Avila, J. A., Opwis, K., & Tuch, A. N. (2014). Designing usable web forms: Empirical evaluation of web form improvement guidelines. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1275–1284). ACM. 양식 지침을 적용하면 오류와 시간이 줄어든다는 실험이라, 레이블 배치의 효과를 설명할 때 참고하면 도움이 돼요.
3. Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological Review, 63(2), 81–97. 단기 기억 용량의 한계를 다룬 고전이라, 사라진 플레이스홀더를 기억해야 하는 부담을 설명할 때 참고하면 도움이 돼요.
4. Sweller, J. (1988). Cognitive load during problem solving: Effects on learning. Cognitive Science, 12(2), 257–285. 작업 기억에 불필요한 부담을 주면 수행이 떨어진다는 인지 부하 연구라, 레이블을 계속 보이게 하는 근거로 참고하면 도움이 돼요.
5. Christian, L. M., Dillman, D. A., & Smyth, J. D. (2007). Helping respondents get it right the first time: The influence of words, symbols, and graphics in web surveys. Public Opinion Quarterly, 71(1), 113–125. 입력란 옆 기호와 예시가 정확한 형식 입력을 돕는다는 연구라, 형식 힌트 위치를 정할 때 참고하면 도움이 돼요.
6. World Wide Web Consortium. (n.d.). Labeling controls. Web Accessibility Tutorials. label 요소 연결 방법을 설명해, 화면낭독기가 입력란 이름을 읽게 할 때 참고하면 도움이 돼요.
7. World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 레이블 제공(3.3.2)과 텍스트 대비(1.4.3) 기준이 있어, 흐린 플레이스홀더 문제를 판단할 때 참고하면 도움이 돼요.