Web of Think

안녕하세요.

'생각의 웹'입니다.

이글을 읽는 분들 중 지난 한국 웹 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)이 있으니 걱정 놓으셔도 됩니다.

다음 포스팅으로 저만의 웹 컴포넌트를 만들어 이에 대한 후기를 공유해볼까 하는데 언제가 될지는 선뜻 약속드리기 힘드네요. ^^;

블로거 분들이 댓글로 관심 보여주시면 포스팅이 좀 빨라지지 않을까요? ;-)

긴 글 읽어 주셔서 감사합니다.

행복한 하루 되시길! 

안녕하세요,

'생각의 웹'입니다.

4주 차에 걸쳐 진행된 직접 IoT 만들기(Do IoT Yourself!) App In 세미나가 이번 주 금요일(2014년 10월 24일)을 마지막으로 대장정의 마무리를 내립니다.

짧지 않은 시간동안 평일 저녁과 주말을 포함해 여러 회에 걸쳐 진행된 강연이였기에 참석조차 쉽지 않으셨을 텐데 빠지지 않고 참석해 주신 분들께 감사드립니다.

강사 또한 참석자 분들의 배움의 열정에 감탄을 금치 못했으며 가르침을 통해 배움 못지 않은 많은 깨달음을 얻었습니다. 

• 1주차 - IoT, 기술의 혁신과 미래 그리고 통찰
• 2주차 - Intuitive Understanding of Arduino for IoT
• 3주차 - 사물 간 연결을 위한 Open API

이번 마지막 강연에서는 지난 3주 차 강연에서 만들어 본 RESTful Web API를 손쉽게 사용할 수 있도록 JavaScript API로 만들어 보고 이 API를 이용해서 현재 온도를 알려주는 온도계와 지금까지의 온도 변화를 보여주는 경향(trend) 그래프(graph)를 google chart API를 이용해 만들어 봅니다.

지난 번 강의 시, 제가 시간 관리를 제대로 하지 못해 다음 예정된 강의에 지장을 초래할 정도로 지연되었는데 

부디 이번 강의에서는 제 시간에 끝났으면 합니다.

(그런데 초안 슬라이드를 작성해 보니 2시간 내에 제대로 다루기에는 벅찬 느낌이 들기도 하네요. ^^;; )

마지막으로 다시 한번 매 강연마다 호평을 아끼지 않으시고 적극적으로 참여해주신 참석자 분들께 다시 한번 감사의 말씀 전합니다.

또한 강연 자리를 마련해 주시고 값 비싼 아두이노 호환 보드 세트를 원가에 못 미치는 가격에 참석자 분들께 제공해 주신 AppCenter 분들께도 감사드립니다.

제 소망은 초 연결 미래 사회를 향한 이 작은 발걸음들을 통해 새로운 통찰을 얻고 비즈니스에 적용하여 미래를 만들어 가는 분들이 등장하는 것입니다.

사물 인터넷의 시대, 여러분들의 아이디어를 직접 만들어 평가하고 공개하고 개선해서 멋진 서비스로 발전시켜 가시길 바랍니다!

P.S. 이 모든 자료는 크리에이티브 커먼스(Creative Commons) 3.0에 의거하여 출처를 밝히는 조건 하에서 자유롭게 사용하실 수 있습니다. 

P.S. 2. github에 공개한 DIoTY 코드에 대한 설치 가이드와 자주 나온 질문들을 링크와 같이 정리했습니다. 참고하시기 바랍니다.

안녕하세요.

'생각의 웹'입니다.

사람 뿐 아니라 기계도 정보를 이해하고 이를 체계화해서 새로운 지식을 창출해 낸다면 세상은 어떻게 변할까요?

시멘틱 웹(Semantic Web)은 정보(Information)에 기계가 이해할 수 있는 의미(Semantics)를 부여하기 위한 메타 데이터(Meta data)를 추가하고 이로써 온톨로지(Ontology)를 만들어내는 과정을 통해 새로운 정보를 추론할 수 있는 웹 기술입니다.

이 글을 쓰는 저도 이 분야에 대해서는 입문자 수준이기에 제가 WWW2014 컨퍼런스 튜토리얼(Tutorial) 세션에서 들었던 슬라이드가 시멘틱 웹 입문자에게 좋은 가이드가 될 것으로 생각하여 늦은 감이 있지만 아래와 같이 공유합니다. (-:

이 카테고리에는 본 블로그의 제목처럼 생각하는 웹을 만들기 위한 기술인 시멘틱 웹 관련 기술들을 지속적으로 포스팅하려 합니다.

많은 관심 바랍니다. 감사합니다.