관련 직무: 카카오엔터프라이즈
다음웹툰의 UX(Animation, Transition, Custom View)
0:00 UI 앱 동작 소개 5:41 Splash 메인화면을 구성하는데 필요한 서버 통신 시간을 벌어주는데 의미가 있다.
애니메이션 효과는 after effect와 같은 것을 사용해서 만든다.
주요 효과는 동영상 또는 GIF로 재생 문제점: 빠르게 Tab 이동시 생기는 문제 ex) 프레임 드랍, 메모리 이슈 해결책: 아이콘을 Path로 구현 + Tab 이동시 Path Morphing
15:17 List animation 안드로이드 기본 애니메이션 효과: pade in out android.support.v7.widge.DefaultItemAnimator 코드에 원하는 효과가 담긴 callback을 추가해서 커스텀으로 구현
18:56 Title Page Scene Transition custom 23:35 Curve Animation 24:41 Ripple effect: 물방울이 퍼지는 효과 27:40 사용자 클릭 타이밍과 일치하지 않는 이슈 29:50 MainActivity로 돌아갈 때 Cross Fade 느낌이 없음 32:00 정리 32:50 다음 릴리즈에 준비중인 내용 34:30 질문
발표한 내용은 개발에 5개월이 걸렸다.
[if(kakao) 2019] 다음웹툰의 UX (New tab : Top)
8:40 도형에 색상 입히기 - 1. Image resources 문제점: Image 크기만큼 메모리를 사용하는 메모리 이슈 ( 구글에서도 비권장 ) 2. shader RadialGradient 4개를 만든 후, ComposeShader를 사용해서 Shader 4개를 합친다 문제점: 4개 색상의 움직임이 단조롭다. 4개의 RadialGradient를 ComposeShaer에 넣게되면 Hadrware rendering 사용 불가 동일한 타입의 Shader 사용은 API 28부터 가능 3. ComposeShader를 사용하지 않고, 4개의 RadialGreadient를 4번 그린다
14:55 Tapbar Gradient 20:20 List scroll view 27:00 onBindViewHolder를 이용해서 새로운 List Item이 위/아래 어디에서 오는지 판단하기 -> 상하단 스크롤에 따라 View에 있는 이미지를 이동시킬 때 사용할 수 있는 로직
디자인은 멋있어 보이기 위해 넣는게 아니라, 사용자의 시선 처리와 같은 목적이 있어야 한다. 30:00 지금까지의 설명이 모두 적용된 UI 결과 31:10 차세대 뷰어 ALIVE. 동영상이 아닌 그냥 뷰어 32:30 Q&A