모바일 앱 제스처 UI 가이드
UX 디자인 배우기 #89
Today UX 아티클
Smashing Magazine에 올라온 Nick Babich의 글 In-App Gestures And Mobile App User Experience을 원저자의 허락을 받아 번역한 글입니다.
사이트 또는 앱에서 마우스를 올려 클릭하는 것이 가장 흔하게 쓰이던 인터랙션 트리거(trigger)였던 시절을 기억하시나요? 그런 시절은 완전히 끝났습니다. 애플이 아이폰을 내놓으면서 멀티-터치(multi-touch) 기술이 주류가 되었고 유저는 인터페이스에서 대상에 손가락을 올리고 탭 하는 것뿐만 아니라 핀치하고, 스프레드 하고, 스와이프 할 수도 있다는 점을 배웠습니다. 제스처는 새로운 방식의 클릭이라고 할 수 있습니다.
터치와 제스처 기반의 디바이스의 등장은 우리가 인터랙션에 대해 생각하는 방식을 극적으로 바꾸고 있습니다. 제스처는 재미있을 뿐만 아니라, 매우 유용하며 동시에 익숙한 느낌을 주기도 합니다. 오늘날, 모바일앱의 성공에는 제스처가 사용자 경험에 얼마나 잘 녹아들어 갔느냐가 매우 중요하게 작용합니다. 심지어 어도비도 간단한 와이어프레임부터 시작해서 멀티스크린 경험까지 모든 것을 프로토타입으로 만들어볼 수 있는 Experience Design CC (Adobe XD)라는 새로운 디자인 및 와이어프레임을 만들었죠. Adobe XD는 무료로 다운로드하고 테스트하실 수 있습니다.
제스처 기반 유저 인터페이스의 힘
제스처 컨트롤이 굉장히 자연스럽고 직관적으로 느껴지는 주된 이유는 실제 물체와 상호작용하는 것과 매우 비슷하기 때문입니다. 버튼 대신 제스처를 이용하는 이유는 크게 세 가지입니다.
1. 덜 어수선해짐
앱이 제스처 컨트롤에 더 많이 의존할수록, 스크린에서 보이는 버튼은 줄어들게 되어 가치 있는 콘텐츠로 채울 수 있는 공간을 확보할 수 있습니다. 이렇게 되면 앱은 콘텐츠에 집중할 수 있게 되고 유저는 아무런 방해 없이 가장 중요한 것을 해낼 수 있습니다.
2. 이용 용이성
제스처는 유저가 한 번 발견하고 학습하기만 하면, 사용자 경험에서 즐거움을 주는 부분이 되기도 하고 유저 플로우에서 단계를 줄여줌으로 인터랙션을 개선해줄 수 도 있습니다. 예를 들어 모바일 디바이스에서 어떤 항목을 지워야 할 때 한 번에 한 항목씩만 지울 수 있다면 시간이 낭비될 수도 있습니다. 간단한 지름길은 스와이프 해서 지우는 것이죠.
3. 매끄러운 인터랙션
버튼이 유용한 트리거(trigger)처럼 보일 수 있지만, 제스처는 콘텐츠가 포함된 인터랙션을 보다 직관적으로 만들어줄 수 있다는 훌륭한 잠재성을 가지고 있습니다.
Clear는 “제스처 기반” 앱의 훌륭한 사례입니다. 이 앱은 스와이프, 내리기, 핀치하기 등과 같은 제스처 사용에만 의존한 앱입니다. 미니멀한 유저 인터페이스(버튼이 없음)를 갖추고 있지만, 놀랍도록 사용하기 쉽습니다.
iOS용 Clear 앱에서의 제스쳐 (Image credit) (Large preview)제스처 기반 디자인에서 애니메이션의 역할
제스처도 모바일 앱에서 예외 없이 애니메이션과 연결되게 됩니다. 애니메이션은 유저에게 이용할 수 있음을 알려주는 데 중요한 역할을 하게 됩니다. 제스처와 묶이게 되면, 애니메이션은 기본적으로 우리가 눈에 보이는 유형의 대상과 상호작용하고 있다고 생각하게 만들어버립니다.
또한, 애니메이션은 유저에게 시각적 피드백을 제공하는 데 매우 유용합니다. 애니메이션이 없으면, 유저는 제스처를 통해 액션을 성공적으로 마무리했는지에 대한 충분한 피드백을 얻을 수 없습니다.
아래로 내려서 새로고침 것처럼 매우 혁신적인 제스처 인터랙션도 할지라도 애니메이션과 함께 사용하는 것이 표준이 되었습니다. 매우 직관적이어서 수많은 리스트 기반 애플리케이션에서 전환될 때 이런 제스처를 적용하게 되었습니다.
당겨서 새로 고치는 액션 (Image credit) (Large preview)제스처의 부정적 측면
모바일 앱을 디자인할 때, 우리가 앱에 쓴 제스처가 너무 자연스러워서(유저가 아니라 우리에게 자연스러운 거죠) 기본적인 사용성 원칙을 따르지 않아도 된다고 생각해버리게 됩니다. 하지만 가시성(visibility)은 여전히 모바일 앱을 디자인할 때 고려할 매우 중요한 원칙입니다.
Thomas Joos가 지적했듯이, 제스처 컨트롤의 가장 큰 단점은 학습곡선입니다. UI 요소를 하나씩 제거할 때마다, 앱의 학습 곡선은 올라가게 됩니다. 제스처는 발견가능성(discoverability)가 낮기 때문에 이런 상황이 발생하는 거죠. 제스처는 언제나 숨어있는데 사람들은 이런 옵션들을 찾아낼 수 있어야 합니다. 바로 이런 이유 때문에 시각적 커튼보다 제스처에 더 의존하게 될수록 혼선을 줄 가능성이 더 커집니다.
터치 제스쳐 카드 (Image credit) (Large preview)제스처 기반 인터페이스를 디자인하기 전에 고려해야 할 또 다른 부분은 다음과 같습니다.
1. 유저가 들여야 하는 노력이 늘어남
대부분의 제스처는 자연스럽지도 않고 배우거나 기억하기도 쉽지 않습니다. 예를 들어, 대부분의 앱에서 한 손가락으로 하는 제스처는 한 가지를 의미하고, 같은 제스처를 두 손가락으로 하는 것은 또 다른 의미를 가지며, 세 손가락이나 네 손가락으로 하는 것 모두 각각의 의미를 지니게 됩니다.
2. 피드백 부족
대부분의 경우 제스처는 흔적을 남기지 않아 제스처를 취해도 반응이 없거나 잘못된 반응을 받을 수 있습니다. 그 이유를 이해하는 데 도움이 되는 정보는 부족하거나 거의 없습니다.
3. 일관성 부족
대부분의 제스처는 표준이 아니고 앱 간에 일관성도 없습니다. 유저가 항상 분명하게 볼 수 있는 것도 아니죠. 이메일 항목 위에서 스와이핑하는 것과 같은 간단한 제스처라 할지라도 앱마다 다른 방식으로 작동할 것입니다. 예를 들어, 애플 앱에서는 읽지 않은 메일을 지우려면 왼쪽으로 스와이프 하면 삭제할 수 있는 옵션이 뜹니다. 지메일에서는 왼쪽으로 스와이프 하면 이메일을 ‘읽지 않음’으로 표시해줍니다.
명확한 힌트
어떤 제스처를 쓸 수 있는지에 대한 단서를 주는 방식으로 유저 인터페이스(UI)를 디자인해야 합니다. 시각적 단서가 없으면 유저가 앱을 어떻게 이용해야 하는지 혼란스러워 할 수 있기 때문입니다. 유저에게 UI를 이용하는 방법을 알려주는 것과 관련해서는, 애니메이션과 단계적 공개를 통해 시각적 힌트 세트를 제공해야 합니다.
이를 잘 해낸 UI 제스처는 주로 시각적 힌트나 단계적 공개법을 적용하는 게임에서 찾을 수 있습니다. 최고의 게임은 가이드해주는 게임보다는 사람들 시간이 지나면서 사용법을 스스로 습득하게 하는 게임이라는 점은 잘 알려진 사실입니다. 예를 들어, Pudding Monsters 게임 조작 방법은 제스처에만 의존하지만, 유저가 너무 많은 추측을 하지 않고도 무엇을 해야 하는지 기본적인 아이디어를 알 수 있게 만들었습니다.
iOS용 Pudding Monsters (Image credit) (Large preview)결론
제스처는 파워풀한 인터랙션 방식인가요? 그렇습니다. 모바일 디바이스는 벽돌만한 디바이스에서 시작해서 손가락으로 조종할 수 있는 정교한 컴퓨터로 진화했습니다. 터치와 제스처 인터랙션은 모바일 경험을 더 쉽고 흥미롭게 만들 수 있는 많은 잠재력을 가지고 있습니다.
제스처를 고려하지 않고 모바일 앱을 디자인할 수 있는 방법은 없습니다. 제스처가 퍼실리테이터의 역할을 해줘야 시간을 절약하는 역할을 해줘야 합니다. 의미 있는 제스처를 디자인하려면 액션과 연관 지어서 액션과 조화를 이루도록 만들어야 합니다. 가능한 액션에 대해서는 피드백과 명확한 힌트, 제스처 수행 방법을 가이드해주는 것은 매우 중요합니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 Live 최소 1개에서 최대 4개 UX 강좌 (온라인) 줌 Live 강좌 진행하고 있습니다)
[VOD 강좌] (PM/PO/UI/UX) 수강생 모집 중
(인프런에서 총 20개 UX 강좌: 인터넷/VOD 오픈했습니다)
https://www.inflearn.com/users/196290
