[d2 오픈세미나]1.html5 api 옥상훈

28
HTML5 주요 API 네이버 오픈 기술 소개 네이버랩스 D2 에반젤리스트 옥상훈 부장 2014-05-23

Upload: naver-d2

Post on 15-Jan-2015

4.920 views

Category:

Technology


8 download

DESCRIPTION

 

TRANSCRIPT

Page 1: [D2 오픈세미나]1.html5 api 옥상훈

HTML5 주요 API 및 네이버 오픈 기술 소개

네이버랩스 D2 에반젤리스트

옥상훈 부장

2014-05-23

Page 2: [D2 오픈세미나]1.html5 api 옥상훈

2����������� ������������������  ����������� ������������������  

목차

•  HTML5����������� ������������������  기술적����������� ������������������  고려����������� ������������������  사항����������� ������������������  

•  HTML5����������� ������������������  API����������� ������������������  활용����������� ������������������  사례����������� ������������������  ����������� ������������������  ����������� ������������������  

����������� ������������������  

•  HTML5����������� ������������������  활용����������� ������������������  전략����������� ������������������  

•  네이버����������� ������������������  개발자����������� ������������������  지원����������� ������������������  프로그램����������� ������������������  ­–����������� ������������������  NAVER����������� ������������������  D2����������� ������������������  ����������� ������������������  소개����������� ������������������  

Page 3: [D2 오픈세미나]1.html5 api 옥상훈

3����������� ������������������  ����������� ������������������  

HTML5의 의미

•  업계����������� ������������������  표준����������� ������������������  기술����������� ������������������  –  브라우저����������� ������������������  제작사들(WHATWG)이����������� ������������������  주도한����������� ������������������  업계����������� ������������������  표준����������� ������������������  기술로서����������� ������������������  시맨틱����������� ������������������  마크업/접근성/호환성/기능����������� ������������������  확장을����������� ������������������  지향����������� ������������������  ����������� ������������������  

–  W3C에서����������� ������������������  2008년����������� ������������������  최초안����������� ������������������  발표,����������� ������������������  2014년����������� ������������������  4분기에����������� ������������������  최종����������� ������������������  표준안����������� ������������������  공개����������� ������������������  예정����������� ������������������  ����������� ������������������  ����������� ������������������  

•  웹����������� ������������������  =����������� ������������������  애플리케이션����������� ������������������  –  화면����������� ������������������  정의를����������� ������������������  위한����������� ������������������  마크업����������� ������������������  기능에����������� ������������������  다양한����������� ������������������  API들이����������� ������������������  추가되어����������� ������������������  애플리케이션����������� ������������������  형태����������� ������������������  개발����������� ������������������  가능����������� ������������������  

–  멀티미디어,����������� ������������������  데이터����������� ������������������  처리,����������� ������������������  위치정보,����������� ������������������  백그라운드����������� ������������������  프로세스,����������� ������������������  실시간����������� ������������������  통신,����������� ������������������  하드웨어����������� ������������������  관련����������� ������������������  등����������� ������������������  

•  크로스플랫폼����������� ������������������  지원����������� ������������������  –  다양한����������� ������������������  웹브라우저����������� ������������������  /����������� ������������������  모바일����������� ������������������  /스마트TV����������� ������������������  외에����������� ������������������  디바이스에서����������� ������������������  실행����������� ������������������  가능����������� ������������������  

–  N-Screen����������� ������������������  환경����������� ������������������  애플리케이션����������� ������������������  구현����������� ������������������  가능����������� ������������������  ����������� ������������������  

•  새로운����������� ������������������  API����������� ������������������  추가����������� ������������������  작업����������� ������������������  중����������� ������������������  –  디바이스����������� ������������������  통신,����������� ������������������  제어����������� ������������������  관련����������� ������������������  새로운����������� ������������������  API����������� ������������������  추가����������� ������������������  

–  Web����������� ������������������  Intents,����������� ������������������  Web����������� ������������������  NFC,����������� ������������������  WebRTC,����������� ������������������  WebGL����������� ������������������  등����������� ������������������  ����������� ������������������  

HTML5����������� ������������������  기술적����������� ������������������  고려사항����������� ������������������  

Page 4: [D2 오픈세미나]1.html5 api 옥상훈

4����������� ������������������  ����������� ������������������  

HTML5의 기술적 특징

•  HTML����������� ������������������  문서를����������� ������������������  구조적으로����������� ������������������  표현����������� ������������������  ����������� ������������������  –  Sementic����������� ������������������  엘리먼트들을����������� ������������������  추가����������� ������������������  

–  문서내����������� ������������������  머리말/꼬리말,����������� ������������������  네비게이션����������� ������������������  요소,����������� ������������������  컨텐츠����������� ������������������  등����������� ������������������  영역별����������� ������������������  의미����������� ������������������  표현����������� ������������������  ����������� ������������������  

