brunch

매거진 개발자 이야기

라이킷 18 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 세컨드스페이스 Jul 15. 2020

웹개발자를 위한 기초 사용성(UX)에 대한 고찰

~ input을 중심으로 ~

사용자 경험 (UX)

사용자경험 (이하 UX )은 IT 업계 뿐만 아니라 대부분의 업종에서 중요한 이슈로 자리를 잡았습니다. 아마도 UX라는 말을 처음 들어보는 분은 많지 않을 것이라 생각합니다. 이번 글에서는 왜 개발자가 UX를 왜 알아야 하고 어떻게 배워가야 하는지에 대해 개론적인 수준으로 이야기해보고자 합니다.

최근 서점의 UX 관련 책자에는 “이 글을 읽어야 하는 사람”목록에 개발자, 엔지니어가 포함되기 시작했습니다. 그 동안 디자이너의 영역으로 여겨지던 UX의 개념이 점차 확산되고 있는 것입니다.

그런데 한가지 의문이 듭니다.

왜 개발자가 UX에 대한 이해가 필요할까요?

가장 명확한 이유는 그것을 만드는 사람이 개발자이기 때문입니다.

기획자나 UX디자이너, UI디자이너 등 이해관계자가 어떠한 훌륭한 의견, 계획을 가지고 있다 하더라도 그것을 현실에 구현하는 것은 결국 개발자의 역할입니다. 아무리 훌륭한 UX에 대한 로드맵이 있다 하더라도 실제로 만드는 사람이 이해하지 못한 상태로 제작한다면 의도가 제대로 반영되기 어려운 것은 당연한 일일 것입니다.

그렇다면 사용자경험은 구체적으로 어떤 것이며 무엇을 고민해야 하는 걸까요?

본문 폰트 줄 간격 및 여백

위 도표는 인간이 제품이나 서비스를 선택하게 되는 경험의 중요도를 표현한 것입니다.

우리는 흔히 감성과, 사용성 부분을 UX의 전부로 착각하곤 합니다.

이러한 착각이 UX는 UI디자이너들이 하는 것이라는 오해를 불러일으킵니다.

하지만 인간이 제품/서비스를 사용하며 가장 먼저 보는 것은 자신에게 유용한가입니다.

이에 관련한 가장 유명한 사례가 리누스 토르발스가 만든 Git(깃) 입니다.

개발자 본인이 필요해서 2주만에 만든...

개발자 본인이 필요해서 2주만에 만든 것으로 유명한 이 프로그램은 출시 당시 경쟁 프로그램에 비해 불친절하고 직관적이지 않았으나 빠른 속도, 단순함, 완벽한 분산에 있어서 막강한 유용성과 신뢰성을 발휘하였고 15년이 지난 지금까지도 전세계적인 사랑을 받고 있습니다.

이처럼 UX는 단순한 사용성이나 감성만으로 표현되는 것이 아닙니다.

사용자에게 유용함을 인정받고 신뢰성, 사용성, 감성까지 마음에 들었을 때야 비로서 그 사용자에게 하나의 의미가 됩니다.

소위 말하는 “인생템”이 되는 것이죠.

위 내용을 토대로 보았을 때, UX를 만족하는 최소 조건은 “사용자에게 유용할 것”이 됩니다. UX디자이너의 최소 조건 역시 “이 것이 사용자에게 유용한가?”고민할 줄 아는 것입니다. 이 때, 유용성은 단순히 생산성 만을 의미하는 것이 아닙니다. 재미있는가, 흥미로운가, 마음이 편해지는가 역시 누군가의 유용성입니다.

핵심은 편리하지 않고 디자인이 좋지 못한 서비스라도 유용하다면 그 서비스는 누군가에게 가치를 가지게 된다는 사실입니다.

유용성 있는 웹서비스를 어떻게 만드는 지, 무엇을 하면 신뢰성을 얻을 수 있는지는 누군가가 정답을 알려주기 어려운 문제입니다.

