abulaphiaa

Keep Yourself Social

다양한 단말에서 디자인하기 위한 프레임워크

with one comment

지난 번 멀티스크린용으로 디자인할 때 일관성, 싱크, 스크린 공유, Device Shifting, 상호보충성 등 반복적으로 등장하는 패턴들에 대해 알아 보았습니다. 저도 2000년대 후반부터 PC 클라이언트와 Web, 모바일, IPTV 등 여러 단말에서 주소록과 버디, 포토, 동영상, 일정 등을 친구들과 공유할 수 있는 IM 기반의 프로젝트를 몇차례 진행해 본 적이 있습니다. 이때 가장 문제가 되었던 것은 단말별 Key Feature에 대한 요구사항과 정책이 프로젝트 관련자들 마다 달라 U/I나 UX, 회원정책 등을 깔끔하게 정리하고 시작하기가 어려웠던 점입니다. 그래서 문제가 생기면 그때 그때 땜빵식으로 해결하다 나중에는 다 뒤엎고 다시 개발해야 했던 뼈아픈 기억이 있습니다. 일단 모바일에 집중해서 먼저 디자인하라고 하는 것도 바로 이러한 이유 때문인 것 같습니다.

이때의 경험을 떠올리면서 이번에는 지난 번에 정리한 Multi Screen Design Pattern의 내용을 좀 더 구체적으로 이해할 수 있는 좋은 글이 있어서 소개하고자 합니다.

※ Source : Framework For Designing Multi Devices (2011 1 1, UXMegazine)

최근에는 컨텐트를 스마트폰에서 TV까지 다양한 스크린 사이즈에서 볼 수 있고 인터액션할 수 있게 만들어야 한다. 인터넷에 연결된 단말이 크게 증가함에 따라 사람들은 자신들이 사용하는 프로덕트와 서비스를 여러개 단말을 옮겨 다니면서 보고 싶어 한다. 스크린 사이즈와 상관없이 사람들은 다양한 단말에 최적화된 컨텐트를 원한다.

Screen Sizes By Devices

Screen Sizes By Devices

다양한 단말에서 디자인을 하려면 컨텐트를 단순히 리사이징하여 서로 다른 사이즈의 스크린에 디스플레이하는 것 이상이 필요하다. 그것은 스크린별로 실제로 잘 보여야할 뿐만 아니라 사용가능해야 한다 (must be viewable and usable). 우리는 컨텐트가 하나의 스크린에서 다른 스크린으로 어떻게 변화해야하는지에 대해 결정해야 한다. 보다 구체적으로 말하면 컨텐트가 어떻게 리사이즈되어야 하는지, 포트레이트 모드와 랜드스케이프 모드에서 어떻게 보여져야 하는지까지 상세하게 컨트롤해야 한다. 이것을 위해서는 폭넓은 범위의 단말과 스크린 사이즈를 겨냥해서 효과적인 전략을 발전시켜야 한다.

1) 단말이 다르면 경험도 다르다 (Different Devices, Different Experiences)

모든 디바이스는 무엇인가 다른 일을 한다. 단말마다 잘하는 것과 잘 못하는 것이 있다. 그러므로 모든 기능이 모든 단말에서 잘 동작하지는 않는다 (not all features make sense on all devices). 당신은 유저가 서로 다른 컨텍스트에서 어떻게 프로덕트를 사용하는지를 확인해야 할 필요가 있다. 유저들이 모바일에서 당신의 프로덕트를 사용할 때 데스크탑과는 다른 무엇인가를 기대한다. 현재 극장에서 상영중인 영화에 관한 웹사이트를 예로 들어 보자. 데스크탑에서 유저들은 트레일러와 영화에 관한 상세 정보 등 포괄적인 경험(immersive experience)을 원한다. 모바일에 그들은 영화들의 리스트, 가까운 극장, 상영시간에 보다 초점을 맞춘다. 우리는 단순히 App.의 사이즈만 늘려서 맞춰 놓는 것이 아니라 유저 단말에 최적화된 상태로 App.을 실제로 디자인했다고 유저들이 믿을 수 있게 함으로써 모든 단말에서 User Experience를 극대화해야만 한다 (Mazimize the User Experience for All Devices).