•  멀티미디어����������� ������������������  ����������� ������������������  및����������� ������������������  그래픽����������� ������������������  처리����������� ������������������  가능����������� ������������������  –  Video,����������� ������������������  Audio����������� ������������������  지원을����������� ������������������  통한����������� ������������������  멀티미디어����������� ������������������  처리����������� ������������������  가능����������� ������������������  

–  SVG,����������� ������������������  Canvas,����������� ������������������  WebGL����������� ������������������  등을����������� ������������������  통한����������� ������������������  다양한����������� ������������������  2D,����������� ������������������  3D����������� ������������������  그래픽����������� ������������������  처리����������� ������������������  가능����������� ������������������  ->����������� ������������������  웹����������� ������������������  게임����������� ������������������  개발����������� ������������������  

•  디바이스����������� ������������������  제어����������� ������������������  ����������� ������������������  –  GPS,����������� ������������������  카메라,����������� ������������������  센서����������� ������������������  등����������� ������������������  하드웨어����������� ������������������  기능을����������� ������������������  웹에서����������� ������������������  직접����������� ������������������  제어����������� ������������������  가능����������� ������������������  ->����������� ������������������  웹����������� ������������������  애플리케이션����������� ������������������  개발����������� ������������������  ����������� ������������������  

•  데이터����������� ������������������  및����������� ������������������  서버����������� ������������������  통신����������� ������������������  ����������� ������������������  –  다양한����������� ������������������  형태의����������� ������������������  데이터����������� ������������������  저장����������� ������������������  &����������� ������������������  처리를����������� ������������������  통해����������� ������������������  오프라인����������� ������������������  모드����������� ������������������  처리����������� ������������������  및����������� ������������������  데이터����������� ������������������  활용����������� ������������������  가능����������� ������������������  

–  비동기����������� ������������������  통신,����������� ������������������  다중����������� ������������������  쓰레드����������� ������������������  처리를����������� ������������������  통해����������� ������������������  웹에서����������� ������������������  다양한����������� ������������������  통신����������� ������������������  및����������� ������������������  성능����������� ������������������  향상����������� ������������������  

HTML5����������� ������������������  기술적����������� ������������������  고려사항����������� ������������������  

Page 5: [D2 오픈세미나]1.html5 api 옥상훈

5����������� ������������������  ����������� ������������������  

기존 HTML vs HTML5

•  Syntax����������� ������������������  부문����������� ������������������  –  문서����������� ������������������  선언:����������� ������������������  HTML5����������� ������������������  문서����������� ������������������  상단에는����������� ������������������  <!DOCTYPE����������� ������������������  html>����������� ������������������  지정����������� ������������������  –  Encoding����������� ������������������  

•  기존����������� ������������������  HTML:����������� ������������������  <meta����������� ������������������  http-equiv="Content-Type"����������� ������������������  content="text/html;����������� ������������������  charset=UTF-8">����������� ������������������  

•  HTML5:����������� ������������������  <meta����������� ������������������  charset="UTF-8">����������� ������������������  

����������� ������������������  

•  API����������� ������������������  부문����������� ������������������  –  멀티미디어:����������� ������������������  video,����������� ������������������  audio,����������� ������������������  canvas,����������� ������������������  svg����������� ������������������  

–  실시간����������� ������������������  통신:����������� ������������������  Web����������� ������������������  Workers,����������� ������������������  Web����������� ������������������  Socket,����������� ������������������  Web����������� ������������������  Nofitication����������� ������������������  

–  하드웨어����������� ������������������  관련:����������� ������������������  Geolocation,����������� ������������������  Device����������� ������������������  Orientaion����������� ������������������  등����������� ������������������  

–  파일����������� ������������������  처리:����������� ������������������  Drag&Drop,����������� ������������������  FileSystem����������� ������������������  ����������� ������������������  

–  데이터����������� ������������������  처리:����������� ������������������  Local����������� ������������������  Storage,����������� ������������������  IndexedDB,����������� ������������������  Application����������� ������������������  Cache,����������� ������������������  Web����������� ������������������  SQL����������� ������������������  Database����������� ������������������  등����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  

HTML5����������� ������������������  기술적����������� ������������������  고려사항����������� ������������������  

Page 6: [D2 오픈세미나]1.html5 api 옥상훈

6����������� ������������������  ����������� ������������������  

기존 HTML vs HTML5 HTML5����������� ������������������  기술적����������� ������������������  고려사항����������� ������������������  

•  Language����������� ������������������  부문����������� ������������������  –  새로운����������� ������������������  추가����������� ������������������  된����������� ������������������  것����������� ������������������  들����������� ������������������  ����������� ������������������  

•  요소����������� ������������������  관련����������� ������������������  ����������� ������������������  

–  문서����������� ������������������  구조����������� ������������������  기술용:����������� ������������������  section,����������� ������������������  article,����������� ������������������  aside,����������� ������������������  header,����������� ������������������  footer,����������� ������������������  nav,����������� ������������������  figure,����������� ������������������  figcaption����������� ������������������  등����������� ������������������  

