컨텐츠영역

현재 READ IT 모아보기 목록보기

모바일 인터페이스 디자인의 기본은 바로 이것!

  • 등록일2015.10.01
  • 조회 1831
트위터 페이스북
 
 
모바일 앱/모바일 웹 앱 디자인
 
 
Wifi LTE가 많이 쓰이고 있지만 아직도 모바일 기기의 네트워크 전송 비용은 적지 않다. 어디서나 Wifi AP가 잡히는 것은 아니며 LTE는 전송 용량 대비 가격이 비싸다. 모바일 앱/웹 앱을 만들 때는 전송되는 데이터의 양을 줄이는 것뿐 아니라 사용자가 원하는 내용을 한 번에 보여주어 데이터 전송 횟수를 줄이는 것도 중요하다.
 
 
콘텐츠 먼저 배치
 
이를 위한 전략 중 하나가 애플리케이션 첫 화면에 사용자가 원하는 정보를 배치하는 것이다. 데스크톱의 경우 온갖 메뉴와 환영합니다등 사용자를 반기는 그림을 첫 화면에 내걸고무엇을 할 수 있습니다라든가이런 페이지로 갈 수 있어요라고 말하는 듯한 디자인을 할 수 있다. 사이트 내용보다는 쓸데없이 화려한 플래시 기술을 보여주는 데 중점을 두기도 한다. 하지만 모바일은 화면이 작고 페이지 요청 횟수를 적게 해야 하는 임무가 있으므로 첫 화면에 사용자가 원하는 것을 보여주는 편이 좋다. 애플리케이션을 실행했을 때 무엇을 어떻게 해야 할지 사용자에게 즉각적으로 제시하지 못한다면 사용자는 다시 그 애플리케이션을 실행하지 않을 확률이 높다.
 
  
[그림 12-2] 콘텐츠 먼저 보여주기 디자인(유튜브 모바일 앱과 웹 앱)
 
모바일 유튜브의 경우 접속하자마자 가장 인기 있는 동영상을 보여준다. 로그인했다면 사용자 정보를 이용해 그 사용자가 가장 흥미 있어 할 만한 동영상 리스트를 보여준다. 이런 페이지 전략은동영상을 보여준다라는 유튜브의 정체성을 확실히 나타내는 것이다. 하지만 많은 모바일 웹 앱이 첫 화면에 주로 내비게이션을 배치한다. 예를 들어그림 12-3’을 보자. 스타벅스의 모바일 메인 페이지는 많은 메뉴로 혼란스럽다. 그 옆의 학교 홈페이지도 마찬가지이다.
 

  
[그림 12-3] 내비게이션에 치중한 디자인(스타벅스 웹 메인 페이지와 홍익대 메인 페이지)
 
사이트의 내용을 잘 알고 있는 사람에게는 이런 디자인이 편할지 모르지만 처음 방문한 사람은 무엇을 해야 할지 부담을 느끼게 된다. 사용자는 이런 화면에서 자신이 원하는 것을 얻지 못할 수도 있다.
 

