트렌드

[UXD] ⑤만화 속 세상을 그린다, 다음웹툰

2018.10.01

UX(User Experience)는 말 그대로 ‘사용자 경험’을 뜻합니다. 앱의 첫화면, 웹사이트 페이지 구성, 서비스가 가진 통일성. 당신이 각종 제품과 서비스를 접하면서 느끼고 생각하는 모든 것이 사용자 경험인 셈입니다. 그리고 우리가 아는 앱·웹 그 뒤편에는 당신의 경험을 고민하는 사람들, UX디자이너들이 있습니다.

2003년 포털 사이트 다음은 웹툰 서비스 ‘만화 속 세상’을 선보였다. 국내 최초이자 세계 최초 포털 웹툰 서비스의 등장이었다. 2014년 다음과 카카오가 합병했고, 2016년 다음웹툰은 카카오에서 분사해 홀로서기를 하게 됐다. 다음웹툰 앱 출시 디자인을 맡았던 유천종 디자이너에게도 선택지가 주어졌다. 카카오에 남을 것인가, 분사에 합류할 것인가. 그는 ‘오래된’ 신생 기업, 다음웹툰행 열차에 올랐다.

| 유천종 디자이너

유천종 디자이너는 “내가 과거에 만들었던 디자인에 부끄러운 것이 많아 새롭게 만들고 싶었다”라고 다음웹툰에 합류하게 된 계기를 설명했다. 지난해 개편된 다음웹툰 앱2.0 버전도 그의 작품이다. 뿐만 아니라 명함, 서류 봉투, 패키지, 굿즈, 작가 파티, 행사, 웹 디자인, 앱 디자인, 커뮤니케이션, 광고 영상 등 다음웹툰과 관련된 디자인 전반에 그의 손길이 닿지 않은 곳이 없다.

 

*바둑판 위에 의미 없는 돌은 없다

다음웹툰 UX의 핵심 가치는 ‘콘텐츠’다. 작가의 작품은 돋보이게, 독자는 작품에 집중할 수 있게끔 플랫폼을 설계하는 것에 중점을 두고 있다.

목표 달성을 위해 내부에서는 4가지 가이드라인을 세웠다. 첫째, 크리에이티브할 것. 둘째, 자연스러울 것. 셋째, 사용자의 시선에 중심을 맞출 것. 넷째, 선 하나를 그어도 의미를 담을 것. 이러한 원칙을 바탕으로 만들어진 것이 지난해 나온 ‘다음웹툰’ 앱 2.0이다.

크리에이티브를 추구하기 위해 고안한 것이 ‘세로형’ 배치 방식이다. 다음웹툰에 게재된 웹툰 중 98%는 세로형 웹툰이다. 웹툰 대부분이 위에서 아래로, 스크롤을 내려 읽는 방식으로 구성돼 있다는 점에 착안해, 다음웹툰은 요일 표시 탭을 메인 화면 좌측에 세로로 배치했다. 세로로 배치할 경우 활용할 수 있는 영역이 넓어지긴 하지만 일반적인 배치 방식은 아니다.

유천종 팀장은 “일반적인 방식을 깨고 싶었다. ‘창작의 최전선에 있는 작가들은 매일 새로운 작품을 내려고 노력하는데 플랫폼은 콘텐츠만 보여주면 되나?’라는 생각을 했다”고 말했다. 크리에이티브를 추구하는 이유는 작가, 그리고 작품과 함께 호흡하고 싶다는 의미가 담겨 있다. 그는 “감상에 방해되지 않는 선에서 새로운 시도를 하려고 한다”고 덧붙였다.

새롭게 시도한 또 다른 크리에이티브 요소는 **다음웹툰 앱 메인만 봐도 알 수 있다. 앱을 열자마자 화면의 절반이 웹툰의 썸네일로 꾸며져 있다. GIF 이미지라 웹툰 캐릭터가 살아 움직이는 듯한 느낌을 준다. 아이디어 단계에서는 웹툰 작가의 작품을 따로 만지는 것을 우려하는 의견도 있었다. 그는 막상 시작하고 나니 작가들에게 따로 이메일이 올 정도로 반응이 좋았다고 덧붙였다.

