HTML5Rocks/KO: Summary: Chrome Barcamp Korea

10월 25일에 있었던 Chrome Barcamp에 참석했었습니다. 다양한 주제로 그룹을 나누어서 바캠프를 진행했는데 저는 Web Animation과 Google Web Designer, HTML5Rocks에 대해 몇 가지 개인적인 질의를 했습니다. 그와 별개로 Performance Optimization을 해보는 시간도 가졌습니다. (Thx to +Alex Danilo, +Paul Kinlan, +Ryan Schoen & 긱한 개발자분. 그리고 보니 이름을 못들었다는...) 좋은 자리 마련해주신 +Soonson Kwon님께도 감사드립니다. 다른 분들의 후기도 기다려봅니다. :)

Web Animation

네이티브로 구현된 모듈은 시드니에서 개발 중이며 곧 블링크에 포함될 것이라고 합니다. 아마 내년 상반기에는 크롬에서 만나볼 수 있을 것 같습니다. 물론 현재도 Polyfill을 이용해서 사용해 볼 수 있습니다.

Google Web Designer

얼마 전에 웹 디자이너를 살며시 뜯어 봤을 때 도구를 포함한 내부 환경은 거의 HTML5로 구성이 되어 있었던 것으로 봤었는데 구현 상으로도 몇가지 얘기해볼 만한 사항들이 있었지만 이에 대한 것은 다음에 따로 정리해보도록 하겠습니다.

일단 구글 웹 디자이너 툴은 광고 컨텐츠에 대해 메인 포커싱을 하고 있다고 합니다. 내부적으로 WebGL에 대한 설정 부분이 예약되어 있는 것에 대한 부분은 프로젝트 팀이 달라서 답변을 듣지는 못했습니다. (예약이 되어 있는 만큼 어느 정도 3D 기반의 리치 미디어에 대한 접근도 고려하고 있는 것이 당연하겠죠.)

Performance Optimization

성능 최적화는 전날의 크롬 Developer Day에서도 많이 다루어졌듯이 레이어의 크기나 사이즈 부분이나 이동 시의 적합한 방식에 대하여 얘기했습니다. 그 중 몇가지를 간단하게 정리하기 전에 간략하게 브라우저의 렌더링 과정을 살펴보고 넘어가보도록 하겠습니다.

브라우저 내 문서의 시각적인 각 엘리먼트는 대부분 하나 이상의 레이어라는 단위로 매핑되는 렌더링 트리를 구성하게 됩니다. 그리고 이 렌더링 트리를 브라우저가 렌더링을 하는데는 다음과 같은 몇가지 패스를 거치게 됩니다.

레이아웃(Layout)
스타일(Style)의 계산
페인팅(Painting)
합성(Composition)

반복되는 렌더링에서 한번의 패스는 반드시 모든 과정을 반복하지는 않으므로 패스 내에서의 동작을 최소화하는 방법이 성능 최적화의 주요 목표가 되겠습니다. 이와 관련된 자세한 내용은 아래의 참고 자료들을 읽어보시기 바랍니다.

실제적인 가이드라인 중 몇 가지를 살펴보면 다음과 같습니다.

이동에 대한 애니메이션의 경우 top, left 대신 transform : translate() 사용

레이어의 transform은 페인팅을 다시 요구하지 않으므로 translate()를 이용하여 동일한 시각적 효과를 얻을 수 있습니다.
예시

-webkit-transform: translateX(-1px);
-webkit-transform: translateY(38px);

레이어를 차지하는 엘리먼트는 가급적 사이즈와 갯수를 최소화

간단하게 설명드리면 레이어가 크면 GPU 상의 메모리도 크게 차지하고 레이어의 갯수가 많으면 역시 메모리의 할당 숫자도 많아지므로 이를 회피하는 것이 중요합니다.
비슷한 경우로 별로 중요하지 않은 레이어는 크기를 필요 크기보다 줄이고 (가급적 정수 배율로) scale()로 크기를 맞추는 것도 비슷한 효과를 얻을 수 있을 것으로 예상되네요. (게임에서 LOD를 사용하는 것과 마찬가지로 말이죠.)