[그림 12-4] 대학교 홈페이지에서 제공하는 것과 원하는 것의 차이 (http://xkcd.com/773/)
 
 
사용자 중심 콘텐츠 배치
 
사용자가 언제, , 어떻게 모바일 기기를 사용하는지 이해한다면 어떤 콘텐츠를 보여주어야 할지를 알 수 있다. 사용자가 필요로 하는 때에 원하는 화면을 보여주려면 그필요에 대해 공부할 필요가 있다. 이에 대해 구글은 사용자의 모바일 사용 행태를 세 가지 그룹으로 나누고 있다
(http://www.informationweek.com/mobility/business/google-lays-out-its-mobile-user-experien/229216268).
 
Repetitive now - 간단한 행동을 계속해서 반복한다. 주식이나 날씨를 확인하거나 새로 온 알림이 없는지 확인한다.
Bored now - 그냥 시간을 보내며 논다. 기차나 비행기, 카페 등에서 지루할 때 이와 같은 행동을 한다. 보통 게임을 하거나 의미 없는 일을 한다.
Urgent now - 어떤 것을 빠르게 찾는다. 현재 위치에서 목적지로 가는 길을 찾거나, 어떤 단어의 의미를 찾기도 한다.
 
 
위 세 가지가 대부분의 사용자들이 모바일 기기를 사용하는 이유다. 이를 기반으로 애플리케이션이 어떤 서비스를 제공할지 생각해 본다면 서비스 방향을 잡을 수 있을 것이다. 검색 서비스를 만든다면 무언가를 찾는 화면을 먼저 보여주는 것이 좋을 것이다. 게임을 만들었다면 최대한 빨리, 쉽게 게임을 시작할 수 있게 하는 것이 좋을 것이다. 사진 공유 사이트를 만들었다면 손쉽게 자신의 사진을 공유하거나 다른 사람의 사진을 볼 수 있는 화면을 구성할 수도 있다. 이렇게 애플리케이션의 특성을 생각해 보는 것은 서비스 정체성을 분명히 하고 사용자가 혼란스럽지 않게 한다.
 

  
[그림 12-5] 내비게이션의 화면 영역 차지(옥션 사이트과 구글 주식 사이트)
 
하지만 콘텐츠가 중요하다고 해서 내비게이션이 중요하지 않다는 것은 절대 아니다. 그렇다고그림 12-5’처럼 상단에 메뉴를 무분별하게 쌓으라는 말은 아니다. 다른 페이지로 갈 수 있는 메뉴는 사용자의 콘텐츠 소비를 최대한 방해하지 않으면서 원하는 때에 접근할 수 있는 위치에 두는 것이 좋다. 상단 툴 바나 콘텐츠 안, 화면의 아래쪽 등에 메뉴를 숨겨둘 수도 있다.
 
 
다시 한 번 유튜브 서비스를 살펴보자. 유튜브의 상단 툴 바 오른쪽을 보면 손으로 잡고 끌 수 있는 아이콘이 있다. 이 아이콘을 누른 채 오른쪽으로 당기면 숨겨진 메뉴가 나타난다. 이곳에서 구독 중인 채널을 보거나 계정 설정, 다른 카테고리 선택을 할 수 있다. 원하는 영상을 찾기 위해 툴 바의 오른쪽에 있는 돋보기 모양의 아이콘을 누르면 화면 밖에서 찾기 폼과 키보드가 화면 안으로 미끄러져 들어온다.

[그림 12-6] 숨겨둔 내비게이션 - 유튜브 메뉴와 검색창
 
 
또 다른 전략으로는 콘텐츠를 전부 보면 다음 콘텐츠를 보여주는 방식이 있다. 대표적으로 구글의 모바일 웹 검색 화면이 있다. 맨 위에는 검색 카테고리와 검색창 말고 검색 결과부터 시작한다. 그리고 맨 밑으로 스크롤을 내리면 구글에서 할 수 있는 다른 것들을 보여준다.
 
그 외에도 리스트 중 하나를 눌러 한 아이템을 보았을 때추천의 의미로 현재 본 콘텐츠와 비슷한 다른 콘텐츠를 보여줄 수도 있다. 이런 내비게이션 전략은 상황과 콘텐츠의 종류에 따라 다양하게 적용할 수 있다.
 
[그림 12-7] 화면 하단에 내비게이션 배치 - 구글 검색 결과
 
 
모바일 화면 디자인 고려 사항
 
화면의 툴 바에 대해서도 고려할 부분이 있다. 만들고 있는 애플리케이션이 iOS용 앱이라면 디자인 가이드에 따라 상단 툴 바에뒤로가기버튼을 위치시킬 것이다. 안드로이드나 윈도우 폰이라면 기기 자체에뒤로가기버튼이 있기 때문에 버튼을 배치할 필요 없이 개발 가이드에 따라 프로그램을 작성하면 된다. 하지만 웹 앱이라면 이야기가 달라진다.
 
모바일 웹에서 앱과 비슷한 경험을 주기 위해 상단 툴 바를 만들고 뒤로가기 버튼을 만들 때는 보통 iOS의 디자인을 비슷하게 따라하는 경우가 많다. 이러한 선택은 iOS를 사용하지 않는 사람들이 있음을 고려하지 않은 디자인이라고 할 수 있다. 게다가 모바일 웹 브라우저에는 기본적으로뒤로가기버튼이 있다. 중복된 기능을 두 개 만드는 것은 시간 낭비이자 화면 낭비다.
 
가장 중요한 것은 한 화면에서 너무 많은것을 보여주지 않는 것이다. 현재 화면에서 어떤 것을 해야 하는지 명확해야 하고 그 목적을 위해 디자인하는 것이 좋다. 모바일 사용자는 집중해서 기기를 사용하지 않는다. 사용자가 잘못 조작하지 않도록 단순하게 만들고 무엇을 해야 할지 몰라서 난감해하지 않도록 하는 것이 좋은 디자인이라 할 수 있다. 야후의 이메일 쓰기 화면은 매우 잘 만들어져 있다. 여기서 내비게이션은취소하나뿐이다. 네이버 메일 쓰기 화면을 보면 내비게이션이 너무 많다. 내비게이션이 적을수록 사용자는 실수도 적게 한다.
 
아쉽게도그림 12-8’에서 좌측 야후 메일 서비스는 단순한 디자인은 좋지만 한글 적용 시 어색한 부분이 발생했다.
 
  
[그림 12-8] 야후와 네이버의 메일 작성 화면 비교
 
 
모바일 인터랙션 디자인 [컴퓨터/IT]  모바일 인터랙션 디자인
카메론 방가 | 정보문화사
2015.09.10
UX 디자인 7가지 비밀 [컴퓨터/IT]  UX 디자인 7가지 비밀
박지수 | 안그라픽스
2013.03.18
UX&UI 디자인 프로젝트 [컴퓨터/IT]  UX&UI 디자인 프로젝트
정승호 | 정보문화사
2011.11.08
모바일 애플리케이션 개발 한 권으로 끝내기 [컴퓨터/IT]  모바일 애플리케이션 개발 한 권으로 끝내기
이성환 | 정보문화사
2014.05.30
 
 
┃남무현(정보문화사 마케팅 팀장)
 

정보문화사

정보문화사
하루가 다르게 급변하는 IT 트렌드와 기술을 빠르고 정확하게 독자들에게 전달하는 IT 전문 출판사. 1990년에 시작된 국내 IT출판의 메인 플레이어.
  • 퍼가기 인쇄 트위터 페이스북

최신기사 보기

READIT 목록보기

댓글을 남겨주세요 0

  • 댓글등록

현재 0 / 4000 bytes (최대 한글 2000자, 영문 4000자)