콤보박스

고르는 요소는 원래 접힌 목록 하나로 충분했습니다. 요금제 셋, 알림 주기 넷 정도면 눌러서 펼치고 눈으로 훑어 고르는 데 2초면 됩니다.

선택지가 늘면서 이 방식이 버티지 못했습니다. 가입 폼의 국가 항목에는 후보가 200개 가까이 들어갑니다. 목록을 펼치면 화면 절반이 알파벳순 이름으로 덮이고, 사용자는 스크롤을 굴리며 자기 나라를 찾습니다. 키보드로 첫 글자를 눌러 점프하는 방법이 있긴 했지만 아는 사람이 거의 없었고, 같은 글자로 시작하는 나라가 열 개씩 있어서 그마저도 몇 번을 더 눌러야 했습니다.

그러는 동안 사용자는 검색에 익숙해져 있었습니다. 찾는 것이 있으면 목록을 뒤지는 대신 몇 글자를 치는 쪽이 먼저 손에 붙었습니다. 200개를 훑는 대신 "kor" 세 글자를 치면 두 줄만 남는다는 걸 알고 나면 스크롤로 돌아갈 이유가 없습니다.

콤보박스는 이 두 가지를 한 부품에 합친 것입니다. 글자를 받는 입력창과 고르는 목록을 붙여 놓고, 친 글자로 목록을 좁혀 나갑니다. 이름에 든 "콤보" 가 그 합침을 가리킵니다.

입력창에 친 글자를 조건으로 후보 목록을 걸러 보여 주고, 사용자가 그중 하나를 고르면 그 값이 확정됩니다. 화면에서 일어나는 일은 다섯 단계입니다.

1. 평소에는 인풋과 같은 모양의 칸 하나만 보입니다. 접힌 목록과 달리 커서를 바로 받을 수 있게 생겨야 사용자가 칠 생각을 합니다.
2. 칸을 누르면 목록이 펼쳐집니다. 아무것도 안 친 상태에서 전체를 보여 줄지, 최근에 고른 것이나 추천 몇 개만 보여 줄지는 설계 결정입니다. 후보가 수천 개면 전체를 여는 쪽이 오히려 방해가 됩니다.
3. 글자를 칠 때마다 목록이 좁혀집니다. 어떻게 좁힐지를 정해야 합니다. 앞글자만 맞춰 거르면 "대한민국" 을 찾는 사람이 "민국" 을 쳤을 때 아무것도 안 나오고, 중간 어디든 포함되면 걸러지게 하면 후보가 덜 줄어듭니다. 한글이면 초성 입력도 함께 받을지가 하나 더 붙습니다.
4. 위아래 화살표로 후보 사이를 옮기고 엔터로 확정합니다. 마우스로 클릭해도 같습니다. 이 단계가 빠지면 손을 키보드에서 마우스로 옮겨야 해서 입력으로 얻은 속도가 그대로 사라집니다.
5. 확정된 값이 칸에 남고 목록이 닫힙니다.

여기서 정할 것이 둘 더 있습니다. 하나는 목록에 없는 값을 허용할지입니다. 국가처럼 정해진 집합이면 목록 밖 입력을 막고, 태그처럼 새로 만들 수 있는 값이면 "새로 추가" 줄을 맨 아래 둡니다. 다른 하나는 후보가 하나도 안 남았을 때입니다. 빈 목록만 덩그러니 두면 사용자는 컴포넌트가 고장 난 줄 압니다. "검색 결과 없음" 한 줄과 함께 다음에 할 수 있는 행동을 적습니다.

접근성은 이 부품에서 특히 손이 많이 갑니다. 입력칸과 목록이 서로 다른 요소라서 키보드 내비게이션이 저절로 되지 않고, 지금 몇 개가 남았는지와 어느 후보에 가 있는지를 ARIA 속성으로 따로 알려야 화면을 소리로 듣는 사용자도 같은 정보를 받습니다.

