텍스트 필드 UI
Quest4 +
클리어 버튼 Clear button
필드에 입력한 정보를 한꺼번에 삭제할 수 있다.
사용자가 입력한 정보를 수정할 때 삭제 키를 하나하나 일일이 탭하여 삭제할 필요가 없다. 사용자가 입력을 시작할 때 부터 나타난다. 클리어 버튼은 모바일에서 특히 유용한 요소이다.
생각을 해보자!
만약 내가 웹을 사용하고 있다면 키보드로 검색하다가 모든 내용을 삭제해야 할 때 굳이 마우스 혹은 터치패드를 이용해서 내용을 지우지 않고 Backspace 를 오랫동안 누르고 있을 것이다.
하지만 모바일을 사용하고 있다면 클리어 버튼이 매우 유용하게 사용될 것이다.(물론 모바일도 오랫동안 버튼을 전체 내용이 지워진다. 다만 그 시간이 꽤나 길게 느껴질 뿐!)
버튼을 연타하거나의 식으로 내용을 지우고 있다고 생각한다면 매우 답답하게 느껴질 테니까..
그렇지만 input의 type=search의 클리어 버튼은 디자인적으로 알맞다라고는 할 수 없다. 🤔
브라우저가 정해둔 디자인이기 때문에 만약 전체적인 사이트의 분위기가 어울리지 않는다면 더더욱 이질감이 생길 수밖에 없을 것이다. 또한 브라우저마다 다른 형태로 보일테니까.
clear?
디자인적으로 맞지 않으니 클리어 버튼을 지워버리자고 판단하기에는 UX에 좋지 않다.
심지어 "지우기"라고 설명까지 보여주는 친절한 UI
그렇다면 어떻게 하는게 좋을까? 사실 `type=search`의 클리어 버튼을 지워버리는 것은 HTML과 CSS 상으로 끝낼 수 있는 부분이다.
그러나 원하는 형태의 클리어 버튼을 넣는 것은 JS의 힘을 빌릴 수 밖에 없다. 😐
이후에 직접 만들어 볼 수 있도록 어서 JS를 익혀야겠습니다!
🌱 growing...