와츠앱 스티커 작업기
몇 달 전 와츠앱의 스티커 디자인 작업을 진행하고 런칭하였다. 많은 사용자들이 오랫동안 기다려온 기능이라, 어떻게 디자인이 만들어졌는지를 짧게 공유하면 좋겠다고 생각하여 글을 남겨 본다.
A little background
지난 몇 년간 와츠앱에서 스티커는 금기어이자, 농담의 요소이자, 절대 만나지 못할 것 같은 유니콘 같은 존재였다. 대부분의 채팅앱들이 화려한 기능을 자랑할 때에도 와츠앱은 2단계 인증, 향상된 카메라, 라이브 로케이션 등과 같이 기본적인 사용성을 향상하는 기능을 우선적으로 디자인해왔기 때문이다. 하지만 스마트폰의 스크린은 점점 커지고 있었고, 스마트폰의 카메라는 훌륭한 수준에 도달하였다. 단문 텍스트보다 사진 또는 비디오를 활용한 의사소통이 급격하게 늘어났다. 이에 그치지 않고, 사용자들은 이모지 보다 더욱 다양하게 감정을 표현할 무언가를 원했다.
평소같이 태양이 뜨거운 캘리포니아의 오후였다. 프로젝트 매니저인 Randall은 나에게 조용히 다가와, 스티커 프로젝트를 시작해 볼까? 하고 나에게 말을 걸어왔다. 몇 주 전 왜 우리에게 스티커가 필요한가에 대한 짧은 글을 그에게 공유한 후였다. 물론 그 역시 오랫동안 우리 제품에 스티커가 필요하다고 생각해왔었다. 언제냐만 문제였을뿐...그렇게 프로젝트는 시작하였다.
Entry point
어떻게 사람들이 새로운 기능을 찾고, 사용하게 할 것인가. 시작부터 고민스러운 디자인 과정이 시작되었다. 기존의 심플한 사용성을 해쳐서는 안 되고, 사용자가 새로운 기능을 발견하는 것 역시 중요했다. 두 가지를 동시에 잡기 위해 수많은 디자인 시안들이 만들어지고 버려졌다. 스티커는 보통 화려한 그래픽이 동반되기에 기본 설계가 단순하지 않으면, 화면이 쉽게 혼란스러워졌다. 몇 주가 흘렀지만, 원하는 답은 나오지 않았다. 한동안 디자인보다 나의 프로토 타이핑 스킬만 늘어가는 듯했다. 커피로도 더 이상 집중력이 살아나지 않자, 다시 원점으로 돌아가 스스로에게 물어보기로 하였다.
왜 스티커가 필요한가? 이모지와 스티커는 어떻게 다른가?
답은 의외로 쉽게 나왔다. 이들은 특별히 구분되는 존재들이 아니라, 대화를 부드럽게 이어주는 재미있고 즉각적인 "반응"이라는 것. 그들을 구분 짓지 않고, 하나의 탭으로 묵자, 문제점들 해결되기 시작하였다. 사용자들은 기존처럼 대화의 "반응"을 위해 이모지 키보드를 불러들이면 된다. 그렇게 되면, 이모지와 더불어 GIF와 스티커를 선택할 수 있는 메뉴가 주어진다. GIF와 스티커는 철저히 선택적인 존재이기에, 이모지만 쓰는 사람이라면, 새로운 기능을 배울 필요 없이 예전처럼 이모지만을 사용할 수 있다. 이는 복잡하고 새로운 기능을 배우고 싶지 않아 하는 많은 사용자들에 대한 배려인 셈이다. 이모지보다 적극적으로 대화에 "반응" 하고 싶은 사람이라면 손쉽게 탭을 이동하여 GIF 나 스티커를 보낼 수 있다.
이모지, GIF, 스티커가 같은 레벨에 위치해 있다. 필수인 이모지를 제외한 GIF와 스티커는 의도적으로 2순위로 디자인되었다. 이 디자인이 결정되자마자 우리는 이미 지원하기로 결정이 된 GIF를 포함한 하단 탭을 가진 디자인을 먼저 배타 버전에 내보내었다. 배테랑 엔지니어의 제안을 받아, 사용자의 스크롤에 따라 탭이 보이거나 가려지거나 하는 인터렉션을 추가하기도 하였다. 상대적으로 스크린이 작은 기기가 많은 안드로이드에 대한 최적화였다. 반응은 좋았다. 사용자들은 큰 거부감 없이 새로운 기능을 활발하게 사용하기 시작하였다. 이제 본격적으로 UI를 디자인 하기 시작하였다.
상대적으로 스크린이 작은 기기가 많은 안드로이드에 대한 최적화를 진행하였다."반응"이라는 같은 카테고리 안에, 이모지 / GIF / 스티커 가 공존하다 보니 그다음 과정은 상대적으로 수월했다. 이모지처럼 좌우로는 스티커 간 이동을 하고, 상하로는 더 많은 내용을 보는 일관된 인터렉션이 가능해졌다. 점점 더 인기를 얻어가는 GIF 역시 트랜딩, 웃음, 사랑, 슬픔 같은 자주 사용하는 카테고리를 상단에 배치해놓아 전반적인 사용성을 높였다.
Sticker store
그다음은 사용자가 스티커를 얻는 방법에 대한 설계 해야 했다. 다양한 스티커를 사용하게 하게 하는 매우 중요한 기능이다. 우리는 크게 3가지 방향성으로 이를 접근하였다.
첫 번째, 친구가 보낸 스티커를 다운로드하는 것. 이 부분은 꽤나 직관적이다. 누군가 보낸 스티커를 탭 하면 더 많은 스티커를 볼 수 있고 또 다운로드할 수 있는 장치를 설계해 놓았기 때문이다. 한번 스티커가 활성화된 그룹이라면 스티커 스토어를 자연스럽게 접근하게 될 것이고, 이는 다른 스티커의 "발견성"을 높여주게 되는 효과를 가져다준다.
두 번째는 키보드에 내장된 스티커 스토어를 방문하는 것이다. 우측 상단 탭에 있는 + 아이콘이 그것에 대한 시작점인데, 여러 번 디자인 테스트를 해야만 했다. 스티커를 지우거나, 업데이트하거나, 재배열하는 기능을 셋팅 메뉴에 넣을 것인가, 혹은 스토어에 합칠 것인가에 대한 의견이 갈렸기 때문이다. 여러 테스트 끝에 스토어는 두 가지를 합친 형태로 디자인되었고, 많은 컨탠츠 탓에 무거운 메뉴로 비치지 않기 위해 간단한 열고 닫기 동작으로 창을 닫을 수 있게 설계하였다.
많은 컨탠츠 탓에 무거운 메뉴로 비치지 않기 위해 스와잎 동작으로 창을 닫을 수 있게 설계하였다.세 번째는 오픈 플랫폼이다.
와츠앱의 사용자는 전 세계에 퍼져있다. 캘리포니아에 있는 책상에 앉아 디자인하면서 지구 반대편의 기호를 정확히 알기 어렵기 때문에 우리는 과감하게 스티커 플랫폼을 외부에 공개하기로 하였다. 공개되어 있는 샘플 앱을 이용하면, 전 세계에 있는 아티스트, 개발자들이 상대적으로 손쉽게 와츠앱에 스티커를 배포할 수 있다. 자세한 설명은 여기 링크에 있다. 각 나라의 아티스트, 개발자들이 많이 참여하게 되기를 희망한다.
More things
스티커와 함께 중요한 대화의 매개체가 되는 GIF의 검색 화면도 완전히 새롭게 디자인되었다. 특히 GIF의 경우, 종종 누가 빨리 대화 주제와 어울리는 "반응"을 보내는가가 중요한 재미 요소가 되기도 한다. 이에 검색 결과 창을 의도적으로 크게 설계하여 사용자가 손쉽게 원하는 결과를 얻을 수 있게끔 하였다.
의도적으로 크게 디자인된 GIF 검색 결과 화면. And Cuppy
프로젝트를 진행하면서 테스트용 스티커가 필요했다. 와츠앱만의 개성 있고 유니버설 한 스티커가 있으면 좋겠다고 생각하였다. 그래서 사이드 프로젝트로 주말마다 틈틈이 그린 것이 바로 Cuppy 스티커이다. 처음에는 귀여운 애완동물을 스케치해 보았으나, 모든 나라 사람들이 그들을 친근해할지에 대한 확신이 없었다. 결국 호불호가 갈릴 수 있는 동물이나 문화에 따라 이해도가 떨어질 수 있는 주제는 제외하기로 하였다.
토요일 오전, 아이스커피를 마시며 컴퓨터 앞에 앉아 전 세계 사람들이 공통적으로 좋아할 만한 무엇이 있을까 고민하고 있었다. 얼마간 시간이 흐른 후 (역시나!) 가까운 곳에서 정답을 찾을 수 있었다. 내가 지금 마시고 있는 커피! 혹은 차?, 이들은 누구나 마시는 기호 식품이 아닌가. 곧바로 인터넷에 커피나 차 관련 내용들을 찾아보니, 그 둘을 선호도를 합치면 거의 세계 인구와 지도가 그려지는 것을 확인할 수 있었다. 그렇게 Cuppy가 탄생하였다.
사이드 프로젝트로 시작된 스티커 Cuppy는 와츠앱의 기본 스티커가 되어, 많은 사용자들의 감정을 대신 표현해 주고 있다. To wrap up…
Simple. Secure.and Reliable messaging는 와츠앱의 주요 제품 목표이다. 우리는 늘 이 문장을 기억하면서 제품을 디자인한다. 스티커는 이 중요한 목표들을 해치지 않는 한에서 사람들의 의사소통을 더욱 부드럽고, 의미 있고, 그리고 즐거움을 주게 끔 디자인되었다.
많은 사람들이 행복하게 이 기능을 사용하면 좋겠다. 그리고 당신이 아티스트라면, 전 세계 많은 사람들이 당신의 작품을 을 보내며 웃고, 울고, 공감하게끔 스티커를 제작해보는 것을 추천한다. 아. 그리고 물론 스티커 역시 다른 모든 와츠앱의 대화 내용처럼 종단 간 암호화가 되어있다.
