카카오 개발자 콘퍼런스 ‘if kakao 2018’ 세 번째 이야기로는 ‘다음웹툰의 UX 개편 이야기’를 준비했습니다. 본 세션의 발표는 다음웹툰 안드로이드 앱을 개발하고 계신 함태윤 님이 디자이너와의 협업을 통해 다음웹툰의 UX를 발전시켜 나가는 과정을 담고 있습니다. 사용자들로부터 많은 칭찬을 받고 있는 다음웹툰 2.0. 사용자들의 마음을 사로잡은 다음웹툰의 UX 중 Animation, Transition, CustomView 부분을 중점적으로 다루었습니다. 더불어 이러한 UX가 탄생하기까지의 험난했던 여정과 그 극복과정을 애니메이션과 솔루션으로 소개하고자 합니다.

※ 이 글은 애니매이션 효과가 있는 이미지가 포함되어 있으며, 모바일에서 보실 경우 이미지가 보이지 않는 현상이 발생할 수 있습니다. 이러한 경우, 이미지를 클릭하시면 애니메이션 효과가 있는 이미지를 보실 수 있습니다.

발표자가 다음웹툰의 UX 개편을 위해 중점을 둔 포인트를 설명하고 있다.

다음웹툰의 UX를 개편하며 개발자와 디자이너가 중점을 둔 포인트는 크게 4가지 였습니다.

1. 창의적이고(Creative)

2. 자연스러워야 하며(Natural)

3. 강조하고자 하는 포인트에서 시선 분산을 없애고(Focusing)

4. 의미가 있어야 할 것(Meaningful)

이 네 가지 요소를 충분히 고려하며 'Home Interaction'과 'Title Page Scene Transition' 부분으로 파트를 나누어 개발을 진행하였습니다. 그리고 각각의 UX당 3가지 이펙트(effect)를 넣게 되었습니다.

Home Interaction

Home Interaction은 Home Interaction Splash, Symbol Icon, List 애니메이션으로 구성되어 있습니다.

다음웹툰 UX 중 Home Interaction Splash

먼저 Home Interaction Splash 애니메이션은 메인화면 구성에 필요한 통신 시간을 얻기 위한 목적으로 만들어졌으며, ‘이 사각형들이 모두 합쳐져서 웹툰이 된다’는 의미를 내포하고 있습니다. 해당 애니메이션을 개발하는 데 있어서 가장 큰 이슈는 사각형의 움직임과 가속도였습니다. 사각형이 합쳐지고 줄어들 때는 그 가속도가 같아야 하지만, 사각형이 움직이는 액션은 ‘합쳐지기’, ‘줄어들기’, ‘늘어나기’ 총 세 가지임에 반해 가속도는 두 가지라는 문제가 발생한 것입니다. 이에 발표자는 해당 도형을 빨간 사각형 셋이 아닌, 빨간 사각형 하나와 흰 사각형 둘로 나누어 소스코드를 구성하였습니다.

다음웹툰 UX 중 좌측 상단에서 바뀌는 5가지 Symbol

다음으로 Symbolic Icon 애니메이션은 의미가 담긴 각각의 아이콘 동영상 또는 GIF가 탭마다 플레이 되도록 하는 디자이너의 요구사항을 반영한 결과물 입니다. 그러나 빠르게 탭을 이동할 시 프레임(frame)이 드랍(drop)되거나 메모리 이슈 등이 발생하는 난관에 봉착하였습니다.

개발자와 디자이너가 자연스러운 스위칭을 위해 어떻게 도형을 구상해야 할 지 함께 고민하고 있다.

발표자는 이러한 문제를 해결하기 위해 아이콘을 Path로 구현하여, 탭 이동 시 각각의 아이콘들을 작은 도형으로 분해시키는 소스코드를 사용했습니다. 더 나아가 각각의 아이콘들 사이에 중간 도형인 ◇을 삽입하여 도형을 분해시킴으로써 나타나는 부자연스러운 현상을 해결하였습니다.

다음웹툰 UX 중 List 애니메이션

List 애니메이션은 리스트가 자연스럽게 계단 형태로 올라오는 효과를 자아냅니다. 이는 안드로이드에서 기본적으로 제공하는 애니메이션이 아니기 때문에, 개발자가 call back을 통해 직접 커스터마이징 하였습니다. 해당 애니메이션에서는 스크롤 업으로 리스트를 바꿀 시 밑 부분의 애니메이션이 작동하지 않는 문제가 있었으나, 새로운 row를 추가하는 식으로 이슈를 해결하였습니다.

Title Page Custom

다음웹툰 UX 중 Title Page Custom

Title Page Custom은 작품을 클릭했을 때 나오는 화면 이펙트로, ActivityTransition 및 SharedElement를 사용하였습니다. SharedElement로 사용되는 이미지의 로딩이 느리고, getLocationInWindow() 값이 StatusBar Height 만큼 어긋난다는 점과 더불어 ChangeBounds가 오작동하여 이미지 Scale이 어긋나는 등 문제점은 Custom EnterTransition을 적용함으로써 해결하였습니다.

Curve 애니메이션은 Title Page Custom에서 웹툰을 누르면 아이콘이 아래에서 위로 곡선을 그리며 올라오는 이펙트 입니다. 발표자는 특히 아이콘의 동선을 자연스럽게 하기 위해 커브를 조정하는 데 힘썼다고 합니다.

Ripple Effect는 Title Page Custom에서 웹툰을 누르면 페이지가 바뀌며 상단에 아이콘이 생기고 그 뒤로 배경이 나타나는 효과를 자아냅니다. 이는 서버와의 통신 시간을 벌기 위해 사용자의 시선을 잡고자 만들어진 애니메이션으로, CanvasClip Path를 사용합니다.

이렇듯 Home Interaction과 Title Page Activity 이펙트의 조정을 통해 다음웹툰 2.0이 만들어졌습니다. 그러나 모든 UX 업데이트가 그러하듯이 2.0 개편 이후 또 다른 이슈가 발생하였습니다. 첫 번째 이슈는 Title Page Activity Start 이후 Image onPreDraw 시간만큼의 딜레이(delay)가 생긴다는 것이었습니다. 이에 개발자들은 EnterTransition을 Title이 아닌 Main에서 처리함으로써 라이프사이클(lifecycle)을 활용하였습니다. 두 번째 이슈는 Main Activity로 돌아갈 때 Cross Fade의 느낌이 없다는 점이었으나, Activity Transition, Fade를 사용하여 해결하였습니다. 그리고 현재는 해당 문제들을 해결한 다음웹툰 2.1이 운영되고 있습니다.

Q&A

본 세션은 출시 후 좋은 피드백을 받고 있는 다음웹툰의 UX 구성 및 개발 과정을 다루면서 콘퍼런스를 찾은 많은 사람들의 관심을 끌었습니다. 크나큰 관심 만큼 발표내용에 대해 다양하고도 많은 질문이 있었는데요. 그 질문과 이에 대한 발표자의 답변을 간단히 정리하였습니다.

Q1. 다음웹툰 UX를 개편하면서 버전이나 기기 관련 이슈도 있었나?

버전은 최대한 로우 버전(low version)까지 대응하며, 기기의 경우 특히 중요한 이슈라면 해당 기기만 따로 관리하기도 합니다.

Q2. 안드로이드(android)와 iOS의 개발은 따로 이루어지는지?

안드로이드와 iOS 앱 개발팀이 따로 있으나, 개발 착수는 함께 합니다.

Q3. QA단계의 프로세스가 어떻게 되는지?

회사에 QA팀이 따로 있습니다. 우선적으로 내부 디자이너 등이 약 1주일 동안 테스트 기간을 가지며, 릴리즈 1주일 전에 QA기간을 잡아서 다시 시연을 하는 식으로 프로세스가 진행됩니다.

Q4. UI 테스트 자동화를 시도한 적이 있는지?

Interaction이 많기에 기본적인 UI 테스트를 진행하며, 따로 절차로 정해놓고 임하지는 않습니다.

Q5. 크래시(crash) 확인 툴은 무엇을 사용하는지?

패브릭(Fabric)과 파이어베이스(Firebase)를 사용하고 있습니다.

Q6. 프로토타입을 만들 때 사용하는 툴은 무엇인지?

디자이너는 애프터 이펙트(Adobe After Effects)와 플래시(Adobe Flash Professional CC), 개발자는 안드로이드 스튜디오(Android Studio)를 사용하고 있습니다.

앞서 말씀드린 ‘다음웹툰의 UX를 개편하며 개발자와 디자이너가 중점을 둔 포인트 4가지’를 기억하시나요? 이러한 과정을 통해 웹툰 UX 및 개발팀은 위의 4가지 포인트를 모두 충족시켰습니다. 지금 이 순간에도 사용자들의 더 큰 만족을 위해 끊임없이 노력하고 있으며, 더 나아가 새로운 업데이트를 준비하고 있습니다. 사용자들의 편의성과 미적 요구를 충족하기 위한 다음웹툰의 향후 행보를 계속하여 주목해주시길 바랍니다.

본문에 삽입된 사진은 'if kakao 2018' 개발자 콘퍼런스 발표자료에서 인용하였습니다.
(출처: https://if.kakao.com)

콘퍼런스 발표 | 함태윤(erkas.c) / 카카오페이지

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari