지금까지 강좌는 .NET 개발자들을 기준으로 진행해왔는데 (뭐 대부분의 강좌가 사실 언어와는 별 상관없었지만요….^^) Windows 8 앱 개발 이야기를 하면서 자바스크립트에 대해서 이야기하지 않고 넘어갈 수가 없습니다. 그래서 이번 강좌부터는 몇 회에 걸쳐서 자바스크립트로 메트로 스타일 앱을 개발하는 것에 대해서 이야기해볼까 합니다. 참고로 전 자바스크립트는 잘 모르니 이 점 감안해주세요^^;

 

 

 

 

 

애초부터 거기에 있었다.

 

개인적으로는 자바스크립트를 그다지 좋아하지 않습니다. VB/C#과 같은 최신 언어에 비해서 생산성도 많이 떨어지고, 속도도 느리고, IDE 지원도 떨어지고, 무엇보다도 디버깅하기가 쉽지 않은 언어이기 때문입니다. (사실은 실력이 없어서 그렇습니다.)

 

 

하지만, 그럼에도 불구하고 자바스크립트에 대해서 개인적으로 한 가지 인정하는 점 하나가 있다면 그 어떤 언어보다도 널리 사용이 되며 개발자의 스펙트럼도 굉장히 넓다는 점입니다. 마치 개발자라면 누구나 기본적인 내용은 알고 있는 교양과목과 같다고 할까요? (그렇다고 자바스크립트가 쉽다는 뜻은 아닙니다.) 사실 프로그램 개발하다 보면 누구나 한 번 쯤은 자바스크립트를 다뤄야 할 일이 생기는 듯 합니다.^^

 

 

이와 같은 느낌이 드는 가장 큰 이유는 자바스크립트가 웹 브라우저 안에서 작동하기 때문이 아닌가 싶습니다. 인터넷에 연결되는 거의 모든 기기에는 웹 브라우저가 있으며 웹 만큼 세상에서 널리 퍼진 플랫폼도 없지요. 자바스크립트로 개발한 웹 프로그램은 웹 브라우저만 있다면 플랫폼과 장치를 가리지 않고 작동합니다.(물론 이론적인 이야기입니다.)

 

 

그런데, 이런 자바스크립트가 최근 들어서 스마트폰이나 태블릿과 같은 모바일 기기의 등장과 함께 급속도로 인기를 끌고 있습니다.  사실 자바스크립트의 활용 분야는 매우 다양해졌습니다. AJAX의 등장으로 좀더 인터렉티브한 웹 애플리케이션을 만드는데도 사용이 되고 있으며, jQuery Mobile 등을 이용하여 손쉽게 모바일 웹사이트를 만들 수도 있게 해주며, PhoneGap이나 Titanuim과 같은 크로스 플랫폼 개발 도구의 기본 프로그래밍 언어로도 사용이 됩니다.

 

 

하지만, 자바스크립트는 넷스케이스 사에서 1995년에 처음 만든 이후부터 이미 우리 곁에 오랫동안 있어온 기술이며 기술로만 따지자면 전혀 새로울 것이 없는 기술입니다. 단지 우리가 새로운 활용처를 발견한 것 뿐이죠. 그리고 좀더 쉽게 사용할 수 있도록 프레임워크화 되어 가고 있는 것입니다.

 

 

Objective C나 C#를 배울 필요 없이 우리가 이미 잘 알고 있는 자바스크립트를 이용하여 모바일용 앱을 만들 수 있다는 사실이 멋지지 않나요?^^ 게다가 한 번 만들면 다른 플랫폼에서도 작동하기까지 합니다!

 

 

여하튼, 가장 진입장벽이 낮으면서 다양한 모바일 기기를 동시에 지원하는 개발 언어로서 별다른 대안이 없을 만큼 자바스크립트 + HTML5 조합이 대세인 것은 확실합니다.

 

 

 

 

 

 

Microsoft, 자바스크립트에 꽂히다.

 