2) 이용의 컨텍스트를 이해하라 (Understand Context of Use)

유저들은 하루 종일 여러개의 단말에서 컨텐트를 소비한다. 유저의 상황에 적합한 경험을 만들어 내기 위해서는 다양한 단말들이 사용되는 컨텍스트를 이해하는 것이 중요하다. 당신은 정확한 시간에 정확한 단말에서 정확한 컨텐트를 제공해야할 필요가 있다 (You need to provide the right content, on the right device, at the right time).

The Daily Context of Multiple Device Usage

The Daily Context of Multiple Device Usage

서로 다른 디바이들의 이용이 어떻게 오버랩되는지, 그리고 이종 단말간 상호 어떻게 보조적으로 사용되는지를 이해하는 것은 중요하다 (It’s also important to understand how the usage of different devices overlaps and how they complement each other).

매일 어떤 태스크를 수행하기 위해 유저들이 어떤 상황에서 어떤 단말을 얼마나 사용하고 있는지(time spent on different devices for daily tasks)에 관한 Nielson Survey( 2011년 1/4분기)에 따르면, 태블릿 소유자의 70%, 스마트폰 소유자의 68%는 TV를 시청하면서 자신의 단말을 사용한다. 반면 e-Reader 소유자들의 61%는 침대에서 자신의 단말을 가장 많이 사용한다.

US Connected Devices : Situational Usage

US Connected Devices : Situational Usage

TV를 보면서 스마트폰이나 태블릿 등을 사용하는 유저는 우리나라에서도 크게 증가하고 있다. 엠브레인 트렌드모니터가 휴대폰 사용자 1천명을 대상으로 조사한 결과에 따르면, 91%가 TV를 시청하면서 다른 모바일 기기를 사용하고 있다 (TV 시청 도중 사용하는 단말 비율스마트폰 93%, 노트북 58.2%, 태블릿PC 24.3%, 게임기 19.9%, 2012년 2월 7일, 파이낸셜뉴스).

장소에 따른 단말별 사용시간 분포(Time Distribution For Device Usage By Location)를 보면 태블릿과 TV는 매우 상호 보충적인 매체이다. 전체 태블릿 사용시간의 30%, 전체 스마트폰 사용시간의 20%를 TV를 볼 때 사용한다.

US Connected Devices : Time Distribution of Usage

US Connected Devices : Time Distribution of Usage

3) 다양한 단말들을 성능이나 유저의 초점에 따라 그룹핑하라 (Define Device Groups)

스크린 사이즈별로 다양한 단말들이 존재하나 유저의 초점 또는 성능에 따라 수많은 단말들을 그룹핑하라. 예를 들어

  1. Featurephones: 128, 160, 176, 220, 240
  2. Smartphones: 320, 480
  3. Tablets: 800
  4. PC: 1024+
  5. TV: 1600+

4) 디바이스 그룹별로 유저의 목표를 찾아내라 (Identify User Goals For Different Groups)

스마트폰은 대부분 특정 지역에 관한 정보찾기, 엔터테인먼트, 사회적 공유 등 미세한 작업을 하기 위한 개인적인 용도로 사용된다. 태블릿은 랩탑의 대체제로서 주로 컨텐트를 소비하는데 사용된다. 각각의 이용 컨텍스트에 맞게 Experience를 맞춰야만 한다 (Adapt the experience for each context of use).

당신의 프로덕트가 디바이스 그룹별로 사용되는 다른 시나리오를 찾아 내고, Experience를 각각의 시나리오에 맞게 디자인해야 한다. 예를 들어, 좋은 모바일 어플리케이션을 만들기 위해서는 모바일 유저들이 요구하는 핵심기능과 활동들에 초점을 맞춤으로써 그것을 단순화해야한다.

어플리케이션이 제공하는 기본적인 인터액션과 기능들을 세분화하고 서로 다른 디바이스 그룹에 적합한 조합을 만들어 내라. 요소들의 포지션을 바꾸거나 재조직하는 방식으로 각각의 변종에 적합한 정보와 U/I 디자인을 생성하라. 모바일을 디자인한다면 모바일 유저들의 니즈에 가장 잘 부합하는 우선순위에 따라 카테고리의 순서를 조정하라. 예를 들어 구글의 모바일 웹사이트는 데스크탑 웹사이트와는 다른 아이템에 초점을 맞춰 상단의 내비게이션에 배치했다.

