문의 폼의 '문의 유형' 목록에 브랜드 색을 입히고 옵션마다 아이콘을 넣으려는 순간, 개발자는 벽에 부딪힌다. select 태그는 테두리와 글자 크기 정도만 바꿀 수 있을 뿐, 정작 펼쳐지는 옵션 목록은 배경색 하나 손댈 수 없기 때문이다. 그래서 지난 20년간 업계의 답은 하나였다. 멀쩡한 select를 숨기고 div와 자바스크립트로 가짜 셀렉트를 처음부터 다시 짓는 것. 그 순간 라이브러리 용량도, 키보드 조작도, 스크린리더 대응도 전부 개발자의 숙제가 된다.
select는 왜 '못 꾸미는 태그'였나
펼쳐지는 옵션 목록은 웹 페이지가 아니라 운영체제가 그리는 영역이었다. 같은 코드라도 윈도우, 맥, 안드로이드에서 제각각 다르게 렌더링되고, CSS는 그 안까지 들어가지 못했다. 체크박스, 버튼, 입력창이 차례로 스타일의 자유를 얻는 동안 select만 마지막까지 남아 있었던 이유다.
appearance: base-select 한 줄이 바꾸는 것
이제 CSS에서 appearance: base-select를 선언하면 브라우저가 셀렉트를 '스타일 가능한 모드'로 그리기 시작한다. 펼쳐지는 목록 상자는 ::picker(select) 선택자로 배경·테두리·그림자·모서리를 다듬고, option 하나하나의 글꼴과 간격, 선택 표시(체크마크)까지 전부 CSS로 제어된다. 목록이 스르륵 열리는 애니메이션도 자바스크립트 없이 붙는다.
옵션 안에 아이콘과 이미지를 넣는다
이 모드에서는 option 안에 아이콘이나 이미지 마크업이 허용된다. 국가 선택에 국기를, 결제 수단에 카드 로고를, 담당자 선택에 프로필 사진을 넣는 일이 표준 태그만으로 가능해진 것이다. 돌아보면 가짜 셀렉트를 지어 온 이유의 대부분이 바로 이 두 가지 — 색과 아이콘이었다.
가짜 셀렉트가 몰래 치르던 비용
- 용량과 속도 — 옵션 몇 개를 보여주려고 수십 킬로바이트짜리 드롭다운 라이브러리를 실어 왔다.
- 접근성 — 키보드 방향키 이동, 글자 입력으로 옵션 찾기, 스크린리더 낭독을 직접 재구현해야 했고, 대부분은 어딘가 빠져 있었다.
- 모바일 경험 — 진짜 select라면 공짜로 얻는 기기 네이티브 선택 휠을 포기하고, 손가락에 어긋나는 커스텀 목록을 손님에게 내밀어 왔다.
지금 도입해도 안전한 이유
이 기능의 설계 자체가 점진적 향상이다. 지원하지 않는 브라우저는 appearance: base-select 한 줄을 조용히 무시하고 기본 셀렉트를 그대로 보여준다. 기능이 깨지는 것이 아니라 꾸밈만 빠지는 것이므로, 오늘 적용해도 어떤 손님도 불편을 겪지 않는다. 새 브라우저를 쓰는 손님부터 순서대로 더 나은 화면을 받을 뿐이다.
셀렉트 박스 하나에도 이렇게 매년 새로운 표준이 도착한다. CYAN은 새 기능이 필요할 때 라이브러리부터 까는 대신 브라우저가 이미 표준으로 제공하는 것을 먼저 확인한다. 우리가 만드는 사이트가 가볍고 오래가는 이유는 대체로 이런 사소한 선택들의 합이다.
