안녕하세요.
'생각의 웹'입니다.
이글을 읽는 분들 중 지난 한국 웹 20주년 기념 컨퍼런스에 참석하신 분이 계신지 모르겠습니다.
이날 오후 첫번째 세션 중 트랙 C에서 엔씨 소프트 김민태 차장님이 '웹을 지탱하는 차세대 기술' 이라는 주제로 발표하셨는데 그림과 같이 가장 상단 부에 배치하신 기술이 지금 제가 여러분들께 소개하고자 하는 웹 컴포넌트(Web Component)입니다.
김민태 차장님이 의리로 공유하신 슬라이드를 보시죠.
슬라이드가 그림 위주로 작성된 관계로 강의를 듣지 않은 분들을 위해 제가 기록한 강의록을 아래와 같이 공유합니다.
- 웹의 성공 요인: simplicity -> 2000년대 application 형태로 진화
- Web Application
○ 고생스러움
* 올드한 느낌
* 통합되지 않는 낙후된 개발환경
* 규모가 커지면 아키텍쳐링하기 힘듦
* 라이브러리 의존성 (너무 많은 라이브러리와 버전간 충돌 문제)
○ 웹 기술의 한계
* 자바스크립트의 한계
□ Common JS spec로 해결 시도 중
e.g. Cloud9
□ 그러나 기술 표준의 부재로 과도한 엔지니어링 노력이 필요
* div의 한계
□ Web Components 스펙으로 돌파구 마련
□ 그런데 관심이 별로 없음
□ 신기술들
. Template
◊ 템플릿 라이브러리를 사용하지 않아도 사용 가능
. Shadow DOM
◊ 랜더링 되지 않는 DOM (createShadowRoot() API)
. Custom Elements
◊ Element를 user defined 할 수 있음.
. HTML Imports
◊ 뷰를 가지고 있는 컴포넌트를 가져올 수 있음 -> 기존 웹 개발 패러다임의 변화를 가져올 수 있음
* 현재 사용가능한가?
□ polyfill로 모든 브라우저에서 대응 가능!! (구글 polymer, 모질라 brick)
e.g. slideshare - Polymer: Web Components & Web 참조
○ 퍼포먼스 이슈
* 브라우저 구조상 이슈로 성능 향상에 한계가 있음
□ DOM, Rendering 이슈
□ 중첩된 DOM 객체들 처리 이슈
□ 고해상도 지원
* 해결 방안 : Web GL
□ CPU 대신 GPU로 처리
□ Unity 2D 처리 사례처럼 3D 가속으로 2D를 처리 가능
. 단, 구현이 쉽지 않음.
○ 기능 이슈의 해결 방안
* Service Worker
* Web Worker
* Transpiler & ASM.js
김민태 차장님이 완소 자료로 언급하셨던 구글 폴리머 관련 슬라이드입니다.
공교롭게도 (아니면 필연적으로) 당일 오후 두번째 세션 트랙 A에서 W3C 다니엘 데이비스(Daniel Davis)가 발표한 'HTML5 이후의 변화들'이라는 강연에서도 HTML5가 우리에게 준 것들 (What did HTML5 gives us?)로 이 웹 컴포넌트를 예로 듭니다.
웹 컴포넌트는 위의 그림처럼 <meter>라는 사용자 정의 (custom) 태그 (tag)로 손쉽게 원하는 컴포넌트를 만들 수 있게 하는 기술입니다.
이로써, <div> 태그에 각종 class 속성을 입혀 원하는 컴포넌트를 만들던 이전 방식에서 벗어나 보다 직관적이고 확장성 있는 컴포넌트 개발이 가능합니다.
사실 이 기술은 년 초 WWW 2014 컨퍼런스 HTML5 기술 튜토리얼 시간에 공유된 바 있는 데 지금까지 저도 많은 관심을 갖지 못했었습니다.
(제대로 잘 만드는 것보다 어떻게든 만드는 것에만 급급했기 때문이죠. 아마 대부분의 개발자 분들이 처한 입장이 아닐까 싶군요.)
아래 링크를 가시면 다양한 예제를 코드와 더불어 경험해 볼 수 있습니다.
http://mainline.essi.fr/HTML5slides/chapter7Seoul.html
이번 포스팅을 정리합니다.
웹 컴포넌트 기술은 이미 현실에 적용된 차세대 웹 기술 중에서 가장 효용성이 있는 기술입니다. 널리 퍼뜨려 사용하게 만드는 것이 의리입니다. ^^
혹시 여전히 한국 사회의 악의 축으로 자리 잡고 있는 IE6, 7 과 같은 구형 브라우저들 때문에 사용을 주저하시는 분들이 있다면 이를 매꿔주는 다양한 폴리필(polyfill)이 있으니 걱정 놓으셔도 됩니다.
다음 포스팅으로 저만의 웹 컴포넌트를 만들어 이에 대한 후기를 공유해볼까 하는데 언제가 될지는 선뜻 약속드리기 힘드네요. ^^;
블로거 분들이 댓글로 관심 보여주시면 포스팅이 좀 빨라지지 않을까요? ;-)
긴 글 읽어 주셔서 감사합니다.
행복한 하루 되시길!
'Web of Humans > HTML5' 카테고리의 다른 글
| W3C HTML5 official tutorial (0) | 2014.04.30 |
|---|