–  멀티미티어,����������� ������������������  그래픽,����������� ������������������  처리����������� ������������������  등����������� ������������������  새로운����������� ������������������  용도용:����������� ������������������  video,����������� ������������������  audio,����������� ������������������  source,����������� ������������������  track,����������� ������������������  embed,����������� ������������������  mark,����������� ������������������  progress����������� ������������������  등����������� ������������������  ����������� ������������������  

•  속성����������� ������������������  관련����������� ������������������  ����������� ������������������  

–  새로����������� ������������������  추가된����������� ������������������  전역����������� ������������������  속성����������� ������������������  추가:����������� ������������������  cotenteditable,����������� ������������������  draggable,����������� ������������������  hidden����������� ������������������  등����������� ������������������  

–  input����������� ������������������  태그����������� ������������������  처리를����������� ������������������  위한����������� ������������������  속성����������� ������������������  추가:����������� ������������������  tel,����������� ������������������  search,����������� ������������������  url,����������� ������������������  email,����������� ������������������  date,����������� ������������������  color,����������� ������������������  number����������� ������������������  등����������� ������������������  ����������� ������������������  ����������� ������������������  

–  변경����������� ������������������  &����������� ������������������  제거����������� ������������������  된����������� ������������������  것들����������� ������������������  ����������� ������������������  

•  요소����������� ������������������  관련����������� ������������������  ����������� ������������������  ����������� ������������������  –  불필요한����������� ������������������  요소����������� ������������������  제거����������� ������������������  :����������� ������������������  CSS로����������� ������������������  처리����������� ������������������  가능����������� ������������������  /����������� ������������������  Frame관련����������� ������������������  /����������� ������������������  사용도가����������� ������������������  떨어지는����������� ������������������  태그����������� ������������������  들����������� ������������������  

–  요소����������� ������������������  의미����������� ������������������  변경:����������� ������������������  a,����������� ������������������  address,����������� ������������������  b,����������� ������������������  hr,����������� ������������������  I,����������� ������������������  lable,����������� ������������������  menu,����������� ������������������  small,����������� ������������������  strong����������� ������������������  등����������� ������������������  

•  속성����������� ������������������  관련����������� ������������������  ����������� ������������������  –  CSS로����������� ������������������  대체����������� ������������������  가능한����������� ������������������  표현을����������� ������������������  다루는����������� ������������������  속성:����������� ������������������  align,����������� ������������������  background,����������� ������������������  bgcolor����������� ������������������  등등����������� ������������������  

Page 7: [D2 오픈세미나]1.html5 api 옥상훈

7����������� ������������������  ����������� ������������������  

HTML5 도입시 기술적 고려 사항

•  브라우저����������� ������������������  하위����������� ������������������  호환성����������� ������������������  지원����������� ������������������  ����������� ������������������  –  브라우저����������� ������������������  버전별����������� ������������������  지원����������� ������������������  스펙����������� ������������������  체크:����������� ������������������  http://caniuse.com����������� ������������������  

•  크로스����������� ������������������  브라우징����������� ������������������  이슈����������� ������������������  –  브라우저별����������� ������������������  HTML5����������� ������������������  &����������� ������������������  CSS3����������� ������������������  지원����������� ������������������  체크:����������� ������������������  http://fmbip.com/litmus����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

–  브라우저����������� ������������������  버전별����������� ������������������  에뮬레이터:����������� ������������������  http://www.browserstack.com/����������� ������������������  ����������� ������������������  

–  예:����������� ������������������  iOS����������� ������������������  단말기,����������� ������������������  userAgent값이����������� ������������������  없으므로����������� ������������������  플랫폼����������� ������������������  정보,����������� ������������������  스크린과����������� ������������������  해상도����������� ������������������  차이로����������� ������������������  파악����������� ������������������  ����������� ������������������  

HTML5����������� ������������������  기술적����������� ������������������  고려사항����������� ������������������  

Page 8: [D2 오픈세미나]1.html5 api 옥상훈

8����������� ������������������  ����������� ������������������  

HTML5 도입시 기술적 고려 사항

•  모바일����������� ������������������  브라우저����������� ������������������  파편화����������� ������������������  ����������� ������������������  –  2013년����������� ������������������  3월����������� ������������������  Google은����������� ������������������  Webkit을����������� ������������������  fork하여����������� ������������������  Blink����������� ������������������  랜더링����������� ������������������  엔진을����������� ������������������  Chrome����������� ������������������  28부터����������� ������������������  적용����������� ������������������  (Android����������� ������������������  4.1,����������� ������������������  Jelly����������� ������������������  bean

)����������� ������������������  

