Summary: Chrome Developer Day Korea

10월 24일 선릉역 D.CAMP에서 크롬 개발자들이 다수 참석하여 개발자 데이 행사를 진행했습니다. 요약 대신해서 간략한 후기 남겨봅니다. 오밤 중에 대충 기억으로 적는 것이라 틀린 것도 많을 겁니다. 이해를...:)

What’s new in mobile HTML5

+Alex Danilo가 크롬 안드로이드와 관련된 신규 기능들에 대한 소개 발표였습니다. 안타깝게도  +Eiji Kitamura씨는 참석을 못했네요. :( 이 세션에서 나온 내용들은 간략하게 나열합니다. 참고로 아래 내용 중 현재 지원 가능한 부분과 아닌 부분들은 업데이트가 필요할 듯 합니다. 첫 세션이라 도저히 기억이 안나네요.

• 크롬 안드로이드에서 chrome://flags 추가되었습니다.
• viewports에 새롭게 vw, vh, vmin, vmax가 추가되었습니다. 단위는 전체 길이의 1%입니다.
• position: sticky가 추가되었습니다. 상위 노드에 대해 fixed와 유사하게 동작합니다.
• Fullsrceeen가 지원됩니다.
• Semantic Input Type으로 효과적인 사용자 입력을 기대할 수 있습니다.
• MS에서 제안 중인 Pointer event에 대한 얘기가 있었는데 아직 지원은 안됩니다. (IE11만 지원). Pointer 이벤트는 mouse와 touch의 통합형 이벤트입니다. 당연히도 필요하겠죠.  :)
• 하드웨어 관련해서 Media Capture 지원됩니다. <input capture accepts=“image/*”> 처럼 기술하면 카메라로 사진 찍고 input으로 넘어갑니다.
• WebAudio 됩니다. 입력은 지난번 포스팅에 나온 바와 같습니다.
• Add Homescreen 기능이 추가되었습니다. 원래 애플이 apple- 접두어를 사용했었는데 일단 크롬에서도 apple- 접두어를 당분간 지원한다고 합니다. (이에 대해 정리해둔 글이 있었는데 어디에 올렸는지를 모르겠네요.)
• 안드로이드 intents를 웹에서 바로 사용가능합니다. URL로 넘길 수 있습니다.
• 성능 측정 관련해서 Navigation Timing API, Resource Timing API 추가되었습니다.

Polymer

'폴리머'는 현재 규격 작업이 진행 중인 Web Component를 모던 브라우저들에서 지원하기 위한 Polyfill 라이브러리입니다. Web Component가 표방하는 것이 하나의 완전한 웹 문서가 Encapsulation된 형태로 정의되고, 사용되고, 재사용되는 규격을 목표로 하는 만큼 빠르게 표준화가 되었으면 하고, 추가로 발표자인 +Eric Bidelman 이 궁극적으로 보일러플레이트를 소멸시키는 것이 목표라고 계속 얘기를 하더군요. 그랬으면 좋겠습니다. :)

웹 컴포넌트는 다음과 같이 4개의 규격으로 지탱됩니다.

1. Shadow DOM - DOM 및 DOM, 자바스크립트에 대해 캡슐화를 지원합니다. 이 규격을 바탕으로 컴포넌트의 Content가 외부로부터 보호됩니다.
2. HTML Template - 해석, 렌더링, 실행되지 않는 순수 템플릿 기능을 지원합니다. 이로부터 새로운 노드를 복제하거나 새로 생성하는 것이 가능하기 때문에 하나의 웹 컴포넌트로 다수의 인스턴스를 만들어 낼 수 있습니다.
3. Custom Element - 기존의 DOM을 확장하거나 새로운 DOM을 생성합니다. 위에서 Shadow DOM과 HTML Template가 구조를 제공한다면 Custom Element는 타입의 확장과 정의 기능을 제공한다고 이해해도 되겠습니다.
4. HTML Imports - HTML 문서를 특정한 위치로 적재하는 기능을 수행합니다. 일종의 로더라고 볼 수도 있겠습니다. 이 규격이 Web Component의 재사용성을 담보합니다.

요약하면 'Polymer'는 프레임워크 등에 대한 의존성 문제가 없기 때문에 생산성과 재사용성이 뛰어나고 특히 소프트웨어 공학면에서도 좋은 접근(Good Software Engineering)을 통한 일종의 OOP를 구현하는데 장점이 있습니다.

물론 현재는 폴리필 형태의 라이브러리이기 때문에  완벽한 encapsulation 등에 대한 부분이 실제로 완전히는 감춰지지 않는 이슈가 있을 수 있는 것도 문제이긴 하지만 이 정도로 잘 지원하는 것만 봐도 충분히 활용이 가능할 듯 합니다.

현재 폴리머에서 제공하고 있는 라이브러리도 쓸모가 많기 때문에 겸사겸사 공부해보는 것은 어떨까 싶습니다. 참고로 Yeoman을 사용하여 생산성을 유지하며 개발하는 것은 어떨까요?  Yeoman과 Polymer를 이용한 웹앱 개발를 읽어 보시길...1, 2년 정도면 Web Component 시대가 올 것 같다는 생각을 조심스럽게 해봅니다.

Workflow, DevTools mobile web

그 유명한 +Paul Irish의 발표였습니다. :) 일단 개발자 도구에 관련한 내용은 크롬 개발자도구 레볼루션 2013에서도 다루고 있기 때문에 크게 다른 부분은 없습니다. 정확하게 말하면 그 문서가 지속적으로 업데이트되고 있기 때문이기도 합니다. :)

어쨌던 가볍게 몇가지만 나열해보자면

• 기존의 텍스트 에디터에서 수정하고 브라우저로 가서 확인하며 왔다갔다 하면서 개발하는 프로세스가 크롬 개발자도구로 완전히 통합되었습니다.
• Workspace 설정 후 로컬 파일과 폴더 등을 매핑하면
• 프로젝트 형태로 편집이 가능하고
• 웹 문서뿐만이 아니라 서버사이드 스크립트 등의 수정이 가능하며
• 스타일 창에서의 변경 역시 영구적으로 저장됩니다.
• 즉, 인스펙터에서 수정하고 저장하면 실제 파일과 동기화됩니다.
• Sass, Less 지원되고 디버깅도 됩니다.
• 이 부분이 다들 좋아하는 부분 중에 하나인데 크롬에서 안드로이드 디바이스에 원격 디버깅이 지원됩니다. 
• 간단하게 주소창에 about://inspect 치시면 디버깅이 연결됩니다.
• 스크린캐스트를 통해 실제 디바이스의 화면을 보면서 PC 사이드에서 조작과 화면 확인, 디버깅이 가능합니다. (이거 무지무지 유용한 기능이죠.)
• localhost 등으로 개발 중일 경우 역시 개발자 도구의 포트 포워딩을 통해서 l디버깅이 가능합니다.
• 개발자도구를 이용하여 Layout, Style Recalculation, Paint, Composition의 프로파일을 디버깅하는 기능도 시연되었습니다.
• continuous painting inspection을 이용하면 flowl 형태로 렌더링 오버헤드를 확인할 수 있다던가 프레임 렌더링 시간을 조사할 수 있고 이를 통해 스타일의 재계산 등을 막거나 개발자 도구의 프로파일링에서 추가적인 최적화 관련 정보 등을 확인할 수 있습니다.
• 위 기능이 다 안되면 주소창에 about:tracing 를 써도 됩니다. 물론 좀 많이 불편합니다.

Creating HTML5 Games

+John McCutchan의 발표입니다. (Game과 Dart에 대해 두번 발표하더군요.)  HTML5 기반에서 게임을 개발하는데에 대한 일반적인 기능과 방식에 대해서 설명했습니다. 근데 이때 외부에서 전화가 와서 거의 다 놓쳤네요. :(

가능한 스택으로  Canvas, Web Audio, (P)NaCl 등을 예로 들었고 성능 상에 악영향 요소(Performance Traps)에서 '언제나 할당은 GC Pause로 한발 다가가는 것'이라고 얘기하더군요. GC는 언제쯤 어떻게 처리가 될런지 궁금합니다.

NaCl의 경우는 Security Model이 잘 지원되고 네이티브 기능을 확장하고자 할 때 사용할 수 있는 유용한 플러그인 개발 형태고 PPAPI를 통해 거의 모든 웹 요소들에 접근이 가능한 등의 장점을 얘기했습니다. 마지막에 HTML5 Games polymer에 대해서 얘기했는데 흥미로운 접근이었습니다. :)

Chrome Apps

+Pete LePage가 발표했습니다. 크롬 앱에 대해서 쭉 얘기를 해줬는데  오프라인, 하드웨어 제어, 기존 브라우저, 네이티브 기능 통합, 인프라 등의 이슈가 기존에 존재해왔으며 크롬 앱에서는 이러한 문제를 해결함과 동시에 크롬 웹 스토어에서 클라우드 서비스를 통해서  저장소 및 파일 등을 동기화하거나 푸시 메세지, 사용자 인증 및 정보, 앱 업데이트, 결제(1회성 결제 및 인앱 결제), 네이티브 기능 통합이 가능한 것에 대해 각각 설명했습니다.

재밌는 것은 크롬 앱을 통해서 USB나 블루투스 같은 외부 장치 연동이 가능하다는 점입니다. 몰랐는데 이게 되더군요. :)  네이티브 기능 통합의 예로 심장 박동 모니터를 연동해서 웹으로 박동수를 보여주는 데모와 LED 전등의 색상을 연동을 통해 제어하는 것을 보여줬습니다. 그리고 크롬만 되면 무슨 소용인가라는 의문에 대해 Cordova(Phonegap) 기반으로 만들어진 하이브리드 웹앱 패키징이 됩니다. 궁금하시면 http://github.com/MobileChromeApps/chrome-cordova로 방문!

Rendering without lumps

+Jake Archibald 의 아주 다이나믹한 세션이었습니다. :) Wii 컨트롤러로 프리젠테이션을 진행하는 것도 인상적이었지만 발표 노트와 마치 하나가 된듯한 물 흐르는 듯한 진행 기술을 가지고 있더군요. 그것보다 인상적인 것은 'W(hat)T(he)F(rame)P(er)S(econd)?' 였습니다. (진짜일까요? ㅋ)

간략하게 나누자면 웹 브라우저에서 DOM 트리는 CSS와 함께 덧붙여져서 Rendering 트리를 구성하게 됩니다. (이 과정에서 각 엘리먼트는 하나 이상의 레이어와 대응됩니다.) 이때 하나의 렌더링 노드를 그리는데는 크게 레이아웃, 스타일 계산, 페인팅, 결합(Composition)의 4단계를 하나의 패스로 거칠 수 있습니다. 물론 항상 모든 단계를 거치는 것은 아니고 간 단계가 실행되기 위한 선행 조건이 있습니다. 렌더링 성능 개선의 가장 기본이 바로 이 단계를 최대한 생략하기 위한 여러가지 방법들이 되겠습니다.

예를 들어 left 속성을 통해 X축 이동을 하는게 아니라 translate()를 이용하는 것은 같은 시각적 효과를 보여주지만 렌더링 패스는 전혀 다른 결과를 보여줍니다. 이외에도 z-index나 tranlateZ()를 이용해서 레이어를 별도로 관리하게 하는 등의 테크닉들도 시연이 있었습니다.

한가지 더 보자면 개발자 도구를 사용하여 렌더링, 레이어 결합 등이 어디서 발생하는지 확인하고 처리하는 방법도 함께 소개되었습니다. (렌더링 성능 관련해서는 여러 스피커가 언급을 했기 때문에 동일한 방법이 많이 나왔습니다. 불필요한 페인트 회피하기, 불필요한 페인트 회피하기 : Animated GIF 에디션를 함께 참고하세요.) 자세한 것은 http://speakerdeck.com/jaffathecake/rendering-without-lumps에서 한번 살펴보시길.

Build a fast mobile site with PageSpeed Mobile Insight

+Paul Kinlan 이 모바일 사이트에서 PageSpeed Mobile Insight를 이용한 모바일 웹 최적화에 대한 발표를 진행했습니다. 일단 PageSpeed Mobile Insight가 웹사이트에 대해 검사해주는 것은 다음과 같습니다.

1. 리다이렉트의 횟수
2. 비효율적인 압축 및 최소화(minification)
3. CSS와 자바스크립트의 성능 상의 이슈 지점
4. 캐시 이용률

CSS가 로딩되지 않거나 아직 해석되지 않은 시점에서 JavaScript가 Computed Style을 쿼리한다던가 하는 경우…즉, CSS, DOM에서 실행이 멈출 수 있다던지 해서 async나 defer를 이용해서 blocking을 막거나 압축을 통한 네트워크 대역폭 절약 등등 많은 내용이 있어 이것도 이후에 다시 정리합니다.

아, 초반에 "시작이 반이다"를 한글로 적어놓아 빵 터지고 '적합한 설계가 나쁜 효율성을 방지한다.'였던가로 적어놓은데서 눈물 한방울. :(

Introduction of DART

+John McCutchan의 2번째 세션, Dart도 흥미로웠습니다. 일단 Compile 형태의 개발 환경을 가지고 있지만 자바스크립트로의 변경도 가능하고 Dartrium이라는 DART VM + Chromium 형태의 브라우저에서의 JS 대비 성능 우위도 보여주더군요. 물론 VM은 Stand-alone으로 돌리거나 Dartrium에서 돌릴 수 밖에 없고 무엇보다 제가 이건 잘 모르므로 일단 넘어갑니다. :)

#

몇 가지 더 있었는데 정리가 어려워서 수정 및 다른 내용들은 차주로 미룹니다. :)