지난 포스팅에 이어서, 이번 포스팅에서는 한국 웹 20주년 국제 컨퍼런스의 오후 세션들 중에서 제가 청취한 세션 중 앞에서부터 5개의 세션에 관하여 다룹니다. 지난 포스팅에서 언급하였던 이유로, 이 포스팅의 내용은 발표 전체의 흐름 또는 발표자의 의도와는 다를 수 있습니다.

 

CSS의 미래 (호콘 뷔움 리, CSS 창시자)

호콘 뷔움 리의 강연은 HTML과 CSS의 특성을 4가지씩 다루는 것에서 출발하였습니다. 특별히 저에게 중요하게 다가왔던 부분은, HTML과 CSS는 Open Standard라는 공통점을 가지고 있다는 부분이었는데요. 특정 기업에의 기술종속을 우려했던 오전 세션의 내용과 연장선 상에 있는 내용이라고 볼 수 있겠습니다.

나머지 강연의 대부분은 CSS3에 포함될 몇 가지 주요 스펙을 소개하는 것으로 채워졌습니다. 이중에서 제가 이야기거리로 삼을 스펙은, 사실 지금 컨퍼런스에 소개되도 새로울 것이 없을 정도로 비교적 널리 알려져 있는 CSS Transition. CSS로 애니메이션을 구현할 수 있는 바로 그 스펙입니다. 2013년에 있었던 NDC(넥슨 개발자 컨퍼런스)에서는 이를 이용해 CSS 만으로 게임엔진(!)을 만드는 실험적인 시도를 하고 계신 분도 있었죠. 저로서는 CSS가 과도하게 복잡해지면서 자바스크립트의 영역을 침범하려는 것처럼 느껴져 부정적으로 보고 있었던 스펙인데요.

호콘 뷔움 리는 이러한 스펙이 CSS3에 포함된 이유를 명쾌하게 정리해주었습니다. 바로 텍스트를 이미지로 만들지 않고 텍스트 그대로 HTML에 작성할 수 있기 때문이라는 것입니다. 기존에는 애니메이션을 위해서는 Animated GIF와 같은 이미지나 Adobe Flash와 같은 플러그인을 사용했습니다. 그러나 사람은 그 속에 들어있는 텍스트에서 의미를 파악할 수 있지만, 검색엔진을 비롯한 기계(컴퓨터)들에게 그것은 그냥 웹 문서에 삽입된 이미지나 플러그인에 불과할 뿐 맥락을 파악하지 못하게 됩니다. CSS Transition은 이를 피하기 위해 고안된 스펙이었던 것이지요.

하지만 이러한 명쾌한 해명에도 불구하고, 심정적으로는 여전히 우려를 감출 수 없는 것도 사실입니다. 텍스트의 이미지화를 피하기 위한 스펙으로 출발했다 할지라도, 실질적으로 그것을 넘어서는 (게임엔진 제작과 같은) 시도가 나올 수 있다는 자체가 스펙의 과도함을 증명하는 셈이 아닐까 합니다.

이외에 아직 작성 중인 다단(Multi-column)과 책장을 넘기는 듯한 느낌을 주는 Page the web과 같은 스펙이 소개되었는데, 호콘 뷔움 리는 이들이 네이티브 앱의 기능을 웹에서 구혀낳기 위한 목적에서 포함되었다고 규정하고 있었습니다. 이것은 앞으로 3~4년 내에 등장할 새로운 웹 기술 스펙들의 목표가 어디에 있는지를 보여주는 동시에, 이번 컨퍼런스 대부분의 세션을 꿰뚫는 주제이기도 하였습니다.

 

Node.js 현황과 베스트 프랙티스 (변정훈, SK 플래닛)

CSS 세션이 마친 후, 서둘러 서버 기술 쪽 트랙을 넘어와서 청취한 세션이었습니다. 이전 세션이 조금 늦게 마치는 바람에 앞 부분 일부는 듣지 못하였습니다.

Node.js의 현재에 있어서는 일단 프로젝트 리더의 변경과 그에 따른 대규모의 인력교체가 주목할만한 정보였습니다. 이로 인해 릴리즈를 미루는 대신 Node.js on the road를 비롯한 행사를 통해 사용자들의 의견을 수집하여 프로젝트 방향을 재설정하고 있는 듯한 움직임이 감지된다고 합니다.

이에 따라 향후 버전 업에서는 API의 변화나 새로운 스펙의 추가보다는, 내부 성능개선이 주안점이 될 것이라고 변정훈님은 진단하고 계셨습니다. 또한 Node.js가 자바스크립트를 사용하고 있는 만큼, 현재 확정이 임박한 ECMA Script 6의 개선점들이 Node.js에도 긍정적인 영향을 미칠 것이라고 분석하셨습니다. (ECMA Script 6에 관해서는 뒤에 청취에 브렌던 아이크의 세션에서 자세하게 들을 수 있었습니다.)

강연해주신 변정훈님의 블로그에 강연후기와 발표자료가 올라와 있으니 참고하시면 좋겠습니다.

 

더 빠른 웹을 위해: HTTP/2 (이응준, 네이버랩스)

HTTP는 단순하고 간결한 스펙을 가지고 있지만, 이와 대조적으로 성능면에서는 상당히 무겁습니다. 이를 극복하기 위해 준비되고 있는 HTTP/2를 이응준님께서 무척 캐주얼하면서도 명쾌하게 설명해주셨습니다. 저에게는 무척 쉽고 매력적인 세션이었습니다.

HTTP 기존 스펙은 1쌍의 요청과 응답 후에는 반드시 끊어진다는 점, 또 하나는 무압축 문자열로 되어있는 Header로 인해 오가는 통신량이 많다는 점에서 문제가 있었습니다. 이를 극복하기 위한 노력으로 Keep-Alive 스펙, Parallel Connection과 같은 브라우저 단에서의 고육지책, 기술적 난이도가 높아 실현되지 못한 Pipe Lining 등 갖가지 노력들이 있어 왔습니다. 이러한 문제를 근본적으로 해결하기 위해 HTTP/2가 시도하고 있는 것을 이응준님은 4가지로 요약하여 주셨습니다.

첫 번째는 Header를 축약하려는 시도인데요. HTTP/2는 Header를 Huffman coding 알고리즘으로 압축합니다. 또한 Header Table이라는 것을 도입하였는데요, 축약어들을 모아놓은 표라고 생각하시면 간단합니다. 주요 축약어 60가지는 미리 정의가 되어 있고, 그 외에는 동적으로 Header Table에 등록된다고 하는데요. 이를 통해 Header의 길이를 평균 1/3 정도 줄일 수 있었다고 합니다.

두 번째는 Multiplexed Streams로, 요약하면 클라이언트가 여러 개의 리소스를 한 번에 요청하는 것입니다. 기존 HTTP Header의 최상단에 있던 “GET /a.png”과 같은 요청이 여러 개가 들어온다고 생각하시면 간단할 것 같습니다.

세 번째는 Server Push로, 클라이언트가 요청하지 않은 리소스를 서버가 판단하여 클라이언트에게 전달하는 것입니다. 이를테면 클라이언트가 HTML 파일을 요청했을 경우, 대게 그 다음에는 그 HTML 파일이 다루고 있는 CSS, JS, 이미지 파일들에 대한 요청이 이어지겠죠. 서버가 이를 미리 알고 이 파일들을 담아서 응답할 수 있는 가능성을 열겠다는 것이 이 스펙의 요지입니다.

마지막은 Stream Priority로, 클라이언트가 여러 개의 리소스를 요청할 때 우선순위를 정할 수 있는 스펙입니다. 일반적으로 브라우저가 웹 문서를 읽을 때는, 일단 HTML을 파싱하여 마크업을 파악하고, 그 다음에 CSS를 기초로 렌더링을 하게 됩니다. 그런데 만약 Multiplexed Streams 방식으로 응답 1번에 여러 리소스를 받는데, CSS가 HTML보다 먼저 도착하게 되면 결국은 HTML이 모두 전송될 때까지 불필요한 시간이 소모됩니다. 이 시간을 줄여보고자 하는 것이 이 스펙의 의도라고 하겠습니다.

 

자바스크립트의 미래 (브렌던 아이크, 자바스크립트 창시자)

이어지는 브렌던 아이크의 강연은 역시 릴리즈 예정을 한 해 앞두고 작성되고 있는 ECMA Script Harmony(이하 ES6)의 이야기로 채워졌습니다. 십 여가지에 이르는 스펙들을 나열하듯이 소개하였는데요, 섣부른 판단일 수도 있겠지만 이 강연에서 소개된 ES6 스펙은 확정 때까지 크게 달라지지 않을 것이라고 짐작해도 무방할 것 같습니다.

다만 가지수가 많아서 이 글에서 모두 다루기는 어려울 것 같습니다. 때문에 제가 메모한 항목들을 아래에 나열하고, 자세한 설명이 있는 경우에는 관련 정보를 링크해두고자 합니다. 링크는 주로 모질라 개발자 네트워크에서 가져왔습니다. 본래는 현재까지 공개된 ES6 스펙 중에서 모질라 계열 브라우저에 현재 사용할 수 있는 항목들을 다루고 있지만, 예제 코드가 잘 되어 있어 ES6 스펙 그 자체를 이해하기에도 무방하여 보여 저도 수시로 참고하고 있습니다.

1. Class
2. Module
3. Symbol
4. Arrow function syntax
5. Default Parameter
6. Rest Parameter
7. Spread operator
8. for-of syntax
9. Generator
10. Map
11. Set
12. Proxy
13. Typed Array & Typed Object

모든 스펙을 소개하고 난 브렌던 아이크는, 자바스크립트는 사람과 컴퓨터를 모두 아우르는 언어(One JS, for human & computer)가 되는 것을 지향점으로 삼고 있다고 밝혔습니다. 프로그래밍 언어는 컴퓨터가 실행하는 것 뿐만 아니라, 사람 역시 이를 읽고 해석할 수 있어야 한다는 것인데요.

하지만 자바스크립트가 과거의 누구나 읽고 쓸 수 있는 가벼운 언어에서, 점차 배움에 장벽이 있고 무거운 언어로 변해가는 느낌을 받는 것은 저 하나 뿐일까요. 강연은 C++을 ES6로 포팅하여 작성한 3D 게임을 브렌던 아이크가 직접 플레이하는 것으로 막을 내렸습니다. 많은 사람들의 눈길을 끈 화려한 데모였지만, C++로 작성된 코드를 ES6로 포팅이 가능하다는 시점에서 이미 자바스크립트의 지향점은 흔들리고 있는 것이 아닐런지요.

 

HTML5 이후의 변화들 (다니엘 데이비스, W3C)

HTML5는 스펙이 확정되지 않은 지금도 모바일을 중심으로 널리 활용되고 있는데요. W3C 멤버이자 일본 케이오 기주쿠 대학의 연구원인 다니엘 데이비스는, HTML5가 다음의 3가지 지향점을 가지고 있다고 강조하며 강연의 문을 열였습니다.

하나는 습관의 표준화(Standardization of habits)입니다. 우리가 웹 페이지를 작성하면 일반적으로 header와 footer를 <div> 등의 태그로 나누고, 여기에 id나 class 이름을 붙여 구분하는 습관이 있었습니다. HTML5가 이들을 <header>와 <footer> 등의 마크업으로 만들어버린 이유가 바로 이러한 지향점 때문입니다.

또 하나는 개발자와 사용자들이 개선되기를 원하는 것(Things we wanted fixing)입니다. 여기에 해당하는 대표적인 것이 바로 멀티미디어를 웹 페이지에서 만나고 싶어하는 수요입니다. HTML5에서는 이러한 멀티미디어를 위해 <audio>와 <video> 같은 태그들을 신설했습니다.

마지막은 재사용 가능한 컴포넌트(Re-usable Component)입니다. 달력이나 진행률 막대와 같은 컴포넌트들이 추가될 예정이고, 심지어는 Web Components라고 하여 개발자가 이러한 컴포넌트를 개발할 수도 있는 스펙도 기다리고 있습니다.

이후에는 조금 더 미래로 나아가서, HTML5와 자바스크립트로 여러 디바이스에 접근하는 API에 대한 내용이 소개되었습니다. 이미 사용되는 스펙 중에는 모바일 기기의 GPS에 접근하여 위치정보를 가져올 수 있는 GeoLocation API가 가장 잘 알려진 예일 것입니다. 다니엘 데이비스는 향후 모바일 기기의 밝기측정 센서, 진동기능, 베터리 등도 API로 접근할 수 있게 될 것이라고 말했습니다.

훨씬 더 먼 미래에는 TV나 자동차의 정보들에 관한 API도 정의할 것이라는 포부를 밝혔는데요. 정말로 웹 기술이 네이티브 앱을 누르고 패권을 잡게 되면, 우리 생애에 자동차 계기판이 HTML5와 CSS로 작성되는 시대가 올지도 모르겠네요.