함태윤(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 개발과정 공개

1. 다음웹툰의 UX
함태윤(erkas.c)
DAUM WEBTOON COMPANY
Animation, Transition, CustomView

2. DAUM
WEBTOON
2.0

3. 개선이 너무 잘 된 것 같습니다. 팝업 모션이 너무 좋아요!!! 댓글 스포일러 막는 것도 좋고
스크롤 내릴 때 캐릭터와 배경이 따로 분리되서 내려오는 것도 너무 좋아요 ㅠㅠ
진짜 매번 이걸로 웹툰 볼 때 느끼는 건데 깔끔하고 요일로 정리한 거랑 보려고 하는 웹툰
눌렀을 때? 웹툰이 올라오면서 켜지는거 너무 이뻐서 좋아요!! 솔직히 타 플랫폼은 비슷비슷한데
여긴 저렇게 깔끔하게 되어있어서 좋아요!!
다음웹툰도 즐겨보지만 UI가 매우 마음에 듭니다 개발자에게 전화를 걸었지만
모든 상담사가 통화중이라고 하더군요 혹시 개발자님과 이야기 하려면 어떻게 해야 하나요...?

5. KEYWORD
INTERACTION

6. Creative
Natural
Focusing
Meaningful
INTERACTION
KEYWORD

7. PROCESS
WORK

8. DESIGN
PROTOTYPING
STEP 1
CONSULTATION
STEP 2
DEVELOPMENT
PROTOTYPING
STEP 3
REVIEW
STEP 4
OUTPUT
STEP 6
GO BACK
STEP 5
WORK
PROCESS

9. 01.
HOME
INTERACTION
SPLASH
SYMBOLIC ICON
LIST ANIMATION
02.
TITLE PAGE
SCENE TRANSITION
CUSTOM ENTER TRANSITION
CURVE ANIMATION
RIPPLE EFFECT
CONTENTS

10. INTERACTION
HOME
SPLASH
01.

11. DESIGN
PROTOTYPING

12. WEBTOON FRAME
VERTICAL
CONTENTS
CONTAINER
DESIGN
CONCEPT

13. 사각형의 움직임은 3가지
가속도는 2가지
ISSUE
CONSULTATION

14. 합져지고 줄어들고 늘어난다
CONSULTATION

15. CONSULTATION

16. CONSULTATION

17. protected void onDraw(Canvas canvas) {
...
if (offset < 0.5f) {
// 빨간 사각형
canvas.drawRect(left, top, right, bottom, mMainPaint);
// 하얀 사각형
if (animateLength <= mGapHeight) {
bottom = centerY - mContentHeight / 2;
top = bottom - mGapHeight + animateLength;
canvas.drawRect(left, top, right, bottom, mSubPaint);
top = centerY + mContentHeight / 2;
bottom = top + mGapHeight - animateLength;
canvas.drawRect(left, top, right, bottom, mSubPaint);
}
} else if (offset >= 0.5f) {
float offset = (this.offset - 0.5f) * 2f;
top = centerY - mEndHeight / 2;
bottom = centerY + mEndHeight / 2;
left = mPadding + (left - mPadding) * (1.f - offset);
right = right + (width - mPadding - right) * offset;
canvas.drawRect(left, top, right, bottom, mMainPaint);
}
...
}
DEVELOPMENT
PROTOTYPING

18. DEVELOPMENT
PROTOTYPING

19. INTERACTION
HOME
SYMBOLIC ICON
01.

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

24. DEVELOPMENT
PROTOTYPING

25. CONSULTATION

26. CONSULTATION

27. DEVELOPMENT
PROTOTYPING

28. OUTPUT

29. INTERACTION
HOME
LIST ANIMATION
01.

30. DESIGN
PROTOTYPING

31. DEFAULT
LIST
ANIMATION
DEVELOPMENT
PROTOTYPING

32. android.support.v7.widget.DefaultItemAnimator
코드를 복사해서 callback 추가
DEVELOPMENT
PROTOTYPING
CUSTOM
ANIMATION

33. CustomItemAnimator animator = new CustomItemAnimator();
animator.setItemAnimatorListener(new CustomItemAnimator.ItemAnimatorListener() {
@Override
public void onAddPreStart(RecyclerView.ViewHolder viewHolder) {
View view = viewHolder.itemView;
ViewCompat.setAlpha(view, 0f);
ViewCompat.setTranslationY(view, view.getHeight() / 4);
}
@Override
public void onAddAnimatorPrepare(RecyclerView.ViewHolder viewHolder
, ViewPropertyAnimatorCompat animator) {
animator.alpha(1.f)
.translationY(0f)
.setInterpolator(DECELERATE_INTERPOLATOR);
int position = viewHolder.getAdapterPosition();
if (position >= 0 && position < 10) {
animator.setStartDelay(50 * position);
}
}
@Override
public void onAddFinished(RecyclerView.ViewHolder viewHolder) {
View view = viewHolder.itemView;
ViewCompat.setAlpha(view, 1f);
ViewCompat.setTranslationY(view, 0f);
}
});
DEVELOPMENT
PROTOTYPING

34. STEP 1
Data 교체
STEP 2
Add Animation start
STEP 3
Scroll Up
STEP 4
새로운 row 추가 (Add Animation 없음)
ISSUE
DEVELOPMENT
PROTOTYPING

35. public class CustomItemAnimator extends SimpleItemAnimator {
...
@Override
public void runPendingAnimations() {
...
ArrayList<RecyclerView.ViewHolder> pendingList
= adapter.getPendingViewHolder();
for (int i = additions.size(); i < pendingList.size(); i++) {
RecyclerView.ViewHolder holder = pendingList.get(i);
itemAnimatorListener.onAddPreStart(holder);
additions.add(holder);
}
adapter.clearPendingViewHolder();
...
}
...
}
additions.add(holder);
OUTPUT

36. SCENE TRANSITION
TITLE PAGE
CUSTOM
02.

37. DESIGN
PROTOTYPING

38. ActivityTransition
문제점
SharedElement
CONSULTATION

39. SharedElement 로 사용되는
이미지 로드가 느림
ISSUE 1
CONSULTATION

40. getLocationInWindow() 값이
StatusBar Height 만큼 어긋남
ISSUE 2
CONSULTATION

41. ChangeBounds 가 오동작하여
이미지 Scale 이 어긋남
ISSUE 3
CONSULTATION

42. overridePendingTransition(R.anim.fadein, R.anim.fadeout);
STEP 1
TitlePage Activity Start
STEP 2
HOME Activity, TitlePage Activity Cross Fade
Custom
EnterTransition
DEVELOPMENT
PROTOTYPING

43. STEP 3
이미지 Show(onPreDraw)
DEVELOPMENT
PROTOTYPING
Custom
EnterTransition

44. STEP 4
Animation Start
DEVELOPMENT
PROTOTYPING
Custom
EnterTransition

45. private void startEnterAnimation() {
Rect previewRect = mPreViewRect;
float scaleX = (float) previewRect.width() / mImagePreview.getWidth();
float scaleY = (float) previewRect.height() / mImagePreview.getHeight();
int transX = previewRect.left - mImagePreview.getLeft() -
(mImagePreview.getWidth() - previewRect.width()) / 2;
int transY = previewRect.top - mImagePreview.getTop();
ValueAnimator animator = ValueAnimator.ofFloat(0.f, 1.f);
animator.addUpdateListener(animation -> {
Float offset = (Float) animation.getAnimatedValue();
float reverseOffset = 1.f - offset;
ViewCompat.setTranslationX(mImagePreview, transX * reverseOffset);
ViewCompat.setTranslationY(mImagePreview, transY * reverseOffset);
ViewCompat.setScaleX(mImagePreview, (1.f - scaleX) * offset + scaleX);
ViewCompat.setScaleY(mImagePreview, (1.f - scaleY) * offset + scaleY);
});
animator.setInterpolator(DECELERATE_INTERPOLATOR);
animator.start();
}
DEVELOPMENT
PROTOTYPING
Custom
EnterTransition

46. DEVELOPMENT
PROTOTYPING

47. SCENE TRANSITION
TITLE PAGE
CURVE ANIMATION
02.

48. private void startEnterAnimation() {
Rect previewRect = mPreViewRect;
float scaleX = (float) previewRect.width() / mImagePreview.getWidth();
float scaleY = (float) previewRect.height() / mImagePreview.getHeight();
int transX = previewRect.left - mImagePreview.getLeft() -
(mImagePreview.getWidth() - previewRect.width()) / 2;
int transY = previewRect.top - mImagePreview.getTop();
ValueAnimator animator = ValueAnimator.ofFloat(0.f, 1.f);
animator.addUpdateListener(animation -> {
Float offset = (Float) animation.getAnimatedValue();
float reverseOffset = 1.f - offset;
ViewCompat.setTranslationX(mImagePreview, transX
* (1.f - DECELERATE_INTERPOLATOR.getInterpolation(offset)));
ViewCompat.setTranslationY(mImagePreview, transY * reverseOffset);
ViewCompat.setScaleX(mImagePreview, (1.f - scaleX) * offset + scaleX);
ViewCompat.setScaleY(mImagePreview, (1.f - scaleY) * offset + scaleY);
});
animator.setInterpolator(DECELERATE_INTERPOLATOR);
animator.start();
}
ViewCompat.setTranslationX(mImagePreview, transX
* (1.f - DECELERATE_INTERPOLATOR.getInterpolation(offset)));
Curve Animation
DEVELOPMENT
PROTOTYPING

49. SCENE TRANSITION
TITLE PAGE
RIPPLE EFFECT
02.

50. Ripple Effect
DEVELOPMENT
PROTOTYPING

51. @Override
protected void onDraw(Canvas canvas) {
int centerX = getMeasuredWidth() / 2;
int centerY = getMeasuredHeight() / 2;
float radius = (float) (Math.sqrt(centerX * centerX + centerY * centerY)
* animateOffset);
path.reset();
path.addCircle(centerX, centerY, radius, Path.Direction.CW);
path.close();
canvas.save();
canvas.clipPath(path);
mDrawable = getDrawable();
if (mDrawable == null) {
mBackground.draw(canvas);
} else {
mDrawable.draw(canvas);
}
canvas.restore();
}
canvas.clipPath(path);
Ripple Effect
DEVELOPMENT
PROTOTYPING

52. OUTPUT

53. ISSUE 1
TitlePage Activity Start
+ Image onPreDraw 시간만큼 딜레이 존재
DEVELOPMENT
PROTOTYPING

54. EnterTransition 을 Main 에서 처리
(lifecycle 활용)
SOLUTION 1
DEVELOPMENT
PROTOTYPING

55. SOLUTION 1
WebtoonHomeTransitionManager.instance.enterTrasition(lifecycle,
object : EnterTransitionListener {
override fun onActivityTransitionEnd() {
WebtoonHomeActivity.startActivity(activity, targetView)
}
override fun setContentAlpha(alpha: Float) {
id_home_drawer_container?.alpha = alpha
}
})
DEVELOPMENT
PROTOTYPING

56. VER. 2.1VER. 2.0
OUTPUT

57. Main Activity 로 돌아갈 때
Cross Fade 느낌이 없음
ISSUE 2
DEVELOPMENT
PROTOTYPING

58. ActivityTransition
Fade 사용
SOLUTION 2
DEVELOPMENT
PROTOTYPING

59. VER. 2.1VER. 2.0
OUTPUT

60. OUTPUT

61. Splash
Natural
Focusing
Meaningful
INTERACTION
KEYWORD
Creative
Symbolic Icon
All
Splash
Ripple, List

62. NEXT

63. DESIGN
PROTOTYPING

64. THANK YOU