–  SBrowser는����������� ������������������  Chromium����������� ������������������  기반의����������� ������������������  삼성����������� ������������������  브라우저����������� ������������������  환경으로����������� ������������������  갤럭시S4����������� ������������������  4.2~,����������� ������������������  갤럭시노트3����������� ������������������  4.3~����������� ������������������  에����������� ������������������  탑재����������� ������������������  ����������� ������������������  

–  단말기별로����������� ������������������  브라우저����������� ������������������  동작이����������� ������������������  다를����������� ������������������  수����������� ������������������  있으므로����������� ������������������  UserAgent값����������� ������������������  체크����������� ������������������  및����������� ������������������  브라우저����������� ������������������  특성����������� ������������������  파악����������� ������������������  필요����������� ������������������  

����������� ������������������  ����������� ������������������  

HTML5����������� ������������������  기술적����������� ������������������  고려사항����������� ������������������  

Android OS 버전����������� ������������������   ����������� ������������������  랜더링����������� ������������������  엔진����������� ������������������   ����������� ������������������  기본����������� ������������������  브라우저����������� ������������������   ����������� ������������������  단말기����������� ������������������  

Android 2.x Webkit stock browser  ㅤ����������� ������������������  

Android 3.x Webkit stock browser  ㅤ����������� ������������������  

Android 4.0.x Webkit stock browser  ㅤ����������� ������������������  

Android 4.1.x Webkit stock browser  ㅤ����������� ������������������  

Chromium browser Nexus7 (기본����������� ������������������  브라우저로����������� ������������������  Chrome for Android 탑재)

Android 4.2.x Webkit stock browser  ㅤ����������� ������������������  

Chromium browser ����������� ������������������  갤럭시S4, 갤럭시노트3 (기본����������� ������������������  브라우저로����������� ������������������  SBrowser 탑재)

Android 4.3.x Webkit stock browser  ㅤ����������� ������������������  

Blink Chromium browser ����������� ������������������  갤럭시S4, 갤럭시노트3 (기본����������� ������������������  브라우저로����������� ������������������  SBrowser 탑재)

Android 4.4.x Blink Chromium browser ����������� ������������������  갤럭시S4 (기본����������� ������������������  브라우저로����������� ������������������  SBrowser 탑재) Nexus5 (기본����������� ������������������  브라우저로����������� ������������������  Chrome for Android 탑재)

Page 9: [D2 오픈세미나]1.html5 api 옥상훈

9����������� ������������������  ����������� ������������������  

HTML5 도입시 기술적 고려 사항

•  HTML5����������� ������������������  API����������� ������������������  이슈����������� ������������������  –  브라우저별����������� ������������������  HTML5����������� ������������������  api����������� ������������������  지원����������� ������������������  이슈����������� ������������������  

–  API����������� ������������������  자체����������� ������������������  이슈����������� ������������������  ����������� ������������������  

����������� ������������������  

•  성능����������� ������������������  관련����������� ������������������  이슈����������� ������������������  –  그래픽����������� ������������������  처리����������� ������������������  속도����������� ������������������  ����������� ������������������  

–  화면����������� ������������������  로딩����������� ������������������  속도����������� ������������������  

–  UI����������� ������������������  반응����������� ������������������  속도����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  

•  서버����������� ������������������  통신,����������� ������������������  데이터����������� ������������������  처리����������� ������������������  관련����������� ������������������  이슈����������� ������������������  –  데이터����������� ������������������  처리����������� ������������������  용량����������� ������������������  및����������� ������������������  속도����������� ������������������  한계����������� ������������������  

–  서버����������� ������������������  통신����������� ������������������  동기화����������� ������������������  및����������� ������������������  제어����������� ������������������  ����������� ������������������  

HTML5����������� ������������������  기술적����������� ������������������  고려사항����������� ������������������  

Page 10: [D2 오픈세미나]1.html5 api 옥상훈

10����������� ������������������  ����������� ������������������  

모바일 개발 관점에서 HTML5 고려 사항

•  주요����������� ������������������  장점����������� ������������������  –  크로스����������� ������������������  플랫폼����������� ������������������  (56%)����������� ������������������  

–  낮은����������� ������������������  개발����������� ������������������  비용����������� ������������������  (51%)����������� ������������������  

–  N스크린����������� ������������������  (33%)����������� ������������������  

–  러닝����������� ������������������  커브����������� ������������������  (27%)����������� ������������������  

����������� ������������������  ����������� ������������������  

출처:����������� ������������������  Visionmobile����������� ������������������  ,����������� ������������������  Developer����������� ������������������  Economics����������� ������������������  2014����������� ������������������  Q1,����������� ������������������  Survey����������� ������������������  

•  주요����������� ������������������  단점����������� ������������������  ����������� ������������������  –  성능����������� ������������������  이슈����������� ������������������  (45%)����������� ������������������  ����������� ������������������  

–  제한적인����������� ������������������  H/W����������� ������������������  API����������� ������������������  (37%)����������� ������������������  

–  네이티브����������� ������������������  요소와����������� ������������������  연계의����������� ������������������  어려움����������� ������������������  (29%)����������� ������������������  

