Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad

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

Ad

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

Ad

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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 63 Ad
1 of 63 Ad

More Related Content

Slideshows for you (19)

More from NAVER D2 (20)

[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

×