빠른 시작: 다양한 창 크기에 맞는 앱 디자인
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
어느 창 크기에서나 제대로 표시되고 문제 없이 작동하도록 앱을 디자인할 때는 기본 전체 화면 가로 레이아웃을 보완할 추가 레이아웃을 만들지 여부를 선택해야 합니다. 기본 최소 500픽셀 대신 최소 너비 320픽셀을 지원하고 앱의 높이가 너비보다 클 경우 세로 레이아웃으로 전환하도록 앱을 디자인할 수 있습니다. 이는 선택적인 디자인 변경 사항입니다.
앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.: Windows 스토어 앱 UI 전체 프로세스
목표: 이 문서에서는 앱의 최소 너비를 500픽셀에서 320픽셀로 변경하는 방법과 앱이 좁은 너비에서도 제대로 표시되고 문제 없이 작동하도록 디자인을 변경하는 방법을 알아봅니다. 또한 앱 높이가 너비보다 클 때 세로 레이아웃으로 바뀌는 가로 이동 앱을 디자인하는 방법도 살펴봅니다.
사전 요구 사항
JavaScript를 사용하여 첫 Windows 스토어 앱 만들기
샘플: 너비보다 높이가 더 긴 창의 레이아웃
이 문서에서는 너비보다 높이가 더 긴 창의 레이아웃 샘플(영문)에서 길고 좁은 레이아웃에 대한 추가 디자인 옵션이 구현된 방식을 설명하면서 이러한 옵션을 보여 줍니다. 이 샘플은 Microsoft Visual Studio의 그리드 앱 템플릿을 기반으로 합니다.
그리드 앱 템플릿에는 다음 네 개의 페이지가 있습니다.
default(default.html) - 앱이 시작된 후에 단순히groupedItems페이지를 로드합니다.groupedItems(pages\groupItems\groupedItems.html) - 사용자가 그룹 및 항목을 보고 그룹 레이블을 선택하여 그룹 세부 정보 페이지(groupDetail)로 이동하거나 항목을 선택하여 전체 페이지 항목 보기(itemDetail)로 이동할 수 있습니다.groupDetail(pages\groupDetail\groupDetail.html) - 사용자가 그룹 세부 정보와 항목을 보고 항목을 선택하여 전체 페이지 항목 보기(itemDetail)로 이동할 수 있습니다.itemDetail(pages\itemDetail\itemDetail.html) - 항목의 전체 페이지 보기를 나타냅니다.
이 문서에서는 각 페이지에 기본 레이아웃을 사용합니다. 여기에서는 groupDetail 및 groupedItems 페이지의 JavaScript 코드 숨김에 필요한 변경 사항에 대해서만 알아봅니다.
여기에서 주요 코딩 기술은 페이지의 offsetWidth 및 offsetHeight 속성 변경 사항을 확인하는 것입니다. 사용자가 페이지의 너비 또는 장치 방향을 변경한 결과 특정 너비 및 높이 값에 도달한 경우 페이지는 해당 컨트롤의 레이아웃 및 동작을 변경합니다.
이를 테스트해 보려면 Visual Studio에서 JavaScript Windows 스토어 그리드 앱 프로젝트의 새 인스턴스를 만든 다음 이 지침의 나머지 부분을 따릅니다.
최소 너비 정의
기본적으로 Windows 스토어 앱의 최소 너비는 500픽셀입니다. 앱의 높이는 항상 화면을 채웁니다. 앱의 최소 화면 높이는 768픽셀입니다.
앱이 좁은 너비에서 잘 작동하거나, 멀티태스킹이 앱의 중요한 시나리오인 경우 사용자가 앱을 다른 앱과 같은 화면에 유지할 수 있도록 하려면 최소 너비를 500픽셀 대신 320픽셀로 변경할 수 있습니다. 그러면 사용자는 전체 화면에서 320픽셀 너비까지 앱 크기를 원하는 대로 유연하게 조정할 수 있습니다.
앱의 최소 너비는 package.appxmanifest 매니페스트 파일에서 변경합니다. 이렇게 하려면 Visual Studio에서 다음 단계를 수행합니다.
package.appxmanifest매니페스트 파일을 엽니다. 매니페스트가 자동으로 매니페스트 디자이너에서 열립니다.응용 프로그램 탭을 열고 최소 너비 필드를 찾습니다.
드롭다운 목록을 사용하여 최소 너비를 320px로 변경합니다.
텍스트 편집기에서
package.appxmanifest매니페스트 파일을 열면 ApplicationView 요소가 VisualElements 요소의 자식으로 표시됩니다. 예를 들어 매니페스트 파일의 새 최소 너비는 다음과 같습니다.<ApplicationView MinWidth="width320" />
이제 앱 크기를 320픽셀까지 조정할 수 있으므로, 좁은 너비에서 앱을 사용할 수 있도록 앱을 수정해야 합니다. 특히 앱이 가로가 아닌 세로로 이동하도록 앱을 전환합니다.
그룹 및 항목 보기의 동작 정의
pages\groupedItems\groupedItems.js파일에서ui.Pages.define 함수의 ready 메서드에 코드를 추가합니다. 이 메서드는 모든 페이지 초기화 및 렌더링이 완료된 후에 호출됩니다. 이 메서드에서 나중에 정의할_initializeLayout함수를 호출합니다. 참고로, 추가해야 할 코드는*** START ***및*** END ***주석으로 표시되어 있습니다.ui.Pages.define("/pages/groupedItems/groupedItems.html", { // ... ready: function (element, options) { var listView = element.querySelector(".groupeditemslist").winControl; listView.element.focus(); // *** START *** this._initializeLayout(listView); // *** END *** }, // ...groupedItems.js파일에서ui.Pages.define 함수의 updateLayout 메서드에 코드를 추가합니다. 이 메서드는 사용자가 좁은 레이아웃, 세로 및 가로 등의 레이아웃 상태 간에 앱을 전환할 때마다 호출됩니다. 이 메서드에서 페이지의 ListView 컨트롤을 참조하고 페이지 애니메이션을 일시적으로 사용하지 않도록 설정한 다음 나중에 정의할_initializeLayout함수를 호출합니다.ui.Pages.define("/pages/groupedItems/groupedItems.html", { // ... updateLayout: function (element) { /// <param name="element" domElement="true" /> // TODO: Respond to changes in layout. // *** START *** var listView = element.querySelector(".groupeditemslist").winControl; // Don't show page entrance animations when the app switches layouts. var handler = function (e) { listView.removeEventListener("contentanimating", handler, false); e.preventDefault; } listView.addEventListener("contentanimating", handler, false); this._initializeLayout(listView); // *** END *** }, // ...groupedItems.js파일에서ui.Pages.define 함수에 코드를 추가하여_initializeLayout함수를 정의합니다. 이 함수는 페이지가 좁은 레이아웃, 세로 또는 가로 레이아웃으로 되어 있는지 여부를 확인하고 그에 따라 페이지의 ListView 컨트롤을 조정합니다. ready 및 updateLayout 메서드가 모두 이 함수를 호출합니다. 이 함수가 수행하는 작업은 다음과 같습니다.- 페이지의 너비가 320픽셀보다 크지만 500픽셀보다는 작은 경우 페이지의 ListView 컨트롤은 데이터를 그룹으로만 구성된 세로로 스크롤되는 목록으로 표시합니다. (500픽셀은 예로 든 너비입니다. 레이아웃이 변경되는 기준이 되는 너비를 지정할 수 있습니다. 이 샘플에서는 앱이 해당 레이아웃을 전환하는 시점으로 500픽셀을 선택했습니다. 너비가 500픽셀보다 작아지면 앱은 좁은 레이아웃을 사용합니다.)
- 페이지의 너비가 높이보다 작은 경우 ListView 컨트롤은 데이터를 항목이 포함된 그룹의 세로로 스크롤되는 목록으로 표시합니다.
- 그렇지 않은 경우 ListView 컨트롤은 데이터를 항목이 포함된 그룹의 가로로 스크롤되는 그리드로 표시합니다.
ui.Pages.define("/pages/groupedItems/groupedItems.html", { // ... // *** START *** _initializeLayout: function (listView) { // Narrow layout. if (document.documentElement.offsetWidth < 500) { // Show data as a vertically-scrolling list of groups only. listView.itemDataSource = Data.groups.dataSource; listView.groupDataSource = null; listView.layout = new ui.ListLayout(); } // Portait layout. else if (document.documentElement.offsetWidth < document.documentElement.offsetHeight) { // Show data as as a vertically-scrolling list of groups that contain items. listView.itemDataSource = Data.items.dataSource; listView.groupDataSource = Data.groups.dataSource; listView.layout = new ui.ListLayout(); } // Landscape layout. else { // Show data as a horizontally-scrolling grid of groups contain items. listView.itemDataSource = Data.items.dataSource; listView.groupDataSource = Data.groups.dataSource; listView.layout = new ui.GridLayout(); } }, // *** END *** // ...
그룹 세부 정보 및 항목 세부 정보 보기의 동작 정의
pages\groupDetail\groupDetail.js파일에서ui.Pages.define 함수의 updateLayout 메서드에 코드를 추가합니다. 이 메서드는 사용자가 앱을 세로 및 가로 레이아웃 간에 전환할 때마다 호출됩니다. 이 메서드에서 페이지의 ListView 컨트롤을 참조하고 페이지 애니메이션을 일시적으로 사용하지 않도록 설정한 다음 나중에 정의할_initializeLayout함수를 호출합니다. 또한 올바른 항목이 처음 표시되는 항목이 되도록 ListView 컨트롤을 스크롤합니다.ui.Pages.define("/pages/groupDetail/groupDetail.html", { // ... updateLayout: function (element) { /// <param name="element" domElement="true" /> // TODO: Respond to changes in layout. // *** START *** var listView = element.querySelector(".itemslist").winControl; // Don't show page entrance animations when the app switches layouts. var handler = function (e) { listView.removeEventListener("contentanimating", handler, false); e.preventDefault(); } listView.addEventListener("contentanimating", handler, false); var firstVisible = listView.indexOfFirstVisible; this._initializeLayout(listView); if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) { listView.indexOfFirstVisible = firstVisible; } // *** END *** }, // ...groupDetail.js파일에서ui.Pages.define 함수에 코드를 추가하여_initializeLayout함수를 정의합니다. 이 함수는 페이지가 세로 또는 가로 레이아웃으로 되어 있는지 여부를 확인하고 그에 따라 페이지의 컨트롤을 조정합니다. updateLayout 메서드는 이 함수를 호출합니다. 이 함수가 수행하는 작업은 다음과 같습니다.- 페이지의 너비가 320픽셀보다 크지만 500픽셀보다는 작은 경우 페이지의 ListView 컨트롤은 데이터를 그룹으로만 구성된 세로로 스크롤되는 목록으로 표시합니다. (500픽셀은 예로 든 너비입니다. 레이아웃이 변경되는 기준이 되는 너비를 지정할 수 있습니다. 이 샘플에서는 앱이 해당 레이아웃을 전환하는 시점으로 500픽셀을 선택했습니다. 너비가 500픽셀보다 작아지면 앱은 좁은 레이아웃을 사용합니다.)
- 페이지의 너비가 높이보다 작은 경우 ListView 컨트롤은 그룹 헤더를 표시하지 않고 데이터를 세로로 스크롤되는 목록으로 표시합니다.
- 그렇지 않은 경우 ListView 컨트롤은 그룹 헤더를 왼쪽에 표시하고 데이터를 가로로 스크롤되는 그리드로 표시합니다.
ui.Pages.define("/pages/groupDetail/groupDetail.html", { // ... // *** START *** _initializeLayout: function (listView) { // Portrait layout. if (document.documentElement.offsetWidth < document.documentElement.offsetHeight) { listView.layout = new ui.ListLayout(); var header = document.getElementsByTagName("header"); header.item(0).style.display = "none"; } // Landscape layout. else { listView.layout = new ui.GridLayout({ groupHeaderPosition: "left" }); var header = document.getElementsByTagName("header"); header.item(0).style.display = "inherit"; } }, // *** END *** // ...
레이아웃 전환
이제 창 크기를 전환할 때 앱의 레이아웃이 어떻게 변경되는지 볼 수 있습니다.
- Visual Studio의 시뮬레이터에서 앱을 시작합니다. 방법을 보려면 시뮬레이터에서 Windows 스토어 앱 실행을 참조하세요.
- 기본 터치 모드를 클릭합니다.
- 페이지의 맨 위를 측면으로 끈 다음 페이지 너비가 500픽셀이 되도록 구분선을 이동합니다. 데이터가 항목이 포함된 그룹의 세로로 스크롤되는 목록으로 표시됩니다.
- 페이지 너비가 320픽셀이 되도록 구분선을 이동합니다. 데이터가 그룹만으로 된 세로로 스크롤되는 목록으로 표시됩니다.
- 시계 방향으로 회전을 클릭합니다. 데이터가 항목이 포함된 그룹의 세로로 스크롤되는 목록으로 표시됩니다.
- 그룹 제목, 항목 제목 및 뒤로 단추를 탭할 뿐 아니라 페이지 너비 및 장치 방향을 변경해 봅니다.
요약
이제 앱이 좁은 너비와, 높이가 너비보다 큰 레이아웃에서 제대로 표시되고 문제 없이 작동하도록 앱을 디자인하는 방법을 모두 알아보았습니다.