–  성숙된����������� ������������������  개발����������� ������������������  프레임웍����������� ������������������  부족����������� ������������������  (20%)����������� ������������������  ����������� ������������������  

HTML5����������� ������������������  기술적����������� ������������������  고려사항����������� ������������������  

Page 11: [D2 오픈세미나]1.html5 api 옥상훈

11����������� ������������������  ����������� ������������������  

네이버 웹 서비스 HTML5 적용 현황

•  2010년����������� ������������������  부터����������� ������������������  HTML5로����������� ������������������  점진적����������� ������������������  전환����������� ������������������  ����������� ������������������  –  사용자����������� ������������������  웹접근성,����������� ������������������  모바일����������� ������������������  환경����������� ������������������  지원����������� ������������������  ����������� ������������������  

–  브라우저����������� ������������������  버전별����������� ������������������  하위����������� ������������������  호환성����������� ������������������  지원����������� ������������������  

–  브라우저����������� ������������������  종류별����������� ������������������  지원����������� ������������������  속성����������� ������������������  고려����������� ������������������  

•  HTML5����������� ������������������  적용����������� ������������������  현황����������� ������������������  ����������� ������������������  –  HTML5����������� ������������������  적용����������� ������������������  서비스����������� ������������������  

•  메인,����������� ������������������  뉴스,����������� ������������������  지도,����������� ������������������  영화,����������� ������������������  메일,����������� ������������������  포스트,����������� ������������������  네이버me����������� ������������������  등����������� ������������������  

•  모바일����������� ������������������  UX����������� ������������������  대응(플리킹,����������� ������������������  스크롤)을����������� ������������������  위해����������� ������������������  일부는����������� ������������������  모바일����������� ������������������  전용����������� ������������������  페이지로����������� ������������������  서비스����������� ������������������  

–  HTML4����������� ������������������  적용����������� ������������������  서비스����������� ������������������  ����������� ������������������  

•  사전,����������� ������������������  증권,����������� ������������������  부동산,����������� ������������������  영화,����������� ������������������  뮤직,����������� ������������������  책,����������� ������������������  웹툰,����������� ������������������  카페,����������� ������������������  블로그,����������� ������������������  ����������� ������������������  지식인,����������� ������������������  쇼핑����������� ������������������  ����������� ������������������  등����������� ������������������  

•  HTML5기반����������� ������������������  모바일����������� ������������������  웹����������� ������������������  별도����������� ������������������  서비스����������� ������������������  중����������� ������������������  

����������� ������������������  ����������� ������������������  

HTML5����������� ������������������  API����������� ������������������  활용사례����������� ������������������  

Page 12: [D2 오픈세미나]1.html5 api 옥상훈

12����������� ������������������  ����������� ������������������  

HTML5 기반 실시간 메시징

•  데이터����������� ������������������  ����������� ������������������  저장����������� ������������������  –  IndexedDB:����������� ������������������  친구,����������� ������������������  대화����������� ������������������  등����������� ������������������  데이터����������� ������������������  저장����������� ������������������  

–  localStorage:����������� ������������������  간단한����������� ������������������  환경����������� ������������������  정보(기본����������� ������������������  설정값)����������� ������������������  저장,����������� ������������������  단����������� ������������������  String����������� ������������������  타입이므로����������� ������������������  대용량����������� ������������������  저장용으로는����������� ������������������  부적합����������� ������������������  

•  메시지����������� ������������������  전송����������� ������������������  –  ArrayBuffer/Blob:����������� ������������������  라인����������� ������������������  대화의����������� ������������������  이미지����������� ������������������  메시지����������� ������������������  송수신,����������� ������������������  IndexedDB에����������� ������������������  이미지����������� ������������������  저장����������� ������������������  가능����������� ������������������  

–  FileReader:����������� ������������������  파일을����������� ������������������  ArrayBuffer로����������� ������������������  변환,����������� ������������������  이미지����������� ������������������  타입����������� ������������������  데이터����������� ������������������  송수신에����������� ������������������  활용����������� ������������������  

•  통신����������� ������������������  처리����������� ������������������  ����������� ������������������  –  WebWorker����������� ������������������  

•  라인����������� ������������������  메신저����������� ������������������  통신에����������� ������������������  적용����������� ������������������  (메시지,����������� ������������������  친구추가,����������� ������������������  그룹����������� ������������������  생성)����������� ������������������  •  worker����������� ������������������  내부에서����������� ������������������  리소스����������� ������������������  접근����������� ������������������  위해����������� ������������������  별도의����������� ������������������  워커를����������� ������������������  위한����������� ������������������  리소스����������� ������������������  추가����������� ������������������  

•  worker����������� ������������������  간����������� ������������������  메모리����������� ������������������  공유가����������� ������������������  안되므로����������� ������������������  각����������� ������������������  워커에����������� ������������������  필요한����������� ������������������  정보����������� ������������������  별도����������� ������������������  전달����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (SharedWorker는����������� ������������������  Firefox����������� ������������������  os에서����������� ������������������  미지원)����������� ������������������  

