Post on 15-Jan-2015
description
HTML5 주요 API 및 네이버 오픈 기술 소개
네이버랩스 D2 에반젤리스트
옥상훈 부장
2014-05-23
2����������� ������������������ ����������� ������������������
목차
• HTML5����������� ������������������ 기술적����������� ������������������ 고려����������� ������������������ 사항����������� ������������������
• HTML5����������� ������������������ API����������� ������������������ 활용����������� ������������������ 사례����������� ������������������ ����������� ������������������ ����������� ������������������
����������� ������������������
• HTML5����������� ������������������ 활용����������� ������������������ 전략����������� ������������������
• 네이버����������� ������������������ 개발자����������� ������������������ 지원����������� ������������������ 프로그램����������� ������������������ –����������� ������������������ NAVER����������� ������������������ D2����������� ������������������ ����������� ������������������ 소개����������� ������������������
3����������� ������������������ ����������� ������������������
HTML5의 의미
• 업계����������� ������������������ 표준����������� ������������������ 기술����������� ������������������ – 브라우저����������� ������������������ 제작사들(WHATWG)이����������� ������������������ 주도한����������� ������������������ 업계����������� ������������������ 표준����������� ������������������ 기술로서����������� ������������������ 시맨틱����������� ������������������ 마크업/접근성/호환성/기능����������� ������������������ 확장을����������� ������������������ 지향����������� ������������������ ����������� ������������������
– W3C에서����������� ������������������ 2008년����������� ������������������ 최초안����������� ������������������ 발표,����������� ������������������ 2014년����������� ������������������ 4분기에����������� ������������������ 최종����������� ������������������ 표준안����������� ������������������ 공개����������� ������������������ 예정����������� ������������������ ����������� ������������������ ����������� ������������������
• 웹����������� ������������������ =����������� ������������������ 애플리케이션����������� ������������������ – 화면����������� ������������������ 정의를����������� ������������������ 위한����������� ������������������ 마크업����������� ������������������ 기능에����������� ������������������ 다양한����������� ������������������ API들이����������� ������������������ 추가되어����������� ������������������ 애플리케이션����������� ������������������ 형태����������� ������������������ 개발����������� ������������������ 가능����������� ������������������
– 멀티미디어,����������� ������������������ 데이터����������� ������������������ 처리,����������� ������������������ 위치정보,����������� ������������������ 백그라운드����������� ������������������ 프로세스,����������� ������������������ 실시간����������� ������������������ 통신,����������� ������������������ 하드웨어����������� ������������������ 관련����������� ������������������ 등����������� ������������������
• 크로스플랫폼����������� ������������������ 지원����������� ������������������ – 다양한����������� ������������������ 웹브라우저����������� ������������������ /����������� ������������������ 모바일����������� ������������������ /스마트TV����������� ������������������ 외에����������� ������������������ 디바이스에서����������� ������������������ 실행����������� ������������������ 가능����������� ������������������
– N-Screen����������� ������������������ 환경����������� ������������������ 애플리케이션����������� ������������������ 구현����������� ������������������ 가능����������� ������������������ ����������� ������������������
• 새로운����������� ������������������ API����������� ������������������ 추가����������� ������������������ 작업����������� ������������������ 중����������� ������������������ – 디바이스����������� ������������������ 통신,����������� ������������������ 제어����������� ������������������ 관련����������� ������������������ 새로운����������� ������������������ API����������� ������������������ 추가����������� ������������������
– Web����������� ������������������ Intents,����������� ������������������ Web����������� ������������������ NFC,����������� ������������������ WebRTC,����������� ������������������ WebGL����������� ������������������ 등����������� ������������������ ����������� ������������������
HTML5����������� ������������������ 기술적����������� ������������������ 고려사항����������� ������������������
4����������� ������������������ ����������� ������������������
HTML5의 기술적 특징
• HTML����������� ������������������ 문서를����������� ������������������ 구조적으로����������� ������������������ 표현����������� ������������������ ����������� ������������������ – Sementic����������� ������������������ 엘리먼트들을����������� ������������������ 추가����������� ������������������
– 문서내����������� ������������������ 머리말/꼬리말,����������� ������������������ 네비게이션����������� ������������������ 요소,����������� ������������������ 컨텐츠����������� ������������������ 등����������� ������������������ 영역별����������� ������������������ 의미����������� ������������������ 표현����������� ������������������ ����������� ������������������
• 멀티미디어����������� ������������������ ����������� ������������������ 및����������� ������������������ 그래픽����������� ������������������ 처리����������� ������������������ 가능����������� ������������������ – Video,����������� ������������������ Audio����������� ������������������ 지원을����������� ������������������ 통한����������� ������������������ 멀티미디어����������� ������������������ 처리����������� ������������������ 가능����������� ������������������
– SVG,����������� ������������������ Canvas,����������� ������������������ WebGL����������� ������������������ 등을����������� ������������������ 통한����������� ������������������ 다양한����������� ������������������ 2D,����������� ������������������ 3D����������� ������������������ 그래픽����������� ������������������ 처리����������� ������������������ 가능����������� ������������������ ->����������� ������������������ 웹����������� ������������������ 게임����������� ������������������ 개발����������� ������������������
• 디바이스����������� ������������������ 제어����������� ������������������ ����������� ������������������ – GPS,����������� ������������������ 카메라,����������� ������������������ 센서����������� ������������������ 등����������� ������������������ 하드웨어����������� ������������������ 기능을����������� ������������������ 웹에서����������� ������������������ 직접����������� ������������������ 제어����������� ������������������ 가능����������� ������������������ ->����������� ������������������ 웹����������� ������������������ 애플리케이션����������� ������������������ 개발����������� ������������������ ����������� ������������������
• 데이터����������� ������������������ 및����������� ������������������ 서버����������� ������������������ 통신����������� ������������������ ����������� ������������������ – 다양한����������� ������������������ 형태의����������� ������������������ 데이터����������� ������������������ 저장����������� ������������������ &����������� ������������������ 처리를����������� ������������������ 통해����������� ������������������ 오프라인����������� ������������������ 모드����������� ������������������ 처리����������� ������������������ 및����������� ������������������ 데이터����������� ������������������ 활용����������� ������������������ 가능����������� ������������������
– 비동기����������� ������������������ 통신,����������� ������������������ 다중����������� ������������������ 쓰레드����������� ������������������ 처리를����������� ������������������ 통해����������� ������������������ 웹에서����������� ������������������ 다양한����������� ������������������ 통신����������� ������������������ 및����������� ������������������ 성능����������� ������������������ 향상����������� ������������������
HTML5����������� ������������������ 기술적����������� ������������������ 고려사항����������� ������������������
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����������� ������������������ 기술적����������� ������������������ 고려사항����������� ������������������
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����������� ������������������ 등등����������� ������������������
7����������� ������������������ ����������� ������������������
HTML5 도입시 기술적 고려 사항
• 브라우저����������� ������������������ 하위����������� ������������������ 호환성����������� ������������������ 지원����������� ������������������ ����������� ������������������ – 브라우저����������� ������������������ 버전별����������� ������������������ 지원����������� ������������������ 스펙����������� ������������������ 체크:����������� ������������������ http://caniuse.com����������� ������������������
• 크로스����������� ������������������ 브라우징����������� ������������������ 이슈����������� ������������������ – 브라우저별����������� ������������������ HTML5����������� ������������������ &����������� ������������������ CSS3����������� ������������������ 지원����������� ������������������ 체크:����������� ������������������ http://fmbip.com/litmus����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������
– 브라우저����������� ������������������ 버전별����������� ������������������ 에뮬레이터:����������� ������������������ http://www.browserstack.com/����������� ������������������ ����������� ������������������
– 예:����������� ������������������ iOS����������� ������������������ 단말기,����������� ������������������ userAgent값이����������� ������������������ 없으므로����������� ������������������ 플랫폼����������� ������������������ 정보,����������� ������������������ 스크린과����������� ������������������ 해상도����������� ������������������ 차이로����������� ������������������ 파악����������� ������������������ ����������� ������������������
HTML5����������� ������������������ 기술적����������� ������������������ 고려사항����������� ������������������
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 탑재)
9����������� ������������������ ����������� ������������������
HTML5 도입시 기술적 고려 사항
• HTML5����������� ������������������ API����������� ������������������ 이슈����������� ������������������ – 브라우저별����������� ������������������ HTML5����������� ������������������ api����������� ������������������ 지원����������� ������������������ 이슈����������� ������������������
– API����������� ������������������ 자체����������� ������������������ 이슈����������� ������������������ ����������� ������������������
����������� ������������������
• 성능����������� ������������������ 관련����������� ������������������ 이슈����������� ������������������ – 그래픽����������� ������������������ 처리����������� ������������������ 속도����������� ������������������ ����������� ������������������
– 화면����������� ������������������ 로딩����������� ������������������ 속도����������� ������������������
– UI����������� ������������������ 반응����������� ������������������ 속도����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������
• 서버����������� ������������������ 통신,����������� ������������������ 데이터����������� ������������������ 처리����������� ������������������ 관련����������� ������������������ 이슈����������� ������������������ – 데이터����������� ������������������ 처리����������� ������������������ 용량����������� ������������������ 및����������� ������������������ 속도����������� ������������������ 한계����������� ������������������
– 서버����������� ������������������ 통신����������� ������������������ 동기화����������� ������������������ 및����������� ������������������ 제어����������� ������������������ ����������� ������������������
HTML5����������� ������������������ 기술적����������� ������������������ 고려사항����������� ������������������
10����������� ������������������ ����������� ������������������
모바일 개발 관점에서 HTML5 고려 사항
• 주요����������� ������������������ 장점����������� ������������������ – 크로스����������� ������������������ 플랫폼����������� ������������������ (56%)����������� ������������������
– 낮은����������� ������������������ 개발����������� ������������������ 비용����������� ������������������ (51%)����������� ������������������
– N스크린����������� ������������������ (33%)����������� ������������������
– 러닝����������� ������������������ 커브����������� ������������������ (27%)����������� ������������������
����������� ������������������ ����������� ������������������
출처:����������� ������������������ Visionmobile����������� ������������������ ,����������� ������������������ Developer����������� ������������������ Economics����������� ������������������ 2014����������� ������������������ Q1,����������� ������������������ Survey����������� ������������������
• 주요����������� ������������������ 단점����������� ������������������ ����������� ������������������ – 성능����������� ������������������ 이슈����������� ������������������ (45%)����������� ������������������ ����������� ������������������
– 제한적인����������� ������������������ H/W����������� ������������������ API����������� ������������������ (37%)����������� ������������������
– 네이티브����������� ������������������ 요소와����������� ������������������ 연계의����������� ������������������ 어려움����������� ������������������ (29%)����������� ������������������
– 성숙된����������� ������������������ 개발����������� ������������������ 프레임웍����������� ������������������ 부족����������� ������������������ (20%)����������� ������������������ ����������� ������������������
HTML5����������� ������������������ 기술적����������� ������������������ 고려사항����������� ������������������
11����������� ������������������ ����������� ������������������
네이버 웹 서비스 HTML5 적용 현황
• 2010년����������� ������������������ 부터����������� ������������������ HTML5로����������� ������������������ 점진적����������� ������������������ 전환����������� ������������������ ����������� ������������������ – 사용자����������� ������������������ 웹접근성,����������� ������������������ 모바일����������� ������������������ 환경����������� ������������������ 지원����������� ������������������ ����������� ������������������
– 브라우저����������� ������������������ 버전별����������� ������������������ 하위����������� ������������������ 호환성����������� ������������������ 지원����������� ������������������
– 브라우저����������� ������������������ 종류별����������� ������������������ 지원����������� ������������������ 속성����������� ������������������ 고려����������� ������������������
• HTML5����������� ������������������ 적용����������� ������������������ 현황����������� ������������������ ����������� ������������������ – HTML5����������� ������������������ 적용����������� ������������������ 서비스����������� ������������������
• 메인,����������� ������������������ 뉴스,����������� ������������������ 지도,����������� ������������������ 영화,����������� ������������������ 메일,����������� ������������������ 포스트,����������� ������������������ 네이버me����������� ������������������ 등����������� ������������������
• 모바일����������� ������������������ UX����������� ������������������ 대응(플리킹,����������� ������������������ 스크롤)을����������� ������������������ 위해����������� ������������������ 일부는����������� ������������������ 모바일����������� ������������������ 전용����������� ������������������ 페이지로����������� ������������������ 서비스����������� ������������������
– HTML4����������� ������������������ 적용����������� ������������������ 서비스����������� ������������������ ����������� ������������������
• 사전,����������� ������������������ 증권,����������� ������������������ 부동산,����������� ������������������ 영화,����������� ������������������ 뮤직,����������� ������������������ 책,����������� ������������������ 웹툰,����������� ������������������ 카페,����������� ������������������ 블로그,����������� ������������������ ����������� ������������������ 지식인,����������� ������������������ 쇼핑����������� ������������������ ����������� ������������������ 등����������� ������������������
• HTML5기반����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 별도����������� ������������������ 서비스����������� ������������������ 중����������� ������������������
����������� ������������������ ����������� ������������������
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����������� ������������������ 활용사례����������� ������������������
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����������� ������������������ 활용사례����������� ������������������
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����������� ������������������ 활용사례����������� ������������������
15����������� ������������������ ����������� ������������������
HTML기반 게임
• HTML5의����������� ������������������ 업데이트의����������� ������������������ 용이성����������� ������������������ 활용����������� ������������������
• 그래픽,����������� ������������������ 애니메이션����������� ������������������ 성능����������� ������������������ 향상����������� ������������������ 위해����������� ������������������ 네이티브����������� ������������������ 기술����������� ������������������ 활용����������� ������������������
HTML5����������� ������������������ HTML5����������� ������������������ +����������� ������������������ 웹게임����������� ������������������ 엔진����������� ������������������ HTML5����������� ������������������ +����������� ������������������ 커스텀����������� ������������������ 웹뷰����������� ������������������
§ 웹게임����������� ������������������ 엔진����������� ������������������
����������� ������������������ ����������� ������������������ -����������� ������������������ 2D����������� ������������������ Graphics����������� ������������������ /����������� ������������������ Drawing����������� ������������������ 성능����������� ������������������ 향상����������� ������������������
����������� ������������������ ����������� ������������������ -����������� ������������������ 게임����������� ������������������ 개발����������� ������������������ 전용����������� ������������������ IDE����������� ������������������ 제공����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ -����������� ������������������ 게임����������� ������������������ UI����������� ������������������ 개발����������� ������������������ 및����������� ������������������ 애니메이션����������� ������������������ 보기����������� ������������������ 지원����������� ������������������
����������� ������������������ ����������� ������������������ -����������� ������������������ 게임����������� ������������������ 화면����������� ������������������ 구성����������� ������������������ 위한����������� ������������������ UI����������� ������������������ 컴포넌트����������� ������������������ 제공����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������
§ 커스텀����������� ������������������ 웹뷰����������� ������������������ ����������� ������������������
����������� ������������������ -����������� ������������������ 안드로이드����������� ������������������ WebView의����������� ������������������ 성능����������� ������������������ 향상을����������� ������������������
위해����������� ������������������ 자체����������� ������������������ 개발한����������� ������������������ Custom����������� ������������������ WebView����������� ������������������
- 멀티프로세싱����������� ������������������ 처리를����������� ������������������ 통해����������� ������������������ 안정성����������� ������������������ 향상����������� ������������������
- GPU를����������� ������������������ 활용한����������� ������������������ 렌더링����������� ������������������ 성능����������� ������������������ 향상����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (네이버앱을����������� ������������������ 비롯한����������� ������������������ 일부����������� ������������������ 모바일����������� ������������������ 게임
에����������� ������������������ 적용����������� ������������������ )����������� ������������������
����������� ������������������
HTML5����������� ������������������ API����������� ������������������ 활용사례����������� ������������������
16����������� ������������������ ����������� ������������������
HTML5 활용 전략
• 사용자����������� ������������������ 환경����������� ������������������ 및����������� ������������������ 하위����������� ������������������ 호환성을����������� ������������������ 고려한����������� ������������������ 적용����������� ������������������ – PC웹은����������� ������������������ HTML5로����������� ������������������ 점진적����������� ������������������ 변경����������� ������������������
– 모바일의����������� ������������������ 경우����������� ������������������ 웹은����������� ������������������ HTML5,����������� ������������������ 네이티브����������� ������������������ 앱����������� ������������������ 별도����������� ������������������ 서비스����������� ������������������
• 모바일����������� ������������������ 브라우저����������� ������������������ 파편화에����������� ������������������ 따른����������� ������������������ 이슈����������� ������������������ 대응����������� ������������������ ����������� ������������������ – 모바일����������� ������������������ 브라우저����������� ������������������ 특성에����������� ������������������ 따른����������� ������������������ 일부����������� ������������������ 브라우저/디바이스에서����������� ������������������ 작동����������� ������������������ 문제����������� ������������������ 및����������� ������������������ 성능����������� ������������������ 대응����������� ������������������ ����������� ������������������
– HTML5에����������� ������������������ 커스터마이즈된����������� ������������������ 웹뷰을����������� ������������������ 적용함으로써����������� ������������������ 웹뷰����������� ������������������ 이슈����������� ������������������ 및����������� ������������������ 그래픽����������� ������������������ 성능����������� ������������������ 향상����������� ������������������ ����������� ������������������
• HTML5����������� ������������������ 기반����������� ������������������ 게임은����������� ������������������ 네이티브����������� ������������������ 기술과����������� ������������������ 융합����������� ������������������ ����������� ������������������ – HTML5����������� ������������������ 단독����������� ������������������ 적용����������� ������������������ 보다는����������� ������������������ 성능����������� ������������������ 향상을����������� ������������������ 위해����������� ������������������ 네이티브����������� ������������������ 기술과����������� ������������������ 융합����������� ������������������
– HTML5에����������� ������������������ 웹게임엔진을����������� ������������������ 적용함으로써����������� ������������������ 개발생산성����������� ������������������ ����������� ������������������ 및����������� ������������������ 그래픽����������� ������������������ 성능����������� ������������������ 향상����������� ������������������ ����������� ������������������
HTML5����������� ������������������ 활용����������� ������������������ 전략����������� ������������������
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����������� ������������������ ����������� ������������������
18����������� ������������������ ����������� ������������������
NAVER D2 – 네이버의 개발자 지원 프로그램
19����������� ������������������ ����������� ������������������
NAVER D2 – 네이버의 개발자 지원 프로그램
외부����������� ������������������ 개발자들의����������� ������������������ 역량����������� ������������������ 향상을����������� ������������������ 위해����������� ������������������ 네이버는����������� ������������������ 아래와����������� ������������������ 같은����������� ������������������ 지원을����������� ������������������ 하고����������� ������������������ 있습니다.����������� ������������������
20����������� ������������������ ����������� ������������������
개발자 커뮤니티 스터디 지원
21����������� ������������������ ����������� ������������������
오픈 세미나
22����������� ������������������ ����������� ������������������
hello world 블로그
23����������� ������������������ ����������� ������������������
hello world 블로그
24����������� ������������������ ����������� ������������������
DEVIEW 컨퍼런스����������� ������������������
25����������� ������������������ ����������� ������������������
협업����������� ������������������ 개발����������� ������������������ 플랫폼����������� ������������������ Yobi����������� ������������������
26����������� ������������������ ����������� ������������������
오픈소스����������� ������������������ XE����������� ������������������ 개발����������� ������������������ 지원����������� ������������������
27����������� ������������������ ����������� ������������������
오픈소스����������� ������������������ Arcus����������� ������������������
• 네이버가����������� ������������������ 사용하고����������� ������������������ 있는����������� ������������������ memcached를����������� ������������������ 기반����������� ������������������ fault-tolerant����������� ������������������ 분산����������� ������������������ 캐시����������� ������������������ 시스템����������� ������������������
• 국내����������� ������������������ 최초����������� ������������������ 오픈����������� ������������������ 소스����������� ������������������ 캐시����������� ������������������ 솔루션����������� ������������������
����������� ������������������
http://github.com/naver/arcus����������� ������������������ ����������� ������������������
- 감사합니다 -
facebook.com/naverd2����������� ������������������
dev.naver.com/d2����������� ������������������