본 글에서는 UX에 대한 5가지 중요성 중 비교적 명확하게 설명 가능한 사용성에 대한 기초를 이야기 해보고자 합니다.

개발자를 위한 기초 사용성

“perfect is the enemy of good”- 볼테르

우선 말씀드리고 싶은 것은 완벽한 사용성을 가진 UX는 없다는 것입니다. 단순히 수 많은 사람들을 조사하고 테스트하기 위한 비용, 기술적 문제를 떠나 프로젝트가 가지는 시간적, 물리적 문제로 인해 완벽한 사용성은 유지될 수 없습니다.

사용성은 시간, 장소, 교육수준, 신체조건, 문화 등 다양한 조건에 의해 변동되기 쉽기 때문입니다.

따라서 우리가 배울 내용은 완벽한 사용성을 가지기 위한 것이 아니라 최소한의 요건을 학습하는데 그 목적이 있습니다. 최소한의 사용성 요건 중 개발자가 알아야 하는 기초 UX 는 단연 input입니다.

모바일 환경이 보편적인 인터넷 사용환경이 됨에 따라 키보드나 마우스가 없는 환경에서 사용자의 입력을 편리하게 할 수 있는 방법이 지속적으로 발전해 오고 있습니다.

이번 글에서는 그 중에 가장 기본이 되는 input 별 입력도구 제공방법에 대하여 알아보도록 하겠습니다.

인풋 별 입력도구는 input type에 따라 search, email, url, tel, number, datalist, select, date 등으로 구분할 수 있습니다.

정확한 input type 및 입력도구의 의도적 사용은 개발 공수를 줄일 수 있을 뿐 아니라 다양한 입력기기 (시각장애인용 리더기 등) 에서 편리한 입력환경을 제공하기 때문에 반드시 알아 두면 좋습니다.

* 해당 입력도구들은 각 OS 환경이나 브라우저 및 버전에 따라 다르게 나타나므로 사용 전 반드시 확인해 주시기 바랍니다.

Input type 'Search'

search는 검색창에서 사용되는 INPUT입니다. 검색에 사용했던 과거의 단어들을 가지고 오며 오른쪽 하단에 파란색 search이 생성됩니다. 검색어를 입력하면 입력 창 오른쪽에 입력 값을 지울 수 있는 X 버튼이 나타나는 특징이 있습니다.

Input type 'url'

url은 웹url을 입력받을 때 사용합니다. 기존에 입력되었던 url 목록을 가져오며 하단 return 왼쪽에 .com 등 url을 편리하게 입력할 수 있는 도구를 제공합니다.

Input type 'tel'

tel은 전화번호를 입력 받을 때 사용합니다. 기존에 입력된 전화번호 리스트와 전화를 걸 때 사용되는 입력도구를 제공합니다.

Input type 'number'

number는 숫자를 입력 받을 때 사용됩니다. 기본 형식으로 사용할 경우 iOS에서는 위와 같은 입력도구를 제공합니다. iOS에서 안드로이드와 같이 숫자만 쉽게 입력할 수 있는 도구를 제공하기 위해서는 pattern을 사용하여야 합니다.

Data list

datalist는 select와 같이 정해진 입력 값을 입력해야 하는 상황이나 내용이 많을 때 사용합니다. 입력 값에 따라 범위가 줄어들어 편리하게 선택할 수 있도록 도와줍니다.

PC, 안드로이드 환경에서 유용하게 사용할 수 있으나 iOS 환경은 사용성이 좋지 않으므로 (2020년 6월 기준) PC 위주의 사이트 제작이나 iOS가 제외된 모바일 환경에서의 사용을 권장합니다.

Input type 'number'

date는 날짜를 입력 받을 때 사용됩니다. 추가적으로 시간이나 일, 월, 주 단위를 선택할 수 있습니다. 각 브라우저, OS 별 기본 date picker 가 호출되어 편리한 입력이 가능합니다. PC버젼 safari에서는 date picker를 지원하지 않으므로 사용에 주의가 필요합니다.