abulaphiaa

Keep Yourself Social

스티브 잡스 이전에 엥겔바르트가 있었다.

with 2 comments

어떤 아티클을 보다가 “Mother of All Demo“라는 말이 등장해서 검색해 보니, Wikipedia에 “더글라스 엥겔바르트”라는 위대한 천재의 이야기가 나와서 공유합니다.  엥겔바르트는  오늘날 우리가 가장 많이 사용하는 컴퓨터 인터페이스인 마우스를 비롯하여, 인터넷이 아직 시작도 되기 전인 1968년도에 비디오 컨퍼런싱, 텔레컨퍼런싱, 이메일, 하이퍼텍스트,  하이퍼미디어 등을 최초로 데모한 사람입니다. 오늘날 인터넷을 통해 우리가 일상적으로 사용하고 있는 많은 App.들을 보여주었기 때문에 이것을 사람들은 Mother of All Demo라고 부릅니다. 컴퓨터와 인터넷의 세계에서 스티브 잡스가 제일 천재인줄 알았는데, 그 이전에 컴퓨터를 통해 인간의 집단지성을 조직화함으로써 세계를 개선하는 것을 삶의 목표로 삼은 엥겔바르트가 있었습니다.

Douglas Engelbart는 1925년 1월 30일 Oregon주에서 태어난 촌놈이었다. 그는 오레곤 주립대학에서 공부하던중 2차대전 말에 해군에 징집되어 “레이다 기술자”로 2년간 필리핀에서 근무했다.

그는 1948년 오레곤 주립대학에서 전기공학 학사를 취득한 후 Ames Research Center에 있는 National Advisory Committee for Aeronautics에서 3년간 일한 후 1951년 좋은 교육과 안정된 일자리 외에 자신의 인생의 목표가 없다는 것을 갑자기 깨닫고, 몇달동안 고민한 끝에 다음과 같은 삶의 목표를 세운다.

1. 세상을 보다 좋게 만드는데 자신의 경력을 집중한다.
2. 세상을 개선하려는 모든 진지한 노력에는 어떤 형태로든 조직화가 필요하다.
3. 모든 사람들의 집단적인 인간 지성을 동력화해서 효율적인 솔루션을 만들어 내는 것이야 말로 핵심이다.
4. 만약에 당신이 무엇이 되었든지 우리가 하는 방식을 극적으로 개선할 수 있다면, 당신은 지구 상에서 중요한 문제를 해결하기 위한 모든 노력들을 신장시키게 될 것이다. 그리고 이것은 빠를 수록 좋다.
5. 컴퓨터는 이러한 문제해결 능력을 극적으로 개선하기 위한 용기이다 (computers could be the vehicle for dramatically improving this capability).

간단히 말하면 Douglas Engelbart는 우리나라에서 한참 6.25 전쟁을 하고 있을 때 “컴퓨터를 매개로 오늘날 우리가 애기하고 있는 인간의 집단지성을 활용하여 인류가 닥친 문제를 해결함으로써 세계를 개선하는 것”을 자신의 목표로 삼았다. 확실히 몇세대는 앞서 있는 문제의식을 가지고 있던 셈이다.

그 후 그는 UC Berkely에서 1955년 박사학위를 취득하고, 1957년부터 SRI(Stanford Research Institute)에서 마그네틱 장치와 전기 미니어쳐에 대해 연구하다 1962년 발표한 “Augmenting Human Intellect: A Conceptual Framework“라는 논문을 바탕으로 ARC (Augmentation Research Center)에서 자신의 리서치 팀을 만들어 비트 맵 스크린, 마우스, 하이퍼텍스트, 협업툴, 그리고 Graphic User Interface의 등 오늘 날 사용하는 컴퓨터 인터페이스의 요소들을 개발한다.

엥겔바르트는 1968년 12월 9일 오늘날 컴퓨터에서 일반적으로 사용하는 실험적인 컴퓨터 테크놀로지들, 즉 computer mouse, video conferencing, teleconferencing, email, hypertext, word processing, hypermedia, object addressing and dynamic file linking, bootstrapping, and a collaborative real-time editor 등을 시연한다. 이것은 지리적으로 분산되어 있는 1천명의 컴퓨터 전문가들과 함께 Engelbart가 주도한 “NLS”(Online System의 약자)의 첫번째 작품이다. 그리고 Engelbart의 데모는 모든 데모의 시초라는 의미에서 오늘날에도 “Mother of All Demos”라고 불리운다.