데스크탑 OS의 최강자 Microsoft가 모바일 OS 분야에서 전혀 힘을 쓰지 못한지 몇 년이 지난 지금, Microsoft가 모바일 OS 시장 탈환을 위해 들고 나온 무기는 다름 아닌 자바스크립트입니다. 현재 모바일 OS시장에서 제일 중요한 이슈는 누가 얼마나 견고한 생태계를 만드냐는 것입니다. 애플은 선두업체로 iOS 생태계를 이미 견고히 만들어놔서 앞으로도 무너지지 않을 것처럼 보이고, 스마트폰에서 안드로이드의 생태계는 하드웨어 제조사를 기반으로 생각보다 잘 구축되었죠.

 

 

그런데, Windows Phone 7은 어떤가요? 솔직히 말씀드려서 VB/C#으로만 개발이 가능하기 때문에 기존 C++ 개발자는 수용을 못하고, 하드웨어 제약이 있어서 안드로이드만큼 하드웨어 제조사에게 환영받지 못하고 있는 것이 사실이죠. 물론 늦게 출발한 것이 제일 큰 이유입니다만…

 

 

이런 와중에 Microsoft에게 있어서 데스크탑 OS와 겹치는 부분이 있는 태블릿 시장에서만큼은 절대로 밀려서는 안되는 상황에 이르렀습니다. 그래서, Microsoft는 단 시간 내로 Windows 8의 생태계를 구축하기 위해 기존의 .NET 뿐만 아니라 C++과 자바스크립트까지 모두 끌어안았습니다.

 

 

사실, 자바스크립트로 Windows 8용 앱 개발을 할 수 있을 거라는 정보는 이미 2010년 말에 알려졌습니다. 이 소식 때문에 전세계 실버라이트 커뮤니티와 포럼에서 난리가 났죠. 주로 실버라이트의 미래에 대한 걱정이었습니다만…. 제 느낌으로는 이 시점을 기준으로 Microsoft에서 공개하는 정보나 소식들이 HTML5쪽으로 좀더 기울고 있다는 느낌을 주더군요.

 

 

실제로, 최근 Windows 8과 관련된 Microsoft의 행보를 보면 오히려 .NET을 역차별하는 듯한 느낌이 들 정도로 HTML5 + 자바스크립트에 집중하는 듯한 모습을 보이고 있습니다. 작년에 마이크로소프트의 국제 컨퍼런스인 //Build//에 참가했을 때도 C# 보다는 자바스크립트 쪽 내용이 훨씬 많았으며, 심지어는 같이 공개된 Blend 5 프리뷰는 XAML은 지원하지 않고 HTML5만 지원하는 .NET 개발자 입장에서 본다면 좀 황당한 상황까지 발생하기도 했습니다. 또한 Windows 8 개발자 프리뷰에 기본 탑재된 앱의 2/3 가까이가 C#/VB가 아닌 자바스크립트로 개발되어 있었습니다. 솔직히, 올해 공개된 블렌드 5 베타에서서도 XAML 디자이너는 허구한날 뻗는데 비해 HTML5쪽은 그럭저럭 쓸만하게 돌아가는 것을 보고 아 MS가 정말로 자바스크립트+HTML5에 올인했구나 하는 느낌을 받았답니다^^;

 

 

이처럼, Microsoft는 자바스크립트에 꽂혔다고 말할 수 있을 정도로 Windows 8에서 자바스크립트+HTML5에 대한 지원을 강화하고 있으며, 이는 메트로 스타일 앱과 IE10 모두에서 공통으로 발견할 수 있는 현상입니다. 어쨌든, 메트로 스타일 앱을 자바스크립트로 만들 수 있다는 것은 개발자 입장에서는 매우 환영할 일이며, Windows 8의 생태계를 확장하는데 가장 중요한 역할을 할 것입니다.

 

 

자바스크립트와 메트로 스타일 앱에 대해서는 말을 풀자면 한참을 할 수 있지만 이 쯤에서 줄이기로 하고 본격적인 이야기로 들어가기로 하지요.

 

 

 

 

 

 

메트로 스타일 앱에서 자바스크립트가 작동하는 방식

 

아래 그림은 메트로 스타일 앱 개발과 관련해서 아주 익숙하고 유명한 그림입니다.

image_2.png

 

 

 

 

이 그림을 잘 보시면 WinRT위에 자바스크립트와 HTML/CSS가 올라가 있군요.

.NET Framework 쪽과 비교하면 다음과 같이 대응이 되겠죠.

 

XAML  <----> HTML/CSS

C#/VB <----> JavaScript

 

즉 UI의 구조와 모양은 HTML/CSS로 정의하고 로직은 JavaScript로 개발하는 형태를 취하고 있습니다.

 

 

 

 

그런데, 데스크탑쪽에도 자바스크립트과 HTML이 있네요? 당연하게도 IE상에서도 자바스크립트를 사용할 수 있습니다.

마이크로소프트에서는 메트로 스타일 앱 개발에 사용되는 자바스크립트는 ECMAScript 5 표준을 지킨다고 되어 있습니다.

즉, 표준 자바스크립트 문법을 준수하기 때문에 IE상의 자바스크립트나 메트로 스타일 앱에서 사용하는 자바스크립트나 똑같습니다.

 

 

음… 그렇다면 기존 웹 페이지에서 사용하던 자바스크립트 소스를 메트로 스타일 앱 개발 시 그대로 사용할 수 있다는 걸까요?

네 이론적으로는 자바스크립트 표준을 준수하는 소스라면 메트로 스타일 앱에서도 그대로 작동합니다. 단, 보안상 일부 소스는 수정이 필요하긴 합니다만…

 

 

와우~ 이것 참 멋진 일이 아닐 수 없네요~!

하지만 세상은 그렇게 호락호락하지 않습니다^^; 이에 대해서는 아마도 여러 강좌에 걸쳐서 차근차근 이야기가 될 것 같네요.

 

 

 

 

 

 

자 그럼 구체적으로 자바스크립트로 만든 메트로 스타일 앱이 어떻게 작동하는지 살펴보도록 하겠습니다.

 

 

다음 그림은 IE와 메트로 스타일 앱에서의 자바스크립트 작동 구조를 비교한 것입니다.

 

image_4.png

 

 

 

 

IE에서는 우리가 이미 해왔던 것과 똑같이 IE가 HTML 소스와 자바스크립트를 처리하여 화면에 표시합니다.

이에 비해, 메트로 스타일 앱에서는 IE 대신 HTML Host Process라는 녀석이 HTML과 자바스크립트를 처리합니다. 그래서 iexplore.exe 대신 WWAHost.exe라는 프로세스가 실행이 됩니다.  실제로 자바스크립트로 만든 앱을 실행한 다음 프로세스 목록을 보면 다음과 같이 WWAHost.exe를 발견할 수 있습니다. 혹시, 데스크탑에서 HTML Application에 대해서 들어보셨던 분이라면 쉽게 이해하실 수 있을 겁니다.

 

image_6.png

 

 

 

 

 

 

다음은 자바스크립트 메트로 스타일 앱을 실행될 때 일어나는 일에 대해 설명하는 그림입니다.

 

image_8.png

 

 

 

 

자바스크립트 메트로 스타일 앱도 C#/VB로 만든 앱과 동일하게 .Appx 라는 압축 파일에 필요한 파일들이 들어가 있습니다. 단지 C#/VB의 경우에는 .exe 파일이 들어가있는데 비해 자바스크립트 메트로 스타일 앱에는 .html, .css, .js 등이 들어가 있습니다. 마치 웹 페이지 소스를 하나의 압축 파일로 묶은듯한 느낌이네요. 앱이 실행되면 위에서 얘기했던 HTML Host Process가 실행되면서 앱 실행에 필요한 코드들이 App Container로 올라와서 작동합니다.

 

 

 

뭐 대충은 감을 잡을 수 있을 듯 하군요. 웹 페이지 소스를 .Appx에 다 밀어넣어 놓고 IE 대신 HTML Host Process가 이를 처리하는 거라고 봐도 될 듯 싶습니다^^

 

 

 

 

 

 

WinJS란?

 

위쪽에 있는 IE와 메트로 스타일 앱의 비교 그림을 다시 보시면 매트로 스타일 앱 쪽에는 WinRT가 위치하고 있습니다. 자바스크립트 메트로 스타일 앱에서는 WinRT API를 사용할 수가 있습니다. 이점이 IE 안에서의 자바스크립트와 가장 큰 차이점으로, 자바스크립트 메트로 스타일 앱에서는 WinRT를 통해 로컬 리소스까지 마음대로 활용할 수 있어서 메트로 스타일 앱의 기능 구현에 제약 사항이 없다는 겁니다. 즉, C#/VB로 만드는 것과 완전히 동일하게 메트로 스타일 앱을 만들 수 있다는 거지요. 이 말을 반대로 하면 IE에서는 WinRT API를 사용할 수 없다는 말도 됩니다.

 

그런데, 자바스크립트 메트로 스타일 앱에서 로컬 리소스를 사용하려면 자바스크립트에서 WinRT API에 접근할 수 있어야 하는데, 어떻게 이것이 가능하게 되는 걸까요?

 

 

Microsoft에서는 자바스크립트 메트로 스타일 앱에서 WinRT API를 사용할 수 있도록 하기 위해서 WinJS – Windows Library for JavaScript라는 것을 새롭게 만들었습니다. WinJS는 Metro Style App을 위한 전용 JavaScript 라이브러리로 WinRT와 자바스크립트 사이의 브릿지 역할을 해줍니다. 사실상 자바스크립트로 메트로 스타일 앱을 개발하는 것은 WinJS 라이브러리를 사용하는 것과 같다고 말할 수 있을 만큼 WinJS는 자바스크립트 메트로 스타일 앱 개발과 뗄 수 없는 관계에 있습니다.

 

 

PhoneGap이나 티타늄과 같은 크로스 플랫폼 도구를 보면 표준 자바스크립트로는 할 수 없는 기능들 – 예를 들면 센서 사용, 로컬 파일 시스템 접근 등 –을 가능하게 하기 위해 자체적인 자바스크립트 라이브러리를 제공하는데 WinJS는 이런 수준을 훨씬 뛰어 넘어서서 C#/VB + XAML 만큼이나 편리하고 쉽게 자바스크립트로 메트로 스타일 앱을 개발할 수 있도록 통합적인 기능을 제공합니다.

 

 

 

그래서, WinJS에서는 다음과 같이 메트로 스타일 앱 개발 전반에 걸친 다양한 기능을 제공합니다.

 

image_10.png

 

 

 

 

위에서 눈여겨봐야 할 몇 가지 사항을 간단하게 설명해보겠습니다.

 

Promise – 자바스크립트에서 비동기 호출을 쉽게 사용할 수 있게 해주며 C#/VB의 Async Framework에 대응됩니다.

 

Navigation – 기존 웹 페이지와 달리 Single-page Navigation을 가능하게 해주며 C#/VB의 Navigation Famework과 유사한 기능을 제공합니다.

 

Data binding – HTML과 CSS를 이용하여 XAML처럼 데이터바인딩을 할 수 있게 하여 코드와 디자인을 분리해줍니다.

 

Animations – XAML에 있는 키 프레임 애니메이션까지도 가능하게 해줄만큼 강력하고 편리한 애니메이션 기능을 제공합니다.

 

Controls – 손쉽게 UI를 만들 수 있도록 다양한 컨트롤을 제공하며 GridView나 FlipView와 같은 컬렉션 컨트롤까지 제공해줍니다.

 

 

 

WinJS 기능 중 극히 일부만 설명했는데, 잘 보시면 .NET에서 지원되는 편리한 기능들을 자바스크립트 쪽으로 가져온 듯한 인상을 주는군요. 실제로 자바스크립트 메트로 스타일 앱 샘플을 몇 개 만들어보니 전반적인 개념이나 구조 측면에서 .NET으로 만든 메트로 스타일 앱과 유사한 점을 많이 찾을 수 있었습니다.

 

 

 

 

 

 

 

몇 가지 이슈들

 

자바스크립트 메트로 스타일 앱과 관련하여 몇 가지 생각나는 이슈들을 대해서 한 번 살펴보도록 하겠습니다. 참고로 저는 자바스크립트 전문가가 아니며 제가 아는 범위 내에서 매우 주관적으로 적은 내용이니 잘못된 게 있으면 바로 알려주세요^^

 

 

 

 

자바스크립트 메트로 스타일 앱은 .NET 매트로 스타일 앱이 할 수 있는 모든 것을 할 수 있나요?

 

이 문제에 대한 대답은 거의 그렇다입니다.

기본적으로 메트로 스타일 앱의 핵심은 WinRT인데 자바스크립트에서도 WinJS를 통해서 WinRT API를 호출할 수 있으므로 사실상 앱을 만드는데 기능제약은 없다고 봐도 무방합니다. 하지만… 제가 아는 범위 내에서 딱 한가지 안되는 점을 찾았습니다. 바로, 자바스크립트로는 WinRT 컴포넌트를 만들 수 없습니다.

 

다음 그림을 보시죠.

 

image_12.png

 

 

 

위 그림은 각 프로그래밍 언어 사이의 호출 관계도입니다. 위 그림에 따르면 C++, C#, VB는 WinRT 컴포넌트를 만들 수 있지만 자바스크립트로는 만들 수 없는 걸로 되어있습니다. 즉, 자바스크립트로 WinRT 컴포넌트를 만들어서 C#쪽에서 참조하는 것은 불가능합니다. 물론 그 반대는 가능하죠. 사실 자바스크립트 쪽에서는 바이너리 수준의 컴포넌트라는 개념 자체가 아예 없지요. 자바스크립트에서는 다른 자바스크립트를 소스 레벨에서 Include해서 사용하기 때문입니다.  런데, 이건 딱히 큰 문제라고도 볼 수 없을 수도 없는 것이, 큰 규모의 앱을 만든다거나 또는 여러 언어를 섞어서 앱을 만들면서 컴포넌트를 공유할 때나 발생할 수 있는 문제이기 때문에 현실에서 자바스크립트로 WinRT 컴포넌트를 만들 수 없다는 점이 큰 문제가 될 것 같지는 않으니 걱정하실 필요는 없을 듯 하네요. 만약 여러 언어에 걸쳐서 공통 요소가 필요하면 C++이나 C#/VB로 WinRT 컴포넌트를 만들어서 공유해야겠죠.

 

 

 

 

기존 자바스크립트 소스를 어디까지 사용할 수 있나요?

 

이 문제는 아마 현실적으로 가장 중요한 이슈일 듯 합니다. 저도 다 테스트를 해본 것이 아니기 때문에 장담하지는 못하지만 메트로 스타일 앱의 자바스크립트가 ECMAScript 5 표준을 제대로 지키고 있다면 이론적으로는 기존 자바스크립트 소스가 안돌아갈 이유는 없습니다. 예를 들면 이론적으로는 메트로 스타일 앱 개발 시 jQuery도 사용할 수 있을 겁니다. 다만, 현재까지 공개된 Windows 8 컨슈머 프리뷰에서는 IE 엔진에 버그가 약간 있어서 안되는 것들도 가끔 있을 수 있다고도 하네요.

 

 

 

 

메트로 스타일 앱과 다른 플랫폼 간의 자바스크립트 소스 공유가 얼마나 가능할까요?

 

이 문제 대한 답은 생각에 따라서 달라질 수 있는데 개인적으로는 UI단 코드는 거의 힘들지 않을까 싶습니다.

만약, 여러분이 만든 프로그램이 페이지가 1개이고 아주 간단한 프로그램이라면 거의 모든 소스를 재활용하여 웹 브라우저에서도 그대로 사용하거나 또는 다른 플랫폼용 앱으로도 만들 수 있을 겁니다. 하지만 Windows Store에 올릴 수 있는 정도의 현실적인 앱에서 자바스크립트 메트로 스타일 앱의 자바스크립트 소스를 다른 플랫폼으로 얼마나 이식할 수 있을지는 장담할 수가 없습니다. 바로 WinJS 때문이죠.

WinJS를 사용하는 순간 다른 플랫폼으로 이식이 매우 힘들어집니다. 왜냐면 다른 플랫폼에는 WinJS가 없기 때문이죠. 심지어는 데스크탑 IE로 옯기는 것도 쉽지 않게 됩니다.

 

 

그럼 WinJS를 사용하지 않은 앱이라면 가능한가요? 네 아마도 대부분의 코드를 옮길 수 있으실 겁니다. 예를 들어서 페이지 1개 짜리의 스도쿠 앱을 만들었는데 이 앱을 만들면서 WinJS의 편리한 기능을 하나도 사용하지 않고 오직 일반적인 HTML5의 태그와 자바스크립트만으로 만든다면 가능할 겁니다(물론 하드웨어에 전혀 접근하지 않는 앱에 한해서입니다). 하지만 각 플랫폼마다 사용자 경험이 다르기 때문에 어떤 플랫폼의 앱을 그대로 다른 플랫폼으로 옮기게 되면 어색해질 확률이 높습니다. (단, 보통 게임들은 자체적인 사용자 경험을 가지고 있기 때문에 이 문제에서 좀더 자유롭습니다.)

 

 

예를 들면, iOS에서는 커버플로우 UI가 흔하지만 메트로 UI에서는 보통 커버플로우 UI를 사용하지 않습니다. Microsoft의 메트로 UI 디자인 가이드에서도 다른 플랫폼의 앱을 포팅할 때 커버플로우나 책장 넘어가는 효과를 그대로 포팅하는 우를 범하지 말라고 써있더군요.

 

 

이처럼, 각 플랫폼마다 사용자 경험이 다르기 때문에 UI도 달라져야 합니다. 특히 iOS와 안드로이드는 좀 유사한 면이 있지만 메트로 UI는 다른 플랫폼과 사용자 경험이 많이 다르기 때문에 대부분의 경우 UI를 그대로 사용할 수가 없습니다.

 

 

즉, 메트로 스타일 앱은 매트로 UI답게 만들어야 한다는 것입니다. 그러기 위해서는 WinJS를 사용하는 것이 가장 효과적이겠죠. 그런데 WinJS를 사용하면 다른 플랫폼으로의 이식이 힘들어집니다. 그리고 매트로 스타일 앱에서 하드웨어 리소스에 접근하는 것은 WinJS를 이용해서만 가능합니다.(HTML5 표준 태그에서 지원되는 GeoLocation등은 제외)

 

 

그럼 우리가 해야 할 일은 뭘까요? 최대한 UI와 로직을 분리하여 재사용할 수 있는 블럭의 양을 늘리는 것이겠죠. 다행히 WinJS는 디자인과 코드를 쉽게 분리할 수 있도록 여러가지 기능을 제공하기 때문에 이를 잘 사용하시면 자바스크립트에서도 디자인과 코드를 최대한 분리할 수가 있습니다.

 

 

하지만, 뭐 꼭 안될 것도 없는 것이 모든 플랫폼에서 공통으로 사용할 수 있는 자바스크립트 프레임웍이 나오지 않을거라는 보장은 없으니까요^^   실제로 jQuery쪽에서는 Metro UI용 테마도 만들고 있다는 소식도 들리고 있네요.

 

 

어쨌든, 그럼에도 불구하고 다른 언어들에 비해서 자바스크립트가 제일 이식성이 높다는 점은 부인할 수 없을 듯 합니다. 기존 자바스크립트 소스를 C#이나 Objective C로 포팅하는 것보다 해당 플랫폼에 맞게 자바스크립트 소스를 수정하는 것이 더 빠를테니까요^^

 

 

 

 

 

 

 

오늘은 자바스크립트로 메트로 스타일 앱을 개발하는데 있어 필요한 사전 지식들에 대해서 설명했습니다. 다음 강좌에서는 실제 자바스크립트로 메트로 스타일 앱을 개발하는 것에 대한 이야기를 해보도록 하겠습니다.





profile