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

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

4. 목차 •  HTML5

5. 기술적

6. 고려

7. 사항

8. •  HTML5

9. API

10. 활용

11. 사례

15. •  HTML5

16. 활용

17. 전략

18. •  네이버

19. 개발자

20. 지원

21. 프로그램

22. –

23. NAVER

24. D2

26. 소개

30. HTML5의 의미 •  업계

31. 표준

32. 기술

33. –  브라우저

34. 제작사들(WHATWG)이

35. 주도한

36. 업계

37. 표준

38. 기술로서

39. 시맨틱

40. 마크업/접근성/호환성/기능

41. 확장을

42. 지향

44. –  W3C에서

45. 2008년

46. 최초안

47. 발표,

48. 2014년

49. 4분기에

50. 최종

51. 표준안

52. 공개

53. 예정

56. •  웹

58. 애플리케이션

59. –  화면

60. 정의를

61. 위한

62. 마크업

63. 기능에

64. 다양한

65. API들이

66. 추가되어

68. 형태

69. 개발

70. 가능

71. –  멀티미디어,

72. 데이터

73. 처리,

74. 위치정보,

75. 백그라운드

76. 프로세스,

77. 실시간

78. 통신,

79. 하드웨어

80. 관련

81. 등

82. •  크로스플랫폼

83. 지원

84. –  다양한

85. 웹브라우저

87. 모바일

88. /스마트TV

89. 외에

90. 디바이스에서

91. 실행

92. 가능

93. –  N-Screen

94. 환경

96. 구현

97. 가능

99. •  새로운

100. API

101. 추가

102. 작업

103. 중

104. –  디바이스

105. 통신,

106. 제어

107. 관련

108. 새로운

109. API

110. 추가

111. –  Web

112. Intents,

113. Web

114. NFC,

115. WebRTC,

116. WebGL

117. 등

119. HTML5

120. 기술적

121. 고려사항

123. 4

125. HTML5의 기술적 특징 •  HTML

126. 문서를

127. 구조적으로

128. 표현

130. –  Sementic

131. 엘리먼트들을

132. 추가

133. –  문서내

134. 머리말/꼬리말,

135. 네비게이션

136. 요소,

137. 컨텐츠

138. 등

139. 영역별

140. 의미

141. 표현

143. •  멀티미디어

145. 및

146. 그래픽

147. 처리

148. 가능

149. –  Video,

150. Audio

151. 지원을

152. 통한

153. 멀티미디어

154. 처리

155. 가능

156. –  SVG,

157. Canvas,

158. WebGL

159. 등을

160. 통한

161. 다양한

162. 2D,

163. 3D

164. 그래픽

165. 처리

166. 가능

167. -

168. 웹

169. 게임

170. 개발

171. •  디바이스

172. 제어

174. –  GPS,

175. 카메라,

176. 센서

177. 등

178. 하드웨어

179. 기능을

180. 웹에서

181. 직접

182. 제어

183. 가능

184. -

185. 웹

187. 개발

189. •  데이터

190. 및

191. 서버

192. 통신

194. –  다양한

195. 형태의

196. 데이터

197. 저장

199. 처리를

200. 통해

201. 오프라인

202. 모드

203. 처리

204. 및

205. 데이터

206. 활용

207. 가능

208. –  비동기

209. 통신,

210. 다중

211. 쓰레드

212. 처리를

213. 통해

214. 웹에서

215. 다양한

216. 통신

217. 및

218. 성능

219. 향상

220. HTML5

221. 기술적

222. 고려사항

224. 5

226. 기존 HTML vs HTML5 •  Syntax

227. 부문

228. –  문서

229. 선언:

230. HTML5

231. 문서

232. 상단에는

233. !DOCTYPE

234. html

235. 지정

236. –  Encoding

237. •  기존

238. HTML:

239. meta

240. http-equiv=Content-Type

241. content=text/html;

242. charset=UTF-8

243. •  HTML5:

244. meta

245. charset=UTF-8

247. •  API

248. 부문

249. –  멀티미디어:

250. video,

251. audio,

252. canvas,

253. svg

254. –  실시간

255. 통신:

256. Web

257. Workers,

258. Web

259. Socket,

260. Web

261. Nofitication

262. –  하드웨어

263. 관련:

264. Geolocation,

265. Device

266. Orientaion

267. 등

268. –  파일

269. 처리:

270. DragDrop,

271. FileSystem

273. –  데이터

274. 처리:

275. Local

276. Storage,

277. IndexedDB,

278. Application

279. Cache,

280. Web

281. SQL

282. Database

283. 등

287. HTML5

288. 기술적

289. 고려사항

291. 6

293. 기존 HTML vs HTML5 HTML5

294. 기술적

295. 고려사항

296. •  Language

297. 부문

298. –  새로운

299. 추가

300. 된

301. 것

302. 들

304. •  요소

305. 관련

307. –  문서

308. 구조

309. 기술용:

310. section,

311. article,

312. aside,

313. header,

314. footer,

315. nav,

316. figure,

317. figcaption

318. 등

319. –  멀티미티어,

320. 그래픽,

321. 처리

322. 등

323. 새로운

324. 용도용:

325. video,

326. audio,

327. source,

328. track,

329. embed,

330. mark,

331. progress

332. 등

334. •  속성

335. 관련

337. –  새로

338. 추가된

339. 전역

340. 속성

341. 추가:

342. cotenteditable,

343. draggable,

344. hidden

345. 등

346. –  input

347. 태그

348. 처리를

349. 위한

350. 속성

351. 추가:

352. tel,

353. search,

354. url,

355. email,

356. date,

357. color,

358. number

359. 등

362. –  변경

364. 제거

365. 된

366. 것들

368. •  요소

369. 관련

372. –  불필요한

373. 요소

374. 제거

375. :

376. CSS로

377. 처리

378. 가능

379. /

380. Frame관련

381. /

382. 사용도가

383. 떨어지는

384. 태그

385. 들

386. –  요소

387. 의미

388. 변경:

389. a,

390. address,

391. b,

392. hr,

393. I,

394. lable,

395. menu,

396. small,

397. strong

398. 등

399. •  속성

400. 관련

402. –  CSS로

403. 대체

404. 가능한

405. 표현을

406. 다루는

407. 속성:

408. align,

409. background,

410. bgcolor

411. 등등

413. 7

415. HTML5 도입시 기술적 고려 사항 •  브라우저

416. 하위

417. 호환성

418. 지원

420. –  브라우저

421. 버전별

422. 지원

423. 스펙

424. 체크:

425. http://caniuse.com

426. •  크로스

427. 브라우징

428. 이슈

429. –  브라우저별

430. HTML5

432. CSS3

433. 지원

434. 체크:

435. http://fmbip.com/litmus

440. –  브라우저

441. 버전별

442. 에뮬레이터:

443. http://www.browserstack.com/

445. –  예:

446. iOS

447. 단말기,

448. userAgent값이

449. 없으므로

450. 플랫폼

451. 정보,

452. 스크린과

453. 해상도

454. 차이로

455. 파악

457. HTML5

458. 기술적

459. 고려사항

461. 8

463. HTML5 도입시 기술적 고려 사항 •  모바일

464. 브라우저

465. 파편화

467. –  2013년

468. 3월

469. Google은

470. Webkit을

471. fork하여

472. Blink

473. 랜더링

474. 엔진을

475. Chrome

476. 28부터

477. 적용

478. (Android

479. 4.1,

480. Jelly

481. bean )

482. –  SBrowser는

483. Chromium

484. 기반의

485. 삼성

486. 브라우저

487. 환경으로

488. 갤럭시S4

489. 4.2~,

490. 갤럭시노트3

491. 4.3~

492. 에

493. 탑재

495. –  단말기별로

496. 브라우저

497. 동작이

498. 다를

499. 수

500. 있으므로

501. UserAgent값

502. 체크

503. 및

504. 브라우저

505. 특성

506. 파악

507. 필요

510. HTML5

511. 기술적

512. 고려사항

513. Android OS 버전

515. 랜더링

516. 엔진

518. 기본

519. 브라우저

521. 단말기

522. Android 2.x Webkit stock browser 　ㅤ

523. Android 3.x Webkit stock browser 　ㅤ

524. Android 4.0.x Webkit stock browser 　ㅤ

525. Android 4.1.x Webkit stock browser 　ㅤ

526. Chromium browser Nexus7 (기본

527. 브라우저로

528. Chrome for Android 탑재) Android 4.2.x Webkit stock browser 　ㅤ

529. Chromium browser

530. 갤럭시S4, 갤럭시노트3 (기본

532. SBrowser 탑재) Android 4.3.x Webkit stock browser 　ㅤ

533. Blink Chromium browser

534. 갤럭시S4, 갤럭시노트3 (기본

536. SBrowser 탑재) Android 4.4.x Blink Chromium browser

537. 갤럭시S4 (기본

539. SBrowser 탑재) Nexus5 (기본

541. Chrome for Android 탑재)

542. 9

544. HTML5 도입시 기술적 고려 사항 •  HTML5

545. API

546. 이슈

547. –  브라우저별

548. HTML5

549. api

550. 지원

551. 이슈

552. –  API

553. 자체

554. 이슈

557. •  성능

558. 관련

559. 이슈

560. –  그래픽

561. 처리

562. 속도

564. –  화면

565. 로딩

566. 속도

567. –  UI

568. 반응

569. 속도

573. •  서버

574. 통신,

575. 데이터

576. 처리

577. 관련

578. 이슈

579. –  데이터

580. 처리

581. 용량

582. 및

583. 속도

584. 한계

585. –  서버

586. 통신

587. 동기화

588. 및

589. 제어

591. HTML5

592. 기술적

593. 고려사항

595. 10

597. 모바일 개발 관점에서 HTML5 고려 사항 •  주요

598. 장점

599. –  크로스

600. 플랫폼

601. (56%)

602. –  낮은

603. 개발

604. 비용

605. (51%)

606. –  N스크린

607. (33%)

608. –  러닝

609. 커브

610. (27%)

613. 출처:

614. Visionmobile

615. ,

616. Developer

617. Economics

618. 2014

619. Q1,

620. Survey

621. •  주요

622. 단점

624. –  성능

625. 이슈

626. (45%)

628. –  제한적인

629. H/W

630. API

631. (37%)

632. –  네이티브

633. 요소와

634. 연계의

635. 어려움

636. (29%)

637. –  성숙된

638. 개발

639. 프레임웍

640. 부족

641. (20%)

643. HTML5

644. 기술적

645. 고려사항

647. 11

649. 네이버 웹 서비스 HTML5 적용 현황 •  2010년

650. 부터

651. HTML5로

652. 점진적

653. 전환

655. –  사용자

656. 웹접근성,

657. 모바일

658. 환경

659. 지원

661. –  브라우저

662. 버전별

663. 하위

664. 호환성

665. 지원

666. –  브라우저

667. 종류별

668. 지원

669. 속성

670. 고려

671. •  HTML5

672. 적용

673. 현황

675. –  HTML5

676. 적용

677. 서비스

678. •  메인,

679. 뉴스,

680. 지도,

681. 영화,

682. 메일,

683. 포스트,

684. 네이버me

685. 등

686. •  모바일

687. UX

688. 대응(플리킹,

689. 스크롤)을

690. 위해

691. 일부는

692. 모바일

693. 전용

694. 페이지로

695. 서비스

696. –  HTML4

697. 적용

698. 서비스

700. •  사전,

701. 증권,

702. 부동산,

703. 영화,

704. 뮤직,

705. 책,

706. 웹툰,

707. 카페,

708. 블로그,

710. 지식인,

711. 쇼핑

713. 등

714. •  HTML5기반

715. 모바일

716. 웹

717. 별도

718. 서비스

719. 중

722. HTML5

723. API

724. 활용사례

726. 12

728. HTML5 기반 실시간 메시징 •  데이터

730. 저장

731. –  IndexedDB:

732. 친구,

733. 대화

734. 등

735. 데이터

736. 저장

737. –  localStorage:

738. 간단한

739. 환경

740. 정보(기본

741. 설정값)

742. 저장,

743. 단

744. String

745. 타입이므로

746. 대용량

747. 저장용으로는

748. 부적합

749. •  메시지

750. 전송

751. –  ArrayBuffer/Blob:

752. 라인

753. 대화의

754. 이미지

755. 메시지

756. 송수신,

757. IndexedDB에

758. 이미지

759. 저장

760. 가능

761. –  FileReader:

762. 파일을

763. ArrayBuffer로

764. 변환,

765. 이미지

766. 타입

767. 데이터

768. 송수신에

769. 활용

770. •  통신

771. 처리

773. –  WebWorker

774. •  라인

775. 메신저

776. 통신에

777. 적용

778. (메시지,

779. 친구추가,

780. 그룹

781. 생성)

782. •  worker

783. 내부에서

784. 리소스

785. 접근

786. 위해

787. 별도의

788. 워커를

789. 위한

790. 리소스

791. 추가

792. •  worker

793. 간

794. 메모리

795. 공유가

796. 안되므로

797. 각

798. 워커에

799. 필요한

800. 정보

801. 별도

802. 전달

808. (SharedWorker는

809. Firefox

810. os에서

811. 미지원)

812. • 

813. 기타

815. –  Audio:

816. 메시지

817. 도착시

818. 알림음

819. 재생

820. –  Number

821. /

822. Phone

823. Type

824. Input:

825. 숫자전용

826. /

827. 휴대폰

828. 전용

829. 키보드

830. 입력시

831. HTML5

832. API

833. 활용사례

835. 13

837. HTML5 기반 화상채팅 •  주요

838. 활용

839. 기술

840. –  WebSocket

844. •  웹

845. 메신저

846. 알리미

847. 기능

848. 구현을

849. 위해

850. node-webkit

851. 과

852. node

853. server

854. 간의

855. 통신을

856. 위해

857. 사용

858. •  Peer-to-Peer

859. 기술이어서

860. 다자간대화

861. 기능을

862. 구현

863. 위해서는

864. 별도

865. 서버를

866. 통한

867. 컨넥션

868. 관리

870. •  크로스

871. 브라우징

872. 이슈

874. 해결

875. 위해

876. socket.io

877. 라이브러리

878. 활용

879. –  WebRTC

881. •  영상

882. 음성

883. 통신:

884. 스트리밍

885. 관련

886. (getUserMedia/Stream

887. API)

888. 을

889. 통해

890. video/audio

891. stream

892. 을

893. 받기

894. 위해

896. •  Peer-to-Peer

897. 기술이어서

898. 다자간대화

899. 기능을

900. 구현

901. 위해서는

902. 별도로

903. 컨넥션

904. 관리

906. •  크로스

907. 브라우징

908. 이슈

910. –  Canvas

911. •  소켓으로

912. 넘어온

913. 데이터

914. 중

915. 이미지

916. 처리를

917. 위해

918. 사용

919. HTML5

920. API

921. 활용사례

923. 14

925. HTML5 기반 그림판 •  주요

926. 활용

927. 기술

928. –  Canvas

929. •  그림판의

930. 코어

931. 스테이지

932. 영역에

933. Canvas를

934. 이용하여

935. 비트맵

936. Draw

937. 구현.

938. •  동일

939. 출처

940. 이미지만

941. Canvas에

942. 드로잉

943. 가능

944. •  이미지를

945. 미리

946. 로딩하지

947. 않으면

948. 사용

949. Canvas에

950. 그릴

951. 때

952. 지연됨

954. –  File

955. 관련

956. API

957. •  File

958. API

959. 최대

960. 업로드

961. 한도는

962. 1.4G

964. -

965. 파일을

966. 쪼개어서

967. 서버에

968. 합치면

969. 더

970. 큰

971. 크기도

972. 가능

974. •  파일을

975. 저장

976. 기능은

977. 대부분

978. 미지원

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

983. –  Text

984. API

985. for

986. Canvas

987. •  캔버스에서

988. 글자를

989. 그리기

993. –  Local

994. Storage

995. •  사용자가

996. 선택한

997. 툴의

998. 옵션값

999. 저장용

1001. HTML5

1002. API

1003. 활용사례

1005. 15

1007. HTML기반 게임 •  HTML5의

1008. 업데이트의

1009. 용이성

1010. 활용

1011. •  그래픽,

1012. 애니메이션

1013. 성능

1014. 향상

1015. 위해

1016. 네이티브

1017. 기술

1018. 활용

1019. HTML5

1020. HTML5

1021. +

1022. 웹게임

1023. 엔진

1024. HTML5

1025. +

1026. 커스텀

1027. 웹뷰

1028. §  웹게임

1029. 엔진

1032. -

1033. 2D

1034. Graphics

1035. /

1036. Drawing

1037. 성능

1038. 향상

1041. -

1042. 게임

1043. 개발

1044. 전용

1045. IDE

1046. 제공

1050. -

1051. 게임

1052. UI

1053. 개발

1054. 및

1055. 애니메이션

1056. 보기

1057. 지원

1060. -

1061. 게임

1062. 화면

1063. 구성

1064. 위한

1065. UI

1066. 컴포넌트

1067. 제공

1071. §  커스텀

1072. 웹뷰

1075. -

1076. 안드로이드

1077. WebView의

1078. 성능

1079. 향상을

1080. 위해

1081. 자체

1082. 개발한

1083. Custom

1084. WebView

1085. -  멀티프로세싱

1086. 처리를

1087. 통해

1088. 안정성

1089. 향상

1090. -  GPU를

1091. 활용한

1092. 렌더링

1093. 성능

1094. 향상

1100. (네이버앱을

1101. 비롯한

1102. 일부

1103. 모바일

1104. 게임 에

1105. 적용

1106. )

1108. HTML5

1109. API

1110. 활용사례

1112. 16

1114. HTML5 활용 전략 •  사용자

1115. 환경

1116. 및

1117. 하위

1118. 호환성을

1119. 고려한

1120. 적용

1121. –  PC웹은

1122. HTML5로

1123. 점진적

1124. 변경

1125. –  모바일의

1126. 경우

1127. 웹은

1128. HTML5,

1129. 네이티브

1130. 앱

1131. 별도

1132. 서비스

1133. •  모바일

1134. 브라우저

1135. 파편화에

1136. 따른

1137. 이슈

1138. 대응

1140. –  모바일

1141. 브라우저

1142. 특성에

1143. 따른

1144. 일부

1145. 브라우저/디바이스에서

1146. 작동

1147. 문제

1148. 및

1149. 성능

1150. 대응

1152. –  HTML5에

1153. 커스터마이즈된

1154. 웹뷰을

1155. 적용함으로써

1156. 웹뷰

1157. 이슈

1158. 및

1159. 그래픽

1160. 성능

1161. 향상

1163. •  HTML5

1164. 기반

1165. 게임은

1166. 네이티브

1167. 기술과

1168. 융합

1170. –  HTML5

1171. 단독

1172. 적용

1173. 보다는

1174. 성능

1175. 향상을

1176. 위해

1177. 네이티브

1178. 기술과

1179. 융합

1180. –  HTML5에

1181. 웹게임엔진을

1182. 적용함으로써

1183. 개발생산성

1185. 및

1186. 그래픽

1187. 성능

1188. 향상

1190. HTML5

1191. 활용

1192. 전략

1194. 17

1196. References •  네이버

1197. hello

1198. world

1199. 블로그

1201. –  http://helloworld.naver.com

1203. •  네이버

1204. 웹접근성

1205. 블로그

1206. –  http://nuli.navercorp.com/blog

1208. •  JindoJS

1209. 개발팀

1210. 블로그

1212. –  http://jindo.dev.naver.com/blog

1213. •  차세대

1214. 웹

1215. 환경에서의

1216. UI/UX

1217. 기술

1218. 표준화

1219. 동향,

1220. 전종홍

1221. –  http://www.slideshare.net/hollobit/20130613-uiuxr4?qid=9ab2fa3a-0326-4008-a46d-6156f956d90fv=defaultb=from _search=12

1224. 18

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

1227. 19

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

1230. 개발자들의

1231. 역량

1232. 향상을

1233. 위해

1234. 네이버는

1235. 아래와

1236. 같은

1237. 지원을

1238. 하고

1239. 있습니다.

1241. 20

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

1244. 21

1246. 오픈 세미나

1247. 22

1249. hello world 블로그

1250. 23

1252. hello world 블로그

1253. 24

1255. DEVIEW 컨퍼런스

1257. 25

1259. 협업

1260. 개발

1261. 플랫폼

1262. Yobi

1264. 26

1266. 오픈소스

1267. XE

1268. 개발

1269. 지원

1271. 27

1273. 오픈소스

1274. Arcus

1275. •  네이버가

1276. 사용하고

1277. 있는

1278. me mcached를

1279. 기반

1280. fault-tole rant

1281. 분산

1282. 캐시

1283. 시스템

1284. •  국내

1285. 최초

1286. 오픈

1287. 소스

1288. 캐시

1289. 솔 루션

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

1294. - 감사합니다 - facebook.com/naverd2

1295. dev.naver.com/d2

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie [D2 오픈세미나]1.html5 api 옥상훈

Ähnlich wie [D2 오픈세미나]1.html5 api 옥상훈 (20)

Mehr von NAVER D2

Mehr von NAVER D2 (20)

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