Windows Azure에서 리눅스를 게스트 OS로 2012년 중에 지원을 추가할 예정입니다.
Microsoft 전문 테크니컬 칼럼니스트인 Mary-Jo Foley의 기사에 따르면, Microsoft가 2012년 중에 리눅스를 실행할 수 있도록 Windows Azure 서비스를 업데이트할 예정이라고 합니다. 워낙에 특이하고 걸출한 토픽인지라 이 기사 자체가 잘못된 것이 아니냐는 반문을 살 정도로 뜨거운 이슈인 것 같습니다. :-)
현재 나와있는 Web Role, Worker Role은 Visual Studio를 이용하여 개발자가 Application Instance를 패키징해서 Windows Azure에 배포할 때 이것을 VM으로 변환하여 Windows Server 2008이나 Windows Server 2008 R2에서 실행할 수 있도록 바꾸고 있고, 작년에 나온 VM Role은 여기서 좀 더 나아가서 VHD 안에 Windows Server 2008 R2를 설치하고 VHD 단위로 VM을 만들 수 있도록 하는 기능을 내놓았습니다. 그러나 지금까지 나온 것은 모두 한 가지 기술적 특징이 있는데, 실행 중인 VM이 예고 없이 자동으로 재시작되거나 초기화될 수 있다는 점입니다. 그래서 Windows Azure 기반으로 서비스를 개발할 때에는 VM 안에 상태를 보관하는 방식 대신 Stateless/Remote Storage를 활용하는 전략을 택해야 했었습니다.
하지만 Linux VM에 대한 지원과 더불어 장기 실행 VM이 Windows Server에 대해서도 같이 제공되어 Amazon Web Service의 Elastic Cloud Computing 서비스와 같은 형태의 VM Hosting을 Windows Azure에서도 사용할 수 있을 것으로 보입니다. 현재 예상되는 리눅스 배포판으로는 CentOS, RHEL, Suse Linux 등 기존의 Hyper-V 스택에서 원활하게 구동 가능한 상용 리눅스 배포판 대부분이 여기에 포함될 것으로 보입니다.
지금 소개하는 기능은 CTP 버전으로 올해 봄 (2012년 봄) 시즌에 새로 런칭될 것으로 보입니다. 그리고 이 외에도 SharePoint 서버와 SQL Server를 탑재한 가상 머신 이미지의 배포도 같이 지원함으로서 SQL Azure 특유의 기술적 한계를 보완하고 Private Domain에서 사용 가능한 SQL Server를 Windows Azure에서도 이용할 수 있을 것으로 보입니다.
오늘 소개하려는 Visual Studio 확장 기능은 멀티 타기팅 팩의 기능을 매우 적극적으로 활용하는 똑똑한 확장 기능이다. 실무에서 3.5세대 혹은 4세대 닷넷 프레임워크를 적극적으로 사용 중인 개발자들이 국내에도 많이 있을텐데 이 경우 숟한 고민에 부딪히게 되는 것 중에 하나는 다중 플랫폼을 지원해야 한다는 점이다. 대충 열거해봐도 세 가지 이상은 된다. ASP.NET, Windows Presentation Foundation, Silverlight, 경우에 따라서는 XNA Game Studio나 Windows Phone 7.1까지 생각해야 하는 셈이다.
물론 신경써서 세심하게 잘 프로그래밍할 수 있을만큼 노련하다면야 이런 도구가 굳이 필요하지는 않겠지만 사람이 하는 일인지라 신경쓸 것이 많아지면 자연스레 귀찮을 수 밖에 없고 실수도 어디선가는 꼭 나온다. 이런 불분명하고 애매한 상황을 도구를 통하여 정확하게 잡아낼 수 있다면 괜찮지 않을까? Microsoft 개발 팀이 이런 문제를 해결해 줄 명쾌한 답을 Visual Studio Gallery에 올려놓았으니 참고하기 바란다. 아래의 URL에서 다운로드할 수 있다.
Portable Library Tools를 설치하면 Visual Studio에 새로운 프로젝트 템플릿이 C#과 Visual Basic .NET에 대하여 Windows 카테고리 아래에 아래 그림과 같이 나타날 것이다.
시험삼아 새 프로젝트를 한 번 만들어보자. 이름에서 알 수 있듯이 특별할 것이 없는 공통되는 코드를 묶기 위한 클래스 라이브러리 프로젝트로서 만들어지며 일상적으로 여러분의 코드를 추가할 수 있다. 그런데 정말 중요한 것은 프로젝트 속성 안에 들어있다. 프로젝트 속성을 열어보면 아래와 같이 재미있는 구성을 볼 수 있다.
목표로 하는 프레임워크를 이전처럼 하나만 선택하는 것이 아니라 하나 이상을 동시에 지정할 수 있다. 이는 다시 말해서 이들 프레임워크의 공통 분모만을 사용하여 클래스 라이브러리를 정확히 프로그래밍할 수 있도록 보증한다는 의미이다. 그리고 Change 버튼을 클릭하면 더 유용한 쓰임새를 찾을 수 있다.
Visual Studio와 함께 설치된 다른 멀티 타기팅 팩이 있을 경우 여기에 모두 열거되어 여러분이 선택할 수 있도록 할 수 있다. 프로젝트의 종류가 많고 정말 일반적이면서도 널리 쓰여야 할 클래스 라이브러리를 만들어야 한다면 여기서 선택을 어떻게 하는가에 따라서 사용할 수 있는 API가 자동으로 필터링된다. 만약 위에서 선택한 플랫폼에서 사용할 수 없는 API에 대한 내용이 발견되면 곧바로 빌드 오류로 나타나기 때문에 문제를 쉽게 찾아낼 수 있다. 그리고 여기서 선택한 대로 해당 프로젝트에서 레퍼런스로 추가할 수 있으므로 생산성도 높일 수 있다. 즉, 솔루션이나 프로젝트를 여러벌로 나눠 관리할 필요 없이 한 곳에서 모두 관리할 수 있다.
이 도구를 사용하기 위해서는 Visual Studio 2010 전체 버전이 필요하며 SP1이 설치되어있어야 한다. 그리고 다른 타기팅 팩이 필요하다면 아래 URL에서 추가적으로 설치할 수 있다. 타기팅 팩은 그 자체로 설치할 수 있는 것은 아니고 보통은 해당 플랫폼에 대한 SDK 안에 같이 수록된다는 점에 유의해야 한다.
지난번에 이어 오늘은 jQuery Mobile을 이용하여 단일 HTML 페이지 안에서 여러 멀티 페이지 UI를 포함하도록 모바일 페이지를 만들어 볼 것이다. 적어도 이 정도는 되어야 흔히 말하는 모바일 기반의 웹 사이트를 상상할 수 있는 첫 걸음이 될 것이다.
지난번에 간단히 소개한대로, data-role Attribute가 jQuery Mobile에서는 핵심적인 역할을 수행하며, Page <DIV> 태그가 컨테이너 노릇을 하고, 여기 아래에 Header, Content, Footer 순으로 <DIV> 태그가 배치되어야 한다고 하였다. 그리고 Page <DIV> 태그들 중 가장 먼저 DOM에서 검색되는 항목이 jQuery Mobile에서 가장 처음 노출시키는 페이지가 된다고 하였다. 멀티 페이지 UI는 단순히 여기에 다른 Page <DIV> 태그들을 첫 Page <DIV> 태그 뒤에 이어붙이고 이들 사이를 하이퍼링크로 연결하는 작업만을 하는 것 뿐이다.
따라하기 쉬운 예제를 위하여, 오늘 만들어 볼 것은 모바일 사진 갤러리이다. 준비물은 모바일에서 로드하기에 부담스럽지 않을 정도의 해상도와 품질을 가진 사진 파일 3~4장 정도면 된다. 필요하다면 여러분이 가지고 있는 디카 사진을 적당히 해상도를 줄이거나 품질을 떨어뜨려 샘플 사진을 만들기 바란다.
멀티 페이지 UI 흐름 구상하기
멀티 페이지 UI를 만들기에 앞서, 어떤 순서로 사람들이 페이지를 네비게이션하게 될 것인지를 기획하는 작업이 선행될 필요가 있다. 연필과 종이를 이용해서 스케치를 해도 되고, 좀 더 체계적인 시스템을 사용하기 원한다면 Balsamiq과 같은 전문적인 Mock up 도구를 이용해도 된다. 필자는 아래와 같이 정말 draft type의 mock up을 Balsamiq Online Version을 통해서 만들어 보았다. (사실 이런 것을 따로 기획하지 않아도 될 만큼 단순하지만 여러분의 이해를 돕기 위하여 시도해 본 다소 성의 없는 mock up이니 넓은 이해를 바란다.)
세 장의 사진을 모바일 상에서 표시하기 위하여 위와 같은 UI와 흐름을 가진 멀티 페이지 템플릿 UI를 만들어보려고 한다. 버튼 1과 버튼2와 버튼 3을 눌렀을 때 나타낼 사진은 여러분의 재량에 따르기로 하고 계속해서 페이지 구성을 실제 마크업으로 옮겨보도록 하자.
멀티 페이지 만들기
이제 위의 레이아웃을 실제 멀티 페이지로 옮겨 볼 차례이다. 세 페이지의 화면이 모두 동일하므로 첫 Page <DIV> 태그를 만들고 이 태그를 응용하여 뒤에 다른 페이지들을 붙여나가면 쉽게 완성할 수 있을 것이다. 갤러리 페이지의 화면은 다음과 같은 코드로 나타낼 수 있을 것이다.
위의 코드에서 굵게 표시한 부분들이 jQuery Mobile이 이해하고 처리하는 실질적인 부분들임을 기억하도록 하자. 위의 코드가 얼핏 보기에는 HTML의 규격을 벗어난 것처럼 보이거나 혹은 서버 사이드에서만 처리가 가능할 것처럼 보일 수 있지만 위의 규격은 HTML5에서 매우 합당하고 정확한 규격이다. 바로 Custom Attribute 덕분인데, 이와 같이 jQuery Mobile과 사전에 약속한 Custom Attribute를 사용함으로서 jQuery Mobile이 이 페이지의 내용을 자유롭게 다룰 수 있도록 해주는 것이다. 반대로 말하면, 위와 같이 지정하지 않은 HTML 요소에 대해서는 jQuery Mobile이 일절 간섭하지 않는다는 뜻이기도 하다.
뷰 포트에 대한 이야기
모바일 웹 페이지를 만들 때 가장 중요한 것이 하나 있는데 바로 뷰 포트에 관한 사항이다. 이제까지 우리가 다루어왔던 웹은 모두 데스크 탑 브라우저를 기준으로 설계되어왔다. WML을 이용하여 모바일 페이지를 디자인하던 시절도 있었지만 이 때만 하더라도 뷰 포트에 대한 이야기는 거의 없었다고 봐야 하겠다. 하지만 HTML이라는 통일된 수단을 가지고 모바일 페이지를 설계하면서부터 이런 논의가 활발해졌고 지금은 하나의 규칙으로 정해져있다.
우리가 일상적으로 보는 뷰포트는 해상도가 아무리 못해도 640x480 이상이 되는 디스플레이를 기준으로 하고 있으며 이는 스마트폰의 디스플레이보다는 어떤 이유에서이든 압도적으로 높은 해상도이다. 당연히 스마트폰이 표시할 수 있는 해상도와는 차이가 생길 수 밖에 없는데 스마트폰 제조 업체들은 나름대로 이에 대한 해결책을 모색하기 위하여 뷰포트를 억지로 맞추어 웹 페이지를 표시한다. 여러분이 초창기 스마트폰을 가지고 스스로 만든 웹 사이트를 브라우징해보면 이를 곧바로 알 수 있는데, 화면이 실제 데스크탑에서 보여지는 것과 비슷하게 보이기는 하지만 너무 작아져서 브라우징하기 참 어려운 모양으로 페이지가 나타나게 됨을 확인한다. 물론 사용자는 이가 없으면 잇몸이라도 쓰는 심정으로 화면을 연신 확대하고 스크롤 해가면서 어렵게 쓰기야 하겠지만.
이런 문제점을 예방하고 꼭 필요한 컨텐츠만을 계획적이면서도 알차게 담을 수 있도록 하기 위하여 스마트폰을 기획하지만 더 구체적으로는 스마트폰이 이런 식의 재정의를 임의로 하지 않도록 규정을 강제할 필요가 있는데 이를 위하여 메타 태그로 페이지마다 뷰포트에 대한 설정을 잡아주는 것이 꼭 필요하다. 우리가 사용할 뷰 포트는 아래와 같으며 아래의 메타 태그를 지금 여러분이 실습할 페이지의 <HEAD> 태그에 추가하기만 하면 된다.
페이지 간 탐색을 위하여, data-role이 page로 설정된 <DIV> 요소에 대해서 ID 속성을 지정하였고 이를 Hyperlink에서 Anchor 속성으로 지정한 것에 주목하라. jQuery Mobile은 이에 대한 자바스크립트 수준의 처리를 자동으로 구현해주고 있으므로 여러분이 각 <DIV> 요소의 비주얼을 일일이 관리할 필요가 없다는 것이 매우 바람직하다. 아쉽게도 Windows Phone 7.1에 포함된 IE에서는 조금 미미하지만 다른 스마트폰의 WebKit 기반 브라우저들로 살펴보면 페이지 간 애니메이션 전환 효과도 정확하게 보인다.
마무리하며
jQuery Mobile에 대한 관심은 나날이 늘어가고 있다. PhoneGap에 대한 직접적인 지원도 하고 있으며, 뿐만 아니라 PhoneGap 그 자체도 영역을 넓혀서 이제 Windows Phone 7에서도 직접 사용할 수 있을만큼 프레임워크 수준이 많이 좋아졌다.
jQuery Mobile 덕분에 여러분이 이미 만들었거나 운영 중인 웹 사이트에 이와 같이 모바일 사이트를 하나 더 만드는 것은 약간의 노력을 기울이기만 한다면 얼마든지 손쉽게 추가할 수 있게 되었다. 게다가 이제는 버전 1.0이므로 믿고 사용할 수 있을만큼의 수준이 되었다. 오늘 한 번 시험 삼아서 여러분만의 모바일 웹을 만들어보기 바란다. 홈페이지가 웹 호스팅 환경에서 실행된다고 할지라도 라이브러리나 프레임워크는 CDN에서 내려받도록 걸어주기만 하면 되므로 트래픽 걱정도 할 필요가 없으니 더더욱 자신감을 가지고 만들어보기 바란다. :-)
