앱 페이지 레이아웃
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
여기에 설명된 레이아웃 패턴을 사용하여 앱 페이지의 UI 요소를 레이아웃할 수 있습니다. 여백, 페이지 헤더, 제본용 여백 너비 및 이러한 다른 요소에서 일관된 패턴을 따르면 앱 전체에서 통일성이 유지되며 사용자가 시스템 전체의 조작 방식을 쉽게 이해할 수 있습니다.
Windows 8의 사용자 인터페이스는 앱 전체에서 일관된 실루엣을 유지하려고 합니다. 실루엣의 서명 특성은 위쪽, 아래쪽 및 왼쪽 가장자리의 넓은 여백입니다. 넓은 여백은 사용자가 콘텐츠의 가로 이동 방향을 이해하는 데 도움이 됩니다.
앱 기능 전체 프로세스 시리즈의 일부로서 작업에서 이 기능을 살펴보세요.: Windows 스토어 앱 UI 전체 프로세스
그리드 시스템 사용
Windows 8 실루엣에 대해 설명하기 전에 Windows 8 그리드 시스템 사용에 대해 어느 정도 알고 있어야 합니다. 그리드 시스템은 여러 앱에서 시각적 통일성을 실현하는 동시에 변형 구조를 제공하고 사용자 관심을 유지하도록 하는 디자인 도구입니다. 그리드 시스템은 개발자 템플릿으로 작성되며 컨트롤 및 컬렉션은 그리드 시스템을 염두에 두고 설계했습니다.
그리드는 단위와 하위 단위로 구성되어 있습니다. 기본 측정 단위는 단위입니다. 1 단위는 20 × 20 픽셀입니다. 각 단위는 5 × 5 픽셀의 하위 단위로 나뉩니다. 정사각형 단위당 16개 하위 단위가 있습니다. 다음 그림은 화면의 왼쪽 위에 있는 그리드를 보여 줍니다. 이 그림은 픽셀, 하위 단위 및 단위를 표시하도록 확대되었습니다.
.png "그리드 시스템 일러스트레이션")
페이지 머리글
페이지 머리글의 기준선은 위쪽에서 5 단위, 즉 100픽셀이어야 합니다. 페이지 머리글의 왼쪽 여백은 6 단위, 즉 120픽셀입니다. Windows 8 페이지 머리글은 SegoeUI 스타일 집합 20, 가늘게입니다. 스타일 집합에 대한 자세한 내용은 텍스트 및 입력 체제에 대한 지침 및 검사 목록을 참조하세요.
참고 Windows 8.1 Update에서 사용자는 화면의 위쪽 가장자리로 마우스를 이동하여 제목 표시줄을 표시할 수 있습니다. 화면의 아래쪽 가장자리로 마우스를 이동하여 데스크톱에서 작업 표시줄을 표시할 수도 있습니다. 마우스가 가장자리에서 벗어나면 제목 표시줄과 작업 표시줄이 숨겨집니다. 사용자는 터치로 제목 표시줄이나 작업 표시줄을 표시할 수 없습니다. 표시된 제목 표시줄과 작업 표시줄에 앱 UI 또는 명령 요소가 포함될 수 있으므로 앱 레이아웃에서 요소 위치를 정의할 때 이 기능을 고려하세요.
.png "페이지 머리글 일러스트레이션")
콘텐츠 영역
콘텐츠 영역의 위쪽 여백은 7 단위, 즉 140픽셀입니다. 왼쪽 여백은 6 단위, 즉 120픽셀입니다. 아래쪽 여백은 탄력적입니다. 가로 이동 콘텐츠의 경우 6.5 단위(130픽셀) 이하, 2.5 단위(50픽셀) 이상이어야 합니다. 세로 이동 콘텐츠의 경우 위쪽 및 왼쪽 여백이 동일하게 유지됩니다. 콘텐츠가 화면 바깥쪽으로 스크롤되기 때문에 지정된 아래쪽 여백은 없습니다.
.png "콘텐츠 영역 일러스트레이션")
가로 안쪽 여백 값
콘텐츠 항목 간의 가로 안쪽 여백은 항목에 따라 다릅니다. 이미지, 사용자 타일 등의 하드 가장자리 항목은 타일 및 함께 제공되는 텍스트 사이의 안쪽 여백이 2 하위 단위이거나 10픽셀입니다. 목록은 열 사이의 안쪽 여백이 2 단위 또는 40픽셀입니다. 하드 가장자리 항목은 열 사이의 안쪽 여백이 2 하위 단위 또는 10픽셀입니다.
.png "가로 안쪽 여백 값 일러스트레이션")
세로 안쪽 여백 값
콘텐츠 항목 간의 세로 안쪽 여백은 항목 유형에 따라 다릅니다. 타일 및 텍스트 목록은 연속된 항목 사이의 안쪽 여백이 1 단위 또는 20픽셀입니다. 하드 가장자리 개체는 연속된 항목 사이의 안쪽 여백이 2 하위 단위 또는 10픽셀입니다.
.png "세로 안쪽 여백 값 일러스트레이션")
그룹 사이의 가로 안쪽 여백
그룹 사이의 안쪽 여백은 4 단위, 즉 80픽셀입니다. 이 안쪽 여백은 사용자가 이동할 때 그룹을 쉽게 구분할 수 있도록 충분한 분리를 제공합니다.
.png "그룹 사이의 가로 안쪽 여백 일러스트레이션")