•  ����������� ������������������  기타����������� ������������������  ����������� ������������������  –  Audio:����������� ������������������  메시지����������� ������������������  도착시����������� ������������������  알림음����������� ������������������  재생����������� ������������������  

–  Number����������� ������������������  /����������� ������������������  Phone����������� ������������������  Type����������� ������������������  Input:����������� ������������������  숫자전용����������� ������������������  /����������� ������������������  휴대폰����������� ������������������  전용����������� ������������������  키보드����������� ������������������  입력시����������� ������������������  

HTML5����������� ������������������  API����������� ������������������  활용사례����������� ������������������  

Page 13: [D2 오픈세미나]1.html5 api 옥상훈

13����������� ������������������  ����������� ������������������  

HTML5 기반 화상채팅

•  주요����������� ������������������  활용����������� ������������������  기술����������� ������������������  

–  WebSocket����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

•  웹����������� ������������������  메신저����������� ������������������  알리미����������� ������������������  기능����������� ������������������  구현을����������� ������������������  위해����������� ������������������  node-webkit����������� ������������������  과����������� ������������������  node����������� ������������������  server����������� ������������������  간의����������� ������������������  통신을����������� ������������������  위해����������� ������������������  사용����������� ������������������  

•  Peer-to-Peer����������� ������������������  기술이어서����������� ������������������  다자간대화����������� ������������������  기능을����������� ������������������  구현����������� ������������������  위해서는����������� ������������������  별도����������� ������������������  서버를����������� ������������������  통한����������� ������������������  컨넥션����������� ������������������  관리����������� ������������������  ����������� ������������������  

•  크로스����������� ������������������  브라우징����������� ������������������  이슈����������� ������������������  ����������� ������������������  해결����������� ������������������  위해����������� ������������������  socket.io����������� ������������������  라이브러리����������� ������������������  활용����������� ������������������  

–  WebRTC����������� ������������������  ����������� ������������������  

•  영상����������� ������������������  음성����������� ������������������  통신:����������� ������������������  스트리밍����������� ������������������  관련����������� ������������������  (getUserMedia/Stream����������� ������������������  API)����������� ������������������  을����������� ������������������  통해����������� ������������������  video/audio����������� ������������������  stream����������� ������������������  을����������� ������������������  받기����������� ������������������  위해����������� ������������������  ����������� ������������������  

•  Peer-to-Peer����������� ������������������  기술이어서����������� ������������������  다자간대화����������� ������������������  기능을����������� ������������������  구현����������� ������������������  위해서는����������� ������������������  별도로����������� ������������������  컨넥션����������� ������������������  관리����������� ������������������  ����������� ������������������  

•  크로스����������� ������������������  브라우징����������� ������������������  이슈����������� ������������������  ����������� ������������������  

–  Canvas����������� ������������������  

•  소켓으로����������� ������������������  넘어온����������� ������������������  데이터����������� ������������������  중����������� ������������������  이미지����������� ������������������  처리를����������� ������������������  위해����������� ������������������  사용����������� ������������������  

HTML5����������� ������������������  API����������� ������������������  활용사례����������� ������������������  

Page 14: [D2 오픈세미나]1.html5 api 옥상훈

14����������� ������������������  ����������� ������������������  

HTML5 기반 그림판

•  주요����������� ������������������  활용����������� ������������������  기술����������� ������������������  

–  Canvas����������� ������������������  •  그림판의����������� ������������������  코어����������� ������������������  스테이지����������� ������������������  영역에����������� ������������������  Canvas를����������� ������������������  이용하여����������� ������������������  비트맵����������� ������������������  Draw����������� ������������������  구현.����������� ������������������  

•  동일����������� ������������������  출처����������� ������������������  이미지만����������� ������������������  Canvas에����������� ������������������  드로잉����������� ������������������  가능����������� ������������������  

•  이미지를����������� ������������������  미리����������� ������������������  로딩하지����������� ������������������  않으면����������� ������������������  사용����������� ������������������  Canvas에����������� ������������������  그릴����������� ������������������  때����������� ������������������  지연됨����������� ������������������  ����������� ������������������  

–  File����������� ������������������  관련����������� ������������������  API����������� ������������������  

•  File����������� ������������������  API����������� ������������������  최대����������� ������������������  업로드����������� ������������������  한도는����������� ������������������  1.4G����������� ������������������  

����������� ������������������  ->����������� ������������������  파일을����������� ������������������  쪼개어서����������� ������������������  서버에����������� ������������������  합치면����������� ������������������  더����������� ������������������  큰����������� ������������������  크기도����������� ������������������  가능����������� ������������������  ����������� ������������������  

