Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

HTML5 Developer Conference 후기 #1

HTML5 Developer Conference가 샌 프란시스코까지 출장을 간 이유였다.(d3.js 유저그룹이 아니라..) 사실 출장 그것도 해외로 출장가는 건 처음이다. 작년에 Nodeconf에 참석했을 때는 내 돈이랑 휴가를 쓰고 갔던거였는데 출장으로 가게 되니 참으로도 좋았다. 마음도 훨씬 여유롭고... 사실 출장으로 가게 된 것이기 때문에 컨퍼런스 자체는 내가 고른 컨퍼런스가 아니고 HTML5 Developer Conference도 이번에 처음 알게된 컨퍼런스다. 히스토리를 보면 2011년에 처음 열려서 작년부터는 1년에 두번씩 열리고 있다.(이전의 발표자들이 좀 더 네임밸류가 높았던 느낌은 있지만...)

HTML5 Developer Conference


컨퍼런스는 샌프란시스코 시내에 위치한 모스콘 센터(Moscone center)였다. 모스콘센터는 Google I/O나 WWDC도 종종 열리는 큰 곳이다. 가보니 센터가 엄청 커서 한블럭가까이 차지하는 건물이 3개나 되었고 HTML5 컨퍼런스는 그 중 하나에서 열렸다. 마침 컨퍼런스가 열리는 날이(22일) 애플이 발표하기로 되어 있었는데 바로 옆에 애플 로고가 있고 사람들이 모여있는 걸 보니 저 안에서 발표를 하고 있었던 듯 하다.


바로 건너편의 모스콘센터에서는 GMIC이 같은 일정으로 열리고 있었다. 컨퍼런스 장에 들어가서 명찰을 받으려 했지만 내 명찰은 찾을 수 없었고 어떤 아가씨가 명찰에 휘갈겨 써주었다. ㅠㅠ 실제 컨퍼런스는 지하에서 열렸는데 가운데는 로비처럼 큰 공간이 있고 한쪽에는 세션을 할 수 있는 장소들이 몰려있고 반대쪽을 오픈된 공간으로 여러 부스들이 몰려 있었다. 인텔, 트위터, YELP등이 와서 자신들의 제품들을 홍보하거나 구인을 하고 있었다. 부스는 뭐 크게 볼 것은 없고 일반적인 부스였지만 이런 저런 기념품은 참 많이 주었다.


컨퍼런스 규모든 상당히 컸는데 키노트 제외하고 하루에 총 6개의 세션이 존재하고 한 세션에는 최대 12개까지의 트랙이 동시에 진행이 되었다.(행사 일정이 세로보다 가로가 훨씬 긴 경우는 처음 봤;;;) 시간에 따라서는 12개가 다 안채워지는 경우도 많았지만 어쨌든 12개 중에서 하나를 골라서 들어가려다 보니 참 고민이 많이 되었다. 영어라서 사실 막 다 알아들은건 아니라서(영어로 들으면서 화면보면서 적는건 너무 어렵다.) 대충 간략히만 정리하려고 한다.


간단히 요약하면 전에 가본 해외 컨퍼런스는 커뮤니티주도 컨퍼런스였기 때문에 이런 일반적인 해외 컨퍼런스는 처음 참석해봤는데 커뮤니티 컨퍼런스의 질이 좋은 건 해외나 국내나 비슷한 것 같다.(Google I/O나 WWDC같은 초대형 컨퍼런스는 가본적없으므로 예외) 너무 방심하고 제목만 보고 세션을 골랐더니 기술공유가 아니라 제품홍보를 위한 세션이 너무 많았다. 그래서 첫날의 경험을 교훈삼아 이틀째는 주로 오픈소스 위주로만 들으니까 좀 나았다. 아무래도 요즘은 기술이 인터넷을 통해서 전세계적으로 잘 공유하기 때문인지 해외라고 퀄리티가 무척 높게 느껴지진 않았다.(그렇다 하더라도 해외 컨퍼런스는 참석해 보기를 권한다. 세션이야 공유되면 온라인으로도 볼 수 있지만 현지에서는 다른 느낄 수 있는 것들이 많이 있다.) 발표 퀄리티 자체만 보면 국내에서도 얼마든지 이정도 퀄리티로는 컨퍼런스를 열 수 있을 것으로 보였다.(물론 12트랙이나 운영하는 규모는 힘들지만...) 해외 컨퍼런스이므로 프로젝트의 커미터들의 경험이나 설명 혹은 실제적인 규모있는 프로젝트를 하면서 고민한 내용이나 경험을 공유해 주길 기대했는데 좀 뻔한 기술가이드정도 수준의 발표들이 많아서 아쉬웠다.(내가 세션을 잘못 골랐을 수도...)

1일차

The Future of Angular - Miško Hevery, Google

얼마 전에 읽은 AngularJS 기초편이라는 책에서 저자인 브래드 그린이 서문에서 구글 피드팩이라는 프로젝트를 수행하다가 6개월간 17,000라인의 프론트엔드 코드를 프로젝트 팀원이 자신이 만든 프레임워크로 2주만에 새로 작성할 수 있다고 해서 시켰는데 실제로는 3주가 걸렸지만 완성된 코드는 1,500라인으로 줄어들어서 깜짝 놀랐다는 이야기가 나오는데 이것이 Angular.js의 시작이었고 그 주인공이 이 세션의 발표자인 미스코 헤브리이다. 최근에 Angular.js에 관심이 많기 때문에 이번 컨퍼런스에서도 관심 주제중 하나였고 막 가고 싶었던 컨퍼런스는 아니지만 흥미가 생긴 이유중에 하나가 이 세션이었다.(현재 미스코는 Angular.dart쪽에 집중하고 있는 듯 하다.)


미스코의 발표를 직접 들으니까 네임밸류덕에 좋았고 Angular를 본지 얼마 안되었기 때문에 사용법 익히기에 허덕여서 프로젝트 개발상태같은 건 아직 추적하지 못하고 있는데 그런 부분에 대한 전체적인 얘기를 들을 수 있었다.

  • Angular.js는 최신 브라우저만 지원한다.(구현 브라우저는 1.x 브랜치에서 지원할 것이다.)
  • 최신 HTML5 표준들을 더 적극적으로 사용할 예정이고 Polymer프로젝트의 Polyfill라이브러리에 대해서 많이 언급을 했다.
  • 차후 계획에 대해서도 얘기했는데(결정났다기 보다는 시도중인듯) 비동기 의존성 주입(Asynchronous DI)와 Zone기능이다. AMD가 비동기로 코드를 로딩하는 것을 관리한다면 비동기 의존성 주입은 어떤 순서로 클래스를 인스턴스화할 것인지를 다루는 것이고 Zone 기능은 영역을 나누어서 Angular.js를 사용하는 곳에서 기존의 다른 라이브러리를 사용할 수 있도록 하는 것이다. ES6와 어노테이션을 얘기하면서 마치 자바처럼 보이는(자바스크립트가 아니라) 예시코드도 보여주었는데 ES6에 어노테이션이 있는 것은 아니므로 의도는 자료를 좀 찾아봐야 이해할 수 있을듯 하다.(dart인가? ㅡㅡ;;)

Memory management for smooth infinite-scrolling - Sumit Amar, Microsoft

요즘은 무한 스크롤을 많이 사용하고 최근에 개인 프로젝트를 하면서 스크롤링에 대해서 고민을 좀 많이 했던지라 선택해서 들어간 세션이었다. 무한 스크롤을 구현하면서 고민했던 내용을 공유해 주었는데 그냥 뭐 고만고만했다. 첫 접근은 스택을 사용해서 사용자가 스크롤을 하면 화면에서 사라진 DOM을 제거하고 메타데이터를 로컬스토리지를 이용해서 스택으로 쌓고 나중에 사용자가 다시 스크롤을 올리면 스택에서 가져와서 DOM을 생성한다. 하지만 이 방법은 너무 빨리 스크롤하거나 드래그를 사용하는 경우 빠지는 아이템들이 생길 수 있다. 두번째 접근은 범위에 대한 해시테이블을 사용하는 것이다. 각 아이텝의 위치를 어떤 범위로 나누고 이를 키밸류로 해시테이블에 저장하고 스크롤 할때 범위단위로 가져와서 보여주는데 이 방법은 스크롤을 적게 할때는 비효율적이다. 최종적으로는 두 방법을 섞어서 사용했다고...

Scale and performance: data visualization in modern web browsers - Gregor Aisch, Driven-By-Data.net

