Windows 앱
콘텐츠의 테이블 축소
콘텐츠의 테이블 확장

목록 보기 및 그리드 보기에 대한 지침

[이 문서에는 UWP 앱 및 Windows 10과 관련된 정보가 있습니다. Windows 8.1 참고 자료는 Windows 8.1 지침 PDF 를 다운로드하세요.]

목록은 컬렉션 기반 앱 콘텐츠를 표시하고 조작하는 일관된, 터치 최적화된 방법을 제공합니다. 목록 보기 및 그리드 보기 컨트롤을 활용하면 목록을 효과적으로 표시할 수 있습니다. 목록 보기 및 그리드 보기 컨트롤을 사용하면 항목을 분류하고, 그룹 헤더를 할당하고, 항목을 끌어서 놓고, 콘텐츠를 구성하며, 항목의 순서를 다시 매길 수 있습니다.

목록 보기 또는 그리드 보기

목록 보기와 그리드 보기의 기능이 비슷하지만 그 용도는 다릅니다.

목록 보기는 다음과 같은 경우에 사용하는 것이 좋습니다.

  • 주로 텍스트로 이루어진 콘텐츠 컬렉션을 표시하는 경우
  • 단일 콘텐츠 컬렉션 또는 분류된 콘텐츠 컬렉션을 탐색하는 경우
  • 마스터/세부 정보 패턴의 마스터 창을 만드는 경우 마스터/세부 정보는 메일 앱에서 흔히 사용되는 패턴으로, 하나의 창에는 선택 가능한 항목이 있으며 다른 창에는 선택한 항목의 자세히 보기가 있습니다. 이 보기의 예는 이 문서의 올바른 패턴 선택을 참조하세요.

목록 레이아웃은 그룹 머리글을 포함하고 단일 열을 표시하며 위에서 아래로 읽기 순서를 사용하며 항상 세로로 이동 또는 스크롤됩니다.

네 가지 기본 단위 유형이 있는 목록 보기 예제

그리드 보기는 다음과 같은 경우에 사용하는 것이 좋습니다.

  • 주로 이미지로 이루어진 콘텐츠 컬렉션을 표시하는 경우
  • 콘텐츠 라이브러리를 표시하는 경우 이 보기의 예는 이 문서의 올바른 패턴 선택을 참조하세요.
  • 시맨틱 줌과 연결된 두 콘텐츠 보기의 서식을 지정하는 경우

그리드 레이아웃은 항상 세로로 이동하고, 항목은 왼쪽에서 오른쪽으로, 위에서 아래로 읽기 순서에 따라 배치됩니다.

그리드 보기 레이아웃의 예

올바른 패턴 선택

목록은 콘텐츠 라이브러리, 마스터/세부 정보 데이터 또는 정적 데이터를 표시하는 데 사용됩니다.

  • 콘텐츠 라이브러리

    콘텐츠 컬렉션 또는 라이브러리를 표시하려면 콘텐츠 라이브러리를 사용합니다. 주로 사진, 동영상 등의 미디어를 제공하는 데 사용됩니다. 콘텐츠 라이브러리에서 사용자는 항목을 탭하여 동작을 호출할 수 있을 것으로 기대합니다.

    콘텐츠 라이브러리의 예

     

  • 마스터/세부 정보 데이터

    마스터/세부 정보 패턴을 사용할 경우 목록 보기를 사용하여 마스터 창을 구성할 수 있습니다. 마스터 창에는 선택 가능한 항목 목록이 표시됩니다. 사용자가 마스터 창에서 항목을 선택하면 해당 항목에 대한 추가 정보가 세부 정보 창에 표시됩니다. 세부 정보 창에는 주로 그리드 보기가 포함됩니다.

    마스터/세부 정보 패턴의 예

     

    여러 목록을 함께 연결하여 복잡한 마스터/세부 정보 계층을 만들 수 있습니다. 자세한 내용은 마스터/세부 정보 패턴을 참조하세요.

  • 정적 데이터

    정적 데이터는 대부분의 대화형 작업 유형이 비활성화되기 때문에 전적으로 비대화형 콘텐츠를 표시하는 데 사용됩니다. 이는 읽기 전용이며 활성화하거나 탐색할 수 없는 항목 컬렉션에 유용합니다.

