개발
잡다 회원 가입 UI 개선기
koreacat
2024. 1. 31. 22:18
잡다의 회원 가입 수를 늘릴 방법을 고민하던 중 placeholder에 대한 흥미로운 내용을 발견했다.
HTML의 input 태그를 사용할 때 placeholder 속성을 사용하는 것은 사용자 인터페이스(UI)의 가독성을 높이는 방법이다. placeholder는 일종의 짧은 힌트를 제공하여 사용자가 입력 필드에 입력해야 하는 내용을 이해하는 데 도움이 된다. 그러나, placeholder만으로 label을 완전히 대체하는 것은 좋지 않다.
input 태그에 label 없이 placeholder 로 설명을 대체하는 경우 사용자 경험이 떨어질 수 있다는 내용이었다.
label 대신 placeholder만 쓰면 UI도 깔끔하고 신경쓸 것도 줄어드는데 사용자들에겐 왜 안좋을까?
- 화면 읽기 도구나 보조 기술을 사용하는 사람들에게 label은 필수다. 이 도구들은 placeholder 텍스트를 읽지 않을 수 있기 때문에, label 없이 placeholder만 사용하면 이런 사용자들에게 입력 필드의 용도를 설명하는 정보가 누락될 수 있다.
- 사용자가 입력 필드에 데이터를 입력하면 placeholder 텍스트는 사라진다. 이로 인해 사용자가 이미 입력한 정보를 확인하거나 수정해야 할 경우, 해당 필드가 어떤 정보를 요구하는지 기억해야만 하는 문제가 발생한다. 반면에 label은 항상 화면에 표시되므로 사용자는 혼란스럽지 않고, 입력 내용을 확인하거나 수정할 수 있다.
- 일부 언어에서는 placeholder 텍스트가 길어질 수 있어서, 사용자 인터페이스에 깔끔하게 들어가지 않을 수 있다. label은 이런 문제를 덜 가지고 있다.
그래서 가능한 한 input 태그에 label을 사용하고, placeholder는 추가적인 지침이나 예제를 제공하는 데 사용하는 것이 좋겠다. 잡다 회원 가입 폼에서는 모든 label이 placeholder로 출력되도록 디자인되어 있어 이것을 개선해보기로 했다.
개선 전 잡다 회원 가입 폼
사용자가 정보를 입력할 때 무엇을 입력하는 지 입력 전에 기억해야하는 문제가 있다.
잡다를 개선하기 위해 다른 레퍼런스를 찾아봤다. 서비스마다 제각각으로 많은 형태가 있었는데, 포커스를 주거나 값을 넣어주면 플레이스 홀더가 위로 올라가 라벨이 되는 형태가 가장 적절해보였다.
개선 후 잡다 회원 가입 폼
기획자와 디자이너분께 위의 내용을 공유해드렸고, 좋은 피드백을 받아 바로 제품에 적용해보았다.
