가변 레이아웃 디자인(JavaScript 및 HTML을 사용한 Metro 스타일 앱)

[이 설명서는 임시 설명서로 변경될 수 있습니다.]

Windows 8 Release Preview에서 뷰는 사용자가 Windows Metro 스타일 앱을 액세스 및 조작하는 방식에 맞게 Windows Metro 스타일 UI가 조정되는 방식을 말합니다. 여러 뷰를 지원하도록 디자인된 앱은 다양한 크기의 장치와 방향에서 잘 작동하며 사용자가 필요와 기호에 맞게 콘텐츠를 조작할 수 있습니다.

뷰 상태

뷰 상태는 다음 이미지에서처럼 사용자가 Metro 스타일 앱을 표시하기 위해 선택할 수 있는 세 가지 방법(끌기, 채우기 및 전체 화면)입니다.

뷰 상태설명
전체 화면앱이 전체 화면을 채웁니다.

전체 화면 뷰 상태

끌기앱이 전체 화면의 사이드 영역에 표시됩니다.

끌기 뷰 상태

채우기앱이 사이드 상태의 앱에 사용되지 않는 남은 화면을 채웁니다.

채우기 뷰 상태

 

사용자는 한 번에 최대 두 개 앱을 사용할 수 있으므로 이러한 세 가지 상태를 모두 지원하기에 충분한 유동성과 가변성을 갖춘 레이아웃을 제공해야 합니다.

전체 화면, 끌기 및 채우기 뷰를 계획할 경우 앱의 UI가 화면 크기, 방향 및 사용자 조작을 지원하도록 원활하고 깔끔하게 다시 배치됩니다.

화면 방향

사용자가 태블릿, 슬레이트 및 모니터를 회전하고 돌릴 수 있으므로 앱이 가로 및 세로 방향을 모두 처리할 수 있는지 확인합니다.

가로 및 세로 레이아웃

사용자 조작

잘 만들어진 앱은 사용자가 UI의 콘텐츠를 사용하여 원하는 작업을 수행하도록 도와줍니다.

앱을 디자인할 때 UI의 어느 영역에서 이동 및 스크롤, 광학 및 시맨틱 줌, 개체 크기 조정을 지원해야 할지 고려해야 합니다.

사용자가 앱의 콘텐츠를 확대하고 크기를 조정할 수 있도록 하는 뷰를 만듭니다.

크기 조정을 지원하는 영역

필요할 경우 UI 표면이 화면 영역을 넘어 추가 "페이지"까지 표시되도록 합니다. 이러한 경우에는 이동 및 스크롤 기능을 사용하도록 설정하여 사용자가 이러한 큰 UI 표면을 살펴보고 추가 페이지에서 콘텐츠를 검색하게 합니다.

여러 콘텐츠 페이지 간 이동

이 섹션의 내용

항목설명

픽셀 밀도에 맞게 크기 조정에 대한 지침

Windows는 화면의 픽셀 밀도와 상관없이 UI 요소의 실제 크기를 일관되게 유지하도록 응용 프로그램 크기를 조정합니다. 여기서는 크기가 조정되었을 때 멋지게 표현되는 이미지와 레이아웃을 사용하여 앱을 빌드하는 방법에 대해 간략하게 설명합니다.

화면에 맞추기에 대한 지침

여기서는 JavaScript로 빌드된 Metro 스타일 앱을 Windows 8 Release Preview에서 지원하는 다양한 크기의 화면에 맞추기 위한 레이아웃을 디자인 및 빌드하는 방법에 대한 유용한 정보를 제공합니다.

사이드 및 채우기 뷰에 대한 지침

이 지침은 모든 보기 상태에 맞게 Metro 스타일 앱의 UI를 디자인하는 데 도움이 됩니다.

 

 

 

표시:
© 2014 Microsoft