심층 해부: 눈이 내려요...

오늘 시애틀에서 보기 드물게 눈보라가 내리는 정경을 보고 문득 2011년 연하장 테스트 드라이브 데모인 '눈이 내려요'를 설명하는 글을 올리면 좋겠다는 생각이 들었습니다. - 편집자

브라우저가 기본 하드웨어를 효과적으로만 사용한다면 가능성에는 한계가 없습니다. 연말 연휴 기간에 Internet Explorer 10에서 하드웨어 가속 기능을 완벽하게 이용하는 터치 방식 브라우징의 장점이 잘 드러난 데모가 제공되었습니다. 이번 글에서는 이 눈이 내려요 데모를 만든 방법을 자세히 소개합니다. 이 데모 패턴에는 현재 웹 전반에서 부상하고 있는 HTML5와 초기 Metro 스타일 앱이 잘 반영되어 있습니다. 오능 우리는 시각적 측면보다는 기능적 관점에서 논의하겠습니다.

저전력 휴대 장치와 터치 방식의 사용자 경험이 주류로 떠오르면서 브라우저 성능에 대한 고객의 기대 또한 빠르게 높아지고 있습니다. 현재 브라우저 성능이라고 하면 손가락으로 웹 사이트가 얼마나 부드럽게 움직이는가, 터치 동작에 웹 사이트가 얼마나 빠르게 반응하는가, 또 브라우저가 배터리를 얼마나 효과적으로 사용하는가 등을 꼽을 수 있습니다. Internet Explorer 10 및 Windows 8 개발을 시작하면서 우리는 실제 사용 환경에서 가장 빠른 브라우저를 개발한다는 목표를 세웠습니다.

'눈이 내려요' 만들기

	연하장 엽서 먼저 연하장 인사말을 적는 부분이 있는 테마 엽서로 시작합니다. 이 엽서는 HTML5 캔버스를 사용하여 런타임 시 생성되며 이미지 그리기, 그라데이션 작성, 불투명도와 기울기 조절 등 일반적인 다양한 그리기 기법을 사용합니다.
	눈보라 애니메이션 이제, 많은 눈송이가 내리게 하여 눈보라를 만듭니다. 이를 위해 엽서 위에 놓여 있는 두 번째 캔버스를 사용합니다. 각 눈송이는 현재 위치, 속도 및 그리려는 이미지 등 눈송이의 상태를 가진 JavaScript 컬렉션의 한 개체로 표현됩니다. 각 프레임에서 캔버스가 지워지고 기본 모델로부터 장면이 다시 만들어집니다.
	쌓이는 눈송이 시간이 지남에 따라 표지판에 눈송이가 쌓입니다. 히트 테스트 기법을 이용하여 눈송이가 표지판 위에 닿는 시점을 정하고 눈송이에 표지판의 한 목표 지점을 무작위로 할당합니다. 눈송이가 목표 지점에 접근하면 HTML5 캔버스의 합성 모드를 사용하여 캔버스 위에 눈송이를 만듭니다.
	눈 쓸어내기 손가락이나 마우스로 엽서에서 눈을 쓸어낼 수 있습니다. 여러 포인터 모델에서 하나의 일관된 API 사용을 지원하는 새로운 MSPointer 이벤트를 통해 사용자 입력을 추적할 수 있습니다. 그 결과 Windows 8에서 실행되는 Internet Explorer 10으로 멋진 다중 터치 경험을 만끽할 수 있습니다. 이렇게 캡처한 점들을 사용하여 캔버스를 군데군데 지워 마치 눈이 쓸어내지는 것과 같은 상황을 연출합니다.
	장면 완성 레이어가 합쳐지면서 연하장 인사말이 담긴 장면을 만들어냅니다. 이 데모에 사용된 패턴은 스크립트 기반 애니메이션, 정교한 사용자 입력, 물리학적 기반의 게임 로직 등 Angry Birds나 Cut The Rope와 같은 게임에서 일반적으로 사용되는 기술들을 보여줍니다.

많은 사용자들이 Internet Explorer 10과 Windows 8에서 완벽한 하드웨어 가속 기능과 터치식 HTML5 플랫폼으로 실현되는 빠르고 유동적인 연동 환경을 경험해보시길 바랍니다. 이 놀라운 환경을 경험해보는 가장 좋은 방법은 Windows 8 개발자 프리뷰를 통해 직접 사용해보는 것입니다.

- Bogdan Brinza‎, 프로그램 관리자, Internet Explorer