웹툰도 같이 봐요: 만화경 구름톡

Dec.10.2021 구지민, 안윤경
clipboard facebook twitter

APP

안녕하세요! 우아한형제들에서 만화경 앱 서비스를 만들고 있는 구지민, 안윤경입니다.

패트와매트

지난 11월 17일에 iOS 기종의 만화경 앱에서 구름톡이라는 새로운 기능을 추가했는데요, 만들게 된 계기와 과정을 공유하고 싶어서 이렇게 기술 블로그를 작성하게 되었습니다. (사실 열심히 만들었으니까 알아달라고 글 쓰는 거 .. 맞아요..)

일단 구름톡이 뭐냐면요

불선씂

(배경은 <불편해요 선배님>과 <슴슴슴슴>작품)

구름톡은 사용자가 보고 있는 에피소드에 남기는 댓글이다. 기존 댓글이 에피소드 한 회차 전체에 대해서 댓글 목록이라는 별도 화면에 남기는 감상이었다면, 구름톡은 에피소드 내 특정 장면에 대해서 원고 위에 바로 남길 수 있는 댓글이다. 하나의 에피소드는 약 40-80개의 (원고)컷으로 이루어져 있는데, 각 컷의 y축 좌표를 기준으로 구름톡 등록 위치를 정하고 노출하기 때문에 컷 댓글이라고 할 수도 있다. 구름톡 입력 화면에서 핸들을 이용하여 작성한 내용을 위아래로 움직여 사용자가 원하는 위치에 등록할 수 있게 했다. 그리고 사용자가 원고를 스크롤함과 (거의)동시에 댓글을 보여주기 위해 다음에 나타날 컷의 댓글을 미리 서버에서 호출해서 가지고 있다가 컷 댓글이 달린 원고가 화면에 보일 때 노출했다. 이 때, 각 컷에 달린 댓글을 화면 전반에 걸쳐 고르게 노출할 수 있게 컷을 10등분 해서 컷의 1/10만 화면에 보여도 댓글을 노출할 수 있게 했다.

이해못함 짤

(위 글을 읽은 여러분과 맨 처음에 개발자 분이 구현 방법 설명해 주셨을 때 내 모습)

기술 블로그인 만큼 기술적으로 기능 소개를 해야 할 것 같아서 위와 같이 써보았는데 (아무도 주지 않은 부담감) 서비스나 사용자 향으로 소개하는 구름톡은 꽤 간단합니다.

구름톡 공지사항

(실제로 구름톡 기능 오픈 날 서비스 공지사항에 쓴 소개 문장)

만들게 된 계기

모바일로 만화를 ‘혼자’ 보는 경험을 ‘같이’ 보는 경험으로 만들어 보고 싶었습니다. 그러니까, 독자가 만화경에서 만화를 볼 때는 다른 독자와 같이 보고 있다는 느낌을 주고 싶었습니다. 내가 좋아하는 콘텐츠를 좋아하는 다른 사람과 같이 보면 더 재밌으니까요.

최근 전국적으로 춤바람을 일으킨 프로그램(이하 스우파)을 시청자들은 어떻게 봤을까요. 유튜버들은 라이브로 구독자와 같이 방송을 봤고, 혼자 본 사람들도 매 순간 TV화면을 캡처해서 트위터나 인스타 스토리에 올리기 바빴습니다. 몇몇 찐 팬들은 친구와 같이 보기 위해서 스우파 방송일에 친구 집에 가거나 심지어는 펜션을 빌려서 본방사수를 했다고 합니다. 멋진 언니들의 댄스 배틀을 보면서 같이 춤을 따라 추기도 하고, 출연자 간의 싸움, 오해, 우정을 보면서 덩달아 감정을 나누는 맛이 있기 때문이 아니었을까요? 방송을 보면서 느끼는 감정을 바로 해소하고 같이 보는 사람들과 공유하고 공감하고 싶기 때문에. 혼자 볼 때 보다 훨씬 재미 있기 때문에!!

