양식 레이아웃에 대한 지침(Windows 스토어 앱)
이러한 지침은 화면 영역 사용을 최적화하고 스크롤할 필요성을 줄이는 동시에 뛰어난 터치 환경을 제공하는 양식을 디자인하는 데 도움이 됩니다.
양식을 디자인하고 사용할 레이아웃을 결정할 때는 사용자가 양식을 작성하는 방법 및 스크롤이 필요한 위치를 고려해 보세요. 또한 터치 키보드가 표시되는 경우 필요한 스크롤 횟수도 고려합니다. 터치 키보드는 가로 방향에서 화면의 최대 50%를 사용합니다. 인라인 오류 알림으로도 콘텐츠의 길이가 늘어날 수 있습니다.
다음 섹션에서는 단일 열 및 다중 열 레이아웃을 사용할 시기에 대해 설명합니다.
단일 열 레이아웃을 사용할 시기
다음과 같은 경우에 단일 열 레이아웃을 사용합니다.
- 사용자가 특정 순서로 양식을 입력하도록 하려는 경우입니다.
- 양식은 다른 UI와 화면 공간을 공유합니다. 예를 들어 양식은 다음과 같은 경우에 화면 공간을 공유할 수 있습니다.
- 앱에서 창이 2개인 UI 레이아웃을 사용합니다.
- 앱이 사이드 뷰 상태입니다.
- 화면에 추가 노트 및 정보, 지침 또는 브랜딩 및 광고가 표시됩니다.
다음은 단일 열 레이아웃을 사용하는 짧은 양식의 예입니다.
다음은 단일 열 레이아웃을 사용하는 더 긴 양식의 예입니다.
많은 컨트롤을 매우 긴 하나의 양식에 포함하는 것보다는 작업을 일련의 여러 양식이나 그룹으로 나누는 방법을 고려해 보세요. 다음은 그룹으로 나뉘어진 더 긴 양식의 예입니다.
다음은 여러 페이지로 나뉘어진 더 긴 양식의 예입니다.
다음은 UI에 추가 노트 및 정보가 포함되어 있기 때문에 단일 열 레이아웃을 사용하는 양식의 예입니다.
2개 열 레이아웃을 사용할 시기
2개 열 레이아웃은 세로 스크롤이 제한된 짧은 양식에 사용합니다. 2개 열 레이아웃은 가로 방향에서 보이는 가로 공간을 가장 잘 활용합니다. 두 열 사이에 충분한 gutter 공간을 예약해야 합니다.
다음은 2개 열을 사용하는 양식의 예입니다.
전체 양식을 작성하기 위해 사용자는 첫 번째 열의 아래로 스크롤한 다음 두 번째 열의 위로 스크롤하고 다시 아래로 스크롤해야 하기 때문에 세로 스크롤이 긴 경우 2개 이상의 열을 사용하지 마세요. 터치 키보드가 표시되면 이 환경은 훨씬 더 불편해 집니다.
다음은 2개 열을 잘못 사용하는 양식의 예입니다.
3개 이상 열을 사용할 시기
가로 방향에서 보이는 가로 공간을 가장 잘 활용하려면 다중 열을 사용할 수 있습니다. 이 레이아웃은 고정 화면이나 가로 이동 화면에서 잘 작동하지만 세로 이동 화면에서는 불편할 수 있습니다. 이 레이아웃은 입력 순서가 중요하지 않은 경우에만 사용하세요.
레이블 배치
대부분의 컨트롤에는 레이블이 필요합니다. 레이블은 해당 컨트롤 위나 컨트롤 왼쪽에 배치하세요. 지정된 양식에서는 한 가지 형식의 레이블 배치만 사용하세요. 동일한 양식에서 컨트롤마다 다른 레이블 배치를 사용하지 마세요.
위쪽 레이블 배치를 사용할 시기
레이블을 컨트롤 위에 배치하면 모든 레이블과 컨트롤 요소를 왼쪽 맞춤할 수 있으므로 레이블과 해당 컨트롤의 관계를 설정하는 데 도움이 되며 깔끔한 레이아웃을 만드는 데도 도움이 됩니다. 컨트롤 위에 레이블을 배치하면 긴 문자열을 제공하고 지역화 및 접근성 문제를 처리하기가 더 쉬워집니다.
일반적으로 레이블은 컨트롤 위에 배치합니다. 다중 열 양식 레이아웃을 사용하는 경우에는 항상 레이블을 컨트롤 위에 배치하세요.
왼쪽 레이블 배치를 사용할 시기
세로 공간을 유지해야 하는 단일 열 양식에서는 다음에 해당되는 경우 레이블을 컨트롤의 왼쪽에 배치합니다.
- 레이블 문자열이 짧고 길이가 거의 동일합니다.
- 지역화에 관계없이 가장 긴 레이블 문자열에 충분한 가로 공간이 있습니다.
다음은 왼쪽을 사용하는 양식의 예입니다.
많은 텍스트 문자열 길이 변형이 있는 경우 일부 레이블이 해당 컨트롤에서 멀리 떨어지게 되므로 왼쪽에 레이블을 배치하지 마세요.
다중 열 양식 레이아웃에서는 레이아웃에 다른 열의 모양이 표시되므로 왼쪽 레이블 배치를 사용하지 마세요. 예를 들어 2개 열 레이아웃이 4개 열이 있는 것처럼 표시됩니다.
인라인 자리 표시자 텍스트
경우에 따라 레이블 대신 인라인 자리 표시자 텍스트를 사용하여 레이아웃을 간소화할 수 있습니다. 인라인 자리 표시자 텍스트는 다음과 같은 경우에 사용합니다.
- 폭넓은 사용자가 일반적으로 양식 패턴을 이해합니다(예: 사용자 로그온 컨트롤 또는 암호 입력 필드).
- 입력 필드에 데이터를 입력한 후(데이터를 입력하고 힌트 텍스트가 사라진 이후) 레이블의 의미를 쉽게 파악하거나 설명할 수 있습니다 .
- 입력 필드 수가 제한되어 있습니다.
다음은 인라인 자리 표시자 텍스트를 사용하는 양식의 예입니다.
단추 배치
다른 컨트롤과 함께 여러 개의 단추가 포함된 경우를 제외하고 양식 단추는 오른쪽에 맞춥니다. 단추가 다른 컨트롤과 일관성 있게 보이도록 하려면 단추가 해당 컨트롤의 맞춤과 일치해야 합니다. 예를 들어 PC 설정 화면에서 포함된 단추는 왼쪽 맞춤됩니다.
단추 배치에 대한 자세한 내용은 단추에 대한 지침을 참조하세요.
포커스 및 탐색
양식에서 사용자가 조작하는 컨트롤에 포커스가 있습니다. 사용자는 키보드의 Tab 키를 사용하여 현재 뷰에 없는 컨트롤을 포함하여 양식의 컨트롤을 탐색할 수 있습니다. 이 경우 포커스가 있는 컨트롤을 포함하는 이동 영역은 전체 컨트롤이 뷰에 표시되도록 자동 스크롤되어야 합니다. 포커스가 있는 컨트롤과 화면 가장자리 또는 터치 키보드 위쪽 사이에 최소 30픽셀의 간격을 유지하여 다양한 가장자리 제스처/UI 및 텍스트 선택 위치 조정 막대를 고려해야 합니다.
경우에 따라 전체 시간 동안 화면에 유지해야 하는 UI 요소가 있습니다. 양식 컨트롤은 이동 영역에 포함되고 중요한 UI 요소는 고정되도록 UI를 디자인해 보세요. 예:
터치 키보드 호출 및 해제
물리적 키보드가 감지되지 않으면 사용자가 입력 텍스트 필드를 탭할 때 터치 키보드가 호출됩니다. 앱에서 터치 키보드를 자동으로 시작하도록 설정하지 마세요. 사용자가 호출하도록 설정하세요.
키보드는 다음 두 가지 방법 중 하나로 숨길 수 있습니다.
- 사용자가 양식을 완료하여 제출하고 뷰를 닫습니다.
- 사용자가 해제 키를 통해 키보드를 해제합니다.
사용자가 양식에서 컨트롤을 탐색하는 동안에는 터치 키보드가 자동으로 해제되지 않습니다.
자세한 내용은 터치 키보드 및 필기 패널에 대한 지침을 참조하세요.
레이아웃 예제
다음은 이 문서의 지침을 따르는 등록 양식의 예입니다.
다음은 각 요소의 크기와 요소 사이의 간격을 보여 주는 다이어그램입니다.
관련 항목
