abulaphiaa

Keep Yourself Social

Archive for the ‘UI UX Design’ Category

Defining an Interaction Model: The Cornerstone of Application Design

leave a comment »

Jim Nieters라는 UX Designer가 HP에서 여행 관련 프로덕트의 UX를 설계한 경험을 바탕으로 Interaction Model이 무엇이고, 그것을 어떻게 수립하고, 인터액션 모델이 결정된 후 세부 작업을 위한 프레임워크에 무엇이 있어야 하는지를 정리한 글입니다 (※ Source : Defining an Interaction Model , 2012년 1월 23일, UXmatters).

제가 보기에 이 글에서 저자가 말하는 Interaction Model이란 “만약에 웹에 의해 매개되지 않고 실제세계에서 직접 일을 한다면 어떤 Task를 수행함에 있어서 User가 어떤 Object에 대해  어떤 Action을 하고, 이것을 누구와 주고받는지”에 관한 개념적 모델을 의미하는 것 같습니다. 예를 들어, 백화점에 가서 쇼핑을 한다고 가정한다면, 매장에 진열된 제품(Object) 중 사고자 하는 제품을 선택하고,  이리 저리 훓어보고, 카운터에 가서 현금카드로 제품 구입의 대가를 지불합니다. 실제 온라인 쇼핑몰 역시 “오프라인의 상거래”에 관한 이와같은 인터액션 모델에 기초하여 구축된다는 것입니다.

누군가 어떤 회사에 입사 지원을 한다면, 이 유저는 “입사지원서”라는 정형화된 형식의 다큐먼트 (Object)에 정보를 채워 넣는 Action을 수행한 후 이것을 그 회사의 인사담당자에게 우편이나 도보로 직접 전달하게 됩니다. 그러면 인사담당자 입장에서 접수된 “입사지원서”들을 책상위에 쌓아 놓고 , 일차적으로 “합격 도장”을 찍은 것 – 즉 이때 합격 도장은 접수된 Object들에 대한 검토결과 처리하기  일종의 UI라고 할 수 있음 – 만 간추려서 사업담당자들에게 넘기는 등 다음 절차를 수행하게 됩니다.  협의의 관점에서 볼 때 User Interface는 온라인 상에서 User의 목표 대상인 “입사지원서”가 제시되는 양식과 이것을 다루는데 필요한 User의 Action을 지원하는 툴로 구성된다고 할 수 있겠습니다.

그리고 이러한 Interaction Model이 충분히 사전에 정의되지 않는다면  어떤 Task를 단계적으로 수행함에 있어서 필요한 Obejct들이나 이것을 다루는 반복적인 UI 패턴에 관한 스타일 가이드, User Experience에 적용되는 메타포나 형식 (웹이냐 전용이냐, 이메일 형식이냐 게시판 형식이냐, 플립보드와 같은 잡지 형식이냐 아웃룩과 같은 3단 Layout이냐 등), 페이지들간 관계에 관한 IA와 Navigation 구조 등도 설계하기가 어려울 것입니다. 저자는 이것이 잘 정의되어 있다면 User 입장에서 너무나 간단하고 자연스럽기 때문에 이것을 만드는데 왜 이렇게 오랜 시간이 걸렸나 의아해 할 것이라고 지적합니다. 매일 공기 자체를 인지하지 않고도 숨을 쉬듯이 일종의 자연법칙처럼 역시 잘 만들어진 UI는  UI가 없는 것처럼 느껴진다 것입니다.

더 자세한 내용은 아래 글을 참고하시길…

1. Interaction Model Definition

인터액션 모델은 타겟 유저의 개념적인 모델을 지원하는 방식으로 어플리케이션을 묶어 주는 디자인 모델이다. 그것은 어플리케이션을 하나로 엮어 내는 접착제이다. 그것은 실제 세계에서 유저의 인터액션을 반영하고 지원하는 방식으로 어플리케이션을 구성하는 모든 오브젝트들과 액션들이 어떻게 상호 연결되는지를 정의한다. 그것을 통해 유저들은 어떤 지향성을 유지하고 어떻게 플레이스를 이동하면서 정보를 찾거나 태스크를 수행하는지를 이해하게 된다.

그것은 어플리케이션의 비전을 담고 있다. 인터액션 모델을 통해 디자이너와 개발자들, 프로젝트 관련자들은 유저들이 시스템내에 있는 오브젝트들로부터 어떻게 액션하지를 이해하고 설명할 수 있게 된다. 일단 인터액션 모델을 이해하면, 패턴이 보이고, 모든 것이 명쾌해 진다.

예를 들어, Microsoft Word는 유저가 타자기에 종이를 끼우고 타이핑을 하는 개념적 모델을 지원하고 있다. Excel은 항목별로 숫자를 칼럼에 기입하는 회계담당자의 개념적 모델을 지원하고 있다. 파워포인트는 오버헤드 포로젝터로 투명 플라스틱 문서를 스크린에 쏘는 발표자의 개념적 모델을 지원하고 있다. 이 3가지 어플리케이션은 많은 추가 기능들과 풍부한 경험을 제공하고 있지만 그것의 핵심에는 모든 유저들이 쉽게 내면화할 수 있는 인터액션 모델이 있다.

인터액션 모델이 잘 정의되면, 시스템내에서 발생하는 대부분의 액션들은 예측가능하게 된다. The Invisible Computer라는 책에 쓰여진 바와 같이 프로덕트나 인터액션이 효과적으로 동작한다면 우리는 그것을 인지하지 못한다.

단순한 웹 포탈이라면 Global Product나 Information Architecture만 있어도 디자인이 가능하겠지만, 복잡한 인터액션을 지원하고 10여개 이상의 페이지로 구성된다면 인터액션 모델을 먼저 정의해야 한다.

  • 스타일가이드와 차이점 : 모든 요소들이 전체 페이지와 스크린에 동일하게 적용되어야만 하는 디자인 스카일 가이드와 달리 인터액션 모델은 오브젝트들이 상호연결되는 방식을 묘사하는 근본적인 디자인 패턴 (Foundational Design Pattern)으로서 합해져서 전체 모델이 묘사되는 많은 서브패턴들을 가지게 된다. 디자이너들이 유저의 실제 문제를 해결할 여지를 제공한다는 점에서 인터액션 모델은 스타일가이드와 다르다.
  • 어플리케이션의 제시방식 : PC기반의 Non-Mobile Application이 웹 포탈의 형식을 사용할 것인지 또는 데스크탑 어플리케이션의 형식을 사용할 것인지 ? 우리의 경우 웹 어플리케이션을 개발하지만 링크 대신 버튼을 더 많이 사용하고 Minimize/Maximize 버튼을 통해 브라우저 크롬을 완전히 감추고 스크린 전체 공간을 Application 영역으로 활용하는 등 데스크탑과 동일하게 동작하도록 설계했다. 우리는 퍼포먼스가 매우 좋은 어플리케이션 기술을 설계했지만, 웹 포탈의 메타포 대신 데스크탑 어플리케이션 메타포를 선택했다 (chosen a desktop application metaphor over a Web portal metaphor for the application). 
  • Information Architecture와의 차이점 : IA는 페이지들간의 관계를 매핑하는 것으로서 복잡한 시스템인 경우 IA를 통한 정보의 구조(Structuring Information)뿐만 아니라 많은 복잡한 요소들로 구성되는 시스템을 통해 유저들이 움직이는 방식, 그들이 복잡한 트랜잭션을 수행하기 위해 그것을 어떻게 사용하고, 원래 위치로 돌아오는 방식 등에 대해서도 정의해야 한다.
  • Navigation Model과의 차이점 : 어플리케이션의 어떤 페이지나 섹션에서 다른 곳으로 유저들이 어떻게 이동하는지를 묘사하는 Navigation Model과 달리 인터액션 모델은  유저들이 자신의 목표(objectives)에 도달하기 위한 개념적 접근방식, 즉 실제 생활에서 태스크를 수행하는 방식 – 을 설정할 수 있도록 지원해야 한다.

결과적으로 인터액션 모델에는 유저들이 페이지를 어떻게 내비게이션하는지, 그들이 예약, 패신저, Expense 등 페이지에서 관심있는 Object를 어떻게 선택하는지, 구매하기, 여행코스 스케쥴링하기, 추가하기 등 선택한 대상에 대해 어떤 액션을 수행하는지 등에 대한 정의가 포함된다. 또한 우리는 디자인 패턴을 사용하여 인터액션 모델을 묘사한다. 우리의 뇌는 연결된 신경세포를 통해 패턴을 인지하게 되어 있다. 인터액션 모델은 식별가능한 패턴으로서 유저들의 사고방식과 실제 생활의 활동에 대한 접근방식을 지지하고 간단히 이해할 수 있는 서브패턴들도 보여준다 (discernible pattern that supports the way users think about and approach real-life activities, which also reveals subpatterns in easily discernible ways).

2. User Scenario For Specification of Interaction Model

당신이 몇날 몇주 몇달간 에 거쳐 열심히 노력해서 인터액션 모델을 이해하고 문제 해결을 위한 솔루션을 마침내 찾아냈다면, 당신은 그것이 너무나 단순해서 이것을 이해하는데 왜 이렇게 오랜 시간이 걸렸는지 의아해 하게 될 것이다.

유저의 목표가 무엇이고 그것을 달성하기 위해 어떤 Object들을 사용하며, 그리고 유저가 실제 생활에서 이 Object들에 대해 행하는 어떤 Action을 하는지의 관계를 파악하고, 그것을 반영하는 Interaction Model의 시안들을 수립하고 각 모델별 장단점을 검토하여 최종 모델을 결정해야 한다.

예를 들어, 예약 담당자는 출발지로 향하는 비행기의 예약을 성공적으로 대행해 주는 것이 목표이고, 이를 위해 고객과 계속해서 통화를 하는데 여기에서 가장 중요한 Object는 고객이다. 그는 항공기를 예약하거나 프로필을 변경하는 등의 Action을 수행한다.

이와 달리 Gate Agent는 정시에 고객들을 탑승시키고 항공기를 이륙시키는데 초점을 맞춘다. 그들의 능력은 이것을 기준으로 평가받는다. Gate Agent는 항공기의 정시 이륙을 위해 고객들이 모두 탑승했는지, 좌석을 업그레이드한 사람이 있는지, 대기자 리스트에 있는 고객이 지금 비행기에 탑승했는지 등 다양한 활동을 수행한다. Gate Agent의 Object는 Flight이다.

또한 Baggage Handler의 1차적 Object는 짐꾸러미이다.

우리는 이 3가지 유형의 서로 다른 유저들이 일차적으로 초점을 맞추는 Object를 전면에 부각시키고 그것을 중심으로 짜여진 인터액션 모델을 만들어냈다. 우리는 또한 에이전트들에게 Object에 관한 핵심정보를 요약해서 제공함으로써 그 Object에 대한 액션을 효과적으로 수행할 수 있도록 했다.

Once we understood the object-action relationships for these users, we spent a couple of months brainstorming various ways in which we could structure the overall product to permit these object-action relationships to take place in the most efficient, delightful way. During the brainstorming process, the team explored options, produced a set of screens for each user scenario, and looked at how well the model held together across scenarios. We did not just create simple screens. Rather, we crafted some of the most complex scenarios, with some of the most complex screens, to ensure that the interaction model supported big challenges. Sometimes, we recognized early that a model didn’t work. At other times, a model looked pretty good at first, but then we found that it wasn’t scalable.

If we can show how an interaction model can result in breakthrough solutions, we can build the right level of support for having User Experience at the center of the strategic dialogue.

3. Interaction Model을 수립하기 위한 원칙

프로덕트에 대한 User Experience의 목표(대상)를 먼저 이해하지 않는다면 Interaction Model을 만들어 낼 수 없다. 이것을 알아야 이 모델의 성공여부, 그리고 이 모델의 한계 내에서 당신이 내린 디자인에 대한 개별적인 결정들이 얼마나 성공적인지를 측정할 수 있다. 여행 프로덕트를 디자인하면서 우리는 다음과 같은 목표를 설정했다.

  • Discoverability – 유저들이 이 모델의 일차적 목표(primary object)를 얼마나 신속하게 알아내고 어떻게 액션을 수행해야 하는지를 이해할 수 있는지 ? 유저들이 처음부터 이 시스템을 성공적으로 사용할 수 있는지 ?
  • Learnability : 시스템을 완벽하게 사용하는 방법을 유저들이 내면화하는데 얼마나 시간이 걸리는지 ? 간단한 컨수머 프로덕트조차도 약간의 학습시간이 필요하다 (Slight Learning Curve). 예를 들어 나는 우리 회사가 나에게 지급한 새로운 스마트폰의 멋진 기능들 모두를 어떻게 사용하는지 이해하기 위해 이것 저것 써봐야 했다.
  • User Efficiency and Productivity : 일단 유저가 이 시스템을 자신있게 사용할 수 있게 된다면, 평범하거나 반복적인 태스크를 얼마나 쉽게 사용할 수 있는가 ? 그들이 한방에 벌크 액션을 수행해야 하는지 또는 10여가지 태스크를 해야 하는지 또는 독립된 액션을 수백번 별도로 수행해야 하는지 ?
  • System Response Time : 일단 유저가 액션을 취했을 때 시스템이 응답을 주는데 얼마나 걸리는지 ? 프로덕트를 사용 도중 어떤 태스크를 수행함에 있어서 걸리는 전체 시간은 유저가 이것을 얼마나 능숙하게 사용하는지(User Efficiecny)와 시스템이 응답을 얼마나 빨리 주는지(System Response Time)가 합해져서 결정된다. 디자이너들은 시스테 리스판스 타임에 대한 고객의 기대치와 한계치를 이해할 책임이 있으며 이러한 기대치를 최대한 충족시킬 수 있도록 프로덕트를 디자인해야만 한다.
  • Delight : 프로덕트가 유저들에게 얼마나 쿨하게 느껴질까 ? 유저들이 그것을 사용하고 싶어할까 ? 그들이 다른 프로덕트와 비교하여 얼마나 그것을 좋아할까 ? 나는 Customer Listening 조직을 만들어  Net Promoter Score data를 비롯한 이런 유형의 데이타를 체계적으로 수집, 분기별로 상위 5가지에서 7가지를 개선했다.

