brunch

매거진 UX 분석

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Apr 13. 2019

모바일에 최적화된 키패드 제공 UX 디자인 가이드 원칙

UX 디자인 가이드 원칙 배우기

전민수 UX 컨설턴트 소개 

안녕하세요. 전민수 UX 컨설턴트입니다. 지난 23년간 수행했던, UX 컨설팅 경험과 강의 이력을 소개합니다. 


전민수 UX 샘의 [인프런] 인터넷 강의 안내입니다 


[클럽하우스] 전민수 UX 샘의 재능 기부 UX 공개 수업 
[UI/UX/리서치/방법론] 우리 모두 함께 공부해요~ 


클럽하우스에서 [전민수 샘의 UX 공개 수업]을 진행하고 있습니다.

매주 수요일/금요일 밤 9시-11시까지 UX/리서치/방법론 등 하루에 하나의 주제를 선정하여 깊이 있는
공개 강의를 하고 있습니다. 바로 이어서, 뒷풀이방(11시-12시)은 [UX A-Z 모든 것] 고민 상담을 하고 있으니, 혹시, 궁금하거나 고민이 있으면, 저한테 무엇이든지 물어보세요~ 가능한 제가 아는 범위에서 최대한 알려 드리겠습니다.

 
여러분 모두 화이팅!!!!!  


그리고, 아래 링크를 클릭하고, 저를 팔로우 해주시면 [공개 강의] 혹은 [비정기 강의] 열릴때마다,
여러분께 알림이 갈거에요~


UI/UX 카페 소개 (카페명: 클럽하우스 UX Book Q&A Club)
국내/해외 UI&UX 10,000개 이상 아티클 공유 및 세부 카테고리 분류

카페는 UX 자료 공유 목적으로 운영되고 있으며, 카페 가입 시 바로 승인됩니다. 





모바일에 최적화된 친화적 키패드 제공


모바일은 브라우저 화면이 작아 PC 버전처럼 글쓰기 기능을 다 나열할 수 없습니다. 사용자가 키보드로 입력하거나 선택하는데 불편함이 없어야 하기에, 모바일 앱을 위한 키보드는 모바일 입력 상황에 맞게 친화적 옵션의 키패드가 제공되어야 합니다. 사용자가 모바일 키보드 키패드에서 손을 떼지 않고도 매끄럽게 다음 행위나 필드로 넘어갈 수 있도록 만들어 줘야 입력하거나 선택하는 행위가 최소화되기 때문입니다. 


미디엄에서 글 작성 사례를 살펴보겠습니다.


미디엄은 키패드에서 글자 크기를 한 번에 바꿀 수 있어 글 입력하는 과정이 편리합니다.  


Step1. '안녕하세요' 입력하였습니다. 



Step2. '안녕하세요' 글자 크기를 키우기 위해 키패드에 왼쪽 상단에 있는 'Tt' 선택하였더니 't' 색상의 변화가 생기면서 이전보다 글자가 조금 커졌습니다. 




Step3. '안녕하세요' 글자 크기를 더 키우기 위해 키패드에 왼쪽 상단에 있는 'Tt' 선택하였더니 'T' 색상의 변화가 생기면서 이전보다 글자가 조금 커졌습니다. 



다음의 사례는 브런치입니다. 


Step 1. 카카오 브런치 앱에서 글쓰기 버튼을 선택하면 아래에서 위로 키패드가 자동으로 열립니다. 키패드에서 '안녕하세요' 이라는 글자를 입력하고 나서, 글자 크기를 바꾸기 위해 키패드에 있는 'A' 선택하였습니다. 



Step 2. 키패드에 펼쳐진 옵션 중 '제목 1, 제목2, 제목3, 본문'을 한 번에 선택할 수 있어 글자 입력하는 과정이 편합니다. 




위의 예를 들어 설명했지만, 미디움과 카카오 브런치는 글자를 입력할 때마다 키패드의 화면이 바뀌지 않습니다. 즉, 글자 입력은 한 화면의 키패드에서 다 입력할 수 있습니다. 이와 같은 직관적인 키패드 화면의 UI로 구성으로 인해 사용자는 글자를 입력할 때마다, 키패드의 어떤 옵션을 선택할 것인지 고민할 필요가 없습니다.  