그리고 엥겔바르트는 1970년 특허를 취득하고 Bill English와 함께 두개의 금속바퀴와 나무조각으로 만들어진 “X-Y position indicator for a display system”를 만드는데 이것이 바로 오늘날 우리가 컴퓨터에서 사용하는 Mouse의 효시이다. 그는 긴 꼬리를 가지고 있어서 이것을 “Mouse”라고 불렀고 스크린의 커서를 “bug”라고 불렀다.

그럼에도 불구하고 그는 이 특허로 인해 로얄티를 한푼도 받지 못했는데 “SRI가 특허를 취득했으나 그들은 이것의 가치를 전혀 알지 못했다. 나는 몇년 후 SRI가 4만달러를 받고 Apple에게 라이센스를 줬다는 소식을 들었다”고 말한다.

역시 천재만이 천재적인 발명품의 가치를 알아  볼 수 있나 봅니다.  21세기 인터넷 업계에서 일하면서 우리가 엥겔바르트나 스티브잡스와 같이 “세계를 바꾸겠다”는 목표를 진심으로 가져본 적이 있는지 스스로 반성하지 않을 수 없군요.

Advertisements

Written by abulaphia

April 25, 2012 at 2:55 pm

Posted in disruptive innovation

Tagged with ,

창의성의 비밀

with 15 comments

 Wall Street Journal에서 지난 주에 “창의성”에 관해 재미있는 기사를 올렸는데 그 내용을 발번역 해보았습니다. (how to be creative, 2012년 3월 12일).

주요 내용은

  • 창의성은 특별한 사람의 유전자에 각인된 초자연적인 힘이 아니라 누구나 배우고 개선할 수 있는 스킬이다.
  • 역사상 중요한 발견은 전혀 그럴싸 하지 않은 환경에서 “통찰의 순간(a moment of insight)“에 이루어진다.
  • 창의성은 오른쪽 뇌의 피질에 존재하는 상위측두이랑(aSTG, superior anterior temporal gyrus)이라는 부분에서 관장한다. 이것은 멀리서 느슨하게 연결되어 있는 정보를 종합해 내는데 뛰어난 역량을 가지고 있다.
  • 문제해결의 실마리(Feeling of Knowing)가 전혀 보이지 않을 때, 또는 aSTG에서 명멸하는 Random Association을 잡아내 “통찰의 순간”에 이르기 위해서는 각성제 먹고 밤샘하는 것보다는 일을 잊어 버리고 느긋하게 쉬거나 술한잔 하면서 친구들과 잡담을 나누는 것이 더 유리하다.
  • 문제해결의 실마리를 잡았을 때는 집중해서 문제와 씨름해야 한다.
  • 잡스가 말한 것처럼 창의적인 아이디어는 전혀 무관한 사물들을 연결시킬 때 탄생하기 때문에 전혀 다른 분야의 동료들과 자주 어울리는 것이 유리하다.
  • 비전문가들에 의한 새로운 문제제기 (Mental Restructuring)는 보통 전문가들에 의해 거부되지만,  비전문가 또는 초보자로서 문제를 공략하는 역량과 즐기는 태도, 그리고 모든 편견과 실패에 대한 두려움으로부터 자유야 말로 창의력의 핵심이다.

1. 창의성은 이완된 상태에서  활성화되는 Skill

최근 10년간의 연구결과에 따르면 창의성은 창의적인 사람들의 유전자에 각인된 마술적인 재능이나 초자연적인 힘이 아니라 누구나 배우고 개선할 수 있는 스킬입니다. 글쓴이는 우리가 직면하고 있는 난관을 해결하기 위해서는 점진적인 개선보다는 의식의 갑작스러운 도약 통찰의 순간 (a moment of insight, a sudden leap in consciousness)이 필요한데, 이것을 위해서는 각성제 먹고 밤샘하면서 사고의 출력을 극대화하기 보다는 맥주 한잔하거나 뜨거운 물로 샤워하면서 느긋하게 쉬는 것이 더 유리하다고 합니다.

2. 창의성을 위해서는 비전문가들의 통찰과 다른 분야와의 이종교배가 필수적 

“창의성”에 관한 새로운 리서치들에 따르면 가장 곤란한 문제들에 어떤 식으로 접근해야 효율적인지에 대해서도 답을 주고 있는데, 중요한 문제들에 대한 돌파구는 해당 전문가들 보다는 종종 문회한들의 순진하지만 과감한 시도에 의해 열린다고 합니다. 바로 이러한 이유 때문에 창의성을 자극하기 위해서는 시간을 들여 우리가 전문적인 이외의 다른 분야와 “이종교배 (Cross-Pollination)”하는 것보다 더 중요한 것은 없다고 합니다.

3. 통찰의 순간에 대한 사례

1) Arthur Fry의 Post-It

3M의 엔지니어였던 Arthur Fry는 1974년 접착력이 매우 약해서 두개의 종이를 거의 붙일 수 없는 화합물에 관한 프리젠테이션을 보고 “잘 붙지 않는 접착제를 실제 생활에서 도대체 무슨 용도로 써야하나?”라는 문제에 직면하게 되었습니다다. 이 질문에 대한 해답을 그는 전혀 그럴싸하지 않은 상황에서 찾게 됩니다. 그는 주말에 성가대에서 노래할 곡에 종이를 끼워 두었는데 이것이 자꾸 흘러 내려서 예배 도중에 불러야할 찬송을 미친듯이 찾곤 했습니다.

지루한 설교가 진행되던 도중에 그에게 번쩍하는 순간이 찾아 왔습니다 (Mr. Fry had an epiphany). 그는 갑자기 잘붙지 않는 접착제를 재사용이 가능한 책갈피(reuable bookmark)로 사용할 수 있다는 것을 갑자기 깨닫게 됩니다. 그것은 페이지에는 잘 붙지 않지만, 끈끈하지 않기 때문에 책을 찢지 않고도 쉽게 제거될 수 있었습니다. 궁극적으로는 이것이 오늘날 사무실에서 가장 많이 사용되는 프로덕트 중 하나인 Post-It-Note의 탄생이라는 결과를 낳게 되었습니다.

Arthur Fry의 발명은 통찰의 순간에 대한 고전적인 사례입니다.

2) 과학자들의 Insight Puzzle 실험연구

뇌의 피질이 우리를 갑자기 깜짝 놀라게 하는 것 같은 이벤트가 도대체 어떻게 발생하는지 과학자들도 연구하기 시작했습니다. 과학자들은  “insight puzzle” 실험을 통해 피험자들의 뇌에 무슨 일이 벌어지는지를 관찰했는데요. 예를 들어

  • 어떤 남자는 작은 마을에서 20명의 여성과 결혼했다. 이 모든 여성들은 지금도 살아 있으며, 이혼 당한 사람은 없다. 이 남자는 법을 어기지도 않았다. 이 남자는 누구인가 ?

Mark Beeman과 John Kounios는 이 리서치를 통해 이 통찰의 순간 또는 플래쉬가 어디에서 오는지를 밝혀냈습니다. 이 문제에 대한 답을 찾아내기 몇초 전에 오른 쪽 뇌의 앞부분에서 예리한 스파크가 튀는 것이 관찰되었습니다. 오른쪽 뇌의 피질에 존재하는 상위측두이랑(aSTG, superior anterior temporal gyrus)이라는 부분은 멀리서 느슨하게 연결되어 있는 정보를 종합해 내는데 뛰어난 역량을 보여주는데, 이것이야 말로 어려운 문제를 창의적으로 해결하는데 필요한 것입니다.

흥미롭게도 Beeman과 그의 동료들은 사람들이 이러한 통찰을 더 잘 가질 수 있고,  aSTG에서 발생한 해답을 더 잘 잡아낼 수 있는 요인들도 발견했습니다. 예를 들어, 피험자들에게 웃기는 짧방들을 잠시 노출시키면 정답율이 20%나 증가하는 결과를 얻었습니다.

올해 초  Pine Crab Sauce 라는 3가지 단어를 제시하고 연관성이 높은 단어를 맞추는 ”Insight Puzzle”에 관한 시카고의 일리노이 대학의 연구에 따르면 술취한 피험자들이 정신이 멀쩡한 사람들보다 30% 높은 정답률을 기록하였습니다.

술에 쩔거나 휴식을 취하는 것이 창의적인 사고에 어떤 도움을 줄까요 ? 정답은 주목하지 않는 것의 강점과 놀라운  연관이 있습니다 (The answer involves the surprising advantage of not paying attention). 우리는 집중을 숭배하는(worship focus) 시대에 살고 있긴 하지만 – 심지어 카페인을 들이 마시면서까지 어거지로 우리는 항상 집중하도록 강요한다 –  이러한 접근은 상상력을 방해합니다. 우리는 무엇인가에 초점을 맞출 수는 있겠지만, 우리는 아마도 오답에 초점을 맞추고 있는지도 모릅니다.

우리는 이제 휴식이 도움이 되는지를 있게 되었습니다. 우리가 샤워를 하면서 몸과 마음을 이완시키고 개그콘서트를 보면서 관심의 스폿라잇트를 내면으로 돌리고, 오른쪽 뇌의 구석구석에서 명멸하는 모든 Random Association을 옅듣지 않는다면, 우리는 어려운 문제들을 해결할 수 있는 통찰을 얻을 수 없을 것입니다.

이러한 리서치들은 그렇게도 많은 새로운 돌파구들이 전혀 그럴싸하지 않은 장소에 발생하는지를 설명해 주고 있습니다. 아르키메데스는 욕조에서 목욕하다 부력의 원리를 발견했고, 물리학자 Richard Feynman만 스트립 클럽에서 방정식을 갈겨 썼고, 구글은 회사의 로비에 탁구대를 설치하고 낮잠의 실질적 효과를 인정합니다. 아인쉬타인은 언젠가 “창의성은 낭비된 시간의 잔해 (Creativity is the residue of time wasted)”라고 선언하기도 했습니다.

물론 모든 난관의 창의적 해결에 “축복 (epipany)”이 필요한 것은 아닙니다. 샤워하거나 맥주 한잔 하면서 쉰다고해서 모든 문제가 해결되는 것은 아니며 오히려 휴식의 유혹을 견디며 계속 일해야 할 때도 있습니다.

이러한 종류의 창의성은 어느날 갑자기 축복처럼 다가오는 것이 아니라 대부분 많은 땀과 실패로 얼룩져 있습니다. 그의 스케치는 이미 수많은 붉은색 x표로 도배되어 폐기되고,  많은 프로토타입은 쓰레기통 속에 버려졌으며, 최초의 드래프트는 실패로 판명되었습니다.

니체는 이것을 “거부절차 (rejecting process)“라고 하는데, 이것은 창의적인 사람들이 위대한 축복의 순간에 대해 자랑질을 해대긴 하지만   일상의 현실은 결코 그렇게 로맨틱하지 않다는 것을 의미합니다.  그는 “모든  예술가와 사상가들은 뛰어난 노력파들이다 (All great artists and thinkers are great workers)” 라고 썼습니다.

3) 전설적인 디자이너 Milton Glaser

전설적인 그래픽 디자이너 Milton Glaser의 사례 또한 창의성의 이러한 무자비한 형식(This relentless form of creativity)의 좋은 본보기라고 할 수 있습니다. 그는 자신의 사무실 앞에 “Art is Work”라는 슬로건을 새겨 놓은 인물입니다. 그는 1975년에 새로운 광고 캠페인을 제작하는 일에 참여하는데 이것의 목적은 여기 저기 분산되어 있는 뉴욕의 이미지를 재활시키는 것이었습니다.

Glaser는 다양한 활자체로 슬로건의 레이아웃과 폰트를 실험하면서 몇주간을 보낸 후 하얀 배경에 필기체로 세팅된 “I Love New York”이라는 매력적인 디자인을 들고 나타났습니다. 그의 프로포잘은 즉각 승인되었습니다. Glaser는 모든 사람들이 그것을 좋아했다면서 “내가 만약 평범한 사람이었다면 프로젝트에 대한 생각을 중단했을 것입니다. 그러나 나는 그럴 수가 없었습니다. 중단하는 것은 옳게 느껴지지 않았습니다 (Something about it just doesn’t feel right)”.

디자인에 대해 몇일을 더 숙고하던 중 Glaser는 도심에서 교통체증으로 택시 안에 갖히게 되었습니다. “나는 항상 여분의 종이를 주머니에 들고 다녔습니다. 그래서 나는 종이를 꺼내서 그림을 그리기 시작했습니다. 나는 생각하고 그림을 그리고 일을 끝냈습니다. 나는 머리 속에서 전체 디자인을 보았습니다. 나는 활자체와 중간에 둥글고 커다란 하트를 보았습니다. 나는 디자인이 어떻게 되어야만 하는지를 깨달았습니다.”

Glaser가 극심한 교통체증으로 택시 안에 갖혀서 그려낸 로고는 전세계에서 가장 폭넓게 모방된 작품들 중 하나입니다. 그는 자신의 일에 대한 생각을 멈춘 후에야 비로소 그 디자인을 발견해 냈던 것입니다.

4. Feeling of Knowing : 언제 릴렉스하고 언제 집중해야 하는가 

문제의 성격이나 유형에 따라 필요한 창의력의 종류도 달라질 수 있다면, 우리가 적당한 시기에 옳바른 방식으로 생각하고 있다는 것을 어떻게 보장받을 수 있을까요 ?   우리는 언제는 낮잠을 자야 하고 언제는 느긋하게 산책을 즐겨야 할까요? 그리고 언제 계속해서 스케치 작업에 몰두하면서 이것 저것 가능성을 저울질 해 봐야할까요?

다행이도 인간의 두되는 우리가 어떤 문제를 해결할 때 어떤 종류의 창의성이 필요한지를 평가하는 놀라운 자연스러운 역량을 가지고 있습니다. 연구자들은 이러한 직관을 “ 같은 느낌 (Feelings of Knowing)” 이라고 합니다. Feelings of Knowing은 우리가 계속해서 어떤 문제에 대해 생각한다 하더라도 해답을 발견할 수 없을 것이라고 느낄 때 생기는 직관같은 것입니다.  명쾌한 솔루션이 없다 하더라도 어떤 문제가 대충 어떻게 발전되거나 해결될 같다는 느낌 

Feeling of Knowing이 없을 때 우리가 할 수 있는 가장 생산적인 것은 일을 잠시 잊어 버리는 것입니다. 그러나 Feeling of Knowing이 우리가 해답 근처에 왔다고 말할 때, 우리는 계속 집중해야 합니다 (We need to keep on struggling).

앞으로 무슨 일이 벌어질지를 계산하는 이러한 능력은 창의적인 과정에서 중요한 파트입니다. 우리가 어떤 문제에 대한 정답에 가까이 가지 못한다고 느낄 때 – 소위 벽에다 머리를 박고 싶을 때 –  야 말로 통찰력이 필요한 때입니다. 문제를 해결할 수 있을 것 같은 느낌 즉, “Feeling of Konwing”이 전혀 없을 때 우리가 할 수 있는 가장 생산적인 것은  일을 잠시 동안 잊어 버리는 것입니다. 그러나 우리가 정답 근처에 가까이 왔다는 느낌이 왔을 때 우리는 계속 노력해야 합니다.  당신이 이런 상황에서 좀 더 창의력을 발휘하고 싶다면, 정보의 양과 다양성을 증대시키는 것이야 말로 당신이 해야 하는 가장 중요한 것 중 하나입니다 (increase the volume and diversity of the information to which you are exposed).

5. Connecting Things

스티브 잡스는 “창의성은 그냥 사물을 연결시키는 것이다”라는 유명한 말을 남겼습니다 ( “creativity is just connecting things.”).  그는 전혀 그럴싸 하지 않은 개념들 조차도 보통은 기존에 이미 존재하고 있는 것들의 새로운 조합에 불과할 때가 많다 (Mr. Jobs was pointing out that even the most far-fetched concepts are usually just new combinations of stuff that already exists)고 지적합니다. Jobs의 리더쉽하에 애플은 MP3 플레이어나 태블릿 PC를 새로 만든 것이 아니라 이러한 프로덕트 카테고리에 새로운 디자인 피쳐를 추가하는 식으로 그것을 좀 더 개선했을 뿐입니다.

비단 Jobs 뿐만이 아닙니다. 자전거 제조업자라는 백그라운드를 가지고 있던 라이트 형제가 최초로 비행기를 만들었을 때 그것은 누가 보더라도 날개 달린 자전거였다. 요하네스 구텐버그는 포도주 프레스에 대한 그의 지식을 변형시켜 글자를 대량 제조해 낼 수 있는 인쇄기로 탈바꿈시켰습니다. Larry Page와 Sergey Brin은 학술논문에 적용되는 랭킹 시스템을 급속히 팽창하는 인터넷 전체에 적용하여 그 유명한 검색 알고리즘을 만들어 냈습니다.

우리가 어떻게 하면 이런 종류의 연결을 더 잘할 수 있을까요?

1) 서로 다른 분야에서 일하는 사람들과 자주 어울려야

최고의 발명가는 나중에 서로 연결될 많은 점들을 수집하고 다니면서 ( collecting lots of dots that they later link together) “다양한 경험”을 추구한다고 잡스는 주장했습니다. 창의적인 사람들은 협소한 전문성을 발전시키기 보다는 잡스처럼 서체학을 공부하거나 다른 분야의 친구들과 잘 어울려 다닙니다. 왜냐하면 해답이 어디에서 나올지 모르기 때문에 그들은 기꺼이 이리저리 그것을 찾아 헤매고 다니기 때문입니다 ( Because they don’t know where the answer will come from, they are willing to look for the answer everywhere).

Martin Ruef라는 사회학자가 스타트업에 진출한 스탠포드 졸업생 766명의 사회적, 비즈니스적 관계를 조사한 결과, 다양한 사람들과 친분을 맺고 있는 엔터프레뉴어(entrepreneurs with the most diverse friendships)가 그렇지 못한 사람들보다 3 배나 높은 혁신지수를 기록했습니다. 그들은 판에 박힌 생활에 안주해 있기 보다는 폭넓은 인간관계 (expansive social circle)를 수익성 좋은 새로운 컨셉으로 변화시켰습니다.

가장 혁신적인 회사들 대부분은 완전히 무관한 분야의 동료들과 상호교류하면서 이러한 종류의 다양한 네트워크를 개발하도록 직원들들을 격려합니다. Google은 Crazy Search라는 내부 컨퍼런스를 개최하는데, 이것은 상상할 수 있는 모든 분야에서 수백개의 포스터가 나부끼는 성인들의 과학 박람회같은 것입니다. 3 M은 몇년씩 주기적인 엔지니어들의 보직 변경으로 뜻밖의 성과를 올리기도 했습니다. 3M은 노트북의 스크린을 밝히는데 너무 많은 에너지를 소모해서 밧데리 수명이 짧아지는 문제를 발견하고, 투명 접착제(see-through adhesives)에 관한 그들의 지식을 빛을 외부로 발산시키는데 초점을 맞추는 편광 필름 제작에 적용 (3M researchers applied their knowledge of see-through adhesives to create an optical film that focuses light outward), 에너지 효율이 40%나 개선된 스크린을 만들어 냈습니다.

2) 초보자들에 의한 Mental Restructuring

이러한 문제들은 누군가에 의해 완전히 새로운 종류의 질문이 제기된 후에야 해결책이 나오기 때문에 이러한 솔루션은 “mental restructuring”이라고 알려져 있습니다. 여기에서 재미있는 점은 소위 전문가들이 이러한 리스트럭쳐링을 방해해서 돌파구를 찾기 어렵게 만든다는 점입니다. 바로 이러한 이유 때문에 다른 분야에서 획득한 새로운 아이디어를 당신이 일하고 있는 분야로 가져오는 것 뿐만 아니라 다른 분야의 문제들을 실제로 해결하려고 시도하는 것이 중요한 의미를 갖게 됩니다. 여기에서 아웃사이더의 지위를 가지고 당신이 던진 순진한 질문들이 문제를 해결하는데 엄청난 실마리를 제공하게 됩니다.

이러한 원칙은 InnoCentive에서 일상적으로 동작하는데, 이것은 어려운 과학적 질문에 대한 해답을 크라우드 소싱하는 웹사이트입니다. 이 사이트의 구조는 심플합니다. 회사들은 각 챌린지 별로 현금보상안을 첨부해서 그들이 직면해 있는 가장 어려운 R&D 문제를 포스트합니다. 이 사이트는 농학에서 수학에 이르기 까지 8개의 서로 다른 과학분야에서 수백개의 조직들이 제기한 문제들을 다루고 있습니다.  챌린지들은  “저지방 초콜릿 맛이 나는 컴파운드 코팅”을 찾고 있는 다국적 식품기업에서 부터 태양열로 파워를 공급하는 컴퓨터를 디자인하는 전자제품 회사 등 믿을 수 없을 정도로 다양합니다.

그러나  InnoCentive에서 가장 인상적인 것은 효율성입니다. 2007년 부터 하바드 비즈니스 스쿨의 교수인 Karim Lakhani는 이 사이트에 포스트된 수백가지의 챌린지들을 분석하기 시작했습니다. Lakhani가 데이타를 분석한 결과에 따르면 InnoCentive에 포스트된 어려운 문제들 중 거의 30%가 6개월 이내에 해결되었습니다. 어떤 경우 문제가 온라인에 공개되자 마자 몇일만에 해결된 적도 있습니다.

비밀은 외부인의 생각에 달려있습니다 (The secret is outsider thinking). 사람들은 자신의 전문분야의 가장자리에서 가장 효과적으로 InnoCentive에 올라 온 문제들을 해결하곤 했습니다. 화학자들은 화학 문제들을 풀지 못했지만 분자생물학의 문제는 해결했습니다. 물론 거꾸로인 경우도 있습니다. 이런 사람들은 직면한 챌린지가 무엇인지 이해할 정도로 충분한 식견을 가지고 있긴 했지만, 그들을 물러서게 할 정도로 식견이 있지는 않았기 때문에 그 분야의 동료 전문가들을 충분히 움추려 들게 할만한 장애물에 과감하게 도전할 수 있었습니다.

초보자로서 문제를 공략하는 역량, 그리고 모든 편견과 실패에 대한 두려움으로부터 자유야 말로 창의력의 핵심입니다 (It’s this ability to attack problems as a beginner, to let go of all preconceptions and fear of failure, that’s the key to creativity).

작곡가 Bruce Adolphe는 1970년대 뉴욕의 줄리어드 음대에서 처음으로 첼로용 소품을 작곡해서 교수에게 보여 주었는데, 그는 이 소품의 화음을 거의 연주할 수 없을 것이라는 말을 듣습니다. Adolphe는 음악을 수정하기 전에 그 당시 15세였던 Yo Yo Ma에게 보여주고 연주를 부탁했습니다. Yo Yo Ma는 자신의 기숙사에서 이것을 거의 완벽하게 연주했는데, 그는 거의 불가능해 보였던 부분을 연주하는 방법을 어떤 식으로든 찾아냈습니다. Adolphe는 도저히 연주가 불가능한 파트를 Yo Yo Ma가 연주하는 순간 연주를 중단시켰는데, 바로 이때 Yo Yo Ma의 왼손은 도저히 유지하기 불가능한 포지션으로 지판 위에 뒤엉켜있었습니다. Yo Yo Ma 조차도 “당신이 옳다. 이것을 연주하기는 실제로 불가능하다.” 고 말했습니다. 그럼에도 불구하고 요요마는 이것을 어떻게 해서든지 훌륭하게 연주해 냈습니다.

오늘날 첼로를 연주할 때도 Yo Yo Ma는 초심으로 돌아가기 위해 노력합니다 (he still strives for that state of the beginner). 요요마는 “우리는 방금 전에 첼로를 배우기 시작한 어린이의 자유분방함을 계속해서 스스로 상기시켜야만 합니다 (One needs to constantly remind oneself to play with the abandon of the child who is just learning the cello).” 라고 말합니다. “왜냐하면 어린이가 연주하는 이유는 바로 그것이 즐겁기 때문입니다 (Because why is that kid playing? He is playing for pleasure).”

창의력은 불꽃과 같습니다. 두개의 바위를 마찰시키더라도 아무것도 얻지 못한다면 이것은 매우 고통스러울 수 있습니다. 그러나 마침내 불꽃이 튀고 새로운 아이디어가 세상을 휩쓸게 되면 매우 강력한 만족감을 얻게 될 것입니다.

인류 역사상 최초로 우리는 보다 많은 스파크가 어떻게 일어나고, 그 스파크가 어떻게 더 많은 불길을 지피고 다니는지를 목격할 수 있게 되었습니다. 그럼에도 불구하고 우리는 정직해야 합니다. 창조의 과정은 우리가 그것에 대해 아무리 많이 배웠다 하더라도 결코 쉽지 않습니다. 우리의 발명품은 새로운 커넥션을 만들어 내는 뇌세포의 세렌디피티와 불확실성의 그림자에 항상 노출되어 있습니다 (Our inventions will always be shadowed by uncertainty, by the serendipity of brain cells making a new connection).

창의성에 관한 모든 이야기는 다 다릅니다. 그러나 창의성에 관한 모든 이야기는 동시에 다 똑같습니다. 아무것도 없었다가 지금은 무언가가 존재합니다. 그것은 거의 마술과 같습니다. Every creative story is different. And yet every creative story is the same: There was nothing, now there is something. It’s almost like magic.

Written by abulaphia

March 21, 2012 at 1:32 pm

영국정부의 사이트 개편 사례로 본 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

%d bloggers like this: