brunch

매거진 매거진 목요일

라이킷 76 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 티몬 디자인스토리 Mar 03. 2016

손가락으로 화면을 누르는 시대

- 티몬 UX랩 - 모바일 사용자 조작 연구를 위한 사례조사

더이상 우리는 모바일 폰을 활용할 때 키패드나 화살표 버튼을 사용해 메뉴를 선택하지 않습니다.

당연히 PC에서 쓰는 마우스나 키보드와 같은 보조 도구를 사용하지도 않습니다.

불과 수년전만 해도 당연했던 화면과 사용자간의 거리는 터치스크린 기술의 발전을 통해서 말그대로 보이는것을 직접 손으로 누르는 '직관성'을 띄게 되었습니다.

뭐 이렇게 사용하시는 분이 있을 수도 있지요 (출처 gadgetify.com)

PC의 조작처럼 키보드 또는 마우스를 활용하지 않고 옛 모바일 디바이스 처럼 키패드 등을 활용하지 않는 '손가락으로 화면을 누르는 시대' 에는 그에 걸맞는 사용자 조작이 분명히 존재하며 그에 꼭맞는 사용자 경험을 위해서는 적지않은 연구가 필요합니다.

꼭 필요한 디자인을 위해서

제가 속해있는 UX TF는 티몬 앱과 고객과의 접점에서 더 나은 경험을 드리기 위해 UX연구과제를 선정하고 해당 과제를 발전시켜 티몬 디자인 조직 현업에 깊은 인사이트를 제공하거나 디자인과 개발의 효율화 고도화를 위해 리서치, 디자인, 목업, 스타일 가이드 등을 제작하고 있습니다.

오늘 제 글은 최근 연구중인 "모바일 사용자 조작연구" 과제를 위해 제가 조사한 조작 편의성이 우수한 앱을 공유하려고 합니다. 아마, 저와 같은 UX 디자인을 하고 있지 않으셔도, 평소 모바일 앱을 사용하시고 계신다면 재미있게 볼 수 있는 주제이실 거예요.

사례를 보여 드리기 전에 먼저 모바일에서 사용되는 터치 제스처 용어를 정리하여 여러분의 이해를 돕고자 해요.

모바일 앱에서

‘샥! 쭉~ 딱’ 움직이라고?

“앱 홈에서 이렇게 샥샥 넘기고 쭉 내려서요, 자 여길 딱 클릭하면 이게 푝! 나오면 어떨까요?”

모바일 앱 제작 관련 종사자라면 흔히 들어본 문장 일 거예요.

이처럼 제스처와 상태 용어를 혼재하여 사용하거나 서로 다른 용어로 오해를 일으키는 경우가 많은데요 결국 이러한 커뮤니케이션은 효율이나 퀄리티에 영향을 끼치게 됩니다.

티몬에서는 UI기획자와 디자이너, 개발자 간의 원활한 커뮤니케이션을 위해 아래와 같이 정의 하고 있습니다.

티몬 터치 제스쳐 정의

티몬에서는 '클릭, 샥, 쭉, 딱, ' 대신 위의 화면과 같이 Tap, Swipe, Scroll, Drag로 정의합니다.

- Tap : 화면 선택

- swipe : 화면을 좌우로 움직여 항목을 이동

- Scroll: 화면을 상하로 올리거나 내리는 행동

- Drag: tap 한 상태에서 화면을 끌음

위의 제스처들은 이제 모바일에서 가장 친숙하고 기본적인 행동 조작법인데요, 지금부터는 이 제스처들이 잘 적용된 앱 서비스를 소개해 드릴게요.

한방에 OK? OK!

스크롤이 잘 구현된 앱

#Booking Now

부킹 나우는 실시간 호텔 예약 서비스로 서비스 흐름과 사용 조작이 자연스럽게 연결되는 앱이에요.

홈 리스트에서 상세화면을 스크롤로 연결하였고, 이 단 한 번의 스크롤링으로 호텔 정보와, 숙박정보, 예약이 가능한 점이 돋보입니다.

위치기반 서비스로 지도를 중심으로 리스트를 제공하며 리스트의 스와이핑으로 지도의 핀도 함께 이동되는 것도 장점이라고 생각해요.

booking now app

#Curatum

Curatum은 하루에 하나씩 상품을 추천해주는 남성 럭셔리 이커머스 플랫폼 서비스예요.

스크롤링으로 상품정보와 구매, 브랜드 정보, 배송정보 등의 섹션이 부드럽게 연결되는 장점이 있고

럭셔리 큐레이션 커머스인 만큼 심플한 UI 디자인과 컬러, 타이포그래피의 조화가 뛰어나다고 생각해요.

Curatum app

#AliExpress

알리 익스프레스는 중국 최대 이커머스 사업자인 알리바바의 글로벌 직구 플랫폼 입니다.

이 앱에서는 딜 상세페이지에서 고정된듯한 주문 버튼이 스크롤이 진행되며 상단으로 사라짐과 동시에 하단에 자연스럽게 등장하며, 기타 추가 정보에 접근하기 위해 새로운 화면으로 전환 할 때에도 스크롤로 유도하여 사용자의 행위의 흐름이 끊기지 않는 점이 엄청난 장점입니다.

레이아웃이 크게 달라 보이지 않습니다만 실제로 활용해 보면 기존의 스크롤과는 완전히 다른, 하지만 매우 자연스러운 경험을 제공합니다.

알리익스프레스의 딜 상세 화면

또한 메인 홈에서 스크롤링 중 카테고리 메뉴가 상단 탭으로 고정되어 스와이핑 되면서 자연스럽게 카테고리로 진입시키는 것을 볼 수 있어요. 전반적으로 알리익스프레스는 사용자의 서비스 내에서의 동선을 자연스럽게 그리고 끊임없이 연결되는것에 심혈을 기울인것으로 보입니다.

알리익스프레스의 메인 화면중 카테고리 등장 화면

#현대카드 웨더

제가 요즘 매일 보는 날씨 정보 서비스인 현대카드 웨더 앱이에요.

제공되는 정보는 물론이고, 감각적인 색감에 감성을 터치하는 섬세한 액션 때문에 애정 해요.

이 앱도 스크롤링으로 상세정보 및 하단의 테마 변경까지 주요 콘텐츠 전체가 자연스럽게 연결되고 있어요.

현대카드 웨더 app_1

그리고 하단 테마 변경에서는 스와이핑을 사용하며 테마 메뉴 리스트를 볼 수 있게 연결되어 있어요.

저는 날씨가 안 좋은 날 테마를 변경하며 기분전환을 합니다.

현대카드 웨더 app_2

드래그&스와이프로

내가 내가 해!

다음은 드래그와 스와이프의 제스처를 활용한 사례를 보여드릴게요

#amazon

세계 최고의 이커머스 서비스 아마존이죠.

아마존 IOS에서는 제품 이미지를 드래그하여 카트에 담는 기능이 있는데요, 원하는 제품을 직접 손으로 담아 넣는 재미를 경험할 수 있어요. 모바일에서는 잘 활용하지 않는 PC시절의 드래그앤 드랍 기능을 구현하여 쇼핑의 손맛(?)을 제공하는 감성터치라고 생각합니다.

amazon app_1

또한 아마존에서는 제품 리스트를 스와이프 하여 카트에 담거나 나중에 보기 위해 보관하는 기능이 있어요.

스와이프 제스쳐는 모바일에 특화된 가장 간결하고 유용한 제스쳐 입니다. 쇼핑 앱에서 매우 잘 활용된 사례에요.

amazon app_2

#inbox

구글의 메일 앱인 인박스에서도 스와이핑으로 받은 메일을 보관하거나 알림을 추가할 수 있어요.

메일 묶음도 한 번에 처리 가능하니 안쓸 수가 없지요.

inbox app

#naver music

네이버 뮤직 서비는 탭 메뉴 간 이동이나 앨범 리스트 등 많은 부분을 스와이핑으로 구현해왔는데요 jamm에서도 역시 #해시태그라는 가로형 텍스트를 스와이핑으로 구성한 것을 볼 수 있어요.

주목할 부분은 가로로 긴 텍스트가 들어갈 수 밖에 없는 콘텐츠는 레이아웃 배치가 곤란한 상황이 발생할 수 있는데요. 엄청난 길이로 길어질 수도 있는 해시태그를 가로 스와이핑을 통해 적절하게 배치한 부분입니다. 글씨가 잘린상태 그대로가 자연스럽게 스와이핑을 유도하게 됩니다.