4. Framework

일단 디자인 팀이 인터액션 모델을 정의했다면 구체적인 디자인을 지원할 수 있는 Framework를 만들어내야만 한다. 프레임워크에 따라 재사용 가능한 디자인 패턴을 정의하고, 이 패턴을 디자인과 개발 컴포넌트에서 어떻게 재사용할 수 있는지 예시함으로써 디자인의 추가적인 파트들을 신속하게 디자인하고 개발할 수 있게 된다. 나의 경우 우리 팀은 몇명의 디자이너와 프런트엔드 개발자들이 한팀을 이루어 Framework를 관련자들에게 릴리스했다. 이 프레임워크에는 타이틀 바, 아코디언 위젯, 테이블 포맷, Date Pickers, 그리고 수백가지 U/I 요소들을 포함하여 많은 팀들이 필요로 하는 모든 디자인 패턴이 들어있다.

5. 결론

인터액션 모델을 정의하는 것은 디지털 시스템을 디자인하기 위해 근본적으로 필요하다. 프로덕트의 인터액션 모델을 정의하면 프로덕트의 비전을 팀원들과 공유하고 단합할 수 있게 된다. 지난 11월달에 인터액션 모델과 어플리케이션 시뮬레이션을 고객에게 보여주자, 그들은 프로덕트가 언제 출시될지 바로 물어 보기 시작했다.

Advertisements

Written by abulaphia

October 30, 2012 at 11:30 am

Posted in UI UX Design

Tagged with

영국정부의 사이트 개편 사례로 본 User Experience의 트렌드

leave a comment »

영국 정부의 공식 홈페이지가 과거 텍스트와 링크로 가득차 있던 것과 달리 구글 검색엔진처럼 유저가 찾는 것을 쉽게 찾을 수 있도록 하는데 초점을 맞춰 간소화되었다. 현재 베타 테스트중이다. Search results relevant to what users want and not what website owners think users want. After all, user experience is all about the user !

※ 출처 : Future Trends In User Experience Web Design Through Gov.UK, 2012년 2월 20일, Usability Geek

1) 테스트 중인 영국정부의 웹사이트

Welcome to GOV.UK Beta Test - simpler, clearer, faster access to UK government services and information

2) 현재 오픈되어 있는 영국정부의 웹사이트

Website of the UK government Directgov

많은 텍스트와 링크들로 복잡해 보이는 현재 영국정부의 웹사이트

Written by abulaphia

February 22, 2012 at 3:16 pm

Posted in UI UX Design

Tagged with ,

모바일 웹 디자인 팁 : 모바일에서 먼저 디자인해야 하는 이유

with 4 comments

우리가 App.을 개발할 때 PC 기반의 웹까지 포함하여 최소 2개의 스크린을 고려하는 경우가 많습니다.  타겟고객의 Usage가 모바일에 집중되어 있다 하더라도 PC에서 이메일 노티를 받고 클릭하면 이동할 수 있는 최소한의 Landing 페이지는 필요할 것이기 때문입니다.

그러나 Facebook이나 Twitter, 기존 포탈처럼 이미 대규모 트래픽이 발생하는 유선 사이트를 모바일로 포팅하는 것이 아니라 새로 시작하는 프로젝트라면 대개 Mobile Experience를 위주로 App. 또는 모바일 웹을 먼저 개발하게 됩니다. 앞선 글에서 멀티 스크린으로 서비스를 개발할  때 “모바일”을 먼저 디자인해야 한다는 애기가 있었는데 이번에는 “Mobile First“로 유명한 웹디자이너 Luke Wroblewski가 말하는 모바일에서 먼저 디자인해야 하는 이유에 대해 자세히 살펴 보도록 하겠습니다.

2010년도에 발표된 글을 2011년도의 Presentation 자료로 보완해서 정리했기 때문에 모바일 App.을 개발해 본 사람인 경우 상식차원에서 이미 알고 있는 것들도 많겠지만, 스마트폰이 제공하는 다양한 성능을 활용하여 모바일에 최적화된  Experience를 디자인한다는 것이 무엇을 의미하는지에 대해 보다 상세한 정보를 얻을 수 있을 것입니다.

※ 출처 : Mobile Web Design Tips : Mobile Web Should Come First (2010년 10월 28일, TechRadar)

By Luke Wroblewski

웹사이트나 웹 어플리케이션 개발시 모바일 버전을 먼저 설계해야 한다. 지금까지 많은 경우 Mobile Experience를 전혀 고려하지 않은 상태에서 먼저 Desktop 버전을 개발하고 이것을 모바일에 포팅하는 방식으로 작업해 왔다. 사실 오랫동안 모바일 단말에서 웹을 브라우징 할려면 많은 장애요소 – 모바일 단말에서 웹브라우징은 고통스러웠고, 이통사는 유저의 웹 브라우징을 통제했으며, 무선 네트워크의 속도가 너무 느려 중간에 멈추는 경우도 많았다 – 가 있었기 때문에 이렇게 작업하는 것이 절대적으로 옳은 방법이었다.

시대가 변하고 있다 (Changing Times)

그러나 지난 몇년간 상황이 극적으로 변화하여 데스크탑에서 먼저 시작하는 것은 시대 착오적인 시대가 되었다. 모바일 버전을 먼저 디자인해야 새로운 성장기회를 얻을 수 있을 뿐만 아니라 전반적으로 보다 개선된 User Experience를 제공할 수 있게 되었다.

모바일을 먼저 디자인해야하는 이유는 1) 모바일이 폭발적인 성장세를 보이고 있다는 점 2) 모바일에서 먼저 시작하면 핵심기능에 초점을 맞춰 작업할 수 있다는 점 3) 데스크탑에서는 부재한 성능을 모바일에서 활용할 수 있다는 점 등 3가지이다.

1.  모바일의 폭발적인 성장세

기존 웹 프로덕트의 모바일 버전을 만들면 모바일 시장의 폭발적인 성장세를 활용할 수 있을 뿐만 아니라 유저들에게 훨씬 더 개선된 경험을 제공할 수 있다.

예를 들어, 3.5억명의 Facebook 유저가 모바일 버전을 PC 버전 보다 2배나 더 Active하게 이용하고 있다. 모바일과 테스크탑 Experience의 결합을 통해  유저들은 두가지 단말을 오가면서 더욱 더 적극적으로 참여하게 된다 (resulted in more engaged users across both set of devices). 이것은 Facebook이 Mobile Experience를 단순히 데스크탑 버전의 모바일 포팅으로 생각하고 있지 않기 때문이다. 페이스북 전체의 경험을 개선하기 위한 방식으로 모바일이 적극적으로 활용되고 있는 것이다.

Facebook 아이폰 어플리케이션의 수석개발자인 Joe Hewitt에 따르면, “나의 목표는 우선 Facebook의 Mobile Companion을 만드는 것이지만, 모바일에서 데스크탑 웹사이트 보다 훨씬 더 나은 Facebook 버전을 만드는 것이 가능하다고 확신”하게 되었다.

핵심만 지적하면 바로 이 점이야 말로 모바일이 우리에게 가져다 주는 진짜 기회이다.

2. 핵심에 초점을 맞춰야만 한다 (Forced To Focus)

작은 스크린, 느린 네트워크 속도, 유저가 모바일을 사용하는 컨텍스트 등 모바일 환경의 자연스러운 제약으로 인해 우리는 오히려 더 위대한 웹사이트를 만들 수 있게 되었다.

그 중에서도 특히 스크린 사이즈가 모바일 환경의 디자인에 큰 영향을 준다. 320 x 480 사이즈의 모바일 단말은 1024 x 768 해상도를 지원하는 데스크탑 컨텐트의  20%만 담을 수 있게 된다. 따라서 웹 개발팀은 고객 입장에서 그리고 사업적으로 가장 중요한 기능들에 초점을 맞출 수 밖에 없게 된다. 장식물이나 가치가 별로 없는 컨텐트를 배치할 공간적 여유가 없기 때문에 우리는 무엇이 가장 중요한 요소인지 알 필요가 있다 (You need to know what matters most).

Southwest Airline의 웹사이트와 모바일 버전을 예로 들어 보자. 아래 그림에서 보듯이 데스크탑 웹에서는 많은 여유공간이 있기 때문에 많은 프로모션과 기능과 옵션들로 도배를 해 놓았다.

Soutwest Airline Desktop Website

Soutwest Airline Desktop Website

반면 모바일 Experience는 예약 (book travel), 체크인, 비행상태 (flight status), 비행거리, 알림 (alerts) 등 고객이 원하는 것과 Southwest의 사업에 필요한 것에만 레이저처럼 예리하게 초점을 맞추어 놓았다.

Soutwest Airline iPhone App

예약, 체크인, 리워드 등 핵심기능 위주로 디자인된 SouthWest Airline 아이폰버전

이와같이 가장 중요한 것에 초점을 맞추면 Kitchen Sink 문제를 포함하여 웹사이트 디자인시 오랫동안 우리를 괴롭혀 왔던 문제들이 깔끔하게 해결될 수 있다. 데스크탑에서는 공간적 여유가 많기 때문에 많은 이해 당사자들의 엇갈린 요구사항을 수용하기가 상대적으로 쉽다.

그러나 모바일 버전을 우선해서 디자인할려면 무엇이 가장 중요한지에 대한 이해당사자들간 사전 동의를 전제로 한다. 그러면 이러한 동의를 바탕으로한 동일한 원칙을 데스크탑 기반의 웹 프로덕트에도 적용할 수 있게 된다. 우리가 고객과 사업에 가장 중요한 기능 세트들과 컨텐트가 무엇인지에 대해 동의했다면 스크린 공간이 넓다고 해서 동일한 원칙을 적용하지 못할 이유는 없다.

물론 모바일과 데스크탑 컨텍스트에 차이가 있지만 어떤 웹사이트의 핵심 가치는 어떤 플랫폼에서 동작하든지 동일하다. 모바일을 먼저 디자인하면 오늘날  웹사이트를 어지럽히고 있는 많은 불필요한 요소들은 배제하고 유저가 성취하고자 하는 핵심과업에 초점을 맞춰 Experience를 제공할 수 있다 (When a team designs for mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter many of today’s websites).  320 x 480 화면에는 핵심고객 경험과 별로 관련이 없는 요소들을 배치할 공간이 없다. 우리는 중요한 것의 우선순위를 정해서 작업할 수 밖에 없다.

3. 퍼포먼스 최적화하기 (Network Performance Really Matters)

네트워크의 불안정성으로 퍼포먼스에 문제가 발생할 수 있기 때문에 모바일 Experience의 제공에 필요한 서비스 자원들은 덜 이상적인 네트워크 상황에서도 잘 동작할 수 있도록 최적화되어야 한다.

파일 리퀘스트의 숫자와 사이즈를 최대한 줄이는 동시에 어플리케이션 캐쉬와 같은 HTML5의 기능과 CSS3를 활용하면 다운로드 속도를 극적으로 개선할 수 있다. Google Code site에 가면 이런 테크닉들이 잘 정리되어 있으므로 이것들을 활용하면 당신 사이트의 모바일 퍼포먼스를 지금 당장이라도 개선할 수 있다.

아래 표에서 보는 바와 같이 아마존, 야후, MS 등이 테스트해 본 결과 데스크탑 사이트에서 조금만 지연이 발생하면 유저들은 바로 사이트를 떠나며, 구글이 더 오랫동안 조사한 결과에 따르면 퍼포먼스가 느릴 경우 그것이 개선되었다 하더라도 장기적으로 유저의 Activity를 축소시키는 부정적 결과를 낳는다.

웹사이트 퍼포먼스 저하가 이용과 매출에 미치는 부정적 영향

웹사이트 퍼포먼스 저하가 이용과 매출에 미치는 부정적 영향

모바일을 먼저 디자인하면 불안정안 네트워크 퍼포먼스를 고려하여 스피드에 초점을 맞추게 된다.

4. 컨텍스트

작은 스크린과 느린 속도 못지 않게 모바일 컨텍스트 또한 중요한 제약사항이다. 간단히 말하면 사람들은 모바일 단말을 항상 휴대하고 다니면서 Location, Time, 소셜 셋팅 등 다양한 컨텍스트에서 사용한다.

그러므로 모바일에서 디자인을 한다는 것은 언제든지 사용할 수 있는 무엇인가를 디자인하는 셈이다. 어떤 리서치에 따르면 84%는 스마트폰을 집에서 사용하고, 80%는 하루종일 잡다한 용도로 사용하며, 74%는 줄서서 대기할 때, 60%는 일할 때도 사용한다 .

모바일은 PC 대비 저녁시간에 더 많이 사용 (회색이 PC, 그린이 모바일) / 모바일은 언제 어디서나 항상 사용한다

사람들은 시간 때우기가 필요하고 자신이 원하는 무엇인가에 체크인하고 싶어한다. 바로 그렇기 때문에 작고, 빠르고, 시간 때우기에 적합한 일을 가장 잘하는 Mobile Experience를 제공하는 App.이 가장 빠르게 성장하고 있다 (So mobile experiences doing the best job of providing small, quick, time-killing tasks are the ones growing the fastest).

이미 알고 있는 사람들로부터 직접 컨텐트를 제공받기 때문에 소셜 체크인 앱의 인기가 아마 가장 높을 것이다. 이런 류의 앱은 계속해서 친구들로부터 업데이트가 발생하기 때문에 회의도중 또는 심심할 때 신속하게 체크인하도록 유도한다. 이런 앱들은 헤드라인이나 짧은 글을 위주로 업데이트되기 때문에 서비스를 이용하는데 비용이 거의 발생하지 않는다. 바로 이런 이유로 2009년도 모바일 브라우저를 통해 Facebook에 접속하는 비율이 112%나 증가했으며, Twitter는 347%나 증가했다.

모바일에서 먼저 디자인하면 당신이 원하든 원하지 않든 유저에게 하루 종일 의미있는 정보를 신속하게 전달하는데 초점을 맞출 수밖에 없게 된다. 이러한 종류의 Engagement는 모바일 컨텍스트에서 잘 어울리긴 하지만 데스크탑에서도 재활용할 수 있다. 하루 종일 여러번 사용할 수 있도록 제품을 디자인하면 플랫폼이 무엇이든지 상관없이 재방문을 유도할 수 있다 (Products that are designed to be used many times throughout the day encourage repeat usage, no matter what the platform is).