선택 모드

이 모드를 사용하면 항목을 선택하고 해당 항목에 대한 작업을 수행할 수 있습니다. 이 모드는 Ctrl 키 또는 Shift 키를 누른 채 항목을 클릭하거나 갤러리 보기에서 항목의 대상을 롤오버하여 상황에 맞는 메뉴를 통해 호출할 수 있습니다.

다음과 같은 세 가지 선택 모드가 있습니다.

  • 단일 - 사용자가 한 번에 하나의 항목만 선택할 수 있습니다.
  • 다중 - 사용자가 보조 키를 사용하지 않고 여러 항목을 선택할 수 있습니다.
  • 확장 - 사용자가 보조 키를 사용하여 여러 항목을 선택할 수 있습니다. 예를 들어 Shift 키를 누른 상태로 선택할 수 있습니다.

선택 모드가 활성화되면 각 목록 항목 옆에 확인란이 표시되고 화면의 위쪽이나 아래쪽에 작업이 표시될 수 있습니다.

항목의 아무 곳이나 탭하면 선택됩니다. 명령 모음 작업을 탭하면 선택한 모든 항목에 영향을 줍니다. 항목을 선택하지 않으면 “모두 선택"을 제외한 명령 모음 작업이 비활성화되어야 합니다.

선택 모드에는 빠른 해제 모델이 없습니다. 즉, 선택 모드가 활성화된 프레임의 외부를 탭해도 모드가 취소되지 않습니다. 따라서 실수로 모드를 비활성화하는 것을 방지할 수 있습니다. 뒤로 단추를 클릭하면 다중 선택 모드가 해제됩니다.

작업이 선택된 경우 시각적으로 확인해야 합니다. 필요한 경우 애니메이션을 표시합니다. 특정 작업, 특히 삭제와 같은 파괴적인 작업에 대해서는 확인 대화 상자를 표시하는 것이 좋습니다.

선택 모드는 해당 모드가 활성화된 페이지로 제한되며, 해당 페이지 외부의 항목에는 영향을 줄 수 없습니다.

선택 모드의 진입점은 이 모드의 영향을 받는 콘텐츠와 나란히 배치되어야 합니다.

명령 모음 권장 사항에 대해서는 명령 모음에 대한 지침을 참조하세요.

다중 선택 모드

편집 모드에서는 라인 항목을 조작할 수 있습니다. 이 모드는 명령 모음의 편집 모드 단추나 상황에 맞는 메뉴를 통해 호출할 수 있습니다.

다중 선택 모드에 대한 진입점은 수정하는 목록에 의해 배치되어야 합니다.

뒤로 단추를 클릭하면 다중 선택 모드가 해제됩니다. 편집 모드를 시작하면 모든 명령 모음이 제거됩니다. 선택 모드가 시작될 때 다른 프레임이 표시되면 해당 프레임은 흐리게 표시됩니다.

편집 모드에는 빠른 해제 모델이 없습니다. 즉, 선택 모드가 활성화된 프레임의 외부를 탭해도 모드가 취소되지 않습니다. 따라서 실수로 모드를 비활성화하는 것을 방지할 수 있습니다.

편집 모드는 해당 모드가 활성화된 페이지로 제한되며, 해당 페이지 외부의 항목에는 영향을 줄 수 없습니다.

권장 사항

  • 동일한 목록 또는 그리드 보기에 있는 항목은 동일한 동작을 사용해야 합니다.
  • 목록이 그룹으로 나뉜 경우 시맨틱 줌을 사용하면 사용자가 그룹화된 콘텐츠를 쉽게 탐색할 수 있습니다.

관련 항목

허브
마스터/세부
탐색 창
시맨틱 줌

 

 

표시:
© 2017 Microsoft