제목대로 비쥬얼라이제이션에 대한 발표였다. 자바의 Processing으로 만들어진 Fortune 500이라는 포츈기업들에 대한 비쥬얼라이제이션을 d3.js로 다시 구현한 경험을 얘기해 주었다. 성능상으로는 d3.js + SVG 조합보다 d3.js + Canvas 조합이 좀 더 낫고 특히 파이어폭스는 DOM이 많은 경우에는 크롬에 비해서 엄청나게 느린 성능을 보여주었다. CSS3 transition이 성능이 좋아서 requestAnimationFrame()보다 낫다. 마지막으로 성능을 위해서는 저수준으로 내려가서 사용하는 라이브러리의 소스코드를 봐야하고 여러 브라우저에서 다양한 시도를 해보고 성능을 측정하라는 말은 (평이하지만)좋았다.(발표자료가 좌우뿐만 아니라 위아래로도 움직이지 잘 움직여서 봐야한다.)

Develop High Performance Sites and Modern Apps with JavaScript and HTML5 - Doris Chen, Microsoft

MS에서 나온 사람이었는데 제일 별로였던 발표였다.(이래서 내가 에반젤리스트라는 직책은 안좋아한다능;;) 자바스크립트 성능 향상에 대한 얘기를 좀 들을려고 들어갔는데 자기 소개만 한 5분하더니 이 발표에서 설명할 내용은 윈도우즈 8 어플리케이션을 만드는데도 쓸 수 있다면서 윈도우즈 8 홍보도 한 5분한듯 하다. 그리고 바로 이어진 내용은 CSS는 헤더에 넣고 자바스크립트는 맨 아래 넣으라였던가?(틀린말은 아니지만 2013년에 이런 컨퍼런스에서 할 얘기는 아닌듯...) GC를 줄이는 얘기랑 메모리 초기화 비용에 대한 괜찮은 얘기도 좀 있었지만 약을 너무 팔아서 짜증나서 잘 들리지도 않았다. 성능 얘기하면서도 IE 11의 개발자도구에서 얼마나 프로파일링을 제대로 할 수 있는지를 열심히 홍보했는데 IE11은 아직 안쓰고 있지만 원래 그런거는 다른 브라우저에서는 대부분 되던거고 성능등에서 가장 문제를 많이 일으키는 7,8,9,10은 어떻하라고?라는 생각이 들며 대부분 MS에서 표준, 성능 얘기하면 짜증나는 이유와 동일하게 발표를 들으면서 짜증났다. 기술공유를 하고 싶은건지 홍보를 하고 싶은건지 알 수 없는 세션이었다.

Levelling Up in AngularJS - Alicia Liu, Lift

내가 요즘 쓰고 있는 Lift서비스의 개발자였는데 이 서비스는 앱으로만 사용해서 여기서 Angular.js에 대해서 발표할 줄은 전혀 몰랐다. 나는 마구 써보면서 기본없이 AngularJS를 배웠기 때문에 정리하면서 듣기 괜찮았지만 Levelling Up이라기 보다는 Basic 정도에 가까웠다. 서비스, 프로미스 디렉티브에 대한 사용법이나 중요한 부분에 대해서 설명한 세션이었다. 디렉티브를 이용해서 만든 마리오 데모의 소스는 디렉티브 공부하면서 참고하기에 괜찮아 보인다. 디렉티브로 저렇게 간단히 데모를 만들 수 있다는 점이 AngularJS의 장점이겠지...

Optimizing HTML5 for Distribution on Mobile Devices - Russell Beattie, Amazon

이 날 최악의 세션선택이었다.(이번에도 역시 에반젤리스트) 고르고 골랐는데 이 시간대에는 마땅히 끌리는게 없었다. 제목은 저렇게 되어 있지만 한 20분 정도는 Amazon 앱스토어가 얼마나 좋은가에 대해서 설명했다. 킨들파이어를 안써서 정확히는 모르겠지만 아마존 웹스토어에서는 웹기술로 앱을 만들 수 있는 것 같다.(아마존이 그런건지 안드로이드의 하이브리드인지는 잘..) 어쨌든 웹앱으로 만든 앱들을 보여주고 자신들의 스토어가 얼마나 좋은지 홍보를 한 20분 한 뒤 다른 사람이 나와서 앱 등록하는 과정이나 이런거 좀 설명하면서 킨들파이어에서 앱이 어떤 식으로 동작하는지를 보여주었다. 뒷부분은 거의 집중력을 잃어 듣지도 않았지만 최적화얘기를 하기는 했는지도 모르겠고 그냥 아마존 앱스토어 광고였다.



이 글은 HTML5 Developer Conference 후기 #2로 이어진다.

2013/11/04 01:57 2013/11/04 01:57