고를 것이 많은 자리 전부입니다. 갈림길은 선택지 개수입니다. 두셋이면 라디오 버튼으로 펼쳐 두는 쪽이 빠르고, 예닐곱까지는 접힌 목록이 낫고, 수십 개를 넘어가면 이 부품으로 넘어옵니다.

가장 익숙한 자리는 국가·통화·시간대처럼 후보가 고정된 긴 목록입니다. 목록이 바뀌지 않으니 화면에 미리 다 실어 두고 브라우저 안에서 거르면 됩니다.

후보가 서버에서 오는 경우도 많습니다. 담당자를 지정하거나 문서에서 동료를 부를 때가 그렇습니다. 이때는 한 글자마다 요청을 보내지 않고 입력이 멎은 뒤 300밀리초쯤 기다렸다 한 번만 보냅니다. "지현" 을 치는 동안 요청이 세 번 나가면 먼저 보낸 응답이 나중에 도착해 목록이 엉키기도 합니다.

날짜나 숫자처럼 형식이 정해진 값에는 쓰지 않습니다. 후보를 늘어놓는 방식 자체가 맞지 않아서, 날짜는 달력에서 고르는 데이트 피커가 따로 맡습니다. 반대로 검색 UX 쪽과는 모양이 비슷해서 자주 섞입니다. 검색창은 친 글자 자체가 결과를 부르지만 이 부품은 목록에서 하나를 확정해야 값이 생깁니다.

"선택지가 60개면 셀렉트 말고 콤보박스로 가시죠."

개수가 기준을 넘었으니 부품을 바꾸자는 제안입니다.

"콤보박스인데 초성 검색이 안 되네요."

"ㅅㅇ" 을 쳐도 "수아" 가 나오지 않는다는 뜻입니다. 한글 이름 목록에서 자주 나오는 요청입니다.

"이거 자유 입력 허용인가요, 목록 안에서만 골라야 하나요?"

목록 밖 값을 받을지 묻는 말입니다. 뒤에서 값을 어떻게 저장할지가 여기서 갈립니다.

페이지덱에서는 문서 공유 대상을 고르는 칸이 이 부품입니다. 처음에는 접힌 목록이었는데, 구성원이 45명이 되면서 이름을 찾는 데만 시간이 걸린다는 말이 나왔습니다. 민서가 콤보박스로 바꿔 시안을 올렸고 태오가 붙이면서 초성 입력과 지연 요청을 함께 넣었습니다.

붙인 뒤에 걸린 것은 따로 있었습니다. 외부 메일 주소로도 공유할 수 있어야 하는데 목록에는 사내 구성원만 있었습니다. 지현이 목록에 없는 값을 허용하는 쪽으로 정하고, 입력한 글자가 메일 주소 모양이면 맨 아래에 "이 주소로 초대" 줄을 띄우기로 했습니다. 개수 문제로 시작한 교체가 값의 범위를 다시 정하는 일로 이어진 셈입니다.

접힌 목록의 상위 호환이라고 생각하는 경우가 많습니다. 검색이 붙어 있으니 언제 써도 손해는 없어 보입니다. 하지만 선택지가 넷인 자리에 이걸 쓰면 사용자는 칠지 고를지부터 판단해야 하고, 그 판단이 눈으로 훑는 시간보다 깁니다. 후보를 거르는 규칙도 얕은 목록에서는 이득이 없습니다. 이 오해가 남으면 화면 전체가 같은 부품으로 덮이고, 선택지가 둘뿐인 질문에도 커서가 깜빡이게 됩니다.

검색창과 같은 것으로 읽는 오해도 잦습니다. 글자를 치면 결과가 좁혀지는 모양이 똑같기 때문입니다. 차이는 결과물에 있습니다. 검색창은 사용자가 친 문자열을 그대로 들고 결과 화면으로 넘어가지만, 이 부품은 목록에서 하나를 확정해야 값이 생깁니다. 이걸 섞으면 사용자가 글자만 치고 엔터를 눌렀는데 값이 비어 있는 상태로 폼이 넘어가는 일이 생깁니다.