•  파일을����������� ������������������  저장����������� ������������������  기능은����������� ������������������  대부분����������� ������������������  미지원����������� ������������������  ����������� ������������������  ����������� ������������������  

http://caniuse.com/#feat=filesystem����������� ������������������  ����������� ������������������  

–  Text����������� ������������������  API����������� ������������������  for����������� ������������������  Canvas����������� ������������������  •  캔버스에서����������� ������������������  글자를����������� ������������������  그리기����������� ������������������  ����������� ������������������  ����������� ������������������  

����������� ������������������  

–  Local����������� ������������������  Storage����������� ������������������  •  사용자가����������� ������������������  선택한����������� ������������������  툴의����������� ������������������  옵션값����������� ������������������  저장용����������� ������������������  ����������� ������������������  

HTML5����������� ������������������  API����������� ������������������  활용사례����������� ������������������  

Page 15: [D2 오픈세미나]1.html5 api 옥상훈

15����������� ������������������  ����������� ������������������  

HTML기반 게임

•  HTML5의����������� ������������������  업데이트의����������� ������������������  용이성����������� ������������������  활용����������� ������������������  

•  그래픽,����������� ������������������  애니메이션����������� ������������������  성능����������� ������������������  향상����������� ������������������  위해����������� ������������������  네이티브����������� ������������������  기술����������� ������������������  활용����������� ������������������  

HTML5����������� ������������������   HTML5����������� ������������������  +����������� ������������������  웹게임����������� ������������������  엔진����������� ������������������   HTML5����������� ������������������  +����������� ������������������  커스텀����������� ������������������  웹뷰����������� ������������������  

§  웹게임����������� ������������������  엔진����������� ������������������  

����������� ������������������  ����������� ������������������  -����������� ������������������  2D����������� ������������������  Graphics����������� ������������������  /����������� ������������������  Drawing����������� ������������������  성능����������� ������������������  향상����������� ������������������  

����������� ������������������  ����������� ������������������  -����������� ������������������  게임����������� ������������������  개발����������� ������������������  전용����������� ������������������  IDE����������� ������������������  제공����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  -����������� ������������������  게임����������� ������������������  UI����������� ������������������  개발����������� ������������������  및����������� ������������������  애니메이션����������� ������������������  보기����������� ������������������  지원����������� ������������������  

����������� ������������������  ����������� ������������������  -����������� ������������������  게임����������� ������������������  화면����������� ������������������  구성����������� ������������������  위한����������� ������������������  UI����������� ������������������  컴포넌트����������� ������������������  제공����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

§  커스텀����������� ������������������  웹뷰����������� ������������������  ����������� ������������������  

����������� ������������������  -����������� ������������������  안드로이드����������� ������������������  WebView의����������� ������������������  성능����������� ������������������  향상을����������� ������������������  

위해����������� ������������������  자체����������� ������������������  개발한����������� ������������������  Custom����������� ������������������  WebView����������� ������������������  

-  멀티프로세싱����������� ������������������  처리를����������� ������������������  통해����������� ������������������  안정성����������� ������������������  향상����������� ������������������  

-  GPU를����������� ������������������  활용한����������� ������������������  렌더링����������� ������������������  성능����������� ������������������  향상����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (네이버앱을����������� ������������������  비롯한����������� ������������������  일부����������� ������������������  모바일����������� ������������������  게임

에����������� ������������������  적용����������� ������������������  )����������� ������������������  

����������� ������������������  

HTML5����������� ������������������  API����������� ������������������  활용사례����������� ������������������  

Page 16: [D2 오픈세미나]1.html5 api 옥상훈

16����������� ������������������  ����������� ������������������  

HTML5 활용 전략

•  사용자����������� ������������������  환경����������� ������������������  및����������� ������������������  하위����������� ������������������  호환성을����������� ������������������  고려한����������� ������������������  적용����������� ������������������  –  PC웹은����������� ������������������  HTML5로����������� ������������������  점진적����������� ������������������  변경����������� ������������������  

–  모바일의����������� ������������������  경우����������� ������������������  웹은����������� ������������������  HTML5,����������� ������������������  네이티브����������� ������������������  앱����������� ������������������  별도����������� ������������������  서비스����������� ������������������  

•  모바일����������� ������������������  브라우저����������� ������������������  파편화에����������� ������������������  따른����������� ������������������  이슈����������� ������������������  대응����������� ������������������  ����������� ������������������  –  모바일����������� ������������������  브라우저����������� ������������������  특성에����������� ������������������  따른����������� ������������������  일부����������� ������������������  브라우저/디바이스에서����������� ������������������  작동����������� ������������������  문제����������� ������������������  및����������� ������������������  성능����������� ������������������  대응����������� ������������������  ����������� ������������������  

–  HTML5에����������� ������������������  커스터마이즈된����������� ������������������  웹뷰을����������� ������������������  적용함으로써����������� ������������������  웹뷰����������� ������������������  이슈����������� ������������������  및����������� ������������������  그래픽����������� ������������������  성능����������� ������������������  향상����������� ������������������  ����������� ������������������  

