#
서비스 기획
2022-12-21

로그인 텍스트박스에 레이블을 달아야할까?

UI를 만들 때에는 많은 벤치마킹을 통해서 만들고는 합니다.

그렇게 해서 가장 알맞고 사용자들에게 편한 UI를 선택하게 되는데요.

오늘은 로그인과 회원가입 UI에 대해서 보겠습니다.

로그인과 회원가입 UI는 많이 봐왔던건 레이블이 있는 UI였었는데, 이번에 둘러보며 레이블이 없는 UI를 많이 보게 되었습니다.

왼쪽 부터 무신사, 쏘카, 쿠챠, 글로우픽

그래서 레이블이 있는 것이 더 깔끔한 것인가 없는 것이 더 깔끔한 것인가에 대한 생각을 해보았는데요.

이런저런 글을 찾아보며 레이블은 꼭 필요하다는 것이라는 걸 알게 되었습니다.

왜 placeholder만 쓰면 안될까요?

1. 번역문제

브라우저에서는 placeholder 까지 번역해주지 않는다고 합니다.

2. 접근성

레이블 대신 사용하는 경우 스크린 리더나, 보이스오버를 사용하는 유저들은 이 내용을 읽기 힘들다고 합니다.

3. 힌트가 사라짐

클릭 시에 placeholder가 사라지게 되는데요. 사람의 기억력은 짧기 때문에

무엇을 입력해야 하는지 헷갈릴 때가 있는데 이런 문제를 방지하기 위해 꼭 레이블을 제공해야 한다고 합니다.

4. 힌트의 제한

placeholder는 인풋박스 너비로 제한이 됩니다. 모바일 웹일 경우 중요한 정보가 잘릴 수 있습니다.

이러한 이유들로 꼭 레이블을 넣어줘야 사용자들에게 편리함을 줄 수 있습니다.

UI를 더 깔끔하게 만들고 싶으면 플로팅 레이블을 넣어주는 것도 방법이 될 수 있습니다.

네이버도 로그인 화면에서 레이블이 없다가 최근 들어서 아이콘을 추가 하였는데요. 로그인 뿐만 아니라

회원가입 시에도 placeholder 만 사용하면 사용자들에게 큰 불편을 줄 수 있습니다.

유익했다면! 이어서 읽어보기:)
피그마 그리드(grid)기능을 통해 깔끔한 디자인 하기

그리드를 통해 UI를 어떻게 깔끔하게 만들 수 있을까요?

입력 필드의 답변타입

입력 필드의 답변타입에는 무엇이 있을까요?

주니어 기획자의 옥에 티 없이 기획하기

깔끔한 기획을 하려면 어떻게 해야 할까요?

지금 바로 밸류랩스와
성공적인 협력을 시작해보세요.
Subscribe to our newsletter.
Thank you! Your submission has been received!
Oops!! Something went wrong while submitting the form.