셀렉트

화면에서 값을 받는 방법이 글자 입력뿐이던 시절에는 같은 값이 여러 표기로 들어왔습니다. 가입 폼에서 소속 부서를 글자로 받으면 개발, 개발팀, Dev, 엔지니어링이 한 표에 섞여 쌓입니다. 사람 눈에는 같은 부서인데 집계를 내려면 네 줄을 손으로 합쳐야 하고, 다음 달에 개발실이라는 표기가 하나 더 늘어납니다.

받는 쪽만의 문제가 아니었습니다. 쓰는 쪽에서도 무엇을 적어야 하는지 알 수 없습니다. 국가를 적으라는 칸 앞에서 대한민국인지 한국인지 Korea인지 고민하다가, 무엇을 적어도 저장이 안 되는 경우가 생깁니다. 제품이 정답을 하나로 정해 두고 그 말을 화면에 적어 주지 않았기 때문입니다.

답이 미리 정해진 값이라면 사용자가 적을 이유가 없습니다. 목록을 보여 주고 그중에서만 고르게 하면 표기가 하나로 모이고 오타가 사라집니다. 다만 선택지를 전부 펼쳐 두면 질문 하나가 화면 절반을 먹습니다. 셀렉트는 그 목록을 접어 두고 필요할 때만 펼치는 방식으로 두 문제를 함께 해결한 요소입니다.

셀렉트는 세 상태를 오가며 작동합니다. 접혀 있을 때는 현재 고른 값이나 안내 문구를 보여 주고, 누르면 목록이 펼쳐지고, 하나를 고르면 다시 접히며 그 값이 자리에 남습니다. 설계에서 정할 것은 넷입니다.

1. 접힌 상태에 무엇을 둘지 — 아직 고르지 않았으면 선택하세요 같은 안내 문구를 넣습니다. 이 문구는 목록 안의 항목이 아니라 자리를 지키는 표시라서, 사용자가 그것을 값으로 고를 수 없게 막아 둡니다.
2. 기본값을 넣을지 — 대부분이 같은 값을 고르는 자리라면 미리 넣어 두는 쪽이 빠릅니다. 대신 미리 넣은 값은 사용자가 확인하지 않고 넘깁니다. 결제 통화나 권한 범위처럼 잘못 넘어가면 되돌리기 어려운 값에는 기본값을 두지 않고 비워 둡니다.
3. 목록의 순서 — 이름 순, 자주 고르는 순, 논리 순 가운데 하나를 고릅니다. 요금제 주기처럼 값 사이에 순서가 있는 항목은 이름 순으로 늘어놓으면 오히려 읽기 어렵습니다. 항목이 열두 개를 넘으면 자주 고르는 셋을 맨 위에 따로 묶고 그 아래에 나머지를 붙이는 방식을 씁니다.
4. 키보드로 다룰 수 있게 하기 — 탭으로 칸에 닿고 화살표로 항목을 옮기고 엔터로 고르는 동작이 마우스 없이 되어야 합니다. 글자를 치면 그 글자로 시작하는 항목으로 뛰는 동작도 함께 넣습니다. 칸 위의 라벨을 요소와 묶어 두지 않으면 화면 읽기 도구가 무엇을 고르는 칸인지 읽어 주지 못하고, 이런 항목이 접근성 점검에서 가장 많이 걸립니다.

좁은 화면에서는 모양이 달라집니다. 모바일에서는 기기가 제공하는 선택 화면이 아래에서 올라오는 경우가 많아서, 같은 요소가 기기에 따라 다르게 보입니다. 목록의 순서와 문구는 그대로 지켜지지만 펼쳐진 모습을 화면마다 똑같이 맞추려는 시도는 대개 값이 크고 얻는 것이 적습니다.

고르는 요소 사이의 선택은 대개 선택지 개수로 갈리고, 셀렉트는 그 가운데 구간을 맡습니다. 쓰이는 방식은 넷으로 갈립니다.

1. 선택지가 다섯에서 열다섯 개쯤인 값 — 소속 부서, 표시 언어, 결제 주기가 이 구간에 들어갑니다. 둘셋뿐이면 여럿 중 하나만 고르는 라디오 버튼으로 펼쳐 두는 쪽이 빠르고, 수십 개를 넘으면 입력하며 후보를 좁히는 쪽으로 넘어갑니다.
2. 질문이 여러 개 있는 폼 — 접혀 있어 자리를 적게 먹습니다. 질문 여덟 개를 모두 펼쳐 두면 화면이 세 배로 길어지고 사용자는 끝까지 내려가기 전에 그만둡니다.
3. 뒤에서 집계해야 하는 값 — 값이 정해져 있어 그대로 셀 수 있습니다. 글자로 받은 칸은 집계 전에 표기를 합치는 작업이 늘 붙습니다.
4. 쓰지 않는 자리 — 여러 개를 함께 골라야 하면 체크박스를 쓰고, 켜고 끄는 두 상태뿐이면 토글을 씁니다. 목록을 만들 수 없는 값은 글자를 직접 받는 인풋의 몫입니다.

"부서를 인풋에서 셀렉트로 바꿉시다. 지금 표기가 열두 가지예요."

자유 입력 때문에 집계가 안 되는 칸을 목록으로 바꾸자는 제안입니다.

"선택지가 세 개인데 굳이 접을 이유가 있나요. 라디오로 깔면 한 번에 보여요."

개수가 적은 자리에 셀렉트를 쓰면 클릭이 하나 늘어난다는 지적입니다.

"권한 셀렉트에 기본값 넣지 마세요. 확인 안 하고 넘어갑니다."

잘못 저장되면 되돌리기 어려운 값이라 비워 두자는 요청입니다.

페이지덱에서는 민서가 설정 화면의 칸들을 요소별로 다시 정리했습니다. 부서와 표시 언어는 셀렉트로 바꾸고, 알림 종류 셋은 켜고 끄는 자리라 토글로 두고, 문서 권한은 선택지가 셋뿐이라 라디오로 펼쳤습니다. 태오가 키보드만으로 모든 칸을 지나갈 수 있는지 확인하면서 라벨이 묶이지 않은 셀렉트 두 개를 찾아냈습니다.

접어 두니 항상 낫다고 읽는 경우가 가장 많습니다. 자리를 적게 먹는 것이 눈에 보이는 이점이라 그렇게 읽힙니다. 하지만 접힌 목록은 누르기 전까지 안이 보이지 않습니다. 선택지가 둘셋인 자리를 셀렉트로 접으면 사용자는 고를 것이 몇 개인지도 모른 채 한 번 더 눌러야 합니다. 요금제 셋을 셀렉트에 넣으면 값과 조건을 나란히 견줄 기회가 사라져서, 화면은 깔끔해지고 결제까지 가는 비율은 떨어집니다. 접는 판단은 자리를 아끼는 값과 감추는 값을 함께 놓고 정합니다.

라디오 버튼과 같은 기능이니 아무거나 써도 된다고 읽는 것도 흔합니다. 둘 다 하나만 고르게 하는 요소라서 기능만 보면 같습니다. 그런데 하는 일이 다릅니다. 라디오는 선택지를 나란히 놓아 견주게 하고 셀렉트는 목록을 감춰 자리를 아낍니다. 사용자가 비교해야 하는 값이면 라디오, 이미 답을 알고 있어 찾아 고르기만 하면 되는 값이면 셀렉트입니다. 이 구분 없이 폼 전체를 셀렉트로 통일하면 견줘야 하는 질문에서 이탈이 늘어납니다.