모바일의 제약사항을 디자인 프로세스에 잘 적용한 결과로 무엇인가에 초점이 맞춰져 있고, 신속하고, 자주 이용되는 웹 프로덕트가  탄생하게 된다. 그러나  모바일 단말의 성능까지 고려하면 어떻게 될까 ?

5. 스마트폰 단말의 성능을 활용하라 (Mobile Capabilites)

기존 데스크탑 웹은 웹브라우저가 지원하는 page markup, styling, scripting 등 비교적 간단한 성능에 기초하여 구축되었다. 그러나 모바일 브라우저와 애플리케이션 플랫폼은 데스크탑 웹브라우저 보다 뛰어난 성능을 제공한다.

오늘날 모바일 단말에서 강력한 기능들이 새롭게 추가됨에 따라 사람, 데이타, 주변환경이 상호 인터액션하는 방식에 대해서도 지금까지와는 다르게 생각할 수 있게 되었다. 예를 들어,

  • Device positioning & motion from an accelerometer : 단말의 기울기와 모션을 감지하는 액셀로미터
  • Gyroscope (360 degrees of motion0) : 360도 회전을 감지하는 자이로 스코프
  • Location detection : GPS, WiFi, 기지국을 활용한 위치정보 취득
  • Multi-touch sensors : 한개 또는 이상의 손가락 제스쳐를 동시에 지원하는 멀티터치 인풋
  • Orientation (direction from a digital compass) : 디지털 나침반을 활용한 동서남북 방향 정보 취득
  • Video & image (capture/input from a camera) : 카메라로 이미지를 읽어서 검색을 하거나(구글 이미지 검색), QR코드를 읽어서 특정 웹사이트로 이동할 수 있으며, 결제시 카드 번호를 읽을 수 있고(Cardio), 명함의 정보를 읽어서 주소록에 입력할 수도 있음
  • Audio ( input from a microphone; output to speaker) : 오디오 인풋과 아웃풋도 지원
  • Dual cameras (front and back) : 앞뒷면을 지원하는 듀얼 카메라
  • Device connections (through Bluetooth between devices) : 블루투쓰를 통한 단말간 연결
  • Proximity (device closeness to physical objects) : 물리적인 오브젝트와 단말간 근접성
  • Ambient Light (light/dark environment awareness) : 빛과 어둠의 인지 (스마트폰이 조명이나 빛의 밝기도 인지하나요 ? )
  • NFC (Near Field Communications through RFID readers) :

모바일에서 먼저 개발하면 낡아 빠진 개발 옵션에 자신을 가두지 않고 모바일의 강력한 성능을 온전하게 활용하여 사용자 컨텍스트를 인지할 수 있는 새로운 어플리케이션을 만들어 낼 수 있다 (to create rich, context-aware applications).

모바일 단말의 중요한 성능 중 하나로 멀티 터치를 꼽을 수 있는데 2009년도 멀티터치를 지원하는 단말은 하루 100만대 꼴로 증가하고 있다.  사람들은 이제 마우스 포인터 대신 자신의 손가락을 사용하여 컨텐트와 직접 인터액션하기 때문에 디자이너들은 이 터치 인터페이스를 활용하여 어떻게 혁신적인 경험을 제공할지에 대해 고민해야 한다 (※ 역주 : 최근 런칭된 clearly라는 앱은 버튼을 전혀 사용하지 않고 오직 멀티터치 제스쳐만을 사용하여 일정을 추가, 수정, 삭제할 수 있게 만들어 화제가 되고 있습니다.)

Multi Touch Gesture_Mobile First 2011년 10월 By Luke Wroblewski

Multi Touch Gesture의 종류

터치를 활용하여 디자인하려면 보다 큰 타겟 사이즈, 시각적인 컨텐트와 액션이 필요하다. 터치로 인해 기존의 웹에서 일반적인 활동을 훨씬 더 쉽고 재미있게 만들어 주는 인터액션의 새로운 형식이 가능해 졌다.

Yahoo Sketch's  Search Interface

손가락으로 영역을 지정하면 장소들의 위치가 표시

Yahoo의 “Sketch-a-Search”는 멀티터치를 활용하여 음식점을 찾는 절차를 단순화시킨 대표적인 사례이다. 앱을 열고 손가락으로 원을 그리거나  선을 그으면 유저가 찾는 음식점들이 지도상에 바로 표시된다. 즉 손가락으로 몇가지 제스쳐만 하면 되기 때문에 타이핑이나 복잡한 인터액션은 필요없다.

Bill Buxton에 따르면 멀티터치 제스쳐를 활용할 수 있게 됨에 따라 우리가 실제세계에서 살아가면서 평생 획득한 스킬들을 자연스럽게 활용할 수 있는 유저 인터페이스, 즉 “NUI (Natural User Interface)“가 탄생하였다 (NUI exploits skills that we have acquired through a lifetime of living in the World).

  • 컨텐트는 UI (즉 Action)이다.
  • User와 컨텐트간 거리를 최대한 축소시킬 수 있게 되었다.
  • 오브젝트와 컨텐트에 대한 직접적인 조작이 가능해 졌다.
  • 멀티터치 제스쳐로 인해 (U/I나 내비게이션, 기능버튼 등이) Guessable, Predictable, Physical, Realistic해 졌다.
  • 컨텐트가 아닌 비쥬얼은 삭제해도 무방하다.

6. 위치정보를 활용하라 (Location Awareness)

모바일을 우선적으로 설계할 때 멀티터치뿐만 아니라  Yelp와 같이 위치정보도 활용할 수 있다. Yelp는 지역의 소매점이나 서비스에 관한 온라인 리뷰를 제공하는 사이트다.

데스크탑에서 Yelp에 접속하여  주변의 좋은 레스토랑을 찾으려면 당신의 위치정보를 입력한 후 출력되는 결과값을 필터링하고, 다시 찾고자 하는 구체적인 지역을 찾아야 한다.

그러나 모바일에서는 이야기가 다르다.  Yelp 앱을 열고 탭 한번만 하면 당신 주변의 톱 레스토랑의 리스트를 볼 수 있다. 타이핑하고 필터링하고 맵을 조작하지 않아도 어플리케이션이 유저의 현재 위치를 활용하여 자동으로 필요한 정보를 바로 찾아 준다.

이와같이 Location Awareness를 활용하면, 주변의 레스토랑 뿐만 아니라 지역의 날씨나 뉴스, 교통이나 친구 등의 정보가 바로 유저에게 전달된다. 위치정보는 대부분의 모바일 단말에서 제공하는 강력한 기능이지만 데스크탑으로 활용 범위가 점점 더 확장되고 있다.

GPS, WiFi, 기지국 등에 따른 단말 위치의 정확도, 시간, 밧데로 소모량 비교

GPS, WiFi, 기지국 등에 따른 단말 위치의 정확도, 시간, 밧데리 소모량 비교

모바일 우선으로 생각하면 위치정보 인지 기능을 활용하여 당신의 프로덕트 Experience를 어떻게 개선할 수 있을지에 대해 결정할 수 있는 기회가 생긴다. 유저의 현재 위치를 알 수 있는 강력한 기능에 디지털 나침반까지 활용하면 더 나은 경험을 제공할 수도 있다.

Orientation Display On the Location Map and First Person UI With Digital Compass

Orientation Display On the Location Map and First Person UI With Digital Compass

디지털 나침반을 활용하면 모바일 단말에서 유저의 방향을 소프트웨어적으로 잡아 낼 수 있다. 다른 말로 하면 모바일 단말은 당신이 어디에 있는지 뿐만 아니라 어디로 향하고 있는지도 알 수 있다. 이것은 매우 작은 디테일에 불과하지만 이로 인해 그림을 그릴 때 원근법을 활용하는 것처럼 유저가 현재 시점에서 바라 보는 새로운 인터페이스를 설계 (First Person UI) 할 수 있는 가능성을 열어 주었다.

현재 세상을 바라보는 유저의 시각 위에 다른 디지털 정보가 덧입혀질 수 있으며 (Digital information can be layered on top of people’s immediate view of the world), 주변에 있는 오버젝트와 사람들을 Interactive한 요소로 바꿔 놓을 수 있다. 이런 종류의 Experience를 전달하는 프로덕트는 아직 초창기에 불과하지만 우리가 주변 세상과 인터액션하는 방식을 변화시킬 수 있는 잠재력을 가지고 있다.

모바일에서 먼저 디자인하면 멀티터치, 위치나 방향성 감지와 같은 모바일 Capabilities를 고려하여 웹 프로덕트에 대한 그림을 그릴 수 있게 된다.  유저들에게 어떤 Experience를 전달할 수 있는 새로운 방식이 열리게 된다. 데스크탑 웹에서는 이런 기능을 지원하지 않기 때문에 여기에서 먼저 시작하면 기존 사고의 한계를 넘어설 수 없다.

모바일에서 먼저 시작해야만 이와같이 강력한 테크놀로지들을 활용하여 최고의 Experience를 만들어 낼 수 있다. 이전과 같이 데스크탑의 제한적인 성능에서 시작한 후 완성된 솔루션을 모바일에 포팅할 때보다 훨씬 더 혁신적인 솔루션을 탐색할 수 있게 된다는 점은 의심의 여지가 없다.

데스크탑 보다 모바일 플랫폼에서 먼저 웹 어플리케이션을 설계하면 모바일의 폭발적인 성장세와 쓸모있는 제약요소, 그리고 혁신적인 성능들을 활용할 수 있다.  모바일의 성장으로 인해 유저의 참여(engagement)를 증대시킬 수 있는 기회가 만들어지고 전반적으로 개선된 User Experience를 창조할 수 있다.

모바일에 제약요소가 많기 때문에 더 중요한 것에 초점을 맞추고, 신속하게 반응하며, 자주 이용되는 웹 프로덕트를 기획할 수 있게 된다. Mobile Capabilites로 인해 사람, 데이타, 주변환경들 간의 인터액션에 대해 다른 방식으로 생각할 수 있는 길이 열렸다. 무엇을 더 기다릴 것인가 ?  모바일에서 먼저 시작하라 (Go Mobile First!).

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

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

멀티 스크린 패턴 : 멀티스크린 전략을 이해하고 정의하기 위한 패턴

with 2 comments

글을 시작하며

스마트폰과 태블릿, 스마트TV, 콘솔, STB 등 인터넷에 연결된 새로운 단말이 대거 출시되고 있습니다. 서비스를 제공하는 Consumer Interface의 중심 축이 과거 PC 기반의 웹에서 불과 2 ~3년만에  크고 작은 스크린 사이즈를 지원하는 여러개 단말로  급속하게 이동하고 있습니다. 이에 따라 서비스를 개발하는 사람 입장에서 다양한 단말에서 동일한 컨텐트에 대한 User들의 접근성을 보장해 줘야 하며(Content Shifting),  단말간 상호 보완적 관계(Complementarity)까지 고려해야 하고, 유저들이 상황에 따라 선택하는 단말별로 최적화된 User Experience를 설계해야 하는 등 이전 보다 해야 할 일이 훨씬 더 많아 졌습니다.

이 글에서는 Multi-Screen 또는 Cross-Platform에 대한 Netflix와 ESPN에 대한 사례를 간단히 소개하고, Multi-Screen Strategy를 이해함에 있어서 필요한 일반적 원칙에 대해 살펴 보고자 합니다.

1. Netflix : 800여개 단말 지원, PC보다 태블릿에서 더 많이 시청  

Netflix의 비디오 스트리밍 서비스를 지원하는 단말이 6개월전 450개에서 800개로 증가했습니다. 과거에는 넷플릭스 트래픽의 30% 이상이 PS 3에서 발생했으나 현재에는 유저들이 PC보다 태블릿에서 더 많이 비디오를 시청한다고 합니다.  지난 분기 120만대를 포함 전체 420만대가 팔린 AppleTV에서도 정확한 수치를 밝히진 않았으나 꽤 성공적이라고 합니다 (Roku Box는 250만대). 그리고 Reed Hastings는 Smart TV가 Netflix 지원 단말중 가장 빨리 성장하고 있다고 밝혔습니다  (※ 출처 : Netflix Tops 800+ Devices, Tablets Overtake PC Viewing, 2012년 1월 26일, GigaOm)

2. ESPN : 과거 TV 중심에서 모바일로 초점을 변경

멀티 스크린 사례로는 모바일에 보다 초점을 맞추고 있는 ESPN도 있습니다. 최근에 열린  MediaPost의 Mobile Insider Summit에서 ESPN Mobile의 부사장인 Michael Bayle은 그동안 “세번째 스크린”으로 간주되어 왔던 모바일이 이제는 “First Screen”이 되었다면서 아래와 같이 지적하고 있습니다 (※ 출처 : ESPN Deems ‘Mobile First Screen’,2011년 1월 27일, MediaPost).

  • 지금은 최대한 Ubiquitous하게 만드는 것에 최고 우선순위를 두고 있습니다. 먼저 모바일에 초점을 맞춰 프로그램과 디자인을 한 후 이것들 중 매체에 적합한 것을 찾아 PC와 텔레비젼, 인쇄매체 등의 경험에 적용합니다 (Program and design from the mobile standpoint first, then extrapolate what could be applied for the PC, television and print experience).

ESPN이 다양한 스크린 중 모바일로 초점을 변경한 이유는 1) 모바일을 통해 ESPN을 시청하는 사람들이 2천만명이 넘었고,  2) 2011년도 모바일 시청시간 또한 전년도 대비 45%나 증가한 결과 ESPN Mobile이 미국내 4번째로 큰 네트워크로 성장했기 때문입니다.

지난 가을 ESPN에 부임한 후 Bayle은 최근 출시된 수십개의 타이틀 중 Sports Center, ESPN the Magazine, 축구와 같은 International Sports 등 3가지 App.에 비즈니스의 초점을 맞추었습니다. ESPN의 Mobile Strategy는 “모바일”이 사람들을  보다 광범위한  디지탈 오퍼링, TV, 그리고 모바일 커머스와 연결시키는 “Bridge”라는 인식에서 출발합니다. 즉 모바일은 다른 스크린과 미디어 포맷으로 인도하는 게이트웨이라는 것입니다 (Mobile is the gateway to other screens and media formats). 또한 ESPN은 컨텐트를 보다 광범위하게 유통시키고, 팬들을 라이브 스포츠 이벤트나 홈타운 팀과 연결시키기 위해 Facebook이나 Twitter와 같은 Social Service와도 연동했습니다.

TV와 관련하여 ESPN의 목표는 “2 Screen Viewing”을 활용하는 동시에 양방향 TV 쪽으로 점진적으로 옮겨가는 것입니다. ESPN은 Winter  X Game의 ESPN 시청자들이 Shazam이라는 스마트폰 App.을 활용하여 이 이벤트의 비디오 하일랏이트와 포토, 음악에 접근할 수 있도록 Shazam과 제휴했습니다.

반대로 ESPN은 스포츠 생중계 이벤트에 관한 뉴스 업데이트와 Alert를 통해 사람들이 TV에서 이것을 시청하도록 유도하고 있습니다.

또한 최근에는 StubHub와의 제휴를 통해 팬들이 모바일에서 스포츠 스케쥴이나 자신들이 좋아하는 팀들에 관한 정보를 보다 티켓을 바로 구매할 수 있도록 했습니다. 모바일을 충동구매를 위한 수단을 활용하고 있는 것입니다. Bayle은 “많은 에이전시들이 왜 모바일에 투자해야 하는지에 관해 머리를 쥐어 짜고 있는데, 마침내 m-commere가 이 질문에 대한 답을 주는 촉매제로 작용하고 있다(the catalyst that finally breaks through the ‘why do I invest in mobile).“고 말합니다.

또한 ESPN은 Cross Platform Progrmming에 집중하는 전략의 일환으로 광고에도 통합된 접근방식을 취하고 있습니다. 스판서 쉽은 디지털, 프린트, 텔레비전, 모바일을 묶어서 판매하는 것이 전형적입니다. Bayle에 따르면 TV 광고에 지출할 여력이 없는 광고주의 경우 모바일이 ESPN의 남성 위주의  오디언스에 저렴하게 접근할 수 있는 대인이라고 말합니다.

3. Multi-Screen Pattern

이상에서 살펴 본 바와 같이 멀티 스크린 전략을 추진한다 하더라도 서비스나 사업의 특성에 따라 다른 방식으로 접근하고 있음을 알 수 있습니다. Netflix가 다양한 단말에서 영화나 TV 시리즈에 대한 Seamless한 Experience에 보다 초점을 맞추고 있다면(Coherence), ESPN은 “모바일”이 다른 단말들로 이동해 가기 위한 게이트웨이라는 인식에 따라 3rd Party App.과의 제휴를 통해 “Two Screen Viewing” 등 단말간 상호 연결성에 보다 집중하고 있으며 커머스와 광고 등 다양한 수익모델로 확장하는 전략을 취하고 있습니다.

단지 Netflix와 ESPN뿐만 아니라 Facebook, Twitter, Evernote 등 많은 App.들이 클라우드에 저장된 데이타를 다양한 단말에서 접근할 수 있도록 지원하고 있습니다. 과거 PC 중심의 웹 환경과 달리 유저들은 스마트폰, 태블릿, 스마트 TV, 게임콘솔 등 인터넷에 연결된 많은 단말중에서 자신의 Context에 적합한 단말을 선택해서 자신이 원하는 App.이나 컨텐트를 볼 수 있게 되었습니다.

이와같이 Multi-Screen Strategy를 추진함에 있어서 User가 처해있는 Context와 단말간 상호작용을 염두에 두고 프로덕트를 기획하는 것이 중요해 졌습니다. 이 점을 이해하는데 도움을 줄 수 있는 Article이 있어 간단히 공유합니다 (출처 : Multi-Screen Patterns : Patterns To Help Understand and Define Strategies For the Multi-Screen World, 2011년 5월 26일, precious-forever.com).

이 모든 단말에서 일하는 것은 재미있고 도전적입니다. 이것은 다양한 스크린 사이즈와 인풋 방법이 다르다는 사실 때문이 아니라 유저 리서치를 통해 단말별로 사용되는 컨텍스트가 얼마나 다른지( how different the contexts are in which these gadgets are used)를 우리가 이해했기 때문입니다.

그러나 더욱 더 재미있는 것은 이런 단말들이 상호 어떻게 관련되는가 (how those devices relate to each other)라는 질문입니다. PC와 스마트폰, TV를 비롯한 가전 단말들이 서로 연결된다면  이것이 우리가 설계하는 디지털 프로덕트와 서비스에 어떤 의미가 있을까요 ? 만약 사람들이 스크린들의 에코시스템에서 상호작용한다면 인터페이스에 어떤 영향을 줄까요 ?

글의 저자인 Christophe Stoll은 그동안 자신들과 다른 사람들이 다양한 단말들을 어떻게 사용하고 상황에 따라 어떤 단말에서 다른 단말로 바꿔 사용하지는를 관찰하고 여러 프로젝트를 추진해 온 경험을 토대로 클라이언트들과 효과적인 커뮤니케이션을 위해 아래와 같이 6가지 Multi-Screen Pattern을 제시합니다.

Coherence, Synchronization, Screen Sharing, Device Shifting, Complementarity, Simultaneity 등 Web, 모바일, IPTV 등 다양한 단말에서 App.을 개발해 본 분들은 별로 새로운 내용이 아닐 수도 있습니다.

저자는 아래 그림과 같이 Mutli Screen 전략을 추진함에 있어 고려해야할 패턴으로 1) Coherence :  User Interface의 일관성을 유지하되 단말의 속성과 유저 시나리오에 맞게 기능들이 최적화되어야 함 2) Synchronization : Amazone의 Kindle 사례와 같이 “Cloud”를 통해 이종 플랫폼 상에서 동일한 데이타에 대한 싱크를 유지함 3) Screen Sharing : 하나의 컨텐트 소스를 모자이크처럼 여러개 단말에서 공유해서 사용할 있다는 의미로 사용함 4) Device Shifting : Apple의 AirPlay나 DLNA처럼 유저가 상황에 따라 모바일에서  TV로 단말을 옮겨가면서 컨텐트를 이용함 5) Complemetarity :  여러명이 모바일에서 하나의 태블릿 상에서 동작하는 게임을 제어하거나 모바일 단말로 TV를 제어하는 등 단말간 상호관련성 (ESPN의 경우 모바일로 스포츠 라이브 중계에 대해 모바일로 Notification을 줌) 6) Simultaneity : TV에서 스포츠 생중계를 보면서 게임의 결과를 예측하거나 시청자들간 실시간 커뮤니케이션을 지원하는 등 같은 컨텐츠에 두가지 단말을 동시에 사용함으로써 새로운 Experience를 만들어 낼 수 있음. 자세한 내용은 아래 Slide를 참고하시기 바랍니다.

6 Patterns For Multi-Screen Strategies
                                      6 Patterns For Multi-Screen Strategies 

Patterns for Multiscreen Strategies

View more presentations from precious

Written by abulaphia

January 27, 2012 at 12:10 pm

페이스북 타임라인의 탄생배경에 대한 디자이너들의 이야기

with 3 comments

글을 시작하며

페이스북은 프로필 페이지를 “위젯 형식으로 박싱된 개인 컨텐트의 연대기”라는 프레임워크로 완전히 개편함으로써 지금까지 SNS 프로필 페이지에 대한 고정관념을 혁신했습니다. 페이스북의 타임라인은 다른 사람들에게 자신의 스토리를 시간순으로 비쥬얼화해서 공개하는 장소인 동시에 자신의 개인사가 저장되고 추억의 감정(Feeling of Memory)을 불러 일으키는 삶의 기록물이기도 합니다.

페이스북의 타임라인의 디자인을 직접 담당했던 Nick Felton과 Joey Flynn 두사람이 타임라인을 설계하면서 고민했던 주요사항들을 정리한 글이 있어서 공유하고자 합니다. 원문은 “Designers Behind Facebook Timeline : 5 Keys To Creating A UI With A Soul” (fastcodesign, 2011년 12월 19일)

아티클 본문

Nick Felton과 Joey Flynn은 누군가의 라이프 스토리 텔링을 위한 페이지를 만들고자 한다면, UI 교과서 따위는 집어 던지고 사람들이 자신의 추억을 어떻게 회상하는지에 대해 먼저 연구해야만 한다고 말한다 (study how people recount memories).

대부분의 컴퓨팅 역사에서 인터페이스는 기능 (function)에 관한 것이었다. 워드 프로세싱 프로그램은 문서를 작성하기 위한 것이고, 뱅킹 웹사이트는 고객의 금융거래를 지원하기 위한 것이며, 플리커는 사진을 디스플레이하고 공유하기 위한 것이다.

그러나 페이스북의 타임라인은 그 이상을 하고 싶었다. 그것은 느낌을, 그것도 두가지 느낌을 전달하고 싶어했다 (It wanted to convey a feeling). 첫번째는 다른 사람에게 당신의 라이프 스토리를 텔링해 주는 느낌, 두번째는 당신이 자신의 라이프를 회상하고 추억하는 느낌.

만약에 페이스북이 프로필을 재설계하면서 단순히 유틸리적인 목표를 염두에 두고 있었다면, 즉 “2008년도에 무슨 일이 일어났는지를 유저가 확인할 수 있도록 도와주는” 것이 목표였다면 타임라인은 훨씬 더 단순해 졌을 것이다. 그것은 아마도 (검색과 유사한 방식의 Dropdown Interface를 사용하여) 시간별로 또는 이벤트나 데이타 타입별로 아이템을 필터링해서 제공하는 등 기능적인 방식으로 자신의 삶에 관한 데이타를 네비게이션할 수 있도록 했을 것이다. 즉 기능적인 인터페이스(Functional Interface)로 만들어졌을 것이다.

그러나 페이스북은 그렇게 하고 싶어하지 않았다. 페이스북은 “Emotional Experience“를 창조하고 싶어했다. 그만큼 타임라인 인터페이스 디자인은 훨씬 더 도전적인 일이었다. 페이스북 프로덕트 디자이너인 Nick Felton과 Joey Flynn이 타임라인 디자인시  어떤 결정을 내렸는지에 대해 들어보자.

1. 시간은 모든 문화에서 가장 보편적인 프레임워크 (Time is the Most Universal Framework Across Cultures)

사람들의 라이프 스토리 텔링을 조직화할 때 어떤 프레임워크를 기본적으로 사용할 것인가라는 문제를 처음에 결정해야 했다. Flynn에 따르면 사람들에게 자신의 라이프 스토리를 이야기해 달라고 요청하면 그들은 2000년에 무슨 일이 있었고 2005년에 무슨 일이 있었다는 식으로 연대기적으로 말하지 않는다고 한다. 대신 그들은  어떤 모멘트들에 대해 이야기한다. 그래서 페이스북의 디자인 팀은 졸업이나 결혼, 첫번째 생일 등 어떤 사람의 인생에서 중요한 의미를 갖는 순간들을 중심으로 한 프레임워크를 실험했다.

그러나 그들은 모멘트 중심의 프레임워크가 확장성이 없다는 것을 곧 깨닫게 되었다. 페이스북은 전세계에서 거의 10억명의 유저들을 보유하고 있다. 삶에서 무엇이 중요한 모멘트인지는 문화권에 따라 다르다. Flynn은 “중요한 모멘트를 중심으로 공통의 언어를 만들어 내기가 매우 어려웠다.”고 말한다. 여기서 공통의 언어란 당신이 누군가의 프로필을 방문했을 때 그것을 어떻게 이용할지 즉각적으로 이해할 수 있어야만 한다는 것을 의미한다. 그래서 페이스북은 조직화를 위한 프레임워크로 “모멘트” 대신 “시간”을 선택했다 (decided on time as the organizing framework). 시간은 유저가 자신의 삶에 대해 강조하고 싶은 것을 스스로 결정할 수 있게 하는 형식(shell)이다. 이리하여 Status Update나 포토 등 개별적인 아이템들 중에서 무엇을 크게하고 작게할 것인지, 어떤 것은 보여주고 어떤 것은 감출 것인지를 유저들이 통제할 수 있게 했다. (※ 역주, 사전에 모든 문화권에 공통적인 모멘트를 일정한 틀에 맞춰 정의해 놓기 보다는 유저들이 자신의 삶에서 중요한 모멘트를 스스로 결정해서 연대기적으로 배열할 수 있는 방식으로 “Time” Framework를  선택했다)

2. 인생의 느낌은 흐름과 비슷하다; 삶의 UI도 그래야만 한다 (Life Feels Like A Stream; Life’s UI Should Too)

세상을 살면서 누적되는 데이타의 양은 어마어마하다. 그래서 이 팀은 몇년간 이 모든 데이타를 어떻게 잘라 붙일 것인지에 대해 이러 저러한 실험을 진행해 왔다 (So the team experimented with chopping that all up into specific years). 예를 들어 이전에 실수로 공개된 페이스북의 Hackathon 프로젝트  Memories가 바로 이러한 시도였다. 아래 그림에서 보는 바와 같이 유저들은 연도별로 사진이나 status update, 친구, Like 등 다양한 종류의 컨텐츠를 내비게이션할 수 있게 설계되어 있었다.

Facebook Hackthon Memories

Facebook Hackthon Memories

그러나 이것으로 페이스북이 원하는 효과를 얻을 수는 없었다. Felton에 따르면 우리는 삶을 그런 방식으로 기억하지 않는다. 우리는 지나간 삶을 “덩어리(chunks)”가 아니라 “하나의 흐름(a stream)”으로 기억한다. Felton에 따르면 “나는 삶이 하나의 기다란 연속체 (in a long continuum)로 보여져야만 한다는 강한 느낌을 가지고 있었다.”

그리고 최종 디자인에서 타임라인은 하나의 페이지로 모습을 드러냈다. 타임라인의 상단에는 최신 이벤트들이 표시되어 전형적인 페이스북의 담벼락과  유사하게 보인다. 그러나 유저가 스크롤하면서 시간을 거슬러 내려가다 보면 보다 적은 수의 이벤트들이 팝업된다.  당신이 과거로 돌아갈 때 달이나 연도를 보여 주는 표시가 나타나는데, 유저들은 여기에서 시간이  휘리릭 지나가는 느낌 (the feeling of time whizzing by)을 받게 된다. Felton의 표현대로 “당신은 시간을 완만하게 소비한다 (You gently consume time).

3.  자기 표현은 장식물이 아니라 컨텐트에 관한 것 (Self-Expression Is About Content, Not Frills)

페이스북은 타임라인이 자기를 표현할 수 있는 장소, 즉 유저들이 자신은 누구이고 자신의 삶은 무엇에 관한 것인지를 공개하는 방식 – 가 되기를 바랬다 (Facebook wanted the Timeline to be a place for self-expression).  이 팀은 페이지 상에서 유저들이 다양한 디자인 요소들을 컨트롤할 수 있는 방식에 대해 실험해 왔다. 예를 들어, 결혼 사진은 우아하게 가장자리를 장식할 수 있게 하고, 액션샷은 스포티한 보더(border)를 적용할 수 있게 하는 등 사진의 가장자리를 다양한 요소로 꾸밀 수 있는 실험을 했다.

그러나 확장성 문제로 인해 그것을 적용하는 것이 어려웠다. 페이스북은 어떤 유저라도 다른 사람의 타임라인을 방문했을 때 그 비쥬얼 랭귀지를 즉각 이해하고 타임라인을 어떻게 내비게이션하는지 알기를 원했다. 유저들에게 타임라인의 비쥬얼한 요소들에 대해 더 많은 통제권한을 부여할 수록 상충하는 언어들이 나타나서 Usability가 훼손될 수 있는 확률이 더 높아졌다.

그래서 페이스북은 비쥬얼 랭귀지를 엄격하게 통제하는 대신 그 프레임워크의 한도 내에서 무엇을 강조할지를 유저가 선택할 수 있는 통제권을 부여했다고 Flynn은 말한다. 유저들은 사진의 가장 자리를 어떻게 꾸밀지에 대해 결정할 수는 없지만 사진의 크기를 조절하는 등 어떤 사진을 강조할 것인지에 대해서는 결정할 수 있다. Flynn은 “타임라인의 개인화는 겉치장이 아니라 컨텐트를 통해 이루어진다 (It’s about being personal through the content, rather than being personal through the veneer)”고 말한다.

4. 우리는 오래된 경험과 새로운 경험을 다른 방식으로 연결시킨다 (We Relate To Old and New Experiences Differently)

타임라인은 유저들이 과거에 페이스북에 올린 모든 것들을 되돌아 보게 하는 장소이어야만 할 필요는 없다.  유저들이 향후 시스템에 무엇인가를 더 많이 올리고 싶어함에 따라 기아급수적으로 증가하게될 엄청난 데이타를 담아 놓는 용기(receptacle)이어야 할 필요도 있다.  유저들은 적극적으로 status update나 사진을 올리기도 하지만 보다 (open graph와 같은) 새로운 툴을 사용하여 수동적으로 Rdio나 Earbits와 같은 사이트에서 자신이 무슨 음악을 들었는지, 또는 RunKeeper를 사용하여 당신이 얼마나 뛰었는지를 시스템이 자동으로 잡아 내도록 허용할 수도 있다.

페이스북은 당신이 들었던 음악, 당신이 뛰었던 러닝 등 모든 개별적인 이벤트들에 대해 동일한 가중치를 부여하여 단순하게 처리할 수도 있었다. 즉 status update와 같은 종류의 다른 데이타들을 모두 타임라인에 리스팅해 놓을 수도 있었다.

그러나 시간이 지남에 따라 그것은 잘 동작하지 않았다. 각각의 음악은 당신이 그것을 듣고 있는 순간에만 재미있다. 시간이 지남에 따라 당신은 (개별적인 음악들 보다는 음악을 듣는 당신의) 패턴에 더 관심을 가지게 될 것이다 (But over time, you’re more interested in patterns). 그래서 페이스북은 이것들을 모아서 컨텐트들의 셋트와 리포트를 만들어 냈다. Felton은 이로 인해 유저는 “자신의 아이덴티티를 정의할 수 있는 개별적인 패턴들을 발견 (find those individual patterns that define your identity)“할 수 있게 되었다. 즉 유저는 삶의 특정 시기에 자신이 들었던 음악들이 모여져 있는 리포트를 통해 “삶의 사운드 트랙 (the soundtrack of your life)”을 볼 수 있게 된다.

Facebook-Timeline-Map

Felton’s Favorite Features: A Map That Shows Pictures Wherever They Were Taken

5. 개밥주기의 중요성 (The Importance of Dog-Fooding)

(※ 역주 : 문맥상 “개밥주기”는 서비스에 관한 아이디어나 디자인 또는 가설을 프로토타입으로 만들어서 개발에 참여한 사람들이 직접 사용해 보고 수정하는 과정을 의미함)

타임라인의 반복적인 설계 경험에서 Felton은  “포토샵은 거짓말쟁이”라는 교훈을 얻었다고 말한다. “당신은 아름답게 디자인된 결과물을 가지고 미팅에 참여해서 ‘오 예스, 그렇게 훌륭하게 만들면 되겠네’라고 말할 수 있다.”  그는 “그러나 당신이 그것을 끼고 몇일이나 몇주간 살아 보고 이에 관한 실제 데이타가 나올 때까지는 당신이 제대로 일을 하고 있는 알아낼 방법이 전혀 없다 (But you’re never going to know if you can do it that way until you pump in the real data and live with it for days or weeks).” 고 말한다.

디자인 팀의 작업이 제대로 되었는지 확신하기 위해 페이스북은 개발과정에서 타임라인을 자신의 직원들에게 배포했다. 이리하여 자신들이 개발하고 있는 타임라인 패러다임이 수많은 Status Update를 비롯한 여러가지 컨텐트들에도 잘 적용되는지, 그리고 모든 유저들에게 효과적으로 동작하는지에 대한 확신을 얻고자 했다.

Felton에 따르면 “디자이너로서 당신은 자신이 다른 사람에게 팔기를 원하는 어떤 결과물을 가지고 있다. 그것을 잘 팔릴 수 있게 만들기 위해서 당신은 프로필에 실제로 아름다운 사진을 가지고 있는 누군가를 선택하고 그것을 사용해서 Mock-Up을 만들 수도 있다.”  “그러나 당신이 모든 사람의 프로필 페이지가 동일하게 아름답게 보일 것이라고 생각한다면 궁극적으로 당신은 스스로에게 뿐만 아니라 팀의 다른 멤버들에게도 거짓말을 하고 있는 것이다.”

글을 마치며

Facebook의 타임라인 디자인에 관한 이야기를 읽으면서 느꼈던 몇가지 포인트를 정리해 보면,

1. 제대로된 질문을 하면 답은 자동으로 나온다.

  • MickeyKim님의 구글에서 배운 제품전략에 따르면 새로운 제품을 개발할 때 첫번째 질문이 가장 중요하다고 합니다. 그리고 그 질문은 “무슨 문제를 해결하고자 하는지”라고 합니다.
  • Facebook은 “Social Network에서 프로필 페이지는 무엇인가 ?”라는 너무나 당연한 질문을 했던 것 같습니다. 많은 SNS에서 유저 프로필은 그 사람의 사진과 이름, 커리어, 활동내역 등이 표현되는 공간으로서 이력서와 같은 행정서식처럼 느껴지곤 했습니다. 그러나 페이스북은 이 질문에 대해 프로필은 “자신의 삶에 관한 스토리 텔링 공간“이라고 정의하고 기존 SNS의 프로필 페이지와는 상당히 다른 시각에서 접근한 것 같습니다.
  • 이런 관점에서 Facebook 디자이너들은 “사람들이 인생을 이야기할 때 어떤 Organizing Framework를 주로 적용하는가 ?” 라는 질문을 하고, 스스로 답을 찾기 위해 실제로 몇가지 가설을 수립하여 Field Test를 진행하고 장단점을 파악했던 것 같습니다. 그리고 사람들은 인생사에서 가장 중요한 순간들(moments)을 위주로 자신의 스토리텔링을 하긴 하지만 전세계 시장에 보편적으로 적용될 수 있는 것은 원칙은 아니라고 판단하고 “시간” 개념을 중심으로 페이지를 디자인하기로 결정했습니다.

2. Function이 아니라 Emotional Experience

  • 제품이나 서비스 기획시 우리는 주로 Target User들이 직면하고 있는 문제점을 어떻게 기능적으로 해결할 것인가에 초점을 맞추는 경향이 있습니다.
  • 그러나 Facebook의 디자이너들은 사람들이 인생사에 관해 스토리텔링을 할 때 유저에게 어떤 느낌이나 감정을 전달하고자 하는지가 더 중요하다고 판단했습니다. 그래서 페이스북은 기능적으로 연도를 선택하고 컨텐트 타입별로 소팅해서 인생사를 분류해 주기 보다는 하나의 페이지에서 마우스를 스크롤링하면서 그 사람의 인생의 흐름(stream) 연대기적으로 지나쳐 가면서 추억하고 회상하는 느낌을 주고자 했습니다. 즉, 인생은 시간에 따른 Moment들의 Stream이기 때문에 그것을 담아내는 U/I도 그래야만 한다고 정의하고 있습니다.
  • 유저가 어떤 서비스를 사용하고 느끼는 정서적인 경험은 컨텐트 그 자체보다는 그것을 보여주는 형식과 더 깊은 관련이 있는 것 같습니다. 우리는 사진이나 텍스트, 비디오 등으로 구성되는 어떤 사람의 동일한 인생사를 이력서와 같이 공식화된 행정서식으로 보여줄 수도 있고, Facebook의 Timeline과 같이 개인의 삶에 관한 Visual한 연대기로 보여줄 수 있으며, 일간지와 같은 Journalism적 형식으로 보여줄 수도 있을 것입니다. Status Update, 포토, 동영상, Like 등 개인의 삶을 구성하는 컨텐트는 동일하지만 그것이 표현되는 형식의 차이로 인해 고객의 정서적 경험은 완전히 달라질 수 있습니다.
  • 거꾸로 제품이나 서비스에 대한 User Experience를 통해 어떤 감정이나 느낌을 전달하고자 하는지에 따라 동일한 컨텐트에 대해 어떤 형식을 적용할 것인지가 결정된다고 할 수도 있습니다. 페이스북의 타임라인은 “추억하고 회상하는” 느낌에 초점을 맞춰 누군가의 라이프 스토리텔링을 시간에 따른 Stream이라는 형식으로 비쥬얼하게 표현하였습니다.
  • 어떤 제품이나 서비스의 기능 보다는 “스토리 텔링”을 통한 유저의 정서적인 경험에 초점을 맞춰 디자인하는 방법에 관해서는 Cindy Chastain의 “Experience Themes” (2009년, boxes and arrows)을 참조하면 도움이 될 것 같습니다.
  • 그녀에 따르면 디자인 방향을 결정하기에 앞서 마치 작가가 이야기의 주제를 정하고 그것에 맞춰 스토리텔링에 필요한 요소들을 취사선택하고 배치하고 조직화하는 것처럼 제품이나 서비스에 대한 경험을 통해 고객에게 불러 일으키고자 하는 느낌을 하나의 문장으로 표현하는 것, 즉 “Experience Theme“을 먼저 정하라고 합니다.
  • 그리고 Experience Theme을 정의하는 단계에서 제품의 목표나 태스크, 또는 프로세스 시나리오 보다는 유저의 경험으로부터 발생하는 느낌과 그 느낌을 형성하는데 기여하는 속성들에 대해 더 집중하라고 합니다 (We’re not thinking about goals, tasks and process scenarios just yet, but the kinds of feelings that might arise out of a user’s experience as well as the attributes that contribute to those feelings).

3. Usability를 훼손하는 불필요한 장식은 제거하고 컨텐츠에 집중하라

  • 서비스를 기획하면서 우리가 자주 들어왔던 말이지만 이 점 역시 아무리 강조해도 지나치지 않은 것 같습니다.
  • 세종대왕이 한글 창제시 모든 백성이 쉽게 배우고 읽을 수 있는데 초점을 맞췄듯이 페이스북의 디자이너들 역시 어떠한 유저라도 타임라인의 비쥬얼 랭귀지를 쉽게 이해하고 직관적으로 사용할 수 있어야 한다고 생각했습니다.
  • 그래서 프로필 템플릿이나 사진 장식 옵션 등  프로필 페이지의 컨텐트 구성요소들을 장식하고 통제할 수 있는 권한을 의도적으로 제한하였습니다. 이런 요소들이 많아질 경우 기능적인 상충으로 인해 Usability가 훼손될 것이라고 우려하였기 때문입니다.

Written by abulaphia

December 23, 2011 at 11:29 am

Posted in Facebook, UI UX Design

스토리텔링 – 제임스 캠벨의 “Hero’s Journey” 또는 “Monomyth”

leave a comment »

스토리는 정보를 전달하는 가장 효과적인 커뮤니케이션 툴로서 다른 어떠한 예술 형식보다 강력하고 지속적인 효과를 갖는 다고 합니다.  그래서 시장 전략을 수립하고 프로덕트를 기획, 개발하고 고객에게 그것의 가치를 전달하는 전 과정에 “스토리텔링” 방식을 많이 도입하고 있습니다. 사실 스토리 텔링은 할머니가 들려 주는 옛날 얘기부터 시작해서 수많은 헐리웃 영화와 소설, TV 드라마, 광고 등을 보면서 우리도 꽤 익숙해져 있긴 관행이긴 하지만, 이것을 IT 서비스에 어떻게 접목시킨다는 것인지 선뜻 잘 이해가 되지 않기도 합니다.

실제로 우리는 User Interaction을 디자인 할 때 Persona를 정의하거나 제품이 고객에게 전달하고자 하는 핵심 경험을 컨셉화해서 스토리 보드를 만들고 이것을 기반으로 서비스를 개발하곤 합니다. 그런데 방송 드라마나 영화는 물론이고 신문이나 방송 저널리즘에서도 News 보도를 6하 원칙에 기초한 Story Telling이라고 하고, 고구려 벽화도 그당시 생활 풍속에 대해 스토리 텔링을 한다고 하며, 심지어 Facebook도 뉴스피드를 통해 친구들의 Story를 Telling해 준다고 하는데 도대체 어떤 스토리 텔링을 말하는 거냐라는 의문이 당연히 제기되게 됩니다.

일단 이 글에서는 우리가 제품 개발시 사용하는 “스토리텔링”에 여러가지 형식이 존재할 수 있다는 것을 인정하고, Joseph Campbell이 전세계의 영웅들의 신화적인 이야기들을 조사 분석해서 이 1949년도에 출판한 책 “The Hero With Thousand Faces“를  중심으로 영웅들에 의해 펼쳐지는 서사구조와 스토리 텔링 원형을 먼저 이해해 보고자 합니다.

우리가 초등학교 때부터 국어시간에 배워서 잘 알고 있는 스토리 텔링의 대표적인 형식 중 하나로  Gustav Freytag의 5단계 피라미드 형식이 있습니다.  즉 모든 스토리는 발단 (Exposition) → 전개 (Rising Action) → 절정 (Climax) → 해결 (Falling Action, Final Suspension and Resolution) → 결말 (Conclusion) 등 다섯가지 단계로 이루어 진다는 것입니다 (1863년 “Technique of Drama”).

Storytelling By Freytags Pyramid

Freytag’s Pyramid, showing the five parts, or acts: Exposition, Rising Action, Climax, Falling Action and Denouement. The diagram seemed a bit dry by itself, so I’ve added a quick story into the pyramid about a guy and his phone that won’t work.

이에 비해 Joseph Campbell은 “The Hero With A Thousand Faces” (1949년)에서 영웅들의 서사구조를 총 17단계로 훨씬 더 세분화해서 정식화하는데 그에 따르면 시대와 지역을 막론하고 모든 신화의 근본적인 구조와 단계는 동일합니다. 즉 영웅은 평범한 일상의 세계에서 초자연적인 신비의 땅으로 뛰어듭니다 (Departure). 거기에서 기막힌 힘들과 조우하고 결정적인 승리를 쟁취합니다 (Initiation). 그리고 영웅은 신비한 모험에서 전세계를 개선할 수 있는 boons를 가지고 돌아옵니다(Return).

Monomyth or Hero's Journey By Joseph Campbell

Monomyth or Hero's Journey By Joseph Campbell

Joseph Campbell은 Monomyth 또는 “Hero’s Journey”를 이와 같이 “출발 (Departure)” “전개(Initiation)” “회귀(Return)” 등 3가지 섹션으로 크게 구분하고 17단계로 세분합니다.  (Monomyth에 대한 자세한 정의)

  • Departure는 영웅이 본격적으로 모험을 시작하는 전단계, 즉 평범한 사람이 지금까지 알려져 있는 세계와 단절(separation)하고 기꺼이 위험한 미션을 수행하고자 하는 영웅으로 환골탈태하는 단계 (The Call To the Adventure > Refusal To the Call > Super Natural Aid > The Crossing of the First Threshold > Belly of the Whale)
  • Initiation은  영웅이 미션을 수행하기 위해 미지의 세계로 여행을 떠나면서 경험하는 모험을 그리는 단계 (The Road Of Trial > The Meeting With the Goddes > Woman As Temptress > Atonement With the Father > Apotheosis > The Ultimate Boon)  여기서 boon이란 영웅이 미션의 목표로 성취하거나 취득한 것으로서 “불멸의 묘약”이나 “성배” 같은 것이며 세계를 개선하는데 사용됩니다.
  • Return은 여행하면서 획득한 지식이나 힘(boon)을 가지고 평범한 일상세계로 돌아오는 단계 (Refusal To Return > The Magic Flight > Rescue From Without > The Crossing of Return Threshold > Master of Two Worlds > Freedom To Live)

Monomyth는 먼저 일상세계에서 평범한 삶을 살던 사람이 이상한 힘과 신비한 이벤트로 가득한 미지의 세계로 들어가라는 부름을 받습니다. 이 부름은 신의 목소리일 수도 있고, 국민교육헌장처럼 조국과 민족의 역사적 사명일 수도 있고, 어떤 사회가 직면한 치명적인 문제점에 대한 자각일 수도 있습니다 (IT 서비스로 치면 사람들이 일상생활에서 겪는 불편한을 개선해 달라는 고객의 목소리일 수도 있습니다).

이 요청을 받아들인 영웅은 지금까지 경험해 보지 못했던 위험과 도전으로 가득찬 미지의 세계에서 온갖 시련과 역경에 직면하게 됩니다. 영웅은 홀로 또는 조력자들의 도움을 받아 이 낮설고 위험한 세계에서 가혹한 시련들을 극복하고 이 여행의 목표인 “위대한 선물” 또는 “Boon”을 쟁취합니다. 여기서 Boon이란 프로메테우스의 불, 세종대왕의 한글, 예수가 부활 후 가져 온 인간과 신과의 화해를 통해 영생 등 평범한 사람들에게 전파됨으로써 세계를 보다 개선할 수 있는 것을 의미합니다 (우리도 테크놀로지를 통해 삶을 개선하기 위해 먼가를 만들어 내고 있다는 점에서 boon이 이렇게 대단한 것이 아닐 수도 있습니다).

이제 영웅은 Boon을 들고 어떻게 할지 고민하다 일상세계로 돌아오기로 결정하는데, 이 귀환의 여정에서도 역경 (The Crossing of Return Threshold)에 직면하게 됩니다. 만약에 영웅이 성공적으로 귀환했다면 “위대한 선물” 또는 “Boon”은 세계를 개선하는데 사용될 것 입니다. 이리하여 영웅은 예수나 부처처럼 물질세계와 정신세계의 지배자가 되어 (Master of Two World),  죽음의 공포로부터 자유(Freedon To Live)를 획득합니다.

 IT 프로젝트로 치면 고객의 부름을 받고 지금까지와는 다른 낯선 세계에 뛰어들어 여러가지 Risk를 극복하면서 어떤 제품을 만들어 낸 후 이것을 현실세계에 존재하는 사람들에게 전파하는 것, 즉 고객 Needs 분석 (Call To Adventure) > 제품 개발 (Road To Trial) > 제품의 런칭 (Return) 하는 절차하고도 비슷합니다.

사실 “스타워즈,” “토탈리콜,” “터미네이터,” “황야의 7인,” “인디아나 존스” “반지의 제왕” 등 우리가 잘 알고 있는 수많은 헐리우드 장르 영화들뿐만 아니라 “선덕여왕” “계백” “뿌리 깊은 나무”와 같은 인기 사극들도 어떤 영웅이 평범한 일상세계에서 위험이 가득한 모험의 세계로 빨려 들어가서 온갖 시련과 도전을 극복한 후 무엇인가 세계를 개선할 수 있는 것을 들고 평범한 일상세계로 복귀한다는 내용으로 가득차 있습니다.

인문학과 테크놀로지의 결합이 화두가 되고 있는 이 시대 ! “스타워즈” 등 헐리우드의 많은 대작 영화들에 직접적으로 영향을 주었던 Campbell의 고전적인 영웅 이야기, 즉 “Hero’s Journey”를 “Wikipedia”에 정리되어 있는 내용을 중심으로 번역해 보고 생각나는 대로 역자의 해석을 덧붙여 살펴 보도록 하겠습니다. 캠벨의 영웅서사는 RPG 게임이나  Gamification 기획시 뿐만 아니라 Steve Jobs나 주커버그와 같은 IT분야에서 성공한 사람들의 전설적인 이야기를 이해하는데도 큰 도움이 될 것입니다.

I. Departure

1. Call To Adventure : 영웅이 세속적인 일상을 살아가다 어떤 정보 – 미지의 세계로 뛰어 들라는 요청으로 작용하는 어떤 단서 – 를 발견합니다.

  • Call To Action은 신화적 여행의 첫번째 단계로서 영웅이 운명의 부름을 받고 그의 정신의 축을 자신이 살고 있는 사회의 울타리에서 미지의 세계로 옮겨 놓게 됩니다.
  • 미지의 세계의 구성요소 : 미지의 세계는 보물과 위험으로 가득차 있는데, 신화에서는 주로 오지의 땅, 숲, 지하 왕국, 물밑 세계(beneath the waves)나 하늘 위 (above the sky), 비밀의 땅, 높은 산의 정상, 심오한 꿈의 상태 등 다양한 방식으로 표현됩니다. 그러나 이곳은 항상 이상하게 흐느적 거리는 다형질의 괴물, 상상할 수 없는 역경, 초인간적인 행위, 불가능한 환희로 가득차 있는 세상입니다.
  • 영웅이 미지의 세계로 뛰어드는 계기 :  부처처럼 늙은 자, 병든자, 죽은자를 보고 왜 삶이 고뇌로 가득차 있는지에 관한 스스로의 질문에 답을 하기 위해 (자기 의지), 또는 분노에 가득찬 포세이돈의 무시무시한 바람에 떠밀려 가는 오디세이처럼 선하거나 악한 다른 존재(Agent)에 의하여, 또는 우연히 산책을 하다 실수로 이 미지의 세계에 뛰어들게 됩니다.

2. Refusal To Call : 어떤 방식으로 든 미지의 세계로 뛰어들라는 요청을 받지만 미래의 영웅은 자신이 현재의 환경에 얽매일 수밖에 없게 만드는 여러가지 이유로 처음에는 이것을 거부합니다.

  • 그것은 (가족을 부양해야 하는) 의무감, 공포, 불안, 무기력함 등 다양합니다.
  • 이러한 요청을 거부한 대가로 주인공은 여러가지 시련에 직면하게 됩니다. 그는 지루함, 고역 등에 구속되어 자신이 원래 가지고 있던 긍정적인 힘을 상실하고 구원받아야만 하는 희생자로 나락에 떨어지게 됩니다.

3. Super Natural Aid : 일단 영웅이 의식적으로든 무의식적으로든 이러한 요구에 헌신하기로 했다면, 반지의 제왕의 간달프나 매트릭스의 모피어스와 같은 가이드 또는 마법사 (Magical Helper)가 나타나게 됩니다. 때때로 이 초자연적인 멘토는 영웅에게 부적이나 인공물을 주는데, 이것은 나중에 그가 모험을 할 때 닥치는 위기로부터 자신을 지켜주게 될 것입니다.

  • 이 요청을 수락하면 그는 Herojourney에서 어떤 보호자(난장이 노파나 늙은이)와 최초로 맞닥 뜨리게 됩니다. 그리고 노파는 영웅에게 그가 통과해야만 하는 사악한 힘들 (dragon forces)를 물리칠 수 있는 부적을 선물합니다. 이 노파는 영웅을 보호하는 운명적인 힘(protecting power of destiny)을 상징합니다.
  • 이 판타지는 어머니의 자궁 속에서 최초로 경험되었던 “파라다이스의 평화”에 대한 약속을 재확인하는 것으로서 영웅의 현재를 지지하고 과거뿐만 아니라 미래에도 그를 지켜줄 것입니다. 이 노파의 전지전능함은 역경을 헤쳐가면서(threshold passage) 고갈되는 것처럼 보이지만 그의 힘(protective power)은 영웅이 직면하는 낯선 세상 안에 또는 뒤에 항상 그리고 언제나 존재합니다. 영웅은 자기 자신의 요청에 스스로 반응하고 전개되는 상황에 용감하게 맞섬으로써 자신의 내면에 있는 무의식적인 힘들을 발견해 냅니다. 노파에 의해 상징되는 모성 (Mother Nature)은 영웅이 엄청난 임무(mighty task)를 수행할 수 있도록 도와줍니다.
  • 그리스 신화에서 아드리아드네가 테세우스에게 미로로 들어가 미노타우르와 대결하기 전에 실타래와 칼을 주는 것, 반지의 제왕에서 여신 갈라드리엘이 운명의 산으로 본격적인 여행을 시작하기 전에 “Ring Bearer”인 프로도에게 투명망토와 유리병, 갑옷 등을 주는 것이 대표적인 사례입니다.

4. The Crossing of the First Threshold : 첫번째 문턱은 영웅이 멘토로부터 초자연적인 힘을 부여 받은 후 모험의 장으로 실제로 발을 내딛는 지점에 존재합니다. 영웅은 자신이 살고 있던 일상세계에서 그 한계와 규칙이 알려져 있지 않고 위험으로 가득찬 미지의 세계로 뛰어드는 경계선을 넘어가야 합니다.

  • 영웅은 스스로를 가이드하고 도와야만 하는 운명의 화신으로서 마법과 같은 힘이 지배하는 장소로 들어가는 입구에서 문지기(threshold guardian)를 만납니다. 이 문지기는  미지의 영역으로 들어가기 전에 영웅의 배짱을 테스트하는 역할을 하는데,  대개 세부르스 (지하세계에서 머리가 3개 달려있는 개), 사람을 잡아 먹는 거인, 모양을 바꾸는 괴물 등 무시무시한 존재들입니다.
  • 이 문지기는 영웅이 현재 발을 딛고 있는 현재의 세계 또는 삶의 지평의 한계에 서서 세계를 4가지 방향 또는 위 아래로 경계지어 놓고 있습니다. 이것 너머에는 어둠과 위험으로 가득한 미지의 세계가 펼쳐져 있습니다. 부모의 보호를 넘어서면 아기에게 위험한 것처럼, 자신이 살던 사회의 보호를 넘어 다른 세계의 멤버가 되는 것은 위험천만한 일입니다.
  • 평범한 사람은 자신에게 주어져 있는 이 경계 안에 머무르는 것에 만족해 할 뿐만 아니라 심지어 자랑스러워 하기 까지 합니다. 콜럼부스가 지평선 넘어 보이지 않는 곳으로 항해하는 모험을 감행했을 때 많은 사람들의 반대가 있었던 것처럼 남들이 가보지 않은 곳에 첫발을 내딛는 것 자체는 충분히 공포스러워할 만한 이유가 있습니다. 모험은 알려진 것의 베일을 넘어 미지의 세계로 열려있는 통로가 있는 곳이면 어디에서나 항상 존재합니다.
  • 미지의 세계로 가는 입구를 지키는 힘은 위험하고 그것과 맞딱드리는 것은 무모한 일이지만 능력과 용기를 가지고 있는 사람 앞에서 이 위험은 사그러듭니다.

5. The Belly of Whale : 마술적인 문턱을 통과하면 자신이 새로운 존재로 재탄생되는 영역으로 진입하게 되는데(The idea that the passage of the magical threshold is a transit into a sphere of rebirth), 이 아이디어는 고래의 뱃속, 즉 전세계에서 받아들여지고 있는 자궁의 이미지로도 상징화됩니다.

  • 영웅은 문턱의 힘을 정복하거나 타협하지 않고 그냥 미지의 심연으로 빨려 들어간 후 사망한 것처럼 보입니다. 이러한 대중적인 motif는 통과의례(the passage of the threshold)가 자기파괴의 형식(a form of self-annihilation)이라는 교훈을 강조하는 것입니다 (즉 현재까지의 자기 모습을 자의에 의해서든 타의에 의해서든파괴/해체함으로써 새로운 존재로 재탄생, 즉 boon을 쟁취할 수 있는 자격과 역량을 가진 영웅으로 업그레이드 또는 Transformation될 필요가 있다는 의미).
  • 영웅은 바깥으로 도망가지 않고 대신 보이는 세계의 구속을 넘어서 고래의 뱃속, 즉 미지의 심연 속으로 뛰어 들어감으로써 새로운 존재로 재탄생하게 됩니다. 이러한 소멸은 경배자들이 사찰에 진입하는 것과 동일한데,  거기에서 그들은 자기 자신이 언젠가는 사멸하여 먼지와 재로 될 수 밖에 없는 존재라는 것을 자각하게 됩니다.
  • 바로 이러한 이유로 용, 사자, 칼을 차고 있는 악마, 사악한 난쟁이, 날개 달린 황소 등 거대한 괴물들이 사찰로 가는 입구의 양측면에 도열하여 지키고 있는 것입니다. 사찰로 발을 내딛는 순간부터 그는 전혀 새로운 사람으로 환골탈퇴(metamorphosis)를 경험하게 됩니다.
  • 비유적으로 말하면 경배자가 사찰을 통과하는 것이나 영웅이 고래의 턱사이로 뛰어드는 것은 그림의 언어로 Life-Renewing Act를 표현하는 것이라는 점에서 동일한 모험입니다.

II. Initiation

6. The Road of Trial 고래의 배속으로 뛰어는 사람은 여러가지 테스트, 임무, 고난이 연속적으로 펼쳐지는 시련의 길을 가면서 영웅으로 재탄생하게 됩니다. 그는 이 테스트를 한두번 또는 세번씩이나 실패하기도 합니다.

  • 일단 문턱을 넘으면 영웅은 괴상하게 흐느적거리고 불명확한 형식의 꿈과 같은 풍경(dream landscape) 으로 이동하는데, 거기에서 그는 계속되는 시련을 겪어 가면서 생존해 나갑니다. 기적적인 테스트와 역경으로 가득한 시련의 연속은 신화적인 모험에서 사람들이 가장 좋아하는 국면입니다.
  • 영웅은 미지의 세계로 발을 디디기 전에 만났던 초자연적인 조력자의 충고, 부적, 비밀 요원들로부터 은밀하게 도움을 받습니다. 그는 아마도 자신의 초인간적인 여행 (superhuman passage)에서 그를 도와주는 우호 세력들(benign powers)이 어디에나 존재한다는 것을 이 국면에서 최초로 깨닫게 될 것입니다.
  • 시련의 땅으로 맨처음 출발 (The original departure into the land of trials)은 장기간 지속되는 위험한 길 – 주도적인 정복과 깨달음의 순간 (initiatory conquests and moments of illumination)이 계속되는 – 의 시작을 의미하는 것에 불과합니다. 영웅은 계속해서 용들을 죽여야 하고 놀라운 장벽들을 넘어 가야 합니다. 이 여정은 수많은 예비적 승리, 오래가지 않는 환희, 경이로운 풍경의 순간적 스침으로 가득차 있습니다 (multitude of preliminary victories, unretainable ecstasies and momentary glimpses of the wonderful land).
  • 보통의 신화에는 3번의 시련이 존재하는데, 예수는 사막에서 사탄으로부터 3차례 유혹 받습니다. 예수는 이 3차례의 유혹을 통과하면서 예수는 자신의 신성으로 보다 확고히 접근해 갑니다.

7. Meeting With the Goddes : 여기에서 영웅은 유아가 어머니에게서 경험하는 것처럼 모든 것을 포용하고 매우 강력한 힘을 가진 무조건적인 사랑을 만나게 됩니다. 이것은 이야기의 진행과정에서 매우 중요한 단계인데 그가 가장 완벽하게 사랑하는 다른 사람을 발견하는 식으로 표현됩니다.

  • 모든 장애물과 괴물들을 극복한 후 이 모험의 마지막 시련은(ultimate adventure) 결국 의기양양한 영웅과 세상의 여신(Goddes of the World) 간 신성한 결혼으로 보통 표현됩니다. 이것은 최악이나 절정의 순간, 또는 지구의 맨 끝 가장자리나  우주의 중심에서, 또는 마음 속 가장 깊은 곳의 어둠 속에서 발생하는 위기이기도 합니다.
  • 모든 여성의 화신을 상징하는 여신과의 만남은 사랑의 혜택 (love of boon, 자선이나 운명적 사랑)을 쟁취할 수 있는 영웅의 자질에 대한 최종 테스트입니다. 여기에서 Love of Boon이란 영원성을 구현체(encasement of enternity)로서 그들이 즐기는 삶 자체입니다.
  • 이와같이 여신은 Earth Mother 또는 생명의 원천으로서 그녀와의 결혼은 곧 영웅이 삶 자체를 정복했다 (mastery of life itself)는 것을 의미합니다.

8. Woman As Tempress : 그러나 여신은 생명의 원천이기도 하지만 영웅을 타락시키는 악의 이미지도 가지고 있습니다. 이 단계에서 영웅은 여신의 치명적인 유혹과 이기적인 즐거움에 취하여 그의 모험을 중단하거나 길을 잃고 헤매게 됩니다. 그러나 이 유혹이 반드시 여성으로만 표현되어야 하는 것은 아닙니다. 여성은 삶의 육체적 또는 물질적 유혹을 상징하는 메타포(metaphor for the physical or material temptations of life)입니다. 영웅은 때때로 그의 정신적 여정에서 정욕의 유혹에 빠집니다.

  • 여기에서 영웅이 겪는 특이한 난관의 핵심은 당위적 삶에 대한 우리의 의식적인 관점이 현실적인 삶과 좀처럼 부합하지 않는다는 점에 있습니다 (our conscious views of what life ought to be seldom correspond to what life really is).
  • 일반적으로 우리는 우리 자신 또는 친구들의 내면에 유기체적 세포의 본성에 해당하는 자기보존적이고 추악한 본능, 호색한적 열정으로 가득차 있다는 것을 부인하고 오히려 이것을 미화하거나 표백하거 재해석하는 경향이 있습니다. 즉 이러한 옥에 티, 수프에 있는 머리카락은 다른 불결한 사람들의 잘못 때문이라고 상상합니다.
  • 그러나 실제로 이것이 우리에게 발생할 때 또는 우리가 생각하고 행해 왔던 모든 것이 육신의 악취로  불가피하게  오염되었다는 점에 주목하지 않을 수 없을 때야 말로 구역질 나는 경험을 하는 순간입니다.  순수지고한 영혼의 입장에서볼 때 삶, 삶의 행위, 신체의 기관, 특히 삶의 위대한 상징으로서의 여성은 용인될 수 없습니다.
  • 이제 삶을 넘어서 삶을 추구하는 자는 삶 자체와 동시에 추악한 욕망의 상징이기도 한 여성을 넘어서 그녀의 유혹적인 부름을 뒤로하고 티하나 없이 맑은 대기로 치솟아 올라가야 합니다.

9. Atonement With Father : 이 단계에서 영웅은 자신의 삶을 좌우하거나 이끌어 온 궁극적인 힘(ultimate power)과 맞서게 됩니다. 많은 신화에서 이것은 생사를 좌우할 수 있는 힘을 가지고 있는 아버지 또는 아버지의 형상으로 묘사됩니다. 여기가 영웅의 여정에서 중심 포인트입니다 (center point fo journey). 이전의 모든 단계들은 이곳을 향해 모여지고 향후에 벌어지는 모든 일 또한 여기로 부터 비롯됩니다. 비록 이 단계는 남성적 실체와의 조우(encounter with a male entity)로 상징화되긴 하지만 이것이 반드시 남성일 필요는 없으며 예를 들면 “절대반지”와 같이 믿을 수 없는 힘을 가진 물건일 수도 있습니다.

  • 속죄는 자기 자신으로부터 기원한 이중의 악마적 속성 (self-generated double monster) – 즉 신(super ego)으로 생각되는 용과 죄인(억압된 이드, repressed id)으로 생각되는 용 – 을 포기하는 것에 존재합니다. 그러나 이렇게 하기 위해서는 에고 자체에 대한 집착 (attachment to ego itself)을 벗어 던져야만 하는데 이것은 매우 어려운 일입니다. 그는 아버지는 자비로우며 자신의 그 자비에 의존할 수 밖에 없다는 믿음을 가져야만 하기 때문입니다.
  • 이리하여 믿음의 중심은 사악한 신이 강력하게 주무르고 있는 세계의 외부로 벗어나야만 무시무시한 괴물이 디졸브 (소멸)될 수 있습니다.  이러한 역경의 과정에서 그는 어떤 여성적인 존재 (female figure)로부터 희망과 자신감을 얻기도 하는데, 그녀의 꽃가루 마력이나 중재력의 힘에 의해 아버지가 자신의 에고를 깨부시려는 (the father’s ego-shattering initiation) 그 모든 무시무시한 경험으로 부터 그는 보호 받게 됩니다. 만약 무시무시한 아버지의 얼굴을 더이상 신뢰하는 것이 불가하다면 자신의 믿음은 거미여인이나 축복받은 어머니 등 다른 곳으로 중심을 옮겨야만 합니다.
  • 이러한 어머니 같은 존재의 도움에 의지하여 이 위기를 견뎌낸 후 그는 결국 아버지와 어머니는 서로가 서로를 반영하고 있으며 두 존재는 본질적으로 동일하다는 것을 깨닫게 됩니다.  영웅이 아버지와 맞서게 되는 문제로 인해 그의 영혼은 공포를 넘어서 광대하고 무자비한 코스모스의 어지럽고 광적인 비극이 어떻게 신과 같은 존재의 권능(majesty of Being)에 의해 완벽하게 획책되는지를 깨달을 정도로 성장하게 됩니다.
  • 영웅은 자신에게 지금까지 보이지 않았던 특정 부분( its peculiar blind spot)과 함께  순간적으로 그것의 원천을 힐끗 바라보면서 삶을 초월합니다(transcends life). 그는 아버지의 얼굴을 바라보며 그를 이해하게 됩니다. 그리고 이 둘은 화해가 이루어지고 속죄받습니다.
  • 드라마 “뿌리 깊은 나무”에서 이도는 자신의 아버지인 이방원의 조선과 자신이 조선이 어떻게 다를 것인지에 관한 답을 내기 위해 자신의 아버지와 치열하게 맞섭니다. 여기에서 태종 이방원은 상왕으로서 절대적 권력을 가지고 그의 아들인 이도의 생사여탈권을 쥐고 흔들 수 있는 존재입니다. 이도는 현명하고 자비로운 군주가 되어 아버지의 잘못을 속죄하는 동시에 아버지와 화해하지 못한다면 조선의 민초들에게 빛을 던져 줄 수 있는 boon, 즉 한글을 창제한 세종대왕으로 재탄생하지 못할 것입니다. 스타워즈에서 루크가 자신의 아버지로 판명된 제다이와 맞서는 상황도 비슷합니다.

10. Apotheosis : 누군가 육신이 죽어서 영혼의 상태로 살아있다면, 그는 대립쌍들을 넘어서 (beyond the pairs of opposites) 신성한 지식과 사랑, 연민과 은총의 세계로 이동합니다. 이 단계는 영웅이 일상세계로 회귀하기 전에 가지는 휴식, 평화, 충만함의 시기라는 보다 세속적인 방식으로 묘사됩니다.

  • 항구적인 영원성이 스스로에게 존재할 뿐만 아니라 자신과 모든 것이 항구적(Everlasting)이라는 것을 아는 사람들은 소원하기만 하면 이루어 지는 나무 (wish fulfilling trees) – 샨스크리트어로 Kalpa-Vriksha라고 하는데 인도의 누군가 소원하면 그것이 이루어지는 신화적 의미를 담고 있음 – 에 거주하며, 불로주 (brew of immortality) 를 마시고, 다른 사람들에게는 들리지 않는 영원한 조화의 음악을 어디에서나 들을 수 있게 됩니다.

11. Ultimate Boon : 궁국적인 보물(boon)은 모험의 목표로서 쟁취한 것입니다 (achievement of the goal of the quest). 영웅은 이것을얻기 위해 여행을 떠난 것입니다. 이전의 모든 단계들은 이것을 위해 그 사람을 준비시키고 정화시키는데 필요한 전 단계에 불과합니다. 왜냐하면 많은 신화에서 boon은 불로장생의 묘약, 영생을 가져다 주는 식물, 또는 성배와 같이 초월적인 그 무엇이기 때문입니다.

  • 신들과 여신들은 이전 단계에서 비록 스스로 궁긍적인 목표는 아니었지만 이 단계에서는 불멸하는 존재의 묘약 (the elixir of Imperishable Being)의 화신으로 이해됩니다.
  • 영웅이 그들과의 접촉을 통해 궁극적으로 추구했던 바는 신들 자체가 아니라 그들의 은총, 즉 사물이 소멸되지 않게 해 주는 힘 ( the power of their sustaining substance)이었습니다. 이 기적적인 에너지의 실체만이 소멸하지 않는 존재입니다 (This miraculous energy-substance and this alone is the Imperishable). 이것을 어디에서든지 구현하고, 선물하고, 표현하는 신들의 이름과 형식이 지금까지 나타났다 사라졌다를 반복했던 것입니다.
  • 이것은 제우스의 번개와 같은 기적적인 에너지이거나,  여호와나 초월적인 부처, Viracocha의 기름진 비, 성인 또는 현자의 궁극적인 계몽의 빛입니다(e light of the ultimate illumination of the saint and sage). 궁극적인 Boon의 수호자는 이것을 오로지 정당한 절차에 의해 검증된 사람에게만 줍니다.

III. Return 

12. Refusal To Return : 다른 세상에서 축복과 깨달음을 얻은 후 영웅은 평범한 일상의 세계로 돌아가 자신의 이웃들에게 boon의 혜택을 선물해 주고 싶어하지 않을 수도 있습니다 (여기에서 남은 인생을 즐기면 되지 왜 자신을 알아주지도 않는 무지몽매한 것들을  깨우쳐 가면서 내가 죽을 고생을 해서 겨우 쟁취한 것을 나눠줘야할까 ?) .

  • 영웅이 원천을 관통해서든 또는 어떤 남성이나 여성적 존재 (인간 또는 동물, 어떤 화신) 의 은총을 통해서든 여행의 목표를 달성했다 하더라도, 모험가는 여전히 삶을 바꾸는 트로피를 들고 현실세계로 돌아와야만 합니다. Monomyth의 구조상 영웅은 이제 지혜의 문자, 황금양모, 또는 잠자고 있는 공주를 들고 인간세계의 왕국으로 돌아와서, 이것으로 커뮤니티나 국가, 행성을 재건하는데 이바지해야 할 것입니다.
  • 그러나 이러한 책임은 종종 거절당합니다. 승리한 후 부처조차도 깨달음의 메시지가 세속의 세계에서 제대로 전달될 것인지 의심했으며, 어떤 현자들은 그냥 천상의 환희를 간직한 체 죽어갔습니다. 영웅들이 나이가 들지 않는 불멸의 존재인 여신의 축복에 머물렀다는 우화도 매우 많습니다.

13. Magic Flight : 때때로 영웅은 신들이 애지중지하면서 지키고 있는 Boon을 들고 탈출을 감행해야만 합니다. 처음 시작할 때와 마찬가지로 되돌아 오는 여정 또한 모험적이고 위험으로 가득차 있습니다.

  • 영웅은 승리를 통해 신 또는 여신의 은총을 쟁취한 후 사회의 재건을 위해 불멸의 묘약을 들고 일상세계로 돌아오도록 요청받습니다. 초자연적인 후원자는 자신의 모든 권능으로 이 모험의 최종단계를 지원합니다. 반면 감시자의 반대를 물리치고 트로피를 빼돌렸거나 또는 세계로 귀환하고자 하는 영웅의 희망이 신들에 의해 분노를 사게 된다면, 신화적인 여행의 마지막 무대는 활기를 띄고, 때로는 코믹한 추격적으로 전개됩니다. 이 도주는 마술적인 장벽의 경이로움에 의해 매우 복잡해 질 수도 있습니다.
  • 반지의 제왕에서 프로도는 분화구에 절대반지를 던지고 기진맥진한 상황에서 간달프가 보낸 거대한 새의 등에 엎여 현실세계로 돌아옵니다.

14. Rescue From Without : 영웅이 모험을 떠날 때 가이드와 조력자가 필요했던 것과 같이 그가 일상생활로 돌아올 때도 강력한 가이드 또는 구원자가 필요합니다. 특히 그가 위험한 모험을 경험하면서 취약해져 있거나 심각한 부상을 입었다면 더욱 그렇습니다.

  • 영웅은 어떤 도움에 의해 또는 아무런 도움도 없이 그의 초자연적인 모험으로부터 현실세계로 돌아와야만 할 것입니다. 그러나 각성된 상태를 스스로 버리고(in favor of self scattering of the wakened state) 현재 자신이 존재하는 깊숙한 곳의 은총을 포기하는 것은 쉬운 일이 아닙니다. “세상을 등진 사람이 다시 돌아오고 싶을까요? 그는 아마도 초자연적인 세계에 계속 머무르고 싶을 것입니다.”
  • 그럼에도 불구하고 그가 살아있는 한 삶은 그를 부를 것입니다(Life will call). 많은 사람들은 사회로부터 멀리 떨어져 있는 사람들에 대해 질투심을 가지고 있어서 그에게 돌아오라고 문을 두드릴 것입니다. 만약 영웅이 현실세계로 돌아오는 것을 내켜하지 않는다면 방해꾼들은 지랄을 할 것입니다.
  • 그러나 반면 부름을 받은 자(summoned one)가 (죽음과 유사한) 완벽한 자기 존재의 충만한 상태에 밀봉되어 (sealed in by the beatitude of the state of perfect being) 현실세계로 돌아오는 것을 단지 지연시키고 있을 뿐이라면 겉으로 보기엔 구원(apparent rescue)인 것처럼 보이는 절차가 효과를 발휘되여 모험가는 결국 돌아올 수 밖에 없게 됩니다.

15. The Crossing of the Return Threshold : 탐험하면서 얻은 지혜, 즉 인간의 삶에 통합되어야만 하는 지혜가 무용지물이 될 수도 있는 시험이 돌아오는 여정에도 존재합니다.  영웅은 돌아오는 과정에서 이 지혜를 어떻게 나머지 세계와 공유할 것인지 터득할 수도 있으나, 이것은 보통 극단적으로 어렵습니다.

  • 자신의 목표를 성취하고 모험의 세계에서 현실세계로 돌아오는 영웅은 세계의 충격(the impact of the world)을 견뎌내야 합니다. 이 과정에서도 실패의 케이스들이 많이 존재하는데 이것은 살기 위한 문턱을 넘어가는 과정이 얼마나 어려운지를 증언해 주고 있습니다.
  • 영웅이 돌아오면서 겪는 첫번째 문제는 영혼을 충만하게 하는 비전의 달성을 경험한 후 스쳐 지나가는 기쁨과 슬픔, 일상생활의 시시함과 욕육에 찬 세속적인 잡음(banalities and noisy obscenities of life)을 현실로 받아 들여야 한다는 점입니다. 왜 이렇게 더러운 세상으로 다시 들어가야할까 ? 왜 자신이 생사의 시련을 겪어 가면서 쟁취한 초월적인 은총의 경험을 열정에 사로 잡혀 있는 필부들까지 이해할 수 있게, 또는 심지어 재미를 느끼게 만들어 줘야 하는가 ?
  • 밤중에 꾸었던 중대한 꿈은 훤한 대낮에는 단지 어리석게 보일 뿐이기 때문에 많은 시인과 예언자들은 맨정신의 배심원들 앞에서(before a jury of sober eyes) 자신이 바보 연기를 하고 있다는 것을 깨닫게 됩니다. 영웅 입장에서 전세계를 악마의 손에 맡기고 천국의 안식처로 다시 되돌아가는 것, 문을 닫고 그냥 지나쳐 가는 것이 더 쉬울 것입니다.
  • 그러나 만약 어떤 정신적인 존재가 영웅이 후퇴할 수 없도록 장벽을 쌓아 놓았다면 시간의 영원성을 재현하고 인지하기 위한 작업 (the work of representing eternity in time, and perceiving in time eternity)은 회피할 수 없습니다. 영웅은 평범한 일상세계로 돌아와서 그것을 실제로 받아 들여야만 합니다 (The hero returns to the world of common day and must accept it as real).

16. Master of Two Worlds : 이 단계는 보통 예수나 부처와 같은 초월적인 영웅으로 표현됩니다. 이것은 그가 인간적인 영웅으로서 물질과 정신의 균형을 달성했다는 것을 의미하기도 합니다. 이 사람은 내부와 외부세계 모두에서 편안하고 능력있는 존재가 됩니다.

  • 분할된 세계를 마음대로 넘나들 수 있는 자유 – 자신의 원칙을 타자의 그것으로 오염시키지 않으면서도 타인의 미덕을 통해 자신을 되돌아 보는 여유를 허용하는 마인드 – 는 마스터만이 가질 수 있는 자질입니다. 니체는 The Cosmic Dancer는 한 곳에 오랫동안 머물러 있지 않으며 즐겁고 가볍게 어떤 포지션에서 다른 포지션으로 옮겨 다닌다고 선포합니다.
  • 어떤 한 장소에서 한번 이야기한다고 해서 나머지 세계에서 지금까지 받아 들여지던 믿음에 균열을 일으키지는 못합니다. 그는 장기적인 심리적 훈육과정을 통해 자신의 개인적인 한계, 독특한 특징들 (idiosyncracies), 희망과 공포 등에 대한 모든 집착을 완전히 버리고 진실을 구현하기 위한 부활의 전제조건인 자기파괴(self-annihilation)도 마다하지 않게 됩니다.
  • 이렇게 함으로써 그는 성숙해 져서 드디어 위대한 속죄를 위한 마지막 단계에 도달합니다. 그의 개인적인 야심은 완전히 용해되며 더이상 살려고 노력하지도 않습니다. 그러나 자기에게 다가 와서 지나쳐 가든 모든 것들에 기꺼이 편안한 태도를 취합니다. 그는 소위 “익명성(anonimity)”의 경지에 도달합니다.
  • 기독교의 이야기로 치면, 예수는 사망후 사흘만에 부활해서 일상세계로 돌아옵니다.

17. Freedom to Live : 두 세계의 정복은 죽음으로 부터 자유(freedom from death)와 동시에 삶의 자유(freedom to live)로 이끕니다. 이것은 때때로 미래를 초조하게 기다리지도 않고 과거를 후회하지도 않으면서 그 순간의 살아있음(living in the moment) 을 의미하기도 합니다.

  • 영웅은 이제 현재에 존재하기 때문에 이미 완성된 것이 아니라 현재 이루어지고 있는 것의 챔피언(champion of things becoming, not of things become)이 됩니다.  그는 겉으로 보기에 시간이 지나도 변화가 없는 것을 존재의 영원함 (permanence of Being)과 착각하지도 않으며 다음 순간 또는 타자 (next moment or the other thing) 가 영원한 존재를 변화로 파괴할 것이라고( destroying the permanent with its change) 두려워하지도 않습니다.
  • 어떤 것도 자기 자신의 형식을 계속 유지할 수는 없습니다. 그러나 그 무엇보다 위대한 재활의 원천으로서의 대자연(the Nature)은 항구적으로 어떤 형식들로부터 다른 형식들을 만들어 냅니다 (Nature, the greater renewer, ever makes up forms from forms). 전체 우주에서는 그 무엇도 소멸하지 않는다는 것을 명심하세요. 우주는 자신의 형식들을 다양하고도 새롭게 만듭니다. 이리하여 다음 순간은 다가와서 지나쳐 가도록 허용됩니다 (Thus the next moment is permitted to come to pass).
  • 예수는 부활한 후 일상세계로 돌아 오지만 평범한 사람으로 돌아 온 것은 아닙니다. 그는 다른 사람들과 동일하게 보이고, 그들과 소통할 수 있는 것처럼 보이지만 그의 몸은 은총을 받은 몸(glorified body)입니다. 그의 몸은 눈으로 볼 수 있고 손으로 만질 수 있지만 시공의 속박으로부터 자유롭습니다. 그는 이제 스스로의 죽음과 부활을 통해 다른 사람들에게 생명을 줄 수 있게 되었습니다.

스티브 잡스 생애를 Campbell의 “Monomyth”에 굳이 끼워 맞춰서 해석해 본다면 이 영웅의 이미지와 그가 꽤 비슷하게 보일 수도 있습니다. 잡스는 자신이 창업한 회사에서 쫒겨난 후(departure) 10여년간의 역경을 견디면서 자신의 아이디어를 발전시키고(initiation) Apple로 귀환하여 아이팟, 아이폰, 아이패드 등 자신이 개발한 boon으로 세상을 바꿔 놓았습니다.

Monomyth는 편안하고 안전한 어머니의 배속에서 낯선 세계로 나와서 성장하는 사람의 일대기로 읽혀질 수 있다는 점에서 보편적이라고 할 수 있습니다. 이러한 형식은 그만큼 많은 사람들에게 익숙해져 있기 때문에 어떤 사람의 이야기나 역사적 사건 등을 이해함에 있어서 큰 도움이 되기도 합니다.

그러나 Monomyth가 도그마처럼 공식화되어 있어서 모든 신화적인 서사구조에 이러한 17단계가 반드시 적용되어야 하는 것은 아닐 것입니다. 어떤 이야기를 3개 시리즈로 구성된 2시간짜리 장편 극영화로 만들 수도 있고, 30초짜리 광고로도 만들 수 있습니다. 또한 실제로는 이러한 구조로부터 완전히 벗어나 있는 이야기들도 있을 것이며, 어떤 경우에는 자신의  Theme을 전달함에 있어서 핵심적인 몇가지 단계들만 취해서 스토리를 구성할 수도 있을 것입니다.

Campbell 이후 영웅의 신화적 서사구조에 어떤 것을 추가하거나 간소화하려는 시도들도 계속 있었습니다. 예를 들어  Phil Cousineau는 그의 책 “Hero’s Journey”에서 이야기를 아래와 같이 8단계로 나누었습니다. 그러나 아래에서 보는 바와 같이 “The Vision Quest”가 추가된 점을 제외하고 James Campbell의 이론과 크게 다르지는 않은 것 같습니다.

  1. The Call to Adventure
  2. The Road of Trials
  3. The Vision Quest
  4. The Meeting with the Goddess
  5. The Boon
  6. The Magic Flight
  7. The Return Threshold
  8. The Master of Two Worlds

지금까지 User Experience Design에 스토리텔링을 많은 사람들이 적용하는데, 여기에서 스토리텔링의 원형이 무엇이냐에 대한 답을 찾기 위해 캠밸이 정식화한 영웅의 보편적인 서사구조를 살펴 보았습니다. 실제로 다양한 방식의 스토리 텔링을 어떻게 UX 설계에 적용하는지에 관한 실무적인 지식을 얻고 싶은 분은 아래 URL들을 참고하시기 바랍니다.

Story Telling and UX Sources :

Written by abulaphia

October 25, 2011 at 4:37 pm

%d bloggers like this: