📝 한줄 요약
드롭다운에서 Other를 고르면 새 필드를 만들지 말고 그 자리가 입력칸으로 바뀌게 하되, 오른쪽 화살표는 살려둬서 언제든 다른 옵션으로 돌아갈 수 있게 한다.
👥 이런 분께 추천
드롭다운에 “기타” 옵션을 넣으면서 직접 입력을 어떻게 받을지 고민하는 경우
AI에게 UI를 맡겼는데 뭔가 어색한 결과가 나와서, 어디까지 구체적으로 요구해야 하는지 궁금한 경우
한 번에 완성되지 않는 UI를 반복해서 다듬는 과정이 궁금한 경우
문제 상황
Work Type과 Reason 드롭다운에 정해진 옵션 외의 값을 받을 수 있어야 했습니다. 흔한 “기타” 옵션이죠. 그런데 이 단순해 보이는 기능이 네 번의 시행착오를 거쳤습니다.
배경: UI를 네 번 고친 과정
네 번의 시행착오
Google 검색 페이지의 스크린샷
1차: 별도의 Reason Details 필드
Other를 고르면 아래에 “Reason Details”라는 새 필드가 나타나는 방식.
반려 이유: 필드값을 하나 더 만드는 것은 좋은 UI가 아닙니다. 화면에 칸이 늘어나면 사용자는 “이것도 채워야 하나”부터 고민하게 됩니다.
2차: 드롭다운 자체를 입력칸으로 교체
Other를 고르는 순간 드롭다운이 통째로 텍스트 입력칸으로 바뀌는 방식.
두 가지 문제가 생겼습니다:
입력칸에 OTHER라는 글자가 미리 들어가 있어서, 사용자가 “이미 입력됨”으로 착각
드롭다운이 사라져 버려서, 마음을 바꿔도 다른 옵션으로 돌아갈 길이 없음
3차: 드롭다운 아래에 입력칸 추가
드롭다운은 그대로 두고 바로 아래에 입력칸이 나타나는 방식. 드롭다운이 살아 있으니 돌아갈 수는 있게 됐지만…
반려 이유: 결국 1차와 같은 문제. 새 필드가 생기는 건 마찬가지입니다.
최종: 같은 자리 입력 + 화살표 유지
상황
동작
Other 선택 직후
같은 자리가 빈 입력칸으로 바뀌고 커서가 들어감
입력칸 안내
placeholder로 “Type your work type”
오른쪽 화살표(∨)
계속 활성. 누르면 옵션 목록이 다시 열림
다른 옵션 선택
입력 모드가 풀리고 일반 드롭다운으로 복귀
키보드
↓로 목록 열기, ↑↓ 이동, Enter 선택, Esc 닫기
새 필드도 없고, 돌아갈 길도 있고, 빈 칸에서 시작하니 착각도 없습니다.
배운 점
필드는 늘리지 않는 방향으로 먼저 고민한다
입력을 하나 더 받아야 할 때 “새 칸을 만든다”가 가장 쉬운 답이지만, 사용자에게는 부담이 하나 늘어나는 일입니다. 기존 칸을 변형해서 받을 수 있다면 그쪽이 낫습니다.
들어간 길은 언제나 되돌아 나올 수 있어야 한다
2차 시도의 결정적 실패는 Other를 고른 순간 다른 선택지로 돌아갈 길이 사라진 것이었습니다. 이 원칙은 주소 필드의 수동입력 전환(검색으로 돌아가는 링크)에도 똑같이 적용됐습니다.
솔직한 소감
“기타 옵션 하나 넣는 데 네 번을 고쳤다”고 하면 비효율 같지만, 반려할 때마다 이유를 말로 정리했더니 그 이유들이 그대로 개발 규칙이 됐습니다. 다음에 비슷한 상황이 오면 이제 한 번에 만들 수 있습니다.
