플레이스홀더(Placeholder)

플레이스홀더(Placeholder)는 인풋 필드(Input Field) 내부에 아주 연한 회색 글씨로 적혀있는 힌트 문구입니다. 사용자가 무엇을 입력해야 할지 망설일 때 길잡이 역할을 하죠. 하지만 이 작은 텍스트 하나가 UX에서는 "천사"가 될 수도, "악마"가 될 수도 있습니다.

플레이스홀더 이미지 예시

플레이스홀더 예시 이미지

플레이스홀더의 핵심 역할

  • 예시 제공: "예: 010-1234-5678"처럼 데이터 형식을 알려줄 때 가장 유용합니다.
  • 단기 힌트: 검색창에 "상품명을 입력하세요"라고 적어두어 사용자가 무엇을 하는 곳인지 즉시 알게 합니다.
  • 공간 활용: 화면이 좁을 때 보조 설명을 넣기에 좋습니다.

절대 하지 말아야 할 '치명적인 실수'

플레이스홀더를 레이블(Label) 대신 쓰지 마세요.

나쁜 설계 (Anti-Pattern)
- 플레이스홀더가 사라져서 입력 내용을 기억하지 못함
- 스크린 리더가 읽기 어려워짐
- 사용자가 입력 창 밖에서 정보를 확인하기 어려움
좋은 설계 (Best Practice)
- 레이블은 항상 입력창 위에 고정
- 레이블과 입력창이 명확히 연결되어 정보 전달 완벽
- 사용자가 입력하기 전에 바로 정보 확인 가능

핵심: 레이블은 '제목'이고, 플레이스홀더는 '설명'입니다.

올바른 활용 가이드 (Best Practices)

  • 보조 정보만 담기: 사용자가 이미 알고 있는 정보라면 플레이스홀더를 쓰지 마세요.
  • 예시를 보여주기: "이메일 주소"보다 "example@email.com"처럼 형식을 보여주는 것이 더 친절합니다.
  • 간결함 유지: 플레이스홀더가 너무 길면 입력창이 지저분해 보입니다. 핵심만 적으세요.
  • 명확한 대비: 너무 진하면 사용자가 이미 입력된 값으로 착각할 수 있습니다. 보통 #999 또는 #ccc 정도의 연한 회색을 사용하세요.

실전 코드 예시 (HTML)

<input type="text" placeholder="이름">

<div class="form-group">
  <label for="user-name">이름</label>
  <input type="text" id="user-name" placeholder="홍길동">
</div>

<div class="form-group">
  <label for="birth-date">생년월일</label>
  <input type="date" id="birth-date" placeholder="YYYY-MM-DD">
</div>

교수님의 실전 팁

"사용자에게 친절한 서비스를 만들고 싶다면, '플레이스홀더를 모두 지워도 사용자가 입력하는 데 아무런 문제가 없는지'를 스스로 자문해 보세요. 만약 지웠을 때 사용자가 혼란을 느낀다면, 그건 플레이스홀더로 해결할 게 아니라 레이블을 더 명확하게 고치거나 헬퍼 텍스트를 추가해야 한다는 신호입니다."

실제 데모