이번 컬럼은 김정훈(kimtl)님이 번역해 주셨으며, ASP.NET MVC 4 Mobile 애플리케이션을 만들고 Windows Azure 웹 사이트에 배포하는 방법에 대해 설명하고 있습니다 원문은 http://www.windowsazure.com/en-us/develop/net/tutorials/aspnet-mvc-4-mobile-website/ 입니다.

Windows Azure 웹 사이트에 ASP.NET 모바일 프로그램 배포하기

이번 강좌에서는 Windows Azure 웹 사이트에 여러분의 응용 프로그램을 배포하는 방법에 대해 알려드릴 것입니다. 이를 실습하기 위해서는 ASP.NET MVC 4 개발자 프리뷰 버전(현재는 Release Candidate버전까지 출시되어 있음)의 모바일 기능을 사용하겠습니다. 이 강좌를 따라 하시려면, Visual Studio 2010 SP1을 사용하시거나, 아니면 무료로 제공되는 Microsoft Visual Web Developer 2010 Express Service Pack 1(“Visual Web Developer”)을 다운로드 받으셔서 사용 하시면 됩니다.

이번 강좌에서 다루는 내용

• ASP.NET MVC 4 템플릿에서 HTML5 viewport 속성 사용 및 적응형 랜더링으로 모바일 장치 화면에 최적화 시키기.
• 모바일 관련 뷰를 만드는 방법.
• 사용자가 모바일 뷰 및 데스크탑 뷰를 변경할 수 있는 스위처를 만드는 방법.
• Windows Auzre에 웹 응용프로그램을 배포하는 방법

이 강좌에서 여러분은 시작 프로젝트에서 제공해주는 간단한 회의 목록 응용 프로그램에 모바일 기능을 추가하게 될 것입니다. 아래의 스크린샷은 Windows 7 Phone 에뮬레이터에서 보여지는 완성된 응용 프로그램의 메인 페이지 입니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/finishedappmainscreen.png

개발환경 설정하기

아래 목록은 이번 강좌에서 필요한 소프트웨어의 목록입니다. 아래 사항들이 준비 되었는지 확인하시기 바랍니다.

• Visual Studio Web Developer Express SP1 prerequisites
• ASP.NET MVC 4 RC
• Windows Azure SDK for .NET - June 2012

Visual Studio 2010 업데이트도 해 주십시오.

• 웹 배포 업데이트

또한, 모바일 브라우저 에뮬레이터도 필요할 것입니다. 다음 중 어떤 것을 선택하셔도 됩니다.

• Windows 7 Phone Emulator(이 강좌 안의 모든 스크린샷에서 사용하는 에뮬레이터 입니다)
• Opera Mobile Emulator
• Apple Safari에서 사용자 에이전트를 iPhone으로 설정합니다. Safari의 사용자 에이전트를 iPhone로 설정하는 방법은 David Alison의 블로그에 소개되어 있습니다.(How to let Safari pretend it's IE).
• FireFox 와 FireFox User Agent Switcher.

이 강좌는 C#코드 기준으로 되어 있습니다. 하지만 시작 프로젝트 및 완성된 프로젝트는 Visual Basic 코드로 작성된 것도 제공되므로, 이 강좌가 C# 코드 기준인 점을 감안하셔서 이해하시면 되겠습니다. Visual Basic 및 C# 소스 코드로 만들어 진 Visual Studio 프로젝트는 아래에서 동일하게 제공 됩니다.

• 시작 프로젝트 다운로드
• 완성된 프로젝트 다운로드

목차

• Windows Azure web site 만들기
• 시작 프로젝트 설정
• Views, Layout, Partial View 오버라이드
• jQuery Mobile을 사용하여 모바일 브러우저 interface 정의하기
• Speakers 목록 개선
• Mobile Speakers View 만들기
• Tags 목록 개선
• Dates 목록 개선
• SessionsTable 뷰 개선
• SessionByCode 뷰 개선
• 응용 프로그램을 Windows Azure Web Site에 배포하기

Windows Azure 계정 만들기

1. 브라우저를 열고, http://www.windowsazure.com로 이동합니다.

2. 무료 계정을 등록하기 위해서, 우측 상단에 있는 [무료 평가판(Free trial)]을 클릭하고, 다음 단계들을 진행하면 됩니다. 신원 증명을 위해서 신용 카드와 핸드폰 번호가 필요할 겁니다만, 요금이 과금되거나 하진 않습니다.

   
   출처 : http://www.windowsazure.com/media/devcenter/shared/freetrialonwindowsazurehomepage.png
   

   좀 더 상세한 설명은 태오 사이트의 강좌 "Windows Azure 한국계정 등록하기(무료 평가판)"에 매우 자세하게 잘 나와 있으니 필요하신 분은 참고하세요.

Windows Azure 웹 사이트 기능 활성화하기

1. https://account.windowsazure.com/ 로 이동해서, Windows Azure 계정으로 로그인을 합니다.

2. 사용 가능한 미리보기 기능이 무엇이 있는지 [미리 보기 기능(Preview features)]을 클릭하여 확인합니다.

   
   출처 : http://www.windowsazure.com/media/devcenter/shared/antares-iaas-preview-01.png
   

3. 밑에 보면 [웹 사이트]가 있을 겁니다. [try it now]를 클릭하세요.

   
   출처 : http://www.windowsazure.com/media/devcenter/shared/antares-iaas-preview-05.png
   

4. 여러분의 구독 계정(아마도 3개월 무료 평가판이겠죠?)을 선택하고, 확인 버튼을 누르시면 됩니다(참고 : 확인을 누르면 요청이 접수되고요. 실제로 Windows Azure 웹 사이트 기능이 활성화되기 까지는 약 1시간 정도가 걸립니다).

   
   출처 : http://www.windowsazure.com/media/devcenter/shared/antares-iaas-preview-06.png
   

Windows Azure에 웹사이트 만들기

여러분의 Windows Azure 웹 사이트는 공유된 호스팅 환경에서 실행됩니다. 이 말은 다른 Windows Azure 고객들과 공유하는 가상 머신(VM)에서 실행된다는 것입니다. 다른 사람들과 공유되는 호스팅 환경이기 때문에 클라우드를 저렴한 비용으로 시작할 수 있습니다. 나중에 여러분의 웹에 트래픽이 증가하면, 독립된 VM에서 실행하도록 변경할 수도 있습니다. 만약 보다 복잡한 구조가 필요하다면, Windows Azure 클라우드 서비스로 마이그레이션 하는 것도 가능합니다. 클라우드 서비스는 여러분이 원하는 대로 구성할 수 있는 전용 VM에서 실행되니 말입니다.

1. Preview 관리 포탈에서, New를 클릭하세요.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_1.png
   

2. Web Site를 클릭하고, Quick Create를 클릭하세요.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_2.png
   

3. Create a New Web Site에서, URL 입력 상자에 여러분의 응용 프로그램에 사용할 고유한 URL문자열을 입력 하세요.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_3.png
   

   전체 URL은 여기에 입력한 내용과 하단 텍스트박스에 보이는 접미사를 더하여 구성됩니다. 그림에는 "MyMobileMVC4WebSite"라고 입력되어 있지만, 누군가 이 URL을 이미 사용한다면, 다른 이름을 사용하셔야 합니다.

4. 하단의 체크 마크를 클릭하여 작업을 끝내시면 됩니다!

   생성이 완료되면 Preview 관리 포털은 웹 사이트 페이지와 상태 컬럼을 보여줍니다. 잠시 후에(약 1분 미만) 상태 컬럼은 사이트가 성공적으로 생성되었다고 알려줍니다. 그리고 왼쪽 네비게이션 바의 아이콘에 여러분의 계정에 생성된 웹 사이트와 데이터베이스들의 숫자가 나타날 것입니다.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_4.png
   

시작 프로젝트 설정

1. 다음 링크를 이용하여 시작용 프로젝트인 컨퍼런스 목록보기 응용 프로그램을 다운로드 받으세요 : [다운로드].
2. 그리고 나서, 윈도우 탐색기에서 MvcMobile.zip 파일에 대해 마우스 오른쪽 버튼을 클릭하고 속성을 선택하세요.

3. MvcMobile.zip 속성 대화 상자에서 차단 해제 버튼을 선택하세요(차단 해제 기능은 웹에서 다운로드한 .zip 파일을 사용하려 할 때 보안 경고가 발생하지 않도록 해 줍니다)

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/propertiespopup.png

4. MvcMobile.zip 파일에 마우스 오른쪽 버튼을 클릭하고 zip 압축을 해제하기 위해서 압축 풀기를 선택하세요.
5. Visual Web Developer나 Visual Studio 2010에서 MvcMobile.sln 파일을 여세요.

시작 프로젝트 실행

1. CTRL+F5를 눌러 응용 프로그램을 시작하면 데스크탑 브라우저에 화면이 나타날 것입니다.

2. 모바일 브라우저 에뮬레이터를 시작하고 컨퍼런스 응용 프로그램에 대한 URL을 에뮬레이터에 붙여넣은 다음 Browse by tag 링크를 클릭해 보세요.

   만일, Windows Phone 에뮬레이터를 사용하고 있다면 URL 막대를 클릭하고 키보드가 나오도록 Pause 키를 누르도록 하세요. 아래의 이미지는 AllTags 뷰를 보여주고 있습니다(Browse by tag를 선택하면 보이는 화면입니다.)

   
   출처 : http://http://www.windowsazure.com/media/devcenter/dotnet/browsebytagwithcallout.png

현재의 화면은 모바일 기기에서 가독성이 매우 높습니다. 이제 ASP.NET 링크를 선택하세요.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/aspnetpage.png

ASP.NET 태그 화면은 매우 어수선하게 느껴질 것입니다. 예를 들면, Date 열은 읽기가 매우 힘듭니다. 강좌의 뒷 부분에서는 특별히 AllTags 뷰의 모바일 브라우저 용 버전도 만들 예정입니다. 그리고 나면, 아무래도 화면이 좀 더 읽기 편하게 되겠죠?

뷰와 레이아웃, 부분 뷰를 재정의하기

ASP.NET MVC 4의 중요한 기능 중 하나는 모든 뷰(레이아웃이나 부분 뷰를 포함하여)를 모바일 브라우저(일반적으로)나 모든 특화된 브라우저에 대해 재정의할 수 있게 해주는 메커니즘입니다. 모바일에 특화된 화면을 제공하기 위해서는 뷰 파일을 복사하고 파일 이름에 .Mobile을 덧붙이면 됩니다. 예를 들면, 모바일용 index 뷰를 만들기 위해서는 Views\Home\Index.cshtml을 Views\Home\Index.Mobile.cshtml이라는 이름으로 바꾸어 복사하면 됩니다.

이번 절에서는 모바일에 특화된 레이아웃 파일을 만들어봅시다.

그 시작으로서, Views\Shared\_Layout.cshtml을 Views\Shared\_Layout.Mobile.cshtml이라는 이름으로 바꾸어 복사하세요. 그 다음, _Layout.Mobile.cshtml을 열고, 제목을 MVC4 Conference에서 Conference (Mobile)로 변경하세요.

각각의 Html.ActionLink 호출부에서 각 ActionLink 안에 있는 "Browse by"를 삭제하세요. 다음 코드는 모바일용 레이아웃 파일의 완성된 본문 부분을 보여주고 있습니다.

이번에는 Views\Home\AllTags.cshtml 파일을 Views\Home\AllTags.Mobile.cshtml이라는 이름으로 바꾸어 복사하세요. 그 다음, 파일을 열고 <h2>요소를 "Tags"에서 "Tags (M)"으로 변경하세요.

데스크탑 브라우저와 모바일 브라우저 에뮬레이터를 통해서 Tags 페이지를 확인해보세요. 모바일 브라우저 에뮬레이터에서는 두 군데가 변경된 것을 확인할 수 있을 겁니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p2m_layouttags_mobile_thumb.png

반면에 데스크탑 용 화면에서는 바뀐 것이 없습니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p2_layouttagsdesktop_thumb.png

jQuery Mobile을 사용하여 모바일 브라우저 인터페이스 정의하기

이번 절에서는 jQuery.Mobile.MVC의 NuGet 패키지를 설치하여 jQuery Mobile과 뷰 전환기 위젯도 설치할 것입니다.

jQuery Mobile 라이브러리는 주요 모바일 브라우저 모두에서 동작하는 사용자 인터페이스 프레임워크를 제공합니다. jQuery Mobile은 CSS와 JavaScript를 지원하는 모바일 브라우저에 점진적 향상(progressive enhancement) 기법을 적용하고 있습니다. 점진적 향상 기법을 이용하면 모든 브라우저에서 웹 페이지의 기본적인 내용을 볼 수 있게 하면서, 좀 더 강력한 브라우저와 기기에서는 더 풍부한 화면을 보여줄 수 있습니다. jQuery Mobile에 포함된 JavaScript와 CSS 파일을 통해 어떠한 마크업 변경도 하지 않고 모바일 브라우저에 맞도록 많은 요소들에 스타일을 적용할 수 있습니다.

Views\Home\AllTags.Mobile.cshtml을 Views\Home\AllTags.iPhone.cshtml.hide로 이름을 변경하세요. 더 이상 .cshtml 확장자를 가지지 않으므로, 파일들은 AllTags 뷰를 보여줄 때 ASP.NET MVC 런타임에서 사용되지 않을 것입니다.

jQuery.Mobile.MVC Nuget 패키지를 아래와 같이 설치하세요.

1. Tools(도구) 메뉴에서, Library Package Manager(라이브러리 패키지 관리자)를 선택하고, Package Manager Console(패키지 관리자 콘솔)을 선택하세요.

   역자 주 : 원본에서 나온 Package Manager Console -> Library Package Manager 순서와 달리 아래 이미지와 실제 Visual Studio에서는 Library Package Manager -> Package Manager Console 순서이므로 번역을 실제에 맞춰 변경하였습니다.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_packagemgr_thumb.png

2. Package Manager Console에서 Install-Package jQuery.Mobile.MVC를 입력하세요.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_packagemgrconsole_thumb.png

jQuery.Mobile.MVC Nuget 패키지는 다음과 같은 것들을 설치할 것입니다.

• jQuery Mobile (jquery.mobile-1.0b3.js와 최소화 버전인 jquery.mobile-1.0b3.min.js)
• jQuery Mobile 스타일의 레이아웃 파일 (Views\Shared\_Layout.Mobile.cshtml)
• jQuery Mobile CSS 파일(jquery.mobile-1.0b3.css와 최소화된 버전인 jquery.mobile-1.0b3.min.css)
• Content\images 폴더 내 몇 개의 .png 이미지 파일들
• 데스크탑 용 뷰에서 모바일 용 뷰 등으로 변환하기 위한 링크를 각 페이지 상단에 제공하기 위한 뷰 전환기 기능의 부분 뷰 (MvcMobile\Views\Shared\_ViewSwitcher.cshtml)
• ViewSwitcher 콘트롤러 위젯 (Controllers\ViewSwitcherController.cs)
• jQuery.Mobile.MVC.dll. 이 DLL은 뷰의 재정의가 존재하는 지 여부를 확인하기 위해 사용되는 뷰 컨텍스트 확장 도구를 제공합니다.

또한, 설치 과정에서는 jQuery를 1.62에서 1.63으로 업그레이드 합니다. 시작용 응용 프로그램은 jQuery 1.63을 사용하고 있습니다. 만일, 여러분이 직접 새로운 ASP.NET MVC 프로젝트를 생성했다면, 수동으로 레이아웃 파일 안에서 jQuery 스크립트에 대한 참조를 1.62에서 1.63으로 변경해야 할 것입니다.

MvcMobile\Views\Shared\_Layout.Mobile.cshtml 파일을 열고, Html.Partial 호출 바로 뒤에 다음 마크업을 추가하세요.

완전한 본문은 아래와 같습니다.

응용 프로그램을 빌드하고, 모바일 브라우저 에뮬레이터에서 AllTags 뷰를 확인해보세요. 그러면, 다음과 같은 결과를 볼 수 있습니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_afternuget_thumb.png

스타일이 변경된 것 뿐만 아니라, 굵은 글씨의 Displaying mobile view 문자열과 모바일용 뷰를 데스크탑 용 뷰로 전환하는 링크도 확인할 수 있습니다. Desktop view라는 문자열로 된 링크를 선택하면 데스크탑용 뷰가 나타납니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_desktopviewwithmobilelink_thumb.png

하지만, 데스크탑용 뷰에서는 모바일용 뷰로 직접 되돌아갈 수 있는 방법이 없습니다. 이제 그 부분을 고쳐보겠습니다. Views\Shared\_Layout.cshtml 파일을 여세요. 그리고, page라는 css 클래스를 갖는 div 요소 바로 아래에 다음의 코드를 추가하세요. 그러면, 뷰 전환기 위젯이 나타날 것입니다.

전체 코드는 다음과 같습니다.

모바일 브라우저에서 AllTags 뷰를 새로 고침하세요. 이제 데스크탑용 뷰와 모바일용 뷰 사이를 오갈 수 있을 것입니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_desktopviewwithmobilelink_thumb.png

이제 데스크탑 브라우저에서 AllTags 페이지를 확인해 보세요. 뷰 전환기 위젯은 데스크탑 브라우저에서는 보이지 않을텐데, 그 이유는 모바일 레이아웃 페이지에만 추가되어 있기 때문입니다. 이 강좌의 뒷 부분에서는 뷰 전환기 위젯을 데스크탑용 뷰에 추가하는 방법도 다룰 예정입니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_desktopbrowser_thumb.png

Speakers 목록 향상시키기

모바일 브라우저에서 Speakers 링크를 선택하세요. 모바일용 뷰(AllSpeakers.Mobile.cshtml)가 존재하지 않기 때문에, 기본 Speakers 출력(AllSpeakers.cshtml)이 모바일 레이아웃 뷰(_Layout.Mobile.cshtml)를 사용하여 렌더될 것입니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_speakersdesktop_thumb.png

원한다면, 기본 뷰(모바일용이 아닌 기본 뷰)가 모바일 레이아웃 안에서 렌더링이 불가능하도록 막을 수도 있습니다. 이렇게 하려면, 다음과 같이 Views\_ViewStart.cshtml 안에서 RequireConsistentDisplayMode를 true로 설정하면 됩니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_speakersconsistent_thumb.png

RequireConsistentDisplayMode를 true로 설정하면, 모바일 레이아웃(_Layout.Mobile.cshtml)은 오직 모바일 용 뷰를 위해서만 사용됩니다(즉, 뷰 파일이 뷰이름.Mobile.cshtml 형식이어야만 화면에 나타날 수 있습니다). RequireConsistentDisplayMode를 true로 설정하게 되는 경우는 아마도 모바일 레이아웃이 모바일 용이 아닌 뷰에서는 제대로 동작하지 않는 경우일 것입니다. 다음 그림은 RequireConsistentDisplayMode를 true로 설정했을 때 Speakers 페이지가 어떻게 나타나는 지를 보여줍니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_ps_data_filter_thumb.png

특정 뷰 안에서 일관된 화면 모드(consistent display mode) 기능을 끌 수도 있습니다. 그렇게 하려면, 뷰 파일 안에서 RequireConsistentDisplayMode를 false로 설정하면 됩니다. 다음 코드는 Views\Home\AllSpeakers.cshtml 파일 안에서 RequireConsistentDisplayMode를 false로 설정하는 코드입니다.

모바일용 Speakers 뷰 만들기

앞서 살펴본 바와 같이, Speakers 뷰는 가독성은 있지만, 링크가 작아서 모바일 기기에서는 누르기가 쉽지 않습니다. 이번 절에서는 모바일에 특화된 Speakers 뷰를 만들어서 뷰가 현대적 모바일 응용 프로그램처럼 보이도록 만들 예정입니다. 즉, 크고 누르기(tap) 쉬운 링크를 보여주고 빠르게 speaker를 찾을 수 있도록 검색 상자를 추가할 예정입니다.

AllSpeakers.cshtml을 AllSpeakers.Mobile.cshtml 이라는 이름으로 바꾸어 복사하세요. 그리고, AllSpeakers.Mobile.cshtml 파일을 열고 <h2> 헤딩 요소를 제거하세요.

<ul> 태그에, data-role 속성을 추가하고, 그 값을 listview로 설정하세요. 다른 data-* 속성들과 마찬가지로, data-role="listview" 라는 설정을 추가하면 큰 목록 안에 있는 항목들을 쉽게 [탭]할 수 있게 될 것입니다. 다음은 완전한 마크업입니다.:

이제 모바일 브라우저를 새로고침 하세요. 새로 고침된 결과는 아래와 같이 보일 것입니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_updatedspeakerview1_thumb.png

모바일용 뷰는 향상되었지만, speaker들의 긴 목록을 다루기는 어렵습니다. 이 부분을 고치기 위해서, <ul> 태그 내에 data-filer 속성을 추가하고 그 값을 true로 설정하세요. 아래 코드에서 ul 마크업을 확인할 수 있습니다.

다음 이미지에서는 검색 필터 상자가 페이지 상단에 있는 것을 볼 수 있는데, 이는 data-filter 속성으로 인해서 나타난 것입니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_ps_data_filter_thumb.png

검색 상자에 글자를 칠 때마다, jQuery Mobile은 다음 이미지에서 보이는 것과 같이 나타나는 목록을 필터링할 것입니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_ps_data_filter_sc_thumb.png

Tags 목록 향상시키기

기본 Speakers 뷰와 마찬가지로 Tags 뷰도 가독성이 있기는 하나, 링크가 작아서 모바일 기기에서 탭하기 쉽지 않습니다. 이번 절에서는 Speakers 뷰를 수정한 것과 같은 방법으로 Tags 뷰를 수정할 것입니다.

Views\Home\AllTags.Mobile.cshtml.hide 파일을 Views\Home\AllTags.Mobile.cshtml로 이름을 바꾸세요. 그리고, 이름이 변경된 파일을 열고 <h2> 요소를 제거하세요.

그 다음, 아래와 같이 data-role 속성과 data-filter 속성을 <ul> 태그에 추가하세요.

아래 이미지는 Tags 페이지에서 J라는 글자로 필터링된 모습을 보여주고 있습니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_tags_j_thumb.png

Dates 목록 향상시키기

Speakers 뷰와 Tags 뷰를 향상시켰던 것과 같이 Dates 뷰도 향상시킬 수 있으며, 이를 통해 모바일 기기에서 더 쉽게 사용할 수 있도록 만들 수 있습니다.

Views\Home\AllDates.cshtml 파일을 Views\Home\AllDates.Mobile.cshtml이라는 이름으로 바꾸어 복사하세요. 그리고, 복사된 파일을 열고 <h2> 요소를 제거하세요.

그런 다음, 아래와 같이 <ul> 태그에 data-role="listview" 속성 설정을 추가하세요.

아래의 이미지는 data-role 속성이 추가된 Dates 페이지가 어떻게 나타나는 지를 보여주고 있습니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_dates1_thumb.png

그리고, Views\Home\AllDates.Mobile.cshtml 파일의 내용을 다음과 같이 변경하세요

이 코드는 일(day) 단위로 모든 세션을 그룹화합니다. 이는 각각의 새로운 날짜 별로 목록 구분자를 만들며, 각 구분자 아래로는 각각의 날짜에 해당하는 모든 세션을 나열하게 됩니다. 코드가 실행되어 출력된 모습은 다음과 같습니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_dates2_thumb.png

SessionsTable 뷰 향상하기

이번 절에서는 모바일에 특화된 세션 뷰를 만들 예정인데, 이전에 만들었던 다른 뷰들보다 좀 더 확장된 변경 사항을 적용할 예정입니다.

모바일 브라우저에서 Speaker 버튼을 선택한 다음, 검색 상자에 Sc를 입력하세요.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_ps_data_filter_sc_thumb_1.png

Scott Hanselman 링크를 선택하세요.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_scottha_thumb.png

보이는 것과 같이, 모바일 브라우저에서는 화면을 보기가 힘듭니다. Date 열은 읽기 힘들고, Tags 열은 뷰에서 벗어나 버렸습니다. 이 문제를 해결하기 위해, Views\Home\SessionsTable.cshtml 파일을 Views\Home\SessionsTable.Mobile.cshtml 이라는 이름으로 바꾸어 복사하고, 다음의 코드로 파일의 내용을 대체합시다.

코드에서는 Room과 Tags 열을 제거했으며, Title, Speaker 그리고 Date 열을 세로로 정렬하여, 모든 정보를 모바일 브라우저에서 가독성 있게 만들었습니다. 아래의 이미지는 변경된 코드에 따라 바뀐 모습을 보여줍니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_ps_sessionsbyscottha_thumb.png

SessionByCode 뷰 향상하기

마지막으로, SessionByCode 뷰의 모바일 전용 뷰를 만들어 보도록 하겠습니다. 모바일 브라우저에서 Speaker 버튼을 선택하고 검색 상자에 Sc를 입력하세요.

출처 : http://i1.asp.net/umbraco-beta-media/2872113/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_ps_data_filter_sc_thumb_2.png?cdn_id=2

그 다음, Scott Hanselman 링크를 선택하세요. 그러면, Scott Hanselman의 세션들을 볼 수 있습니다.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_scottha_thumb.png

여기서 An Overview of the MS Web Stack of Love 링크를 선택하세요.

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_ps_love_thumb.png

현재 보여지는 기본 데스크탑 용 화면도 크게 나쁘지는 않지만, 우리는 더 낫게 바꿀 수 있습니다.

Views\Home\SessionByCode.cshtml 파일을 Views\Home\SessionByCode.Mobile.cshtml이라는 이름으로 바꾸어 복사하고, Views\Home\SessionByCode.Mobile.cshtml 파일의 내용을 다음의 마크업으로 대체하세요.

새로운 마크업에서는 뷰의 레이아웃을 향상시키기 위해 data-role 속성을 사용하고 있습니다.

이제 모바일 브라우저를 새로고침 하세요. 다음의 이미지는 방금 적용한 코드가 반영된 모습을 보여주고 있습니다.:

출처 : http://www.windowsazure.com/media/devcenter/dotnet/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_love2_thumb.png

응용 프로그램을 Windows Azure 웹 사이트에 배포하기

1. 브라우저에서 Preview Management Portal을 열어 주세요.

2. Web Sites 탭에서 방금 전 생성했던 웹 사이트의 이름을 클릭해 주세요.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_5.png

3. Quickstart 탭을 선택하고 Download publishing profile을 클릭해 주세요.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_6.png

   그러면, 응용 프로그램을 웹 사이트에 배포하기 위해서 필요한 모든 설정들을 담고 있는 파일이 다운로드 됩니다. 이 파일은 나중에 비주얼 스튜디오에서 가져오기(Import) 작업을 통해서 사용할 수 있는데요. 그러면 다양한 설절 정보를 손수 입력하지 않아도 됩니다.

4. .publishsettings 파일을 Visual Studio 에서 접근 가능한 적절한 폴더에 저장해 주세요.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_7.png

5. Visual Studio에서 Solution Explorer의 프로젝트 위에서 마우스 오른쪽 버튼을 클릭하여 Publish 메뉴를 선택합니다.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_8.png

   Publish Web 마법사가 열립니다.

6. Publish Web 마법사의 Profile 탭에서 Import.를 클릭합니다.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_9.png

7. 방금 전 다운로드 받았던 .publishsettings 파일을 선택하고 Open을 클릭합니다.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_10.png

8. Next를 클릭합니다.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_12.png

9. Settings 탭에서 Next를 클릭합니다.

   
   출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_13.png

10. Publish를 클릭합니다. 그러면, Visual Studio가 Windows Azure 서버에 파일을 복사하는 작업을 시작합니다.

    
    출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_14.png

11. Output 창에 배포와 관련하여 일어난 작업들과 배포의 성공적인 완료 여부가 표시됩니다.

12. 배포가 완료되면 기본 브라우저에 배포 된 사이트의 URL이 자동으로 열립니다. 여러분이 만드신 응용 프로그램이 이제 클라우드 환경에서 동작을 시작하게 되었습니다!

    
    출처 : http://www.windowsazure.com/media/devcenter/dotnet/depoly_mobile_new_website_15.png