Google News Website On PC & Mobile

Google News Website On PC & Mobile

Evernote는 인기있는 Note-Taking Product로서 다양한 단말에서 사용할 수 있다. 에버노트의 PC와 태블릿 버전은 컨텐트 소비에 최적화되어 있는 반면 스마트폰 버전은 포토와 오디오 인풋에 최적화되어 있으며 노트들에는 위치정보가 태깅된다.

Evernote App. On Different Platform

Evernote App. On Different Platform

5) 각 그룹별로 확장가능한 레퍼런스 디자인 만들기(Create a Scalable Reference Design For Each Group)

일단 각 디바이스 유형에 적합한 기능들을 찾아 냈다면 이번엔 레퍼런스 디자인을 만들 차례다. 원칙과 패턴과 가이드라인의 셋트를 정의함으로써 어플리케이션의 본질적인 컴포넌트들이 포함되도록 리퍼런스 디자인을 만들되, 이 콤포넌트들이 디바이스 그룹에 따른 다양한 스크린 사이즈에 두루 적용될 수 있는 확장성을 가질 수 있도록 해야 한다. 포트레이트와 랜드스케이프 모드별 디자인도 빠뜨리지 말아야 한다 (Make sure to address different orientations).

BBC Mobile Style Guide

BBC Mobile Style Guide

6) 모바일을 먼저 디자인하라 (Designing For Mobile First)

보통 PC 또는 데스크탑용으로 어플리케이션을 먼저 디자인하고 나중에 모바일에 포팅을 한다. 그러나 모바일에는 제약사항이 많고 보다 초점을 맞춰 작업할 수 있기 때문에 모바일을 우선해서 디자인하는 것이 유리하다.

PC에서 먼저 작업하게 되면, 다수의 이해 당사자들이 개입하게 되기 때문에 프로덕트에 많은 것들이 추가되는 “Kitchen Sink”의 문제가 발생하게 된다. PC는 화면이 크기 때문에 무엇인가를 추가하는 것이 상대적으로 쉽다. 그러나 모바일용을 먼저 디자인하면 당신은 가장 중요한 것이 무엇인지를 결정할 수 있으며, 모바일 디자인시 사려깊게 생각해낸 동일한 절차를 그것이 PC건 TV건 태블릿이건 상관없이 모든 버전의 프로덕트에 적용할 수 있게 된다.

디자인 우선순위를 모바일에 두면 수년동안 디자이너들을 괴롭혀 왔던 어려운 이슈들이 어떻게 해결될 수 있는지에 대해서는 Mobile First라는 책의 저자인 Luke Wroblewski의 글 Designing for Mobile First를 참고하라.

7) 동기화하라 (Synchronize)

이용 시나리오에 기초하여 각 단말에서 소비되는 컨텐트가 싱크되도록 보장할 필요가 있다. 예를 들어, 스마트폰에서 eBook을 읽다가 태블릿으로 바꾸면 스마트폰에서 읽던 그 페이지에서 다시 읽을 수 있어야 한다. 아마존의 킨들은 다양한 단말에서 싱크를 매우 잘 다루고 있다.

8) 디테일을 똑바로 잡아 내라 (Get the Details Right)

다양한 단말에서 디자인할려면 복잡도가 높아질 수 밖에 없다. 디테일을 똑바로 잡아내야 각 단말 그룹별로 품질 좋은 Experience를 만들어 낼 수 있다. 각 단말별 강점과 약점을 잘 이해하고 있어야 특정 단말에 적합한 Experience를 창조해 낼 수 있다. 단말별로 유저가 프로덕트를 이용하는 시나리오를 정의할 때는 다음과 같은 디테일에 신경써야 한다.

  • User가 서비스를 이용하는 자세 (User Posture) : 정지해 있는지 (stationary), 이동 중인지 (mobile), 등을 기대고 있는지 (lean backward), 앞으로 수그리고 있는지 (lean forward)
  • Device Input Capabilites : 카메라, 마이크, 텍스트, NFC, GPS, 자이로스코프, Accelorator 등
  • Device Display Capabilites
  • Navigation Style

