Facebook의 Live 디자인 이야기
페이스북이 실시간 비디오 스트리밍 기능인 ‘Live’를 도입했다. 최근 필자의 뉴스피드에서도 DJ가 진행하는 라이브 방송을 즐길 수 있었는데 상당히 특별한 경험이었다. DJ Frontliner는 아침에 자신의 스튜디오에서 샌드위치를 먹으며 즉석으로 한 시간정도 음악을 디제잉했다. 음악이 바뀔때 마다 즉각적으로 반응하는 사람들의 댓글 반응도, 그 반응을 보며 디제잉을 이어가는 모습도 흥미로웠다.
DJ Frontliner의 라이브 방송 모습인상깊게 생각하던 중 얼마 전 미디엄에 Live를 직접 디자인한 페이스북의 Frankie Gaw가 디자인 작업기 Designing Live for Facebook Mentions를 공개했다.
이 작업기에는 Live를 출시하기까지 겪었던 고민들, 그리고 서비스를 만들고 론칭하는 UX디자인 과정에 영감을 줄만한 내용들이 있어 저자의 허락을 받고 요약 번역해보았다.
Live 기획 이유
디자인팀에서는 배우, 가수, 정치인들과 같은 공인들이 사용하는 경험 개선에 대해 관심을 두고 있었다. 공인들은 페이지를 사용하여 팬들과 수 많은 인터랙션을 하지만 쉽게 관리하기는 어려웠고 이를 개선하기 위해 2014년 공인들을 위한 서비스인 Mentions를 출시 하였다. 그리고 지속적인 피드백을 받으며 나아갈 포인트를 찾고 있었다.
공인들은 좀 더 쉽고 간단한 팬들과의 ‘직접적'인 소통을 원했다. Mentions 앱이 출시된 이후 진솔한 인터랙션이 증가했는데 특히 솔직한 모습을 생생하게 담은 영상이 가장 인기가 많았다. 자연스럽게 다음 스텝으로 좀 더 밀착된 경험을 주기 위해 실시간 생방송 서비스인 ‘Live’를 기획하게 되었다.
디자인 과정
10억명의 스케일, 플랫폼을 고려한 디자인
10억명을 대상으로 하는 스케일은 디자인 뿐만 아니라 기술, 인프라를 모두 고려해야 한다. 복잡한 케이스가 많고 연관된 모든 걸 생각해야한다는 점에서 상당히 도전적이다. 첫 번째로 마주한 문제는 ‘비디오 비율' 이었다. 단순한 디자인 문제 같지만 스케일과 플랫폼을 고려했을때 풀기 어려운 문제였다. 결국 수많은 옵션 중 총 3개의 방안으로 줄여나갔는데 일반적인 영상 비율을 갖춘 3:4 비율, 그리고 전체 화면, 마지막은 정방형이었다.
Live를 디자인하면서 고려한 비디오 비율 옵션들전체 화면은 처음 디자인을 할때만 해도 상당히 멋지게 보였기 때문에 최적의 방안으로 꼽혔다. 하지만 이 디자인은 전체의 플랫폼과 스케일을 고려했을때 전혀 적합하지 않았다. 특히 웹상에서 일관적으로 표현하기가 어려웠다. 3:4비율은 많은 면적을 낭비한다는 점, 그리고 영상보다 댓글이 더 눈에 들어온다는 문제가 있었다. 결국 스케일과 플랫폼을 모두 고려하여 결정한 것이 정방형이었다.
이 과정에서 하나의 디자인 결정이 전체의 플랫폼에 효과적으로 확대 적용될 수 있어야 한다는 것을 깨달았다. 모바일은 전체 중 하나의 퍼즐에 불과하며 전체 시스템과 플랫폼을 함께 고려하는 프레임을 가져야한다.
페이스북의 전체 인터페이스 적용된 Live 피드 스토리Viewer & Broadcaster Experience
Live 서비스는 크게 두 가지로 이루어진다. 방송을 진행하는 중계자의 경험, 그리고 이를 시청하는 시청자의 경험이다. 이때 중계자와 시청자 모두가 서로 ‘공유하고 있다’는 느낌을 가지는 것이 가장 중요했다.
최종 디자인 : 중계자(왼쪽) / 시청자(오른쪽) '시청자가 x의 행위를 할때 중계자가 봐야하는 것은 무엇인가?’ ‘모바일 시청자가 하는 x인터랙션을 데스크 탑의 사용자는 마우스를 통해서 어떻게 동일한 x인터랙션을 할 수 있는가?’하는 디자인 이슈를 마주하면서 가장 중요하게 세운 '공유하고 있다'는 원칙은 문제를 해결하는 구심점 역할을 하였다.
Viewer Experience
시청자 경험에서 가장 중요한 것은 실시간으로 달리는 댓글이었다. 서비스가 살아있고 숨쉬는 것 처럼 느껴지는 가장 중요한 부분이었고, 초기에 많은 디자인 가능성을 검토하였다.
실시간 댓글 초기 디자인 시안들이 과정에서 빠르게 프로토타이핑으로 넘어갔다. 실시간 댓글은 다양한 인터랙션이 일어나는, 복합적인 상호작용을 이루는 스트림 형태인 관계로 항상 유기적인 상태이기 때문에 단순히 레이아웃이나 정적인 정보의 배치로는 풀 수 없었다. 이때 적극적으로 사용한 것이 바로 오리가미였다.
실시간 댓글의 오리가미 프로토타입수많은 시청자들이 인터랙션하는 상황을 고려해야하지만 이를 실제로 재현하기는 어려웠다. 오리가미는 이런 과정에서 프로토타이핑 툴로 가장 많이 사용하였다. 실제 시나리오를 테스트 하고 피드백을 받을 때 유용하게 사용했고 옳지 않다고 느껴질 때는 전체를 뒤집을 필요없이 부분적인 수정만으로 쉽게 고칠 수 있었다. 오리가미는 옳다고 생각되는 디자인이 나올때 까지 끊임없이 디자인을 가다듬고 실험하는 과정에서 가장 큰 역할을 하였다.
최종 실시간 댓글 디자인 Broadcaster Experience
라이브 방송을 진행하는 중계자의 경험을 디자인할 때 가장 중요하게 생각한 것은 방송을 하는 사람이 처음 시작부터 끝날 때 까지 부담없이 편안하게 느껴야 한다는 점과, 실시간으로 일어나고 있는 상황을 명확하게 인식할 수 있어야 한다는 점이었다. 시작할 때는 단순하고 무겁지 않아야 했고, 사용하면서는 충분한 컨텍스트 정보를 제공하고, 그리고 끝날 때도 어색하지 않고 자연스러워야 했다.
Live방송을 진행하는 중계자의 인터페이스 이 과정에서는 구조적인 부분과 디테일을 가다듬는 과정을 함께 거쳤다. 구조적인 측면에서 라이브 방송을 끝낼 때 어느 정도의 텀을 제공해야하는가와 같은 질문이 있었다면 효과음, 애니메이션, 카운트다운은 어떻게 해야하는가와 같은 디테일을 가다듬는 질문들이 있었다.
가장 크게 배운 것
현실을 빨리 파악할 것
디자이너는 가장 이상적인 상태, 가장 아름다운 형태를 가진 시나리오로 상상하기 쉽다. 하지만 이 과정에서 배운 가장 큰 교훈은 완벽한 디자인은 실제 현실에서 산산조각이 난다는 점이다. 현실의 컨텍스트를 빨리 파악해야한다. 모바일 기기가 항상 가장 좋은 연결상태에 있는 것도 아니고, 영상은 좋은 배경에서 적절한 조명아래 촬영되는 것도 아니며, 사운드가 좋지 않을 수도, 댓글이 이상적으로 달리지 않을 수도 있다는 점을 알아야 한다. 그래서 디자인 프로세스는 항상 피드백을 바탕으로한 반복적인 과정의 연속이어야 하며 실제 컨텍스트에서의 끊임없는 테스트를 통해 가정들을 검증해야 한다. 이는 지속가능하고 실제 사용자가 쉽게 공감할 수 있는 프로덕트를 만드는 가장 큰 핵심이다.
제약조건들을 적극적으로 받아들일 것
라이브를 디자인하면서 방해가 되는 제약조건들이 정말 많았다. 디자인, 기술, 일정 등의 제약때문에 항상 긴장상태에 있었다. 이런 제약조건들은 때로 두렵기도 하고 절대 풀수 없는 문제로 여겨졌지만 중요한 것은 긍정적인 태도와 새로운 시각으로 이 제약조건들을 바라봐야한다는 것이었다. 어려움은 항상 새로운 도전을 만들어내고 아직 자극하지 않은 창의성을 이끌어 낸다.
불확실하지만 핵심에 먼저 뛰어들 것
디자인 과정에서 모두 아주 명백한 같은 비전과 목표를 가지고 나가지 않는다. 우리는 이 과정에서 지속적으로 핵심적인 디자인 결정에 관해 질문했다. 예를 들어, '어떻게 피드백을 줄 것인가?' '댓글은 실시간으로 보여줘야 하는가 랭킹으로 보여야 하는가?' '라이브에 진입하는 포인트는 무엇인가?' '만약 비디오가 끝나면 무슨일이 일어나야 할까?' 같은 질문들을 지속적으로 하였다. 기존의 가정에 의존하며 머무르는 것은 쉽지만 핵심을 건드는 질문을 항상 열어놓고 해야한다. 무엇이 답이 될지 모르는 불확실성을 받아들여야 한다. 그리고 새로운 프로세스를 가지고 실험하는 리스크를 껴안아야 한다. 명확한 솔루션이 뭐가 될지 모른다는 점은 처음에 두려울 수 있지만 불확실성은 지속적인 디자인 실험과 도전으로 이끈다. 이는 문제를 둘러싼 새로운 이해, 그리고 성장으로 이끄는 가장 중요한 촉진제이다.
