UI개발자다 보니, 작업하다보면 기획적인 생각을 자주 하게 된다.

그러다가 이런 ui를 자주 접하였다.

상단의 선택하세요를 클릭하면, 1,2,3,4 그리고 직접입력의 선택지가 제공된다. 1~4까지는 동일한 선택인데 반해, 직접입력은 클릭 시 숨어있던 입력폼<input>가 나타난다.

어떻게 풀어야할까?

어디에서는 에니메이션으로 재미를 주어 푼 경우도 있었는데, 셀렉트 자체가 입력할 수 있다면 어떨까 하는 생각을했고, 그걸 실행에 옮겼다.

selecput

selecput

주요 기능

  1. 셀렉트와 인풋의 조화
  2. 키보드로 접근가능(tab)
  3. callback

1번은 작업의 이유고, 2번은 마우스를 사용할 수 없는 환경을 고려한 기능이다. 3번은 콜백인데, 이게 셀렉트거나 인풋일때 따로 받던걸 같이 받으려다보니 약간 생각이 필요했다.

select은 선택된것과 다른걸 선택하면 값이 변하고, input은 내용이 없을때와 입력한 뒤에 대해 다르게 대응해야할것 같았다. 그리고 그렇게 처리했다.