•  HTML5����������� ������������������  기반����������� ������������������  게임은����������� ������������������  네이티브����������� ������������������  기술과����������� ������������������  융합����������� ������������������  ����������� ������������������  –  HTML5����������� ������������������  단독����������� ������������������  적용����������� ������������������  보다는����������� ������������������  성능����������� ������������������  향상을����������� ������������������  위해����������� ������������������  네이티브����������� ������������������  기술과����������� ������������������  융합����������� ������������������  

–  HTML5에����������� ������������������  웹게임엔진을����������� ������������������  적용함으로써����������� ������������������  개발생산성����������� ������������������  ����������� ������������������  및����������� ������������������  그래픽����������� ������������������  성능����������� ������������������  향상����������� ������������������  ����������� ������������������  

HTML5����������� ������������������  활용����������� ������������������  전략����������� ������������������  

Page 17: [D2 오픈세미나]1.html5 api 옥상훈

17����������� ������������������  ����������� ������������������  

References

•  네이버����������� ������������������  hello����������� ������������������  world����������� ������������������  블로그����������� ������������������  ����������� ������������������  –  http://helloworld.naver.com����������� ������������������  ����������� ������������������  

•  네이버����������� ������������������  웹접근성����������� ������������������  블로그����������� ������������������  –  http://nuli.navercorp.com/blog����������� ������������������  ����������� ������������������  

•  JindoJS����������� ������������������  개발팀����������� ������������������  블로그����������� ������������������  ����������� ������������������  –  http://jindo.dev.naver.com/blog����������� ������������������  

•  차세대����������� ������������������  웹����������� ������������������  환경에서의����������� ������������������  UI/UX����������� ������������������  기술����������� ������������������  표준화����������� ������������������  동향,����������� ������������������  전종홍����������� ������������������  –  http://www.slideshare.net/hollobit/20130613-uiuxr4?qid=9ab2fa3a-0326-4008-a46d-6156f956d90f&v=default&b=&from

_search=12����������� ������������������  ����������� ������������������  

Page 18: [D2 오픈세미나]1.html5 api 옥상훈

18����������� ������������������  ����������� ������������������  

NAVER D2 – 네이버의 개발자 지원 프로그램

Page 19: [D2 오픈세미나]1.html5 api 옥상훈

19����������� ������������������  ����������� ������������������  

NAVER D2 – 네이버의 개발자 지원 프로그램

외부����������� ������������������  개발자들의����������� ������������������  역량����������� ������������������  향상을����������� ������������������  위해����������� ������������������  네이버는����������� ������������������  아래와����������� ������������������  같은����������� ������������������  지원을����������� ������������������  하고����������� ������������������  있습니다.����������� ������������������  

Page 20: [D2 오픈세미나]1.html5 api 옥상훈

20����������� ������������������  ����������� ������������������  

개발자 커뮤니티 스터디 지원

Page 21: [D2 오픈세미나]1.html5 api 옥상훈

21����������� ������������������  ����������� ������������������  

오픈 세미나

Page 22: [D2 오픈세미나]1.html5 api 옥상훈

22����������� ������������������  ����������� ������������������  

hello world 블로그

Page 23: [D2 오픈세미나]1.html5 api 옥상훈

23����������� ������������������  ����������� ������������������  

hello world 블로그

Page 24: [D2 오픈세미나]1.html5 api 옥상훈

24����������� ������������������  ����������� ������������������  

DEVIEW 컨퍼런스����������� ������������������  

Page 25: [D2 오픈세미나]1.html5 api 옥상훈

25����������� ������������������  ����������� ������������������  

협업����������� ������������������  개발����������� ������������������  플랫폼����������� ������������������  Yobi����������� ������������������  

Page 26: [D2 오픈세미나]1.html5 api 옥상훈

26����������� ������������������  ����������� ������������������  

오픈소스����������� ������������������  XE����������� ������������������  개발����������� ������������������  지원����������� ������������������  

Page 27: [D2 오픈세미나]1.html5 api 옥상훈

27����������� ������������������  ����������� ������������������  

오픈소스����������� ������������������  Arcus����������� ������������������  

•  네이버가����������� ������������������  사용하고����������� ������������������  있는����������� ������������������  memcached를����������� ������������������  기반����������� ������������������  fault-tolerant����������� ������������������  분산����������� ������������������  캐시����������� ������������������  시스템����������� ������������������  

•  국내����������� ������������������  최초����������� ������������������  오픈����������� ������������������  소스����������� ������������������  캐시����������� ������������������  솔루션����������� ������������������  

����������� ������������������  

http://github.com/naver/arcus����������� ������������������  ����������� ������������������  

Page 28: [D2 오픈세미나]1.html5 api 옥상훈

- 감사합니다 -

facebook.com/naverd2����������� ������������������  

dev.naver.com/d2����������� ������������������