함태윤(erkas.c) / DAUM WEBTOON COMPANY
동영상이 포함된 pdf를 아래 링크에서 다운받아서, adobe reader에서 확인가능합니다.
https://mk.kakaocdn.net/dn/if-kakao/conf2018/Daum_Webtoons_UX.pdf
---
다음웹툰 안드로이드 앱에 적용된 UX(Animation, Transition, Custom View) 에 대한 소개와
단순히 현재 개발된 모습만이 아니라 그 과정을 같이 소개합니다.
부드럽고 자연스러우며 의미있는 그러면서 과하지 않은 UX를 고민하였고,
그에 따른 결과물로 다음웹툰 2.0 이 출시되었고, 출시 후 Transition, Animation 에 대한 좋은 피드백을 받았었습니다.
그래서 사용자 UX 적으로 어떤 고민들을 하였고, 어떻게 적용, 발전시켜 왔는지에 대해서 공유하도록 하겠습니다.
1. 디자인 시안 분석에서 시작되는 UX 구성 과정
2. 프로토타이핑 및 UX 구현, 튜닝 과정
3. 다음웹툰의 향후 UX 개발과정 공개
3. 개선이 너무 잘 된 것 같습니다. 팝업 모션이 너무 좋아요!!! 댓글 스포일러 막는 것도 좋고
스크롤 내릴 때 캐릭터와 배경이 따로 분리되서 내려오는 것도 너무 좋아요 ㅠㅠ
진짜 매번 이걸로 웹툰 볼 때 느끼는 건데 깔끔하고 요일로 정리한 거랑 보려고 하는 웹툰
눌렀을 때? 웹툰이 올라오면서 켜지는거 너무 이뻐서 좋아요!! 솔직히 타 플랫폼은 비슷비슷한데
여긴 저렇게 깔끔하게 되어있어서 좋아요!!
다음웹툰도 즐겨보지만 UI가 매우 마음에 듭니다 개발자에게 전화를 걸었지만
모든 상담사가 통화중이라고 하더군요 혹시 개발자님과 이야기 하려면 어떻게 해야 하나요...?
20. REQUEST
동영상 또는 GIF 가 탭마다 플레이
ISSUE
빠르게 Tab 이동시 생기는 문제들
프레임 드랍, 메모리 이슈 등
SOLUTION
아이콘을 Path 로 구현
+ Tab 이동시 Path Morphing
DESIGN
PROTOTYPING
21. C A S H N O W T I M E P E R I O D C H O I C E
DESIGN
CONCEPT
22. <string name="shape_path_hour_glass">
M 57.6,10.5 L 16,10.5 C 16,10.5 78.6,99.5 78.6,99.5 L 120.3,99.5 C 120.3,99.5 57.6,10.5 57.6,10.5 z
M 120.3,99.5 L 78.6,99.5 C 78.6,99.5 16,188.4 16,188.4 L 57.6,188.4 C 57.6,188.4 120.3,99.5 120.3,99.5 z
M 78.6,99.5 L 120.3,99.5 C 120.3,99.5 183,10.5 183,10.5 L 141.3,10.5 C 141.3,10.5 78.6,99.5 78.6,99.5 z
M 141.3,188.4 L 183,188.4 C 183,188.4 120.3,99.5 120.3,99.5 L 78.6,99.5 C 78.6,99.5 141.3,188.4 141.3,188.4 z
M 40.2,154.5 L 16,188.4 C 16,188.4 183,188.4 183,188.4 L 158.7,154.5 C 158.7,154.5 40.2,154.5 40.2,154.5 z
</string>
<string name="shape_path_hour_glass_end">
M 158.7,44 L 183,10.5 C 183,10.5 16,10.5 16,10.5 L 40.2,44 C 40.2,44 158.7,44 158.7,44 z
</string>
<string name="shape_path_circle">
M 70.2,48.8 L 52.2,17.7 C 24.0,34.0 5.0,64.4 4.9,99.5 L 41.0,99.6 C 40.9,77.9 52.8,59.0 70.2,48.8 z
M 41.1,99.5 L 4.9,99.5 C 6.1,131.5 22.0,163.8 52.2,181.4 L 70.2,150.1 C 51.5,139.3 41.1,119.7 41.1,99.5 z
M 158.1,99.5 L 194.1,99.5 C 194.0,66.9 177.0,35.2 146.7,17.7 L 128.7,48.9 C 147.5,59.7 157.9,79.3 157.9,99.5 z
M 128.8,150.2 L 146.8,181.3 C 175.0,165.0 194.0,134.6 194.1,99.5 L 158.1,99.5 C 158.1,121.1 146.2,140.0 128.8,150.2 z
M 70.3,150.1 L 52.2,181.4 C 80.5,197.6 116.4,198.8 146.8,181.3 L 128.8,150.2 C 110.0,161.0 87.8,160.2 70.3,150.1 z
</string>
<string name="shape_path_circle_end">
M 128.7,48.9 L 146.7,17.7 C 118.5,1.4 82.6,0.2 52.2,17.7 L 70.2,48.8 C 89.0,38.0 111.2,38.8 128.7,48.9 z
</string>
L 52.2,17.7 C 24.0,34.0 5.0,64.4 4.9,99.5
L 16,10.5 C 16,10.5 78.6,99.5 78.6,99.5
DEVELOPMENT
PROTOTYPING
23. switch (mPathIndex) {
case 0: // C
canvas.rotate(90.f * animateOffset + 90.f, centerX, centerY);
break;
case 2: // N
canvas.rotate(90.f * animateOffset + 180.f, centerX, centerY);
break;
case 4: // hourglass
canvas.rotate(90.f * animateOffset + 0.f, centerX, centerY);
break;
case 8: // ice
canvas.rotate(90.f * animateOffset + 90.f, centerX, centerY);
break;
case 6: // circle
default:
canvas.rotate(90.f * animateOffset, centerX, centerY);
break;
}
DEVELOPMENT
PROTOTYPING