레이블(Label)

레이블(Label)은 사용자 인터페이스(UI)에서 정보의 종류나 입력 필드의 목적을 설명하는 텍스트 요소로, 사용자가 UI를 쉽게 이해하고 사용할 수 있도록 돕는 역할을 합니다. 라벨이라고도 불리며, 특히 입력 필드, 체크박스, 라디오 버튼 등의 요소와 함께 사용됩니다. 레이블은 간결하면서도 직관적인 정보를 제공하여, 사용자가 어떤 정보를 입력해야 하는지 쉽게 파악할 수 있도록 합니다.

레이블 사용 예시

버튼 및 아이콘 설명: 중요한 기능을 담고 있는 버튼이나 아이콘에도 레이블을 추가하여, 기능을 명확히 설명하고 오작동을 방지합니다. 예를 들어, “저장”, “취소”, “제출” 등의 버튼에는 명확한 레이블이 필요합니다.

폼 입력 필드: 회원 가입 또는 로그인 페이지에서 ‘이름’, ‘이메일 주소’, ‘비밀번호’ 등의 레이블은 사용자에게 각 필드에 입력해야 할 정보를 명확히 알려줍니다.

체크박스와 라디오 버튼: 사용자에게 특정 옵션을 선택하도록 유도할 때 레이블을 붙여 옵션의 의미를 설명합니다. 예를 들어, “동의합니다” 체크박스 또는 “남성”, “여성” 등의 라디오 버튼에 레이블을 달아 사용자가 선택 항목을 쉽게 이해할 수 있도록 합니다.

레이블 설계 시 주의사항

간결하고 명확한 표현

레이블은 짧고 직관적인 텍스트로 구성하여 사용자가 한눈에 의미를 파악할 수 있도록 해야 합니다. 지나치게 긴 설명이나 복잡한 용어는 사용자의 혼란을 초래할 수 있습니다.

레이블과 요소의 연관성 유지

레이블은 설명하는 입력 필드 또는 UI 요소와 가까운 위치에 있어야 합니다. 레이블과 해당 요소 사이에 너무 큰 간격이 있으면 사용자가 관련성을 인지하기 어렵습니다.

접근성 고려

레이블은 스크린 리더 등 보조기술을 사용하는 사용자도 이해할 수 있도록 설계해야 합니다. HTML에서는 label 요소를 사용해 해당 입력 필드와 레이블을 묶어주거나 aria-label 속성을 활용하여 접근성을 개선할 수 있습니다.

컨텍스트에 맞는 스타일링

레이블은 UI와 조화롭게 스타일링되어야 합니다. 사용자가 정보 입력을 쉽게 인지할 수 있도록, 레이블 텍스트는 적절한 색상과 크기로 표시해야 합니다.

레이블과 플레이스홀더(Placeholder)의 차이

레이블 관련 참고 자료

WCAG 2.1 (Web Content Accessibility Guidelines): WCAG 2.1 – 웹 접근성 지침으로, 레이블의 접근성 요구 사항에 대해 설명합니다.