HTML select 요소, 드디어 마음대로 꾸밀 수 있게 됐는데… 이걸로 대체 뭘 만든 거야?

웹 개발자의 오랜 숙원, 커스터마이징 가능한 select

웹 프론트엔드를 해본 분이라면 한 번쯤 겪어봤을 거예요. 드롭다운 메뉴, 그러니까 HTML의 <select> 요소를 디자인 시안대로 꾸미려고 했는데, 도저히 CSS로는 안 되는 거죠. 브라우저마다 생김새도 다르고, 내부 옵션 목록의 스타일을 바꾸는 건 거의 불가능에 가까웠거든요. 그래서 지금까지는 대부분 JavaScript 라이브러리로 select를 통째로 다시 만들어 쓰는 게 관행이었어요. React Select, Headless UI, Radix 같은 라이브러리가 괜히 나온 게 아니에요.

그런데 이제 브라우저 차원에서 <select> 요소를 자유롭게 커스터마이징할 수 있는 기능이 들어오고 있어요. CSS의 appearance: base-select라는 새로운 값을 사용하면, 기존 select의 드롭다운 화살표부터 옵션 목록의 레이아웃까지 전부 CSS로 제어할 수 있게 되는 건데요. 아직 실험적 기능이지만 Chrome Canary 등 최신 브라우저에서 이미 테스트해볼 수 있는 상태예요.

근데 이걸로 뭘 만들었냐면요…

CSS-Tricks에 올라온 이 글은 단순히 "이런 기능이 나왔어요"를 소개하는 게 아니에요. 제목부터 "Abusing", 즉 "남용하기"거든요. 새로운 커스터마이징 기능을 활용해서 select 요소로 상상도 못 했던 것들을 만들어본 실험적인 글이에요.

이게 뭐냐면, 기존에는 select 안에 텍스트밖에 못 넣었는데, 이제는 <option> 안에 이미지, 아이콘, 심지어 복잡한 HTML 구조까지 넣을 수 있게 된 거예요. 예를 들어 국가 선택 드롭다운에 국기 이모지만 넣는 게 아니라, 실제 국기 이미지와 국가명, 국가 코드를 한 줄에 예쁘게 배치할 수 있는 거죠.

글에서는 이 기능을 극한까지 밀어붙여요. select 요소 하나로 컬러 피커를 만든다거나, 카드 형태의 선택 UI를 구현하거나, 심지어 애니메이션이 들어간 드롭다운까지 만들어 보여주거든요. 기술적으로는 ::picker(select) 같은 새로운 의사 요소(pseudo-element)를 써서 드롭다운 팝오버 자체의 스타일을 잡고, selectedoption 요소를 활용해서 현재 선택된 항목이 표시되는 방식도 완전히 바꿔버리는 방식이에요.

기술적으로 들여다보면

핵심은 크게 세 가지예요. 첫째, appearance: base-select를 select에 적용하면 브라우저 기본 스타일이 완전히 벗겨져요. 둘째, <option> 안에 자유롭게 HTML을 넣을 수 있어서 리치 콘텐츠가 가능해져요. 셋째, CSS의 앵커 포지셔닝(anchor positioning)이라는 또 다른 새 기능과 결합해서 드롭다운의 위치와 크기를 세밀하게 조절할 수 있어요.

앵커 포지셔닝이 뭐냐면, 특정 요소를 기준점(앵커)으로 삼아서 다른 요소의 위치를 잡는 CSS 기능이에요. 지금까지 드롭다운 메뉴 위치를 잡으려면 JavaScript로 "이 버튼 아래에 메뉴를 띄워줘"라고 계산해야 했는데, 이제 CSS만으로 "이 요소 바로 아래에 붙여줘"가 되는 거예요. 이게 커스터마이징 가능한 select와 만나면서 드롭다운의 위치, 크기, 애니메이션까지 전부 CSS 영역으로 들어온 셈이죠.

다만 글에서도 인정하듯이, 이건 "남용"이에요. select 요소의 시맨틱(의미론적) 목적은 여전히 "여러 옵션 중 하나를 고르는 것"인데, 컬러 피커나 카드 레이아웃으로 쓰는 건 접근성(a11y) 측면에서 문제가 될 수 있거든요. 스크린 리더 사용자에게는 이게 여전히 select로 읽히기 때문에, 시각적으로 화려한 UI와 실제 접근성 경험 사이에 괴리가 생길 수 있어요.

업계 흐름에서 보면

이 기능은 더 큰 흐름의 일부예요. 웹 플랫폼이 점점 더 "JavaScript 없이도 할 수 있는 것"을 늘려가고 있거든요. CSS의 컨테이너 쿼리, :has() 선택자, 뷰 트랜지션 API, 그리고 이번 커스터마이징 가능한 select까지. 예전에는 반드시 JS 라이브러리가 필요했던 기능들이 브라우저 네이티브로 들어오고 있는 거예요.

기존에 select 커스터마이징을 위해 쓰던 라이브러리들, React Select나 Downshift, Headless UI 같은 것들이 당장 사라지진 않겠지만, 장기적으로는 역할이 줄어들 수 있어요. 네이티브 select가 충분히 커스터마이징 가능해지면, 굳이 무거운 JS 라이브러리를 쓸 이유가 줄어드니까요. 특히 성능에 민감한 프로젝트나 경량 사이트에서는 네이티브 접근이 매력적일 거예요.

한국 개발자에게 주는 시사점

아직 실험적 기능이라 당장 프로덕션에 쓰기는 어려워요. 하지만 몇 가지 포인트는 기억해둘 만해요. 우선 디자인 시스템을 구축하고 있는 팀이라면, 네이티브 select 커스터마이징이 안정화되면 컴포넌트 설계가 상당히 심플해질 수 있어요. Select 컴포넌트 하나 만드는 데 들어가는 JS 코드량이 확 줄어들 테니까요.

그리고 CSS를 "레이아웃 잡는 도구" 정도로만 생각했다면, 요즘 CSS가 얼마나 강력해졌는지 한번 살펴보는 것도 좋아요. 특히 프론트엔드 면접에서 "JS 없이 이걸 구현할 수 있나요?"라는 질문이 점점 더 의미 있어지고 있거든요.