SOYOYU
폼

<select>

옵션 목록에서 선택하는 드롭다운. 모바일 친화 + a11y 자동.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

●●○○○낮음

직접 SEO 영향 적음. 옵션 텍스트는 인덱싱.

GEO

●●●●○높음

AI 에이전트의 옵션 선택 자동화에 native select가 압도적. 커스텀 dropdown은 추측.

AEO

●●○○○낮음

답변 인용에 직접 영향 적음.

A11y

●●●●●결정적

모바일 native picker (iOS 휠, Android modal)가 사용자에게 익숙. 키보드 단축키 자동.

올바른 사용

  • 옵션 5-30개일 때 표준
  • label과 짝, autocomplete와 짝
  • optgroup으로 그룹화
  • multiple은 신중히 (UX 친숙도 낮음)
국가 선택
<label for="country">국가</label>
<select id="country" name="country" autocomplete="country">
  <option value="">선택</option>
  <option value="kr">대한민국</option>
  <option value="us">미국</option>
</select>

autocomplete=country로 자동 입력 지원.

optgroup 그룹화
<select id="city">
  <optgroup label="수도권">
    <option>서울</option>
    <option>인천</option>
  </optgroup>
  <optgroup label="강원·충청">
    <option>강원</option>
    <option>충북</option>
  </optgroup>
</select>

옵션이 많을 때 그룹화. 스크린리더가 그룹명 함께 발화.

자주 보는 안티패턴

  • div + JS로 커스텀 dropdown (모바일 UX 손해)
  • label 누락
  • 옵션 100개+에 검색 없음
  • appearance:none만 적용하고 화살표 누락
커스텀 div dropdown
<div className="dropdown" onClick={...}>
  선택
  <div className="options">
    <div onClick={...}>옵션 1</div>
  </div>
</div>

모바일 native picker 손실. 키보드·스크린리더·AI 모두 어려움.

label 없음
<select>
  <option>선택</option>
</select>

스크린리더가 "콤보 상자"만. 무엇을 선택하는지 불명.

해설

옵션 목록에서 하나(또는 여러 개)를 선택하는 표준 컨트롤. 디자이너가 가장 싫어하는 태그지만 — 모바일 UX·a11y·AI 호환성에서 압도적. 커스텀으로 갈아탈 정당한 이유는 좁다.

SEO 관점에서 select의 옵션 텍스트는 검색엔진이 인덱싱. "이 사이트는 어떤 국가를 지원하나?"에 select의 option 텍스트가 답변 자료.

GEO 관점에서 AI 에이전트가 옵션 선택 자동화에 native select가 압도적. accessibility tree에서 combobox + 옵션 목록이 명확. 커스텀 dropdown은 div + click으로 추측, 정확도 떨어짐.

A11y 관점에서 native select는 모든 환경에서 잘 작동. iOS는 휠 피커, Android는 modal dropdown, 데스크탑은 native popup. 키보드 사용자에게는 방향키로 옵션 이동, 첫 글자로 점프, Enter/Esc로 확정/취소가 무료. 시리즈 #12에서 깊이 다뤘듯 — 모바일 옵션 선택 성공률이 native 96% vs 커스텀 평균 78%.

자주 보는 안티패턴: 커스텀 div dropdown(모바일 UX 손실, 키보드 단축키 직접 구현 필요, AI 자동화 어려움), label 누락(시리즈 #2 — 모든 입력에 라벨 필수), 옵션 100개+에 검색 기능 누락(이런 경우는 ARIA combobox 또는 라이브러리로 갈 정당한 이유), appearance: none만 적용하고 드롭다운 화살표 누락(시각 사용자가 클릭 가능임을 모름).

언제 native select가 부족한가:

  • 옵션 안에 아이콘이나 풍부한 콘텐츠
  • 검색 가능해야 함
  • 멀티 선택 + 검색

이 세 가지 중 하나라도 필수면 — Radix Select, Headless UI Combobox 같은 검증된 라이브러리로. 직접 만들지 말 것.

optgroup으로 그룹화 — 옵션이 많을 때 카테고리별로 묶어 시각·시맨틱 모두 명확. "수도권 / 강원·충청" 같은 그룹명을 스크린리더가 함께 발화.

autocomplete 표준값 — country, address-level1, currency 등 select에 어울리는 표준값들. type+autocomplete 조합이 자동 입력 정확도를 결정.

CSS로 디자인 — appearance: none으로 native 화살표 제거 후 CSS 배경 이미지로 커스텀 화살표. 시각 80%까지 자유. 옵션 목록 자체의 디자인은 불가(브라우저 native UI). 옵션 디자인이 진짜 필요하면 그때 ARIA combobox.