이번 컬럼은 최원재(whosnail)님이 번역해 주셨으며, ASP.NET MVC 4 Mobile 애플리케이션을 만드는 방법에 대해 설명하고 있습니다. 원문은 http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features 입니다.

ASP.NET MVC 4의 모바일 기능들

이번 강좌에서는 ASP.NET MVC 4 developer preview 버전의 웹 응용 프로그램에서 모바일 관련 기능들을 사용하는 방법에 대한 기본적인 내용들을 다룰 것입니다. 우선, 이번 강좌를 따라 하려면 Visual Studio의 무료 버전인 Microsoft Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer")이 필요합니다. 물론, Visual Studio 2010 SP1을 가지고 있다면 더욱 좋겠죠?

시작하기에 앞서, 아래의 도구들이 설치되어 있는지 확인하십시오.

• Visual Studio web Developer Express SP1 사전설치 조건들
• ASP.NET MVC 4 developer preview 버전

더불어, 모바일 브라우저 에뮬레이터도 필요할텐데요. 아래의 에뮬레이터 중 맘에 드는 것을 선택하시면 됩니다.

• Windows 7 Phone 에뮬레이터 (이 에뮬레이터가 이번 강좌의 대부분의 스크린 샷에서 사용되었습니다.)
• Opera Mobile 에뮬레이터
• HTTP 헤더 상의 user agent를 iPhone으로 설정한 Apple Safari. Safari에서 user agent를 "iPhone"으로 설정하는 방법에 대한 설명을 보기 위해서는, David Alison의 블로그에 있는 'Safari를 IE인 척 하게 하는 방법'을 참고하세요.
• FireFox User Agent 전환기를 부가 기능으로 설치한 FireFox

이번 강좌에서는 C#을 사용할 것입니다만, Visual Basic을 선호하신다면 그로 작성된 시작용 프로젝트[http://go.microsoft.com/fwlink/?LinkId=228307]와 완성된 프로젝트도 다운로드가 가능합니다.

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

제작 대상

이번 강좌에서는 시작용 프로젝트에서 제공되는 간단한 컨퍼런스 목록보기 응용 프로그램에 모바일 기능을 추가할 것입니다. 아래의 스크린샷은 Windows 7 Phone 에뮬레이터에서 보여지는 완전한 응용 프로그램의 태그 페이지를 보여주고 있습니다.

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

다루는 기술

우리가 배우게 될 내용은 다음과 같습니다.

• 모바일 기기에서 보여지는 화면을 향상시키기 위해서 ASP.NET MVC 4 템플릿을 통해 HTML 5 viewport 속성과 적응형 렌더링을 사용하기
• 모바일에 특화된 뷰를 만드는 방법
• 사용자가 응용 프로그램의 모바일 용 뷰와 데스크탑 용 뷰 중에 선택할 수 있도록 하는 뷰 전환기를 만드는 방법

시작해 봅시다

다음 링크를 이용하여 시작용 프로젝트인 컨퍼런스 목록보기 응용 프로그램을 다운로드 받으세요 : [다운로드]. 그리고 나서, 윈도우 탐색기에서 MvcMobile.zip 파일에 대해 마우스 오른쪽 버튼을 클릭하고 속성을 선택하세요. 그 다음, MvcMobile.zip 속성 대화 상자에서 차단 해제 버튼을 선택하세요(차단 해제 기능은 웹에서 다운로드한 .zip 파일을 사용하려 할 때 보안 경고가 발생하지 않도록 해 줍니다).

출처 : http://i1.asp.net/umbraco-beta-media/2871813/Windows-Live-Writer_ASP.NET-MVC-4-Mobile-Features_D2FF_p1_unBlock_thumb.png

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

