체크박스(Checkbox)

체크박스(Checkbox)는 웹 또는 앱 개발에서 사용자가 하나 이상의 옵션을 선택할 수 있는 입력 요소로, 동의, 선택, 허용 등의 선택 사항을 표시하는 데 사용됩니다. 각 옵션을 선택하거나 해제할 수 있으며, 여러 체크박스를 그룹으로 묶어 사용자가 다중 선택할 수 있게 할 수도 있습니다.

체크박스 사용 예시

• 회원 가입 페이지의 이용 약관 동의: 사용자에게 이용 약관에 동의할지 묻는 체크박스를 제공하여 동의 여부를 선택하게 합니다.
• 상품 필터링: 이커머스 웹사이트에서 카테고리 필터 또는 색상, 브랜드 등의 옵션을 체크박스를 통해 제공하여, 사용자가 원하는 조건을 선택하여 상품을 필터링할 수 있도록 합니다.
• 이메일 구독 여부 선택: 사용자에게 이메일 수신 동의 여부를 물어보는 체크박스를 통해 구독 여부를 선택하게 할 수 있습니다.

체크박스 설계 시 주의사항

1. 그룹화된 체크박스
   • 체크박스는 그룹으로 묶어서 사용하는 경우가 많습니다. 예를 들어, 관심사 선택이나 여러 조건을 한 번에 설정할 수 있는 필터링 기능을 제공할 때 그룹화된 체크박스를 사용하여 사용자가 관련 옵션을 다중 선택할 수 있게 합니다.
   • HTML에서는 <fieldset>과 <legend>를 사용하여 관련 체크박스를 시멘틱하게 그룹화할 수 있습니다.
2. 선택 여부 시각화
   • 체크박스는 선택되었을 때 체크 마크(✓)로 표시되며, 선택되지 않은 상태에서는 빈 상자로 표시됩니다. 이를 통해 사용자가 선택 상태를 명확하게 인지할 수 있습니다.
3. 필수 입력 항목이 아님
   • 체크박스는 기본적으로 필수 선택 항목이 아니므로, 사용자가 선택하지 않아도 제출이 가능합니다. 특정 옵션을 반드시 선택해야 하는 경우라면 라디오 버튼 등의 다른 입력 요소를 고려할 수 있습니다.
4. 접근성 고려
   • 체크박스는 키보드와 스크린 리더 사용자를 위해 접근성을 지원해야 합니다. <label> 요소를 활용하여 각 체크박스에 명확한 라벨을 제공하고, 키보드 Tab 키로 체크박스를 탐색할 수 있게 합니다.
   • 보조 기술 사용자가 선택 여부를 쉽게 인지할 수 있도록 aria-checked 속성 등을 설정하여 접근성을 강화할 수 있습니다.

체크박스와 라디오 버튼의 차이점

HTML 체크박스 예제

기본적인 HTML 체크박스 사용 예시입니다.

<form>
  <fieldset>
    <legend>관심사 선택</legend>
    <label>
      <input type="checkbox" name="interests" value="sports">
      스포츠
    </label>
    <label>
      <input type="checkbox" name="interests" value="music">
      음악
    </label>
    <label>
      <input type="checkbox" name="interests" value="movies">
      영화
    </label>
  </fieldset>
</form>

위 예시에서 사용자는 스포츠, 음악, 영화 중 여러 개를 동시에 선택할 수 있습니다.

체크박스 관련 참고 자료

MDN Web Docs – Checkbox: Checkbox documentation – MDN 웹 문서에서 체크박스에 대한 추가 정보를 확인할 수 있습니다.