반면, 개편전 네이버 블로그에서 글 작성 시 미디움과 카카오 브런치보다 키패드에서 글자 선택하는 과정이 불편합니다. 단어를 입력할 때 마다 키패드 화면이 자주 바뀌고, 일부 옵션은 숨겨져 있고, 글자 변경을 위해 옵션을 찾아야 합니다. 그래서 여기저기 다 눌러봐야 해서 처음 글을 작성하는 사람 처지에서 보면 조금 혼란스럽습니다. 


왜 그런지 하나하나 살펴보도록 하겠습니다. 


Step 1. 네이버 블로그에서 글쓰기 버튼 선택 시 카카오 브런치처럼 키패드가 아래에서 위로 올려옵니다. '안녕하세요'라고 타이핑하겠습니다. 




Step2. '안녕하세요' 글자를 '제목' 타입으로 변경하기 위해 키패드에 있는 'T'를 선택하였습니다. 'T'를 선택하니 키패드 상단에 '나눔고딕, 본문, 정렬, 볼드 등' 옵션이 보여집니다. '안녕하세요'를 제목으로 변경하고 싶었으나, 어디를 눌러야 제목으로 변경할 수 있는지 시각적 단서가 없어 당황스럽습니다. 현재 보여주는 옵션에서 제목 변경과 가장 연관성이 있는 것은 '본문'이어서 '본문'을 선택했습니다. 



Step 3. '본문' 옵션을 선택했더니 '<, 제목 1, 제목 2, 본문' 옵션이 나와 '제목'을 선택하였습니다. 



Step4. '제목1'을 선택하였더니 방금 전 키패드에 있었던 '<, 제목 1, 제목 2, 본문' 사라지고 'T' 만 보여집니다. '제목1'이 아닌 '제목2'로 변경하고자 하는 경우 다시 'T' 선택해야 하는 번거로움이 발생합니다. 



Step5. '제목1'을 '제목2'로 변경하기 위해 'T' 선택하였으나, 보여지는 옵션은 '제목1'만 보여집니다. 



Step6.'제목1'을 선택하고 나서야 '제목1, 제목2, 본문' 옵션이 보여져 '제목2'를 선택하고자 합니다. 



이처럼 네이버 블로그는 '본문' > '제목1' > '제목2' 등 글자 크기를 변경하기 위해서 키패드에 있는 버튼을 여기 저기 눌러야 해서 번거로움이 있습니다. 물론, 입력하다 보면 익숙해져 불편함이 작어지겠지만, 처음 하는 사용자 입장에서 보면 키패드 화면이 자꾸 바뀌게 되면 어렵다고 느끼게 될 것 입니다. 


반면, 개편된 네이버 블로그는 글자 입력하는 과정이 개편전보다 더 편해졌습니다.  


Step1. '안녕하세요' 입력 후 글자를 '소제목'으로 변경하고자 하여 키패드에 있는 '본문' 셀레트 메뉴를 선택했습니다.  



Step2. 옵션 창에서 '본문'을 '소제목'으로 변경했습니다. 




Step3. '안녕하세요' 글자는 '본문'타입에서 '소제목' 타입으로 변경되었습니다. 동일한 작업을 수행했음에도 불구하고, 개편전은 6단계를 거쳤지만, 개편 후에는 3단계만 거쳐도 됩니다. 훨씬 더 입력 절차가 개편전보다 간단해지고 편의성이 높아졌다는 것을 알 수 있습니다. 



따라서 모바일에서 화면 공간을 최대한 절약하기 위해서는 모바일 앱을 위한 키보드는 사용자의 입력 상황에 맞게 친화적 옵션의 키패드가 제공되어야 합니다. 



매거진의 이전글 검색 절차 줄이기 UX 디자인 가이드 원칙

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
브런치 시작하기

카카오계정으로 간편하게 가입하고
좋은 글과 작가를 만나보세요

카카오계정으로 시작하기
페이스북·트위터로 가입했다면