DEVIEW 2015 DAY1. 네이버효과툰어떻게만들어졌나 - 김효님, 이현철님

1. /61
네이버 효과툰은
어떻게 만들어졌나?
김효 / 이현철
NAVER

2. /61
목차
1. 효과툰으로 해결하려고 한 것과 고민들
2. 효과툰 저작툴 및 뷰어의 동작원리
Q&A

3. /61
1. 효과툰으로
해결하려고 한 것,
그리고 고민들

4. /61
발단 : 문제점
효과음, 배경음악, 모션의 다양한 연출에 대한 요구
디바이스 별 제공방식의 제한
모바일 > PC but, PC 위주의 시도들
동일 작품의 환경 별 다른 연출
4

5. /61
발단 : 문제점
PC Web Mobile Web Mobile App.
Scroll (신의 탑, Nobless)
BGM (평범한 8반 39화 – mp3)
Page View (프린세스)
Flash Only (러브슬립 2부)
Scroll + Flash (옥수역 귀신)
music effect (연애혁명 50화)
스마트툰 (사이드킥)
모바일 미지원
(PC에서만 시도되던 다양한 effect를
모바일에서 동일하게 적용 필요)
5

6. /61
발단 : 시장 현황
경쟁사 PC mobile Page cut Scroll 기타
Web App O X Flash 기반
Web X X O WebGL 사용
Web Web/App X X 동영상으로 재생
Web Web/App O O
Any types, Env, devices, OSs
6

7. /61
전개 : 프로젝트 방향
PC와 모바일에서 상이한 연출 방식,
다양한 연출에 제약이 있는 모바일 뷰어
차별화된 인터랙션을 제공하는
해외 만화뷰어
웹툰을 보기에 불편이 따르는
네이버북스 만화 뷰어
효과툰
 움직임, 사운드, 진동 등
새로운 모션, 효과 제공
(기존 스마트툰 기능 포함)
 PC와 모바일 각각의 환경에
최적화되어 유사한 경험 제공
 국내/외 웹툰과 북스 모두 사용
가능한 범용 만화뷰어
뷰어 저작툴
7

8. /61
전개 : 스크롤 효과툰
“Scroll View 타입의 툰에서 어떻게 모션을?”
스크롤 형태의 웹툰부터 시작하자
8
“작가인터뷰 : 효과의 종류 정의”

9. /61
위기 : 스크롤 효과툰 정의
Video 형 모션
언제 play 시작?
rewind?
reset?
움직임 = Video?
9

10. /61
위기 : 스크롤 효과툰 정의
스크롤 강제 제어 어색한 스크롤 체감
스크롤을 멈춰라
10

11. /61
위기 : 스크롤 효과툰 정의
“효과툰도 웹툰이다”
그간 많은 시도가 있었고,
효과툰은 잘 안 될꺼다…
만화는 정적이다.
플레시 애니메이션 왜 대세가 못되었나?
11

12. /61
위기 : 스크롤 효과툰 정의
모든 연출을
스크롤에 매핑
스크롤 거리
= 플레이 시간
웹툰 = 진행 시간의 제어 주체는 사용자
12

13. /61
절정 : 저작툴
“작가의 주기제작이 가능해야 한다”
주간연재의 어려움 ㅜㅜ
분량의 압박
효과툰은 또 하나의 짐?
13

14. /61
절정 : 저작툴
14

15. /61
Web 기반 웹툰 저작툴
• AngularJS + Node Webkit
• 빠른 개발/대응
• 향후 Web App으로 진화
• 일반 독자 참여 확대
15
절정 : 저작툴

16. /61
절정 : 저작툴
가장 쉽게
• not Photoshop, easier than PowerPoint
• 개발자 용어를 일반 용어로
• 최대한 쉽게 효과를 : Parallax, 자동원근
• 다양한 미리보기
• PSD 입력
16

17. /61
절정 : 네이버 웹툰 에디터
17

18. /61
절정 : 웹툰 뷰어
“시선 영역을 잡아라”
스크롤 + 움직이는 연출
연출은 언제부터?
연출의 언제까지?
PC? 모바일?
18

19. /61
절정 : 서비스
“한 명의 독자도 놓치지 말자”
19

20. /61
절정 : 서비스
Native App
(cocos2dx)
저사양폰에서도 모션을 즐길 방법이 있어야 한다
20

21. /61
절정 : 서비스
Web Viewer의
호환성 확보
Android Webview, Chrome view
iOS UIWebview, WKWebview
21

22. /61
절정 : 서비스
Still cut 서비스
Auto still cut 편집기
그래도, 죽어도 모션이 안 되는 기기가 있다
22

23. /61
절정 : 서비스
Smooth scroll
emulation
PC wheel은 연출이 끊긴다
23

24. /61
절정 : 서비스
이미지 인식/자동 자르기
Auto crop
자동 layer merge
모바일 서비스 시 이미지 용량이 중요하다
24

25. /61
절정 : 서비스
toon2psd
원본이 없어졌어요. PSD가 필요해요.
25

26. /61
결말 : 효과툰 서비스
“World 1st full spec scroll view type comic service”
26

27. /61
결말 : 할 일
컷뷰 (컷툰) 형식의 효과툰 (페이지 전환 효과)
글로벌로 가자 - 다국어 번역을 위한 기술들 : 기계번역, 이미지번역
flash와 경쟁할 모션 플랫폼
모든 사람이 쉽게 사용하는 저작툴 : 챌린지리그
27

28. /61
2. 효과툰 저작툴 및 뷰어의
동작원리

29. /61
효과툰 모아보기
29

30. /61
효과툰 제작부터 감상까지
30

31. /61
효과툰 제작부터 감상까지
31

32. /61
효과툰 제작부터 감상까지
웹툰 에디터
32

33. /61
효과툰 제작부터 감상까지
33

34. /61
효과툰 제작부터 감상까지
34

35. 35

36. /61
서비스 관점 기획기술 관점 기획
• 서비스 완성도
• TTM (Time To Market)
• 사용자 반응
• 매출 연계
개발회의 만큼 기획회의를 많이 한 프로젝트, 오히려 개발시간 단축효과
• 스펙 정의
• 새로운 기술 적용
• 서비스 지원범위
• 사용성 (UI/UX)
• 향후 확장성 고려
개발자도 기획자
36

37. /61
• 고객(웹툰작가)의 요구사항을 파악하기 위해서 기획 초기
~ 서비스 직전까지 반복적인 미팅
• 작업 중 불편사항 지속적인 해결
• 기존 웹툰 저작 과정도 개선하기 위한 편의기능 다수 제공
핵심고객의 요구사항 파악
37

38. /61
미션
효과툰도 웹툰이다
작가의 주기제작이 가능해야 한다
시선 영역을 잡아라
한 명의 독자도 놓치지 말자
38

39. /61
효과툰 = 애니메이션?
효과툰도 웹툰이다
효과는 컨텐츠의 전달을 거들 뿐
39

40. /61
효과의 종류
• 스크롤의 위치에 연계되는 효과 (scroll position mapped effects)
이동, 회전, 확대/축소, 투명도, 나타나기, 사라지기, 배경음악 페이드 인/아웃,
패럴랙스(parallax)
• 즉시 재생되는 효과 (instantly played effects)
흔들기, 반짝이기, 둥실거림, 효과음, 휴대폰 진동, 애니메이션, 원근처리
• DEMO
40

41. /61
뷰어 구조도
Viewer
PageManager
AssetManager
Page
Layer
Page
Page
Layer
Layer
load viewer-data.json
41

42. /61
렌더링 과정
Viewer
PageManager
Page
Layer
Scroller
scroll event
scroll position
Calc renderProgress
getActivePage
Layer Layer
Layer.renderAt(renderProgress)
42

43. /61
렌더링 구현
Layer
start end
LayerLayerLayer
interpolation
DOM Mode
translate3d, scale3d, rotate, opacity, clip, animation
Canvas Mode
translate, rotate, alpha, drawImage
Page
Layer.renderAt(renderProgress)
43

44. /61
웹툰 에디터
작가의 주기제작이 가능해야 한다
44

45. /61
리소스 최적화
> 2048px
45

46. /61
리소스 최적화
46

47. /61
리소스 최적화
47

48. /61
리소스 최적화
48

49. /61
연출 기준선
Render Line
시선 영역을 잡아라
49

50. /61
연출 진행률
Render Progress x%
Render Progress 100%
Render Progress 0%
Render Line
50

51. /61
연출 타이밍 최적화
51

52. /61
연출 타이밍 최적화
시선 영역
52

53. /61
연출 타이밍 최적화
53

54. /61
연출 구간 최적화
54

55. /61
연출 구간 최적화
55

56. /61
연출구간 확장
연출 구간 최적화
56

57. /61
연출구간 확장
연출 구간 최적화
57

58. /61
렌더 옵션
PC
58

59. /61
렌더 옵션
iOS
59

60. /61
렌더 옵션
Android
한 명의 독자도 놓치지 말자
한 명의 독자라도 제대로 볼 수 있다면, 멋진 기술을 놓치지 말자.
60

61. /61
에필로그
61

62. /61
Q&A

63. /61
Thank You