유튜브에서 쉽게 찾아볼 수 있는 "댓글 모음 영상"의 경우에도 원 영상에 달린 재밌는 댓글을 영상과 동시에 볼 수 있게 편집해서 다른 사람과 같이 콘텐츠를 즐기는 느낌이 더 강해졌습니다. 왓챠에서도 영화를 보면서 친구들과 실시간 채팅을 할 수 있는 왓챠파티라는 서비스를 런칭했었죠. 이렇듯 영상 콘텐츠를 더 재밌게 소비하는 방법으로 ‘같이 보는 경험/느낌’이 중요하게 작용하고 있습니다. 그러니 꼭 영상이 아니라도, 일반적으로 혼자 보는 이미지가 강한 웹툰도 같이 보는 경험을 제공함으로써 콘텐츠를 재밌게 감상하는 또 하나의 방법을 제시할 수 있지 않을까요?

기능 구체화 하기

먼저 만화를 볼 때 다른 사용자와 같이 보고 있는 느낌을 받으려면 사용자가 보는 에피소드 화면이 어떻게 보여야 할지 생각했습니다.

일단 에피소드를 다 본 뒤에 다른 사용자의 반응을 한 데 모아서 보는 기존 댓글과 달리 에피소드를 보는 동시에 다른 사용자의 댓글을 볼 수 있어야 한다고 생각했어요. 내가 만약 다른 사용자의 반응을 보고 공감한다면 공감을 표시하고 싶을 것 같았고, 직접 댓글을 입력한다면 입력 방법이 아주 간단해야 한다고 생각했어요. 내가 주인공의 머리 색깔이 마음에 든다는 댓글을 단다고 가정했을 때, 정확히 주인공의 머리 근처에 댓글을 입력하고 싶고, 다른 사용자도 내 댓글이 내가 의도한 위치에서 보이는 것이 좋을 거라고 생각했어요. 물론, 에피소드 감상을 방해하지 않는 선에서 댓글을 보여주는 것도 중요하겠지요.

이렇게 이상적인 사용자 경험을 상상하면서 기능을 구체화 해나갔고, 기능 구현을 하면서 놓치지 말아야 할 가장 중요한 우선순위 두 가지를 잡았습니다.

  • 사용자가 보고 있는 에피소드 장면에 다른 사용자의 댓글이 있다면, 그 장면이 화면에 나타나는 동시에 댓글도 보여야 한다.
  • 사용자는 에피소드 장면 중에서도 자신이 원하는 위치에 댓글을 남길 수 있다.

이제 기능 스펙이 나왔으니까 화면을 만들어 봐야겠죠?

시안모음

위에서 구름톡 서비스가 어떤 모습이어야 하는지 텍스트로 나열한 것을 윤경님이 정말 다양한 시안으로 잡아주셨습니다. 모두 사용자가 에피소드 감상을 하면서 다른 사용자의 반응을 자연스럽게 같이 볼 수 있는 방향성을 가지고 고민을 해주셨습니다.

A안B안

(좌) A안-흘러가는 형식 (우) B안-라이브채팅 형식
(배경은 보는 내내 ‘좋다, 좋아’를 말하게 되는 <좋아, 좋아> 작품)

A안처럼 흘러가는 형식은 해외 동영상 서비스에서 이미 많이 사용하던 터라 어느 정도 사용성이 보장된 느낌이었는데요. 그래서 기존에 없던 방식인 B안(라이브채팅 형식)에 조금 더 집중해 봤습니다. B안 처럼 실시간성 특징을 가진 UI는 스크롤 기능과 함께 사용했을 때 매끄러운 사용자 경험을 줄 수 있고, 작품 영역과 댓글 영역이 분리되어 있어 작품을 방해하지 않을 것이라고 생각했습니다.

물론 B안의 경우, 기능 구현 시 우선순위로 잡았던 사용자는 에피소드 장면 중에서도 자신이 원하는 위치에 댓글을 남길 수 있다.는 목표를 달성하기에는 사용자 반응이 좌측 하단에 몰려 있는 시안이지만, 원고 위에 댓글이 흩뿌려져서 계속 흐르는 A안의 형태가 작품의 주인인 작가님들에게 어떻게 받아들여질지 확실하지 않았습니다. A안의 경우 작품 감상에 방해가 되거나 도리어 해당 기능을 꺼두고 영영 사용하지 않을 것 같다는 의견도 있어서 어느 정도 확신을 가지고 B안으로 개발을 진행하였습니다.

인터스텔라

……

B안 구현에 약 2주를 쏟고 구성원 대상으로 사용성 테스트를 진행했습니다. 그리고 사용성 테스트를 해보길 정말 잘했다고 생각했습니다. 왜냐하면…

(내가 웃는게 웃는게 아니야)

좋은 시도였다.. A안으로 가즈아!

사용성 테스트 결과, B안에서 생각지 못한 페인포인트를 발견하게 되었습니다. 가장 큰 문제는 사용자가 스크롤 함에 따라 컷에 달린 댓글을 채팅창에 순차적으로 노출하다 보니 댓글이 많을수록 정확히 어떤 장면에 대한 댓글인지 파악하기 힘들다는 점이었습니다. 에피소드를 많이 왔다갔다 하면서 보는 사용자의 경우 하단 채팅창(UI)에 쌓이는 댓글 순서가 장면과 맞지 않아 혼란을 주었습니다. 좌측 하단에 반응을 모아서 보여줌으로써 에피소드 감상을 방해하지 않는 B안의 장점이 생각보다 “사용자는 에피소드 장면 중에서도 자신이 원하는 위치에 댓글을 남길 수 있다.”라는 최초 목표와 많이.. 충돌한다는 것을 깨달았습니다. (지금 와서 B안을 다시 살펴보니 전반적인 사용성을 고려하지 못하고 심미적인 관점으로만 접근했던 것 같다는 반성도.. 했습니다.)

비싼 레슨런을 한 뒤, 사용자 반응을 장면의 맥락에 맞는 위치와 타이밍에 노출할 수 있는 A안으로 다시 디벨롭해보자!고 결정했습니다. 그리고 하늘에 흘러가는 구름처럼 사용자 반응이 에피소드 원고 위를 흐르는 방식인 A안의 이름을 ‘구름톡’으로 정했습니다.

B안과 달리 A안은 해외 동영상 서비스의 사례를 참고할 수 있어서 기획, 개발, 디자인이 동시에 프로젝트를 진행할 수 있었습니다. 벤치마킹 할 서비스를 공부해서 각자 제안할 수 있는 부분이나, 먼저 구현해서 보여줄 수 있는 부분을 적극적으로 공유했습니다. 이렇게 수평적으로 세 직무가 논의하면서 A안 프로젝트를 이끌어 나가니 워터폴 방식으로 진행했던 B안 프로젝트보다 좋은 점들이 있었습니다. 특히 좋았던 점 몇 가지를 소개해 드리겠습니다.

도표

수십번 했을 베타 배포 십수번으로 확 줄이기

아무래도 A안의 경우 사용자 댓글이 원고 위를 흘러 지나가는 방식이었기 때문에 에피소드 감상에 방해를 최소화하는 애니메이션 세팅을 찾는 것이 중요했습니다. 이때, 댓글이 흘러 지나가는 속도나 스크롤 했을 때 나타나는 속도를 매 번 배포해서 확인했으면 시간이 정말 오래 걸렸을 것입니다. 각 컷을 몇 등분하냐에 따라서 댓글을 화면에 얼마나 고르게 분포해서 보여줄 것인지 정할 수 있는데, 3등분할 지 4등분 할 지를 버전 배포할 때마다 보면 마찬가지로 비효율적이었을 것입니다.

그래서 (애플 개발한다고 해도 과언이 아닐)iOS 개발자 조원님(사람 이름이 ‘조원’, 이하 ‘원님’으로 표기)께서 베타 앱에 기획, 디자인이 고민하는 세세한 부분을 매번 배포하지 않고도 바꿔보고 사용할 수 있도록 설정을 만들어주셨습니다. 프로젝트 초반부터 스틸한 디자인 화면이나 영상 프로토타입으로만 결정하지 않고 실제로 기능이 동작하는 베타에서 다양하게 세팅을 조절하면서 프로젝트 초반부터 기능에 대한 디테일을 결정하는데 큰 도움이 되었습니다.

기술을 활용해 디자인 확장하기

Facetime PiP을 사용한 입력버튼 (출처 : https://github.com/nathangitter/fluid-interfaces )

Spring Animations을 사용한 댓글 Modality
(배경은 11월 만화경 신작 <물망초 로망스> 작품)

BETA 테스팅 하는 동안 기존 UI도 iOS에 최적화된 기술을 적용하여 밀도를 높였습니다. iOS만 먼저 배포하는 상황이어서 원님이 OS 특성을 살릴 수 있는 Fluid Interfaces를 적극적으로 제안해 주신 덕분에 위 이미지처럼 Facetime PiP와 Spring Animation 등을 사용하여 구름 톡과 잘 어울리는 방향으로 디자인을 확장할 수 있었습니다.

사용자 경험 디테일도 머리를 맞대고

paddingpadding

(배경은 기획자 최애 개그일상툰 <슴슴슴슴> 작품)

보다 재밌게, 왁자지껄하게 만화를 같이 보는 경험이 사용자에게 돌아가기 위해서 서비스 초기에 구름톡을 작성하는 사용자가 많아야 한다고 생각했습니다. 에피소드를 보다가 할 말이 생기면 자연스럽게 구름톡을 작성하고, 작성하는 행동을 반복하는 데 허들이 없도록 쉽고 편리한 입력 방식이 필요했습니다.

그런 관점에서 구름톡을 작성하는 사용자 경험이 공을 들여 사진을 고르고 편집해서 올리는 인스타그램 게시물과 달리 공유하고 싶은 순간을 즉시, 얼른 찍고 (비교적)대충 꾸며서 올리는 스토리를 작성하는 사용자 경험과 유사하다고 생각했습니다.

입력 버튼을 누르면 입력 필드와 키패드가 원고 위에 바로 띄워져서 에피소드 뷰어 영역을 이탈하는 느낌을 없애고 사용자가 남기는 구름톡이 어느 장면에 남겨지는 것인지 직관적으로 알 수 있게 했습니다. 인스타그램 스토리 작성 시 입력한 텍스트의 위치를 마음대로 옮길 수 있다는 점을 차용해 구름톡도 입력한 내용을 위아래로 움직여서 원하는 위치에 반응을 남길 수 있게 했습니다. (구름톡은 y축을 기준으로 댓글이 우>좌로 흐르는 형태이기 때문에 위아래로만 움직일 수 있게 하였습니다.)

입력 화면을 구현하고 위치 이동 아이디어를 디벨롭하는 과정에서도 기획, 디자인, 개발 구분 없이 더 좋은 사용자 경험을 목표로 텍스트 위치 이동 영역을 얼마나 줄 것인지, 텍스트를 이동할 수 있다는 사실을 사용자에게 어떻게 알려줄지 등의 디테일을 계속해서 논의했습니다.

마무리하며..

Q 구름톡 (iOS) 프로젝트를 진행한 소감 한 마디 부탁드립니다.

윤경: 구름톡을 진행하면서 가장 신경을 많이 쓴 부분은 편리하고 재밌는 사용성이었습니다. 좋은 아이디어로 새로운 가치를 만들어 낸다고 해도 사용성을 간과하면 결국 경험의 질을 떨어뜨리게 되고 그만큼 서비스 만족도가 떨어지게 될 테니까요. 그런 측면에서 구름톡의 이런 쾌적한 사용성을 만들어 낼 수 있었던 이유는 좋은 아이디어를 적극적으로 제안해 주시고 발전시켜주신 지민님, 원님 덕분이라고 생각합니다. 좋은 서비스를 만들기 위해서는 프로젝트를 함께 이끌어가는 팀원들의 전문 지식과 다양한 관점이 필요하고 무엇보다 효율적인 협업이 중요하다는 걸 다시 한번 느낄 수 있었던 시간이었습니다.

지민: 돌고 돌아 오랜 시간이 걸린 프로젝트였던 만큼 사용자가 거부감 없이 재밌다고 느끼며! 사용해 주시길 간절히 바랐는데, 기능 배포하고 약 10일이 지난 지금 구름톡 작성 개수나 사용자 반응이 기대 이상이라 정말 감사할 따름입니다. 이제는 “만화경 사용자에게 만화를 같이 보는 경험을 제공할 수 있을까”라는 고민에서 발전해서 “어떻게 하면 만화경 사용자가 만화를 같이 보는 경험을 더 재밌게 할 수 있을까"를 고민해야겠습니다. Android에도 구름톡 기능 얼른 추가해서 돌아오겠습니다.

참! 저희 만화경 개발팀과 함께 구름톡처럼 재밌는 기능 많이 많이 만들어주실 여러분을 기다리고 있어요!! 아래 링크를 통해 만화경 개발자 이야기도 들어보세요 🙂

긴 글 읽어주셔서 정말 감사합니다 :^)!!