같은 프로덕트라도 시나리오에 따라 두 세가지 변종을 디자인하는 것이 유리할 때가 많다.

9) Mobile Web vs. Native Web

다양한 단말에서 App.을 개발하는데 가장 쉬운 방법은 모바일 웹이다. 그러나 모바일 웹과 네이티브 앱은 각기 다른 장점을 가지고 있고 타겟 유저도 달라질 수 있다. 모바일 웹으로 개발할지 네이티브 앱으로 개발할지 결정하려면 다음과 같은 질문에 먼저 답해야 한다.

  • 당신의 프로덕트는 유저에게 어떤 Experience를 전달하고자 하는가 ?
  • 당신은 프로덕트를 통해 무엇을 성취하고자 하는가 ?
  • 당신의 비즈니스 모델은 무엇인가 ?
  • 가용한 예산은 얼마나 되는가 ?
  • 당신 프로덕트의 타겟 고객은 누구인가 ?

이 질문에 대한 답을 찾은 후 두가지 방법 중 장단점을 잘 저울질하고 무엇이 최적인지 결정하라.

먼저 Mobile Web의 장점은

  • Reach Larger Audience : 아직 많은 사람들은 스마트폰을 보유하고 있지 않으며 App. Store에 접속하지도 않는다. 그들은 모바일 브라우저를 통해 인터넷에 접속할 확률이 더 높다. 스마트폰 보유자라 할지라도 브라우저를 통해 사이트에 접속하는 장벽이 App.을 다운로드하는 장벽 보다 낮다.
  • Lower Cost and Time To Market : 모바일 웹의 가장 큰 장점은 한번만 설계하면 조금만 바꾸어도(with minimal tweaking) 모든 모바일 플랫폼에서 잘 동작할 수 있다는 점이다. 모바일 업계의 파편화 (fragmented nature of the mobile industry)로 인해 다른 플랫폼 환경에 앱을 포팅하려면 많은 비용이 필요하다. 특히 유지보수와 마케팅 비용까지 고려하면 더욱 그렇다 (플랫폼의 파편화를 HTML5 기반의 Web App.으로 어떻게 해결하는지에 대해서는 HTML5 모바일 App.의 대해부“라는 글을 참조하세요).
  • Instant Updates : 웹에서 업데이트하면 무엇이든지 유저들에게 즉각 배포된다.※Native냐 WebApp.이냐에 관한 논쟁은 여전히 진행중입니다. 얼마전에는 안드로이드 4.0 최시버전에
  • No Censor : 모바일 웹을 사용하면 컨텐트에 대한 검열을 받지 않기 때문에 언제든지 무엇이든지 당신이 원하는 것을 배포할 수 있다.
  • Low barrier to entry and no revenue share : 모바일 웹은 진입비용이 거의 없으며, 수익의 100%를 가질 수 있다.

두번째로 Native App.의 장점은

  • Connectivity : 네트워크의 접속이 끊길 경우 브라우저는 동작하지 않는다. 실제 세계에서 데이타 커넥션이 끊기는 경우가 많다. 네이티브는 오프라인 상태에서도 유저들과 인터액션이 가능하도록 만들어 질 수 있다. (※ 역주 : 최근 HTML5의 오프라인 스토릿지 기능을 활용하면 네트워크 오프상태에서도 Native App.처럼 동작할 수 있는 Web App.이 나오고 있다)
  • Device Based Caching : 네이티브 App.은 데이타를 지속적으로 단말에 캐쉬할 수 있기 때문에 네트워크를 통한 데이타의 요청을 줄일 수 있으며 데이타에 더 신속하게 접근할 수 있다. (※ 이것 역시 단말에 캐슁된 데이타를 먼저 보여준 후 최신 업데이트된 컨텐츠를 나중에 가져와서 보여주는 구조로 동작하는 WebApp.이 많이 있기 때문에 반드시 네이티브 App.만의 강점이라고 할 수는 없다)
  • Richer Experience : 네이티브 App.은 Device의 Function과 Feature를 활용하여 보다 풍부한 Experience를 제공할 수 있으며, 카메라나 주소록과 같은 네이티브 기능을 Seamless하게 통합해 낼 수 있다.
  • Immersive Experience : 게임처럼 몰입이 필요한 App (Immersive App)은 풍부한 Experience를 제공하는데 보다 높은 성능이 필요하다. 네이티브 App.을 사용하면 이것을 더 쉽게 성취할 수 있다.
  • Discoverability : 앱 스토어에서 좋은 앱들을 쉽게 발견할 수 있다. 모바일 웹링크 보다는 앱을 통해 위대한 마케팅을 하기가 더 쉽다.

멀티스크린과 관련하여 항상 나오는 얘기가 Native냐 WebApp이냐에 관한 것입니다. 애기가 옆으로 좀 새긴 했지만 이에 관한 역주를 다는 것으로 글을 마치고자 합니다.

어떤 App.을 개발함에 있어서 Native냐 WebApp.이냐를 선택하는 것은 여전히 어려운 문제인 것 같습니다. 얼마전 구글이 안드로이드 4.0 버전에 기존 안드로이드 브라우저 대신 크롬 브라우저를 탑재하여 테스트 중이며, 이에 따라 Native와 같이 풍부한 경험을 제공하는 모바일 WebApp.의 개발이 가능해질 것이라는 소식이 전해졌습니다. 이에 관해 더 관심있는 분들은 어떤 개발자가 안드로이드에 올린 구글 크롬 베타버전에서 HTML5의 다양한 기능들 중 어떤 것을 지원하는지 대해 테스트한 결과 “Google Chrome For Android : Welcome To the Mobile HTML5 World, 2012년 2월 8일, mobileweb)를 참고하세요.

그러나 또 한켠에서는 HTML5가 대세라고 하지만 아직까지 Native처럼 자연스러운 UX를 제공하기는 어렵다는 의견도 있습니다. Robert Scobble에 따르면, Drag&Drop, 줌, 접기, 스크롤 등 U/I 처리가 자연스럽지 않아 Path, Storify, FoodSpotting 등 샌프란시스코 최고 App.개발사들은 HTML5에서 Native로 후퇴하고 있다고 합니다 (HTML5 Pushback In San Francisco ? Best Mobile App. Designers Say Yes, 2012년 2월 1일, Scobleizer).

또한 Dave Feldman 이라는 유명 개발자는 HTML5가 대세라고 해서 열심히 웹 개발한지 1년이 지난 후 1) 문서도 불충분하고 Hole도 많고, 2) Sencha나 JQuaryMobile 등 Middle Layer를 통해 억지로 마치 그것이 O/S 기반의 Native에서 동작하는 것처럼 흉내내면서 App.을 개발하기 때문에 Performance가 후져지고 3) JavaScript만 Debugging하기 때문에 HTML5 Framework 자체에 내재한 버그를 찾아내기가 어려우니, 차라리 잘 정리된 다른 플랫폼 개발방법을 배워서 Native로 하는 것이 아직까지는 유리하다는 의견을 제시하기도 했습니다 (One Year Later : Is HTML5 Ready for Prime Time vs. Native ? No., 2012년 1월 6일, interfacethis).

여러분들 생각은 어떠신가요? Path와 같은 경우 Web과의 연동을 전혀 고려하지 않고 모바일 단말에 최적화된 전용 App.을 Simple하게 구현하여 큰 인기를 끌고 있습니다. 즉 모바일에서 친한 사람들과의 사적인 경험을 주로 사진으로  공유하는데 초점을 맞추고 있습니다. 이와같이 App.을 통해 User가 달성하고자 하는 목표에 초점을 맞추면 답이 나오지 않을까요? 그러나 현실에서는 이것저것 면밀히 고민해서 어떻게 개발할지 선택하기 보다는 현재 상황에서 우리에게 주어진 자원을 가지고 익숙한 방식으로 일정에 맞춰 가장 신속하게 개발할 수 있는 방법을 택하는 경향이 강합니다.

Written by abulaphia

February 9, 2012 at 9:14 pm

One Response

Subscribe to comments with RSS.

  1. “Mobile First” 에 대해서는 여러번 들었지만, “낮은 해상도로 인해 가장 중요한 것이 무엇인지를 결정”할 수 있다는 명백한 장점은 처음 알게되었군요. 소개 감사드립니다.🙂

    yoehanee

    February 16, 2012 at 12:46 am


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: