abulaphiaa

Keep Yourself Social

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

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)”을 볼 수 있게 된다.

Felton's favorite features: A map that shows pictures wherever they were taken

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가 훼손될 것이라고 우려하였기 때문입니다.
About these ads

Written by abulaphia

December 23, 2011 at 11:29 am

Posted in Facebook, UI UX Design

3 Responses

Subscribe to comments with RSS.

  1. 좋은 글 감사합니다. abulaphiaa님의 인사이트는 상당히 넓고 깊은 것 같습니다. 실례지만 어떠한 일을 하시는지 여쭤봐도 될까요?

    chanpio

    December 26, 2011 at 1:34 pm

  2. 와우… 근래 보기 드물게 훌륭한 번역 소개자료였습니다… 페이스북의 타임라인 변화의 저변에 깔리 배경과 철학, 문제의식을 이해하는 데 아주 큰 도움이 되었습니다… 고맙습니다….

    letsgo999

    December 29, 2011 at 1:26 am

  3. 디자이너 페이스북 구글검색 하다가 들렸습니다…좋은 내용이네요…

    金金

    March 14, 2014 at 12:00 am


Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 692 other followers

%d bloggers like this: