[111] 네이버효과툰어떻게만들어졌나

20,756 views

Published on

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

Published in: Technology
0 Comments
43 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
20,756
On SlideShare
0
From Embeds
0
Number of Embeds
13,187
Actions
Shares
0
Downloads
134
Comments
0
Likes
43
Embeds 0
No embeds

No notes for slide

[111] 네이버효과툰어떻게만들어졌나

  1. 1. /61 네이버 효과툰은 어떻게 만들어졌나? 김효 / 이현철 NAVER
  2. 2. /61 목차 1. 효과툰으로 해결하려고 한 것과 고민들 2. 효과툰 저작툴 및 뷰어의 동작원리 Q&A
  3. 3. /61 1. 효과툰으로 해결하려고 한 것, 그리고 고민들
  4. 4. /61 발단 : 문제점 효과음, 배경음악, 모션의 다양한 연출에 대한 요구 디바이스 별 제공방식의 제한 모바일 > PC but, PC 위주의 시도들 동일 작품의 환경 별 다른 연출 4
  5. 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. 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. 7. /61 전개 : 프로젝트 방향 PC와 모바일에서 상이한 연출 방식, 다양한 연출에 제약이 있는 모바일 뷰어 차별화된 인터랙션을 제공하는 해외 만화뷰어 웹툰을 보기에 불편이 따르는 네이버북스 만화 뷰어 효과툰  움직임, 사운드, 진동 등 새로운 모션, 효과 제공 (기존 스마트툰 기능 포함)  PC와 모바일 각각의 환경에 최적화되어 유사한 경험 제공  국내/외 웹툰과 북스 모두 사용 가능한 범용 만화뷰어 뷰어 저작툴 7
  8. 8. /61 전개 : 스크롤 효과툰 “Scroll View 타입의 툰에서 어떻게 모션을?” 스크롤 형태의 웹툰부터 시작하자 8 “작가인터뷰 : 효과의 종류 정의”
  9. 9. /61 위기 : 스크롤 효과툰 정의 Video 형 모션 언제 play 시작? rewind? reset? 움직임 = Video? 9
  10. 10. /61 위기 : 스크롤 효과툰 정의 스크롤 강제 제어 어색한 스크롤 체감 스크롤을 멈춰라 10
  11. 11. /61 위기 : 스크롤 효과툰 정의 “효과툰도 웹툰이다” 그간 많은 시도가 있었고, 효과툰은 잘 안 될꺼다… 만화는 정적이다. 플레시 애니메이션 왜 대세가 못되었나? 11
  12. 12. /61 위기 : 스크롤 효과툰 정의 모든 연출을 스크롤에 매핑 스크롤 거리 = 플레이 시간 웹툰 = 진행 시간의 제어 주체는 사용자 12
  13. 13. /61 절정 : 저작툴 “작가의 주기제작이 가능해야 한다” 주간연재의 어려움 ㅜㅜ 분량의 압박 효과툰은 또 하나의 짐? 13
  14. 14. /61 절정 : 저작툴 14
  15. 15. /61 Web 기반 웹툰 저작툴 • AngularJS + Node Webkit • 빠른 개발/대응 • 향후 Web App으로 진화 • 일반 독자 참여 확대 15 절정 : 저작툴
  16. 16. /61 절정 : 저작툴 가장 쉽게 • not Photoshop, easier than PowerPoint • 개발자 용어를 일반 용어로 • 최대한 쉽게 효과를 : Parallax, 자동원근 • 다양한 미리보기 • PSD 입력 16
  17. 17. /61 절정 : 네이버 웹툰 에디터 17
  18. 18. /61 절정 : 웹툰 뷰어 “시선 영역을 잡아라” 스크롤 + 움직이는 연출 연출은 언제부터? 연출의 언제까지? PC? 모바일? 18
  19. 19. /61 절정 : 서비스 “한 명의 독자도 놓치지 말자” 19
  20. 20. /61 절정 : 서비스 Native App (cocos2dx) 저사양폰에서도 모션을 즐길 방법이 있어야 한다 20
  21. 21. /61 절정 : 서비스 Web Viewer의 호환성 확보 Android Webview, Chrome view iOS UIWebview, WKWebview 21
  22. 22. /61 절정 : 서비스 Still cut 서비스 Auto still cut 편집기 그래도, 죽어도 모션이 안 되는 기기가 있다 22
  23. 23. /61 절정 : 서비스 Smooth scroll emulation PC wheel은 연출이 끊긴다 23
  24. 24. /61 절정 : 서비스 이미지 인식/자동 자르기 Auto crop 자동 layer merge 모바일 서비스 시 이미지 용량이 중요하다 24
  25. 25. /61 절정 : 서비스 toon2psd 원본이 없어졌어요. PSD가 필요해요. 25
  26. 26. /61 결말 : 효과툰 서비스 “World 1st full spec scroll view type comic service” 26
  27. 27. /61 결말 : 할 일 컷뷰 (컷툰) 형식의 효과툰 (페이지 전환 효과) 글로벌로 가자 - 다국어 번역을 위한 기술들 : 기계번역, 이미지번역 flash와 경쟁할 모션 플랫폼 모든 사람이 쉽게 사용하는 저작툴 : 챌린지리그 27
  28. 28. /61 2. 효과툰 저작툴 및 뷰어의 동작원리
  29. 29. /61 효과툰 모아보기 29
  30. 30. /61 효과툰 제작부터 감상까지 30
  31. 31. /61 효과툰 제작부터 감상까지 31
  32. 32. /61 효과툰 제작부터 감상까지 웹툰 에디터 32
  33. 33. /61 효과툰 제작부터 감상까지 33
  34. 34. /61 효과툰 제작부터 감상까지 34
  35. 35. 35
  36. 36. /61 서비스 관점 기획기술 관점 기획 • 서비스 완성도 • TTM (Time To Market) • 사용자 반응 • 매출 연계 개발회의 만큼 기획회의를 많이 한 프로젝트, 오히려 개발시간 단축효과 • 스펙 정의 • 새로운 기술 적용 • 서비스 지원범위 • 사용성 (UI/UX) • 향후 확장성 고려 개발자도 기획자 36
  37. 37. /61 • 고객(웹툰작가)의 요구사항을 파악하기 위해서 기획 초기 ~ 서비스 직전까지 반복적인 미팅 • 작업 중 불편사항 지속적인 해결 • 기존 웹툰 저작 과정도 개선하기 위한 편의기능 다수 제공 핵심고객의 요구사항 파악 37
  38. 38. /61 미션 효과툰도 웹툰이다 작가의 주기제작이 가능해야 한다 시선 영역을 잡아라 한 명의 독자도 놓치지 말자 38
  39. 39. /61 효과툰 = 애니메이션? 효과툰도 웹툰이다 효과는 컨텐츠의 전달을 거들 뿐 39
  40. 40. /61 효과의 종류 • 스크롤의 위치에 연계되는 효과 (scroll position mapped effects) 이동, 회전, 확대/축소, 투명도, 나타나기, 사라지기, 배경음악 페이드 인/아웃, 패럴랙스(parallax) • 즉시 재생되는 효과 (instantly played effects) 흔들기, 반짝이기, 둥실거림, 효과음, 휴대폰 진동, 애니메이션, 원근처리 • DEMO 40
  41. 41. /61 뷰어 구조도 Viewer PageManager AssetManager Page Layer Page Page Layer Layer load viewer-data.json 41
  42. 42. /61 렌더링 과정 Viewer PageManager Page Layer Scroller scroll event scroll position Calc renderProgress getActivePage Layer Layer Layer.renderAt(renderProgress) 42
  43. 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. 44. /61 웹툰 에디터 작가의 주기제작이 가능해야 한다 44
  45. 45. /61 리소스 최적화 > 2048px 45
  46. 46. /61 리소스 최적화 46
  47. 47. /61 리소스 최적화 47
  48. 48. /61 리소스 최적화 48
  49. 49. /61 연출 기준선 Render Line 시선 영역을 잡아라 49
  50. 50. /61 연출 진행률 Render Progress x% Render Progress 100% Render Progress 0% Render Line 50
  51. 51. /61 연출 타이밍 최적화 51
  52. 52. /61 연출 타이밍 최적화 시선 영역 52
  53. 53. /61 연출 타이밍 최적화 53
  54. 54. /61 연출 구간 최적화 54
  55. 55. /61 연출 구간 최적화 55
  56. 56. /61 연출구간 확장 연출 구간 최적화 56
  57. 57. /61 연출구간 확장 연출 구간 최적화 57
  58. 58. /61 렌더 옵션 PC 58
  59. 59. /61 렌더 옵션 iOS 59
  60. 60. /61 렌더 옵션 Android 한 명의 독자도 놓치지 말자 한 명의 독자라도 제대로 볼 수 있다면, 멋진 기술을 놓치지 말자. 60
  61. 61. /61 에필로그 61
  62. 62. /61 Q&A
  63. 63. /61 Thank You

×