양식 레이아웃에 대한 지침

Applies to Windows and Windows Phone

훌륭한 터치 환경을 제공하고, 화면 공간의 사용을 최적화하며, Windows 스토어 앱에서 이동/스크롤을 최소화하는 양식을 디자인하세요.

앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.:  사용자 조작: 터치식 입력... 등

권장 사항 및 금지 사항

  • 콘텐츠 및 앱에 적합한 양식 레이아웃을 사용합니다.
  • 양식의 모든 레이블에 동일한 스타일의 레이블 배치를 사용하세요.
  • 양식 내용이 간단하거나 쉽게 이해할 수 있는 경우 인라인 자리 표시자 텍스트를 사용합니다.
  • 세로 이동이 많은 경우 여러 열을 사용하지 마세요.
  • 레이블 길이의 차이가 큰 경우 레이블을 왼쪽에 배치하지 마세요.
  • 터치 입력 없이 터치 키보드를 자동으로 시작하지 마세요.

추가 사용법 지침

양식과 컨트롤 레이아웃을 디자인할 때는 사용자가 양식을 작성하는 방법과 이동/스크롤이 환경에 미칠 수 있는 영향을 고려합니다. 또한 터치 키보드(가로 방향에서 화면의 50%까지 사용할 수 있음) 및 인라인 오류 알림(사용되는 경우)의 영향을 고려해야 합니다.

단일 열 레이아웃

다음과 같은 경우 양식에 단일 열 레이아웃을 사용합니다.

  • 사용자가 양식을 특정 순서대로 작성하도록 권장하려고 합니다.
  • 양식이 여러 페이지에 걸쳐 있습니다.
  • 높고 좁은 레이아웃에 맞게 앱 크기가 조정됩니다.
  • 앱에 추가 메모와 정보, 지침 또는 브랜딩과 광고가 표시됩니다.

다음은 단일 열 레이아웃을 사용하는 짧은 양식의 예입니다.

단일 열 레이아웃을 사용하는 짧은 양식

다음은 단일 열 레이아웃을 사용하는 더 긴 양식의 예입니다.

단일 열 레이아웃을 사용하는 더 긴 양식

많은 컨트롤을 매우 긴 하나의 양식에 포함하는 것보다는 작업을 일련의 여러 양식이나 그룹으로 나누는 방법을 고려해 보세요. 다음은 그룹으로 나뉘어진 더 긴 양식의 예입니다.

그룹을 사용하는 더 긴 양식

다음은 여러 페이지로 나뉘어진 더 긴 양식의 예입니다.

그룹을 사용하는 더 긴 양식

다음은 UI에 추가 노트 및 정보가 포함되어 있기 때문에 단일 열 레이아웃을 사용하는 양식의 예입니다.

추가 노트 및 정보가 포함된 양식

2개 열 레이아웃을 사용할 시기

세로 이동이 제한된 짧은 양식에는 2개 열 레이아웃을 사용합니다. 2개 열 레이아웃은 가로 방향의 화면 공간을 최대한 활용합니다. 두 열 사이에 제본용 여백 공간을 충분히 확보합니다.

다음은 2개 열을 사용하는 양식의 예입니다.

2개 열을 사용하는 양식

세로 이동이 많은 경우 여러 열을 사용하지 마세요. 양식을 작성하려면 사용자가 첫 번째 열의 맨 아래에 도달한 후 두 번째 열의 맨 위로 이동했다가 다시 아래로 진행해야 합니다. 이 환경은 터치 키보드가 표시될 경우 더욱 복잡해집니다.

다음은 2개 열을 잘못 사용하는 양식의 예입니다.

2개 열을 잘못 사용하는 양식

3개 이상 열을 사용할 시기

가로 방향으로 표시되는 화면 공간을 최대한 활용하려면 3개 이상의 열을 사용합니다. 이 레이아웃은 가로로 이동하는 화면이나 고정 화면에서는 잘 작동하지만 세로로 이동하는 화면에서는 불편합니다. 입력 순서가 중요하지 않은 경우에만 이 레이아웃을 사용하세요.

3개 열을 사용하는 양식

레이블 배치

대부분의 컨트롤에는 레이블이 필요합니다.

  • 컨트롤 위나 컨트롤 왼쪽에 레이블을 배치합니다.
  • 양식의 모든 레이블에 동일한 스타일의 레이블 배치를 사용하세요.

위쪽 레이블 배치를 사용할 시기

일반적으로 컨트롤 위에 레이블을 배치합니다. 다중 열 양식 레이아웃을 사용하는 경우 항상 컨트롤 위에 레이블을 배치합니다.

컨트롤 위에 레이블을 배치하면 레이블과 해당 컨트롤 간의 관계를 설정하는 데 도움이 되며, 모든 레이블과 컨트롤을 왼쪽에 맞출 수 있으므로 정리된 레이아웃을 만들 수 있습니다. 컨트롤 위에 레이블을 배치하면 더 쉽게 긴 문자열을 제공하고 지역화 및 접근성 문제를 처리할 수 있습니다.

다음은 상단 레이블 배치의 두 가지 예입니다.

컨트롤 위에 레이블을 배치하는 양식

왼쪽 레이블 배치를 사용할 시기

세로 공간을 절약해야 하는 단일 열 양식에서는 다음과 같은 경우 레이블을 컨트롤 왼쪽에 배치합니다.

  • 레이블 문자열이 짧고 길이가 거의 동일합니다.
  • 모든 로캘에서 가장 긴 레이블 문자열에 충분한 가로 공간이 있습니다.

다음은 왼쪽 레이블 배치를 사용하는 양식의 예입니다.

왼쪽 레이블 배치를 사용하는 양식

일부 레이블이 해당 컨트롤에서 너무 멀리 떨어져 레이블 길이의 차이가 큰 경우에는 레이블을 왼쪽에 배치하지 마세요.

왼쪽 레이블 배치를 잘못 사용하는 양식

다중 열 양식 레이아웃에서는 왼쪽 레이블 배치를 사용하지 마세요. 레이블 자체가 별도의 열처럼 보일 수 있습니다.

왼쪽 레이블 배치를 잘못 사용하는 양식

인라인 자리 표시자 텍스트

경우에 따라 레이블 대신 인라인 자리 표시자 텍스트를 사용하여 레이아웃을 간소화할 수 있습니다. 인라인 자리 표시자 텍스트는 다음과 같은 경우에 사용합니다.

  • 폭넓은 사용자가 일반적으로 양식 패턴을 이해합니다(예: 사용자 로그온 컨트롤 또는 암호 입력 필드).
  • 힌트 텍스트는 데이터가 입력된 후 사라지므로 입력 필드에 데이터가 입력된 후 레이블을 쉽게 암시하거나 이해할 수 있습니다.
  • 입력 필드 수가 제한되어 있습니다.

다음은 인라인 자리 표시자 텍스트를 사용하는 양식의 예입니다.

인라인 자리 표시자 텍스트를 사용하는 양식

단추 배치

여러 단추가 다른 컨트롤과 함께 포함되어 있는 경우를 제외하고 양식 단추를 오른쪽에 맞춥니다. 양식이 더 일관된 모양으로 표시되려면 단추가 다른 컨트롤의 맞춤과 일치해야 합니다. 예를 들어 PC 설정 화면에 포함된 단추는 왼쪽에 맞춰져 있습니다.

왼쪽 맞춤된 단추를 보여 주는 PC 설정 화면

단추 배치에 대한 자세한 내용은 단추에 대한 지침을 참조하세요.

포커스 및 탐색

사용자가 양식에서 조작 중인 컨트롤에 포커스가 있습니다. 사용자는 키보드의 Tab 키를 사용하여 현재 보기에 없는 컨트롤을 비롯한 양식의 컨트롤을 탐색할 수 있습니다. 전체 컨트롤이 보기에 표시되도록 포커스가 있는 컨트롤을 포함하는 이동 영역이 자동으로 이동되도록 합니다. 다양한 가장자리 제스처/UI 및 텍스트 선택 위치 조정 막대를 감안해서 포커스가 있는 컨트롤과 화면 가장자리 또는 터치 키보드 위쪽(표시되는 경우) 사이에 최소 30픽셀의 간격이 있어야 합니다.

터치 키보드가 표시된 양식 및 표시되지 않은 양식

경우에 따라 전체 시간 동안 화면에 유지해야 하는 UI 요소가 있습니다. 양식 컨트롤은 이동 영역에 포함되고 중요한 UI 요소는 고정되도록 UI를 디자인해 보세요. 예:

뷰에 항상 유지되어야 하는 영역이 있는 양식

터치 키보드 호출 및 해제

실제 키보드가 검색되지 않을 경우 사용자가 입력 텍스트 필드를 탭하면 터치 키보드가 표시됩니다. 이 조작 없이 앱이 터치 키보드를 자동으로 실행하지 않도록 하세요.

키보드는 다음 두 가지 방법 중 하나로 숨길 수 있습니다.

  • 사용자가 양식을 완료하여 제출하고 뷰를 닫습니다.
  • 사용자가 해제 키를 통해 키보드를 해제합니다.

터치 키보드는 사용자가 양식의 컨트롤 간에 이동하는 동안 자동으로 해제되지 않습니다.

자세한 내용은 터치 키보드 및 필기 패널에 대한 지침을 참조하세요.

레이아웃 예제

다음은 이 문서의 지침을 따르는 등록 양식의 예입니다.

등록 양식

다음은 다양한 요소의 권장 크기 및 간격 지침입니다.

등록 양식의 크기 및 간격

관련 항목

디자이너용
단추에 대한 지침
터치 키보드 및 필기 패널에 대한 지침

 

 

표시:
© 2014 Microsoft