CTRL+F5를 눌러 응용 프로그램을 시작하면 데스크탑 브라우저에 화면이 나타날 것입니다. 모바일 브라우저 에뮬레이터를 시작하고 컨퍼런스 응용 프로그램에 대한 URL을 에뮬레이터에 붙여넣은 다음 Browse by tag 링크를 클릭해 보세요. 만일, Windows Phone 에뮬레이터를 사용하고 있다면 URL 막대를 클릭하고 키보드가 나오도록 Pause 키를 누르도록 하세요. 아래의 이미지는 AllTags 뷰를 보여주고 있습니다(Browse by tag를 선택하면 보이는 화면입니다.)

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

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

출처 : http://i1.asp.net/umbraco-beta-media/2871837/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p1_tagged_aspnet_thumb.png?cdn_id=3

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

CSS Media 질의들

CSS media 질의는 미디어 형식에 대한 CSS의 확장입니다. 이를 통해 특정 브라우저들(HTTP 헤더의 user agent에 기반합니다)에 대해 기본 CSS 규칙을 덮어씌우는 규칙을 만들 수 있습니다. 모바일 브라우저들을 대상으로 하는 CSS의 일반적인 규칙에서는 최대 화면 크기를 정의하고 있습니다. 새로운 ASP.NET MVC 4 인터넷 프로젝트를 만들 때 생성되는 Content\Site.css 파일은 다음과 같은 media 질의를 포함하고 있습니다.

브라우저 창이 850 픽셀 이하의 폭이라면 브라우저는 미디어 블록 안에서 이러한 CSS 규칙을 적용할 것입니다. 이러한 CSS media 질의를 사용하면 기본 CSS 규칙을 사용할 때보다 모바일 브라우저와 같이 작은 브라우저에서 HTML 콘텐트를 더 깔끔하게 보여줄 수 있습니다. 기본 CSS 규칙은 더 넓은 화면의 데스크탑 브라우저들을 대상으로 설계된 것이기 때문입니다.

Viewport 메타 태그

대부분의 모바일 브라우저는 가상 브라우저 창의 폭(viewport)을 모바일 기기의 실제 폭보다 훨씬 크게 정의합니다. 이를 통해 모바일 브라우저는 가상 화면 안에서 전체 웹 페이지가 딱 맞아 떨어지도록 할 수 있습니다. 그리고 나면, 사용자들은 흥미있는 콘텐트가 있는 부분을 확대할 수 있습니다. 하지만, 실제 기기의 폭과 viewport의 폭을 같게 설정한다면, 모바일 브라우저에 콘텐트가 딱 들어맞기 때문에 확대를 할 필요가 없을 것입니다.

ASP.NET MVC 4 레이아웃 파일 내의 viewport <meta> 태그에서 viewport를 기기의 폭으로 맞춥니다. 다음 코드는 ASP.NET MVC 4 레이아웃 파일 내의 viewport <meta>태그를 보여주고 있습니다.

CSS Media 질의와 Viewport 메타 태그의 효과 살펴보기

편집기에서 MvcMobile\Views\Shared\_Layout.cshtml파일을 여시고 viewport <meta> 태그를 주석 처리하십시오. 다음과 같이 말이죠.

또한, 편집기에서 MvcMobile\Content\Site.css 파일을 열고 media 질의 내의 최대 폭을 0 픽셀로 변경하십시오. 이렇게 하면 모바일 브라우저에서 CSS 규칙이 사용되지 않게 될 것입니다. 다음은 변경된 media 질의를 보여주고 있습니다.

변경 사항을 저장하고 모바일 브라우저 에뮬레이터에서 컨퍼런스 응용 프로그램을 탐색해 보세요. 아래 그림에서 작은 글자는 viewport <meta> 태그를 삭제한 결과입니다. viewport <meta> 태그가 없어졌기에, 브라우저는 기본 viewport 폭(대부분의 모바일 브라우저에서는 850픽셀 혹은 그 이상입니다)까지 축소된 것을 볼 수 있습니다.

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

이제 변경한 것들을 원래대로 되돌리십시오. 즉, 레이아웃 파일 상의 viewport <meta> 태그를 주석 처리하지 않은 상태로 되돌리고, Site.css 파일의 media 질의 부분도 850픽셀로 되돌리세요. 그런 다음, 변경 사항을 저장하고 모바일 친화적인 화면으로 돌아온 모습을 확인하기 위해서 모바일 브라우저를 새로고침 해 보세요.

viewport <meta> 태그와 CSS media 질의는 ASP.NET MVC 4에 국한된 것이 아니며, 어떠한 웹 응용 프로그램에서도 이러한 기능들의 장점을 이용할 수 있습니다. 반면, 새로운 ASP.NET MVC 4 프로젝트를 만들 경우 생성되는 파일에는 기본적으로 입력되어 제공됩니다.

viewport <meta> 태그에 대한 더 많은 정보를 얻기 위해서는, 두 가지 viewport에 대한 이야기 -- 2부[http://www.quirksmode.org/mobile/viewports2.html]를 확인하십시오.

다음 절에서는 모바일 브라우저에 특화된 화면을 제공하는 방법을 다룰 예정입니다.

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

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://i1.asp.net/umbraco-beta-media/2871861/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p2m_layouttags_mobile_thumb.png?cdn_id=2

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

출처 : http://i1.asp.net/umbraco-beta-media/2871867/Windows-Live-Writer_ASP.NET-MVC-4-Mobile-Features_D2FF_p2_layoutTagsDesktop.png

브라우저에 특화된 뷰

모바일에 특화된 뷰와 데스크탑에 특화된 뷰에 더해, 각각의 브라우저에 특화된 뷰를 만들 수도 있습니다. 예를 들면, 아이폰 브라우저에 특화된 뷰를 만들 수 있다는 것이죠. 이번에는 아이폰 브라우저에 특화된 레이아웃과 AllTags 뷰의 아이폰 버전을 만들어볼 것입니다.

Global.asax 파일을 열고 Application_Start 함수에 다음 코드를 붙여 넣으세요.

완전한 Application_Start 함수는 다음과 같습니다.

코드에서는 "iPhone"이라는 이름의 새로운 화면을 정의하고 있으며, 각각의 들어오는 요청과 화면이 매치되는 지를 확인하고 있습니다. 들어오는 요청이 정의한 조건(HTTP 헤더 상의 user agent가 "iPhone"이라는 문자열을 포함하는지 여부)을 만족한다면, ASP.NET MVC는 "iPhone"이라는 접미사를 갖는 뷰를 찾을 것입니다.

코드에서 DefaultDisplayMode를 마우스 우측 클릭하고, 확인(Resolve)을 선택한 뒤, using System.Web.WebPages;를 선택하세요. 그러면, System.Web.WebPages 네임스페이스에 대한 참조가 추가되는데요. System.Web.WebPages 네임스페이스 안에는 DisplayModes와 DefaultDisplayMode 형식이 정의되어 있습니다.

출처 : http://i1.asp.net/umbraco-beta-media/2871885/Windows-Live-Writer_ASP.NET-MVC-4-Mobile-Features_D2FF_p2_resolve_thumb.png

물론, 수동으로 파일 내의 using 부분에 직접 네임스페이스를 추가해도 됩니다.

이제 변경 사항을 저장하세요. 그리고, MvcMobile\Views\Shared\_Layout.Mobile.cshtml 파일을 MvcMobile\Views\Shared\_Layout.iPhone.cshtml 이라는 이름으로 바꾸어서 복사하세요. 그 다음, 복사된 파일을 열고 h1 헤딩 부분을 Conference (Mobile)에서 Conference (iPhone)으로 변경하세요.

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

이제 응용 프로그램을 실행하세요. 그리고 모바일 브라우저 에뮬레이터를 실행하고 브라우저의 user agent를 "iPhone"으로 설정했는지 확인한 뒤, AllTags 뷰로 이동해 보세요. 다음 그림은 Alltags 뷰가 Safari[http://www.apple.com/safari/download/] 브라우저에서 보이는 모습을 보여주고 있습니다.

출처 : http://i1.asp.net/umbraco-beta-media/2871897/Windows-Live-Writer_ASP.NET-MVC-4-Mobile-Features_D2FF_p2_iphoneView_thumb.png

(iPhone으로 보이도록 Safari 브라우저에서 user agent를 설정하는 방법은 David Alison의 블로그 내의 Safari를 IE로 보이게 하는 방법[http://www.davidalison.com/2008/05/how-to-let-safari-pretend-its-ie.html]을 참고하세요.)

이번 절에서는 모바일 레이아웃과 뷰를 만드는 방법 및 아이폰과 같은 특정 기기를 위한 레이아웃과 뷰를 만드는 방법에 대해 알아보았습니다. 다음 절에서는 좀 더 강력한 모바일용 뷰를 만들기 위해서 jQuery Mobile을 이용하는 방법에 대해 살펴보겠습니다.

jQuery Mobile 사용하기

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

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

그 시작으로서, 이전에 만들었던 Shared\_Layout.Mobile.cshtml과 Shared\_Layout.iPhone.cshtml 파일을 삭제하세요.

그 다음, 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://i1.asp.net/umbraco-beta-media/2871909/Windows-Live-Writer_ASP.NET-MVC-4-Mobile-Features_D2FF_p3_packageMgr_thumb.png

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

   
   출처 : http://i1.asp.net/umbraco-beta-media/2871921/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://i1.asp.net/umbraco-beta-media/2871933/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_afternuget_thumb.png?cdn_id=2

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

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

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

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

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

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

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

출처 : http://i1.asp.net/umbraco-beta-media/2871969/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://i1.asp.net/umbraco-beta-media/2871981/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_speakersdesktop_thumb.png?cdn_id=2

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

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

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

특정 뷰 안에서 일관된 화면 모드(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://i1.asp.net/umbraco-beta-media/2872005/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_updatedspeakerview1_thumb.png?cdn_id=2

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

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

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

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

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

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://i1.asp.net/umbraco-beta-media/2872041/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_p3_tags_j_thumb.png?cdn_id=2

Dates 목록 향상시키기

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

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

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

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

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

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

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

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

SessionsTable 뷰 향상하기

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

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

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

Scott Hanselman 링크를 선택하세요.

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

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

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

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

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://i1.asp.net/umbraco-beta-media/2872125/windows-live-writer_asp_net-mvc-4-mobile-features_d2ff_ps_sessionsbyscottha_thumb_1.png

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

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

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

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

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

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

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

마무리 및 검토

이번 강좌에서는 ASP.NET MVC 4 developer preview 버전을 기반으로 하는 모바일 기능들을 소개하였습니다. 비록, 미리보기 버전을 대상으로 설명하긴 했지만 이 내용은 정식 버전에서도 대부분 그대로 적용될 것으로 보이기에 유용하리라 생각합니다. 필자가 다룬 모바일 관련 내용은 다음과 같습니다.\

• 레이아웃, 뷰, 부분 뷰들을 재정의하는 방법. 전역적으로든 각각의 뷰에서 대해서든 모두 가능합니다.
• RequireConsistentDisplayMode 속성을 이용한 레이아웃과 부분 뷰에 대한 강제 재정의 방안.
• 모바일 뷰를 위한 뷰 전환기 위젯. 물론, 데스크탑 용 뷰에서도 보여질 수 있습니다.
• iPhone 브라우저와 같이 특정 브라우저를 지원하기 위한 기능.

참고

• jQuery Mobile 사이트
• jQuery Mobile 개요
• W3c가 권장하는 모바일 웹 응용 프로그램 사례
• W3C의 media 질의들에 대한 추천