|작품홈 상단 화면. 인물이 먼저 등장하고, 뒷배경이 나중에 서서히 퍼지는 효과가 적용돼 있다.

‘자연스러움’은 앱의 전환효과로 구현했다. 한 화면과 다른 화면이 연결되는, 그 사이를 매끄럽게 다듬은 것이다. 예를 들어 웹툰 이미지를 누르면 웹툰의 전 회차가 나오는 작품홈으로 넘어가게 된다. 이때 회차 정보가 빨리 떠야 하는데, 연재를 오래 한 경우에는 회차가 많아서 목록 로딩 시간이 길어진다. 사용자는 답답할 수밖에 없다.

그래서 메인화면 웹툰 대표이미지를 눌렀을 때, 이미지가 작품 홈 상단으로 날아가 이어지도록 하는 ‘enter transition’을 적용했다. 페이지간 연결을 자연스럽게 하기 위해서다. 이미지가 작품 홈 상단에 가서 멈추면 그 뒤로 ‘ripple effect(배경이미지가 원형으로 퍼지며 나타나는 효과)’가 펼쳐진다. 제법 화려하게 느껴지는 효과라, 사용자의 시선은 자연스레 작품 홈 상단에 머문다. 로딩 시간을 벌기 위해 넣은 요소다.

유천종 팀장은 “작품 홈으로 이동하는 게 하나의 갤러리에 진입하는 느낌이었으면 했다”며 “자연스러운 화면 전환을 위해 OS에서 기본 제공하는 화면전환 대신 전부 자체적인 전환 효과를 적용했다”고 말했다.

웹툰 정렬 방식에는 의미를 담았다. 다음웹툰은 ‘랭킹’순이 아닌, ‘업데이트’ 순으로 웹툰이 나열된다. 일찍 게재된 작품은 새벽 시간에는 상단에 올라 있지만 오후가 되면 이후에 업데이트된 웹툰에게 제 자리를 내어준다. 최상단에 걸리는 웹툰이 계속 바뀐다는 얘기다. 이 점을 눈치챈 독자도 있겠지만, 눈치채지 못한 독자도 제법 많다.

유천종 팀장은 “사회적 메시지를 던지는 작품은 호흡이 길어서, 대부분 초반보다 후반부에서 재미가 드러난다”라며 “랭킹순으로 정렬하면 초반부가 자극적인 작품이 상위권에 위치하게 된다. 호흡이 긴 작품이 빛을 보지 못할 수 있다고 생각해, 업데이트순으로 독자에게 보여주고 있다”라고 말했다.

다음웹툰도 랭킹 시스템을 준비하고는 있다. 다만 학교 성적표처럼 1등부터 마지막 순위까지 나열된 형태가 아닌 장르별 인기작품 1, 2, 3위를 보여주는 정도의 시스템을 구상 중이다. 신규 유입된 독자와 다른 장르를 접하지 못한 독자에게 웹툰을 추천하기 위해서다.

*윤태호 작가의 <미생>에 나온 대사. 
**다음웹툰 앱은 메인, 작품 홈(웹툰 회차정보 페이지), 뷰어(작품 감상화면) 이렇게 크게 3가지 화면으로 분류된다.

다음웹툰 디자이너와 개발자가 협업하는 방법

카카오에서 분사한 다음웹툰은, ‘오래된 신생 기업’이다. 대외적인 이미지와는 달리 규모는 작은 편이다. 안드로이드 개발자는 2명이고, 지금까지는 iOS 개발인력이 없어 iOS 앱 업데이트를 진행하지 못했다. 4개월여 전 iOS 개발자가 들어오고 나서야 iOS 앱 업데이트를 진행할 수 있었다. 한마디로 소규모 인원이 ‘으쌰 으쌰’하는 스타트업의 분위기다.

인원이 적어 겪는 고충도 있겠으나 장점도 크다. 디자이너와 개발자가 바로 옆자리에 앉아 긴밀하게 소통할 수 있기 때문이다. 유천종 팀장은 커뮤니케이션 도구로 애프터이펙트를 활용한다. 디자인 프로토타입을 일종의 애니메이션 형태로 만들어서, 어느 탭을 누르면 어떤 방식으로 화면이 바뀌어야 하는지 개발자에게 직접 보여준다. 요청사항을 말 또는 스틸컷으로 전하면 왜곡될 수 있다고 생각하기 때문이다.

물론 이해한다고 해서 모든 디자인이 뚝딱 만들어지는 것은 아니다. 개발상 제동이 걸리는 지점들이 있다. 2.0을 만들며 가장 구현하기 어려웠던 건 앱 좌측 최상단에 위치한 ‘N 심볼’ 효과였다.

메인을 기준으로 좌측 또는 우측으로 밀어넘기면 카테고리가 바뀐다. 이에 따라 심볼도 N(업데이트된 웹툰), 모래시계(기다리면 무료), O(완결 작품), *(리그 작품 및 컬렉션 작품, C(캐시) 등으로 변경된다. 이용자 입장에서는 뭐가 어렵고, 뭐가 힘든지 알 수 없는 일이다. 그러나 아이콘 모양을 자연스럽게 바꾸기 위해 디자이너와 개발자는 밤낮없이 고생했다.

각 대메뉴 대표 아이콘 애니메이션의 초기 시안은, 메뉴를 이동할 때 연결되지 않고 따로 움직이는 GIF 형태였다. 그런데 이런 형태로 만들어지면 개발 이슈가 발생한다는 의견이 나왔다. 이를 해결하기 위해 JPG, GIF가 아닌 좌표와 개발언어로 이뤄진 6개의 사면체로 이루어진 ‘path icon’을 만들었다. 그런데 각 꼭지점이 다른 꼭지점으로 이동하는 방식의 애니메이션을 적용한 결과 전환 시 모양이 일그러지는 현상이 발생했다. 각 좌표간 이동 거리가 너무 멀기 때문이었다.

이를 해결하기 위해 개발자와 시행착오를 거듭한 끝에, 중간다리 역할을 하는 도형을 넣는 아이디어를 떠올렸다. ‘마름모’를 가운데 넣자 좌표 사이 이동 거리가 일관성 있게 줄었다. 마름모를 활용해 당겼다 놓으면 화면이 바뀌는 애니메이션도 적용할 수 있었다. 그 결과 지금의 자연스러운 전환 효과가 완성됐다. 유천종 팀장은 “개발자와 코워크를 맞출 수 있는 가장 큰 기회였다”라고 말했다.

 

작가를 위한 디자인

다음웹툰은 분사 시점에 웹툰 작가들을 모아 놓고 ‘가장 자신 있게 크리에이티브를 발휘할 수 있는 공간을 만들어주겠다’고 공언했다. 호기롭게 내걸었던 말처럼, 유천종 팀장은 다음웹툰이 최고의 크리에이티브 집단으로 거듭나는 미래를 꿈꾼다. 그러기 위해서는 작가의 창의성이 빛을 발할 수 있는 환경을 만들어주는 게 무엇보다 중요하다.

다음웹툰 개편 이후 쏟아진 반응은 긍정적이었다. 정체돼 있던 UV 및 PV는 커브를 그리기 시작했다. 유천종 팀장도 “내가 정체된 건지, 완성도가 높아진 건지 모르겠지만 다음웹툰 2.0을 내놓고는 적어도 부끄럽지 않았다”라며 웃었다.

다음웹툰 2.0이 독자를 위한 변화였다면, 이제는 작가를 위해 변할 차례다. 우선 노후한 작품 송고 툴을 개편할 계획이다. 오래 전 만들어진 송고 툴이 불편하다는 의견이 많기 때문이다. 이에 모바일에서도 확인할 수 있고, 사용자 피드백도 볼 수 있는 창구를 만들고 있다. 최종적으로는 송고 과정, 또는 작품 송고 이후 과정에서 작가가 감정 소모 없이 편하게 작업만 할 수 있도록 돕는 송고 툴을 만드는 게 목표다.

“UX는 독자와 작가의 중간 다리 역할이라 생각한다. 작가와 제작조직과 사용자까지 크리에이티브라는 하나의 단어로 묶여서 상생할 수 있었으면 좋겠다. 우리 팀은 인원이 적어 느리지만 천천히 가고 있다. 제대로 하기 위해 노력하겠다. 독자와 작가 둘다 꼭 만족시키고 싶다.”