플레이스홀더 텍스트의 대안
UX 디자인 배우기 #92
Today UX 아티클
Medium UXdesign.cc에 올라온 Andrew의 글 Alternatives to Placeholder Text를 원저자의 허락을 받아 번역한 글입니다.
플레이스홀더는 문제를 야기합니다.플레이스홀더 텍스트는 거의 모든 HTML 인풋 유형에서 사용될 수 있는 속성이지만, 플레이스홀더를 제대로 이해하지 못한 디자이너와 개발자들은 망설임 없이 사용하곤 합니다. 복잡한 폼에서 텍스트 도움말을 제공해야겠다는 생각을 하기 쉽고, 혹은 심미성을 높이기 위해 인풋 레이블을 제거해야겠다고 생각하기도 쉽습니다. 하지만, 플레이스홀더 텍스트를 집어넣는 것은 많은 사용성 문제를 야기합니다.
이번 글에서는 흔히 볼 수 있는 안 좋은 사례들을 살펴보고 그 대안을 제안해보도록 하겠습니다.
레이블로 사용된 플레이스홀더
플레이스홀더를 레이블로 쓰는 대신, 레이블을 입력란 위에 배치하세요.폼의 길이를 짧게 하거나 시각적 노이즈를 줄이려고 할 때, 디자이너들은 플레이스홀더 텍스트를 인풋 레이블로 사용합니다. 이렇게 하게 되면 단기 기억에 부담을 주게 됩니다. 유저가 클릭하거나 타이핑하자마자 레이블이 사라지기 때문이죠. 레이블을 다시 보려면 입력한 내용을 지워야만 합니다.
입력란 바로 위에 입력 레이블을 넣어주는 것이 더 낫습니다. 비어있는 입력란은 데이터를 입력하라는 어포던스의 역할을 하기도 합니다. 유저는 채워지지 않은 박스를 보고 어떤 행동을 취해야 하는지 판단하게 됩니다.
예시로 사용된 플레이스홀더
예시 텍스트는 플레이스홀더 대신 입력란 밖에 배치하세요.입력해야 하는 내용의 예시를 제공해주면 유저가 입력할 내용을 쉽게 이해할 수 있습니다. 하지만, 이를 플레이스홀더 텍스트로 보여주게 되면 문제가 발생합니다. 입력란을 눌렀을 때 예시가 사라지고, 무엇까지 입력했는지 헷갈리게 되고, 어포던스 역할을 했던 빈 입력란이 역할을 못하게 됩니다. 그 대신, 예시 텍스트는 입력란 아래에 배치하는 것이 좋습니다.
도움말로 사용된 플레이스홀더
플레이스홀더 텍스트는 도움말로 사용되면 절대 안됩니다.플레이스홀더 텍스트는 보통 입력란에 제대로 내용을 입력하는 데 필요한 더 많은 정보를 제공하기 위해 사용되기도 합니다. 이렇게 하는 것은 앞서 말했던 것과 같은 이유로 좋은 방법이 아니며, 이용되는 텍스트 양 때문에 더 비효율적입니다. 이를 제대로 이해하기 못한 디자이너와 개발자들이 플레이스홀더를 이용해 긴 메시지를 전달하려고 하기도 합니다. 위에 보이는 세 가지 사례처럼 다른 좋은 대안들이 많이 있습니다.
보조 레이블로 사용된 플레이스홀더
플레이스홀더가 아닌 레이블을 보조 레이블로 사용하세요.위와 같이 플레이스홀더를 이용해서 보조 레이블을 사용하고 싶을 수도 있습니다. 하지만, 그 대신 일반적인 레이블로 보조 레이블을 써주면 폼의 사용성이 더 올라갈 것입니다.
플레이스홀더가 없애거나 위에서 언급한 다른 대안으로 대체하면 폼의 사용성 이슈를 줄일 수 있습니다.
그래도 꼭 써야 한다면…
적절한 플레이스홀더
입력란에 적는 텍스트보다 더 옅은 색을 써야 한다
옅은 색상의 플레이스홀더는 일시적인 문구임을 나타내주며, 입력한 텍스트와구분할 수 있게 해준다유저는 빈칸을 채워 넣게 됩니다. 빈칸은 텍스트를 입력하라는 어포던스입니다. 플레이스홀더 텍스트 때문에 입력란에 입력할 수 있다는 점이 제대로 전달되지 못할 수도 있습니다. 특히 플레이스홀더에 진한 색을 사용하면 유저가 이미 입력된 내용이라고 착각할 수 있습니다.
모든 스크린에서 잘 보여야 한다
플레이스홀더 텍스트 색상이 너무 옅으면 모든 스크린에서 보기 어려울 수 있다플레이스홀더 텍스트가 너무 옅어버리면 특정 스크린에서 제대로 보이지 않아 유저가 눈을 찡그리고 봐야 하는 문제가 생길 수 있습니다.
플레이스홀더는 유저가 입력
란을 누르면 사라져야 한다
플레이스홀더 텍스트는 유저가 입력을 시작하기 전까지 계속 보여준다유저가 입력란을 클릭한 후에도 입력을 시작하기 전까지 플레이스홀더가 사라지지 않고 있어야 유저의 단기 기억에 부담이 되지 않습니다.
일반적으로 폼은 보통 플레이스 텍스트가 없을 때 더 사용성이 좋습니다.
플레이스홀더 텍스트가 야기하는 문제에 대해 더 많은 정보를 원하신다면, 닐슨 노먼 그룹의 Katie Sherwin가 플레이스홀더에 대해 쓴 훌륭한 글을 참고하세요.
이 글은 유저 인터페이스 패턴 및 구성요소에 초점을 맞춰 쓰고 있는 시리즈의 일부입니다. 매주 글을 쓰려고 계획하고 있습니다. 이글은 디자인은 사용성과 심미성의 교차점에 초점을 맞춘 유저 인터페이스 패턴 라이브러리를 만들고자 하는 계획의 일환입니다. 만일 흥미가 있으시다면, 새로운 글을 받아보는 구독을 해주세요.
이 프로젝트에 참여하는 데 관심이 있으시다면 (특히 프런트엔드 엔지니어이신 분들), 제 트위터로 연락 많이 주세요.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 Live 최소 1개에서 최대 4개 UX 강좌 (온라인) 줌 Live 강좌 진행하고 있습니다)
[VOD 강좌] (PM/PO/UI/UX) 수강생 모집 중
(인프런에서 총 20개 UX 강좌: 인터넷/VOD 오픈했습니다)
