목록 보기
참고 항목
이 디자인 가이드는 Windows 7용으로 만들어졌으며 최신 버전의 Windows용으로 업데이트되지 않았습니다. 지침의 대부분은 여전히 원칙으로 적용되지만 프레젠테이션과 예제는 현재 디자인 지침을 반영하지 않습니다.
목록 보기를 사용하면 사용자는 단일 선택 또는 여러 선택을 사용하여 데이터 개체 컬렉션을 보고 상호 작용할 수 있습니다.
일반적 목록 보기.
목록 보기는 목록 상자보다 유연성과 기능이 더 높습니다. 목록 상자와 달리 보기 변경, 그룹화, 머리글이 있는 여러 열, 열별로 정렬, 열 너비 및 순서 변경, 끌기 원본 또는 놓기 대상, 클립보드에서 데이터 복사를 지원합니다.
올바른 컨트롤인가요?
목록 보기는 더 유연하고 기능적인 목록 상자 그 이상입니다. 추가 기능으로 인해 사용량이 달라집니다. 다음 표에서는 비교를 보여줍니다.
| 사용 | 목록 상자 | 목록 보기 |
|---|---|---|
| 데이터 형식 |
데이터 및 프로그램 옵션 모두. |
데이터만 해당합니다. |
| 콘텐츠 |
레이블만 해당합니다. |
레이블 및 보조 데이터(여러 열에 있을 수 있음). |
| 상호 작용 |
선택을 하는 데 사용됩니다. |
선택을 위해 사용할 수 있지만 데이터 표시 및 상호 작용에 자주 사용됩니다. 끌기 원본 또는 놓기 대상일 수 있습니다. |
| 프레젠테이션 |
수정됨. |
사용자는 보기를 변경하고, 그룹화하고, 열을 기준으로 정렬하고, 열 너비와 순서를 변경할 수 있습니다. |
이것이 올바른 제어인지 결정하려면 다음 질문을 고려하세요.
- 목록에 프로그램 옵션이 아닌 데이터가 표시됩니까? 그렇지 않은 경우 목록 상자를 대신 사용하는 것이 좋습니다.
- 사용자가 보기를 변경하거나, 그룹화하거나, 열을 기준으로 정렬하거나, 열 너비와 순서를 변경해야 합니까? 그렇지 않은 경우 목록 상자를 대신 사용합니다.
- 컨트롤이 끌기 원본 또는 놓기 대상이어야 합니까? 그렇다면 목록 보기를 사용합니다.
- 목록 항목을 클립보드에 복사하거나 붙여넣어야 합니까? 그렇다면 목록 보기를 사용합니다.
확인란 목록 보기
- 컨트롤이 데이터 목록에서 0개 이상의 항목을 선택하는 데 사용하나요? 하나의 항목을 선택하려면 대신 단일 선택을 사용합니다.
- 작업에 여러 선택 항목이 필수인가요, 아니면 일반적으로 사용되는가요? 이 경우 확인란 목록 보기를 사용하여 여러 항목을 명확하게 만들 수 있습니다( 특히 대상 사용자가 고급이 아닌 경우). 그렇지 않은 경우 확인란이 여러 선택 영역에 너무 많은 관심을 끌거나 화면이 너무 복잡해지면 표준 다중 선택 목록 보기를 사용합니다.
- 여러 선택 영역의 안정성이 중요합니까? 이 경우 한 번에 하나의 항목만 변경되므로 확인란 목록, 목록 작성기 또는 추가/제거 목록을 사용합니다. 표준 다중 선택 목록을 사용하면 실수로도 모든 선택을 쉽게 지울 수 있습니다.
참고 항목
목록 보기처럼 보이는 컨트롤이 목록 상자를 사용하여 구현되는 경우도 있고 그 반대의 경우도 마찬가지입니다. 이러한 경우 구현이 아닌 사용량에 따라 지침을 적용합니다.
사용 패턴
모든 보기는 사용자가 한 번에 하나의 항목만 선택할 수 있는 단일 선택 및 여러 선택 항목을 지원합니다. 여기서 사용자는 항목을 선택할 수 있습니다(없음 포함). 목록 보기는 확장된 선택 모드를 지원합니다. 여기서 선택 영역은 각각 Shift+클릭 또는 Ctrl+click을 사용하여 인접하거나 인접하지 않은 값 그룹을 선택하여 선택 영역을 확장할 수 있습니다. 목록 상자와 달리 항목을 클릭하면 Shift 키와 Ctrl 키에 관계없이 선택 상태가 전환되는 여러 선택 모드가 지원되지 않습니다.
표준 목록 보기
목록 보기 컨트롤은 5개의 표준 보기를 지원합니다.
| 사용 | 예시 |
|---|---|
| 타일 각 항목은 오른쪽에 레이블과 선택적 세부 정보가 있는 중간 아이콘으로 나타납니다. |
 타일 보기는 오른쪽에 레이블과 선택적 세부 정보가 있는 중간 아이콘을 표시합니다. |
| 큰 아이콘 각 항목은 아래에 레이블이 있는 초대형, 큰 아이콘 또는 중간 아이콘으로 나타납니다. |
 큰 아이콘 보기는 각 항목을 아래에 레이블이 있는 큰 아이콘으로 표시합니다. |
| 작은 아이콘 각 항목은 오른쪽에 레이블이 있는 작은 아이콘으로 나타납니다. |
 작은 아이콘 보기는 각 항목을 오른쪽에 레이블이 있는 작은 아이콘으로 표시합니다. |
| List 각 항목은 오른쪽에 레이블이 있는 작은 아이콘으로 나타납니다. |
목록 모드에서 이 보기는 열의 항목을 정렬하고 가로 스크롤 막대를 사용합니다. 반면 아이콘 보기 모드는 행의 항목을 정렬하고 세로 스크롤 막대를 사용합니다.  목록 모드는 각 항목을 오른쪽에 레이블이 있는 작은 아이콘으로 표시합니다. |
| 세부 정보 각 항목은 테이블 형식의 행으로 표시됩니다. 맨 왼쪽 열에는 항목의 선택적 아이콘과 레이블이 모두 포함되며, 후속 열에는 항목 속성과 같은 추가 정보가 포함됩니다. |
또한 열을 추가하거나 제거하고 순서를 다시 지정하고 크기를 조정할 수 있습니다. 행을 그룹화하고 열별로 정렬할 수 있습니다.  세부 정보 보기는 각 항목을 테이블 형식의 줄로 표시합니다. |
목록 보기 변형
| 레이블 | 값 |
|---|---|
| 열 선택기 목록 보기에는 열이 너무 많아서 모두 표시하는 것이 실용적이지 않은 경우가 있습니다. 이 경우 가장 좋은 방법은 기본적으로 가장 유용한 열을 표시하고 사용자가 필요에 따라 열을 추가하거나 제거할 수 있도록 하는 것입니다. |
 열 제목을 마우스 오른쪽 단추로 클릭하면 사용자가 열을 추가하거나 제거할 수 있는 상황에 맞는 메뉴가 표시됩니다.  열 머리글 상황에 맞는 메뉴에서 자세히를 클릭하면 열 선택 대화 상자가 표시됩니다. 그러면 사용자가 열을 추가하거나 제거하고 열을 다시 정렬할 수 있습니다. |
| 확인란 목록 보기 사용자가 여러 항목을 선택할 수 있도록 허용합니다. |
다중 선택 목록 보기는 단일 선택 목록 보기와 정확히 같은 모양을 가지므로 여러 선택을 지원하는 시각적 단서가 없습니다. 확인란 목록 보기를 사용하여 여러 항목을 선택할 수 있음을 명확하게 나타낼 수 있습니다. 따라서 이 패턴은 여러 선택 항목이 필수이거나 일반적으로 사용되는 작업에 사용해야 합니다. 이 예제에서는 작업에 여러 선택 항목이 필수이므로 작은 아이콘 보기에서 확인란을 사용합니다. |
| 그룹이 있는 보기 나열 데이터를 그룹으로 구성합니다. |
세부 정보 보기는 열별로 데이터를 정렬하는 것을 지원하는 경우가 많지만, 목록 보기를 통해 사용자는 항목을 그룹으로 구성할 수 있습니다. 그룹화의 몇 가지 이점은 다음과 같습니다.
 이 예제에서 Windows 시작 센터는 목록 보기에 그룹화된 항목을 표시합니다. |
지침
프레젠테이션
목록 항목을 논리적 순서로 정렬합니다. 이름을 사전순으로 정렬하고 숫자를 숫자 순서로 정렬하고 날짜를 시간순으로 정렬합니다.
적절한 경우 사용자가 정렬 순서를 변경할 수 있도록 허용합니다. 목록에 항목이 많거나 기본값이 아닌 정렬 순서를 사용하여 항목을 보다 효과적으로 찾을 수 있는 시나리오가 있는 경우 사용자 정렬이 중요합니다.
컨트롤에 포커스가 없는 경우에도 사용자가 선택한 항목을 쉽게 확인할 수 있도록 Always Show Selection 특성을 사용합니다.
빈 목록 보기를 표시하지 마세요. 사용자가 목록을 만드는 경우 사용자에게 필요할 수 있는 지침 또는 예제 항목을 사용하여 목록을 초기화합니다.
이 예제에서 검색 목록 보기는 처음에 지침을 제공합니다.
사용자가 보기를 변경하거나, 그룹화하거나, 열을 기준으로 정렬하거나, 열과 너비 및 순서를 변경할 수 있는 경우 다음번에 목록 보기가 표시될 때 적용되도록 해당 설정을 유지합니다. 사용자별로 목록별 보기를 유지합니다.
상호 작용
한 번 클릭하여 사용자가 가리키는 목록 항목을 선택합니다. 예외: 명령 링크 목록 패턴의 경우 한 번 클릭하여 항목을 선택하고 창을 닫거나 다음 페이지로 이동합니다.
두 번 클릭 동작을 제공하는 것이 좋습니다. 두 번 클릭하면 항목을 선택하고 기본 명령을 수행하는 것과 같은 효과가 적용됩니다.
두 번 클릭 동작을 중복합니다. 항상 동일한 효과가 있는 명령 단추 또는 상황에 맞는 메뉴 명령이 있어야 합니다.
목록 항목에 추가 설명이 필요한 경우 정보 설명에 설명을 입력합니다. 전체 문장과 문장 부호를 사용합니다.
이 예제에서는 추가 정보를 제공하는 데 정보 설명을 사용합니다.
관련 명령의 상황에 맞는 메뉴를 제공합니다. 이러한 명령에는 잘라내기, 복사, 붙여넣기, 제거 또는 삭제, 이름 바꾸기 및 속성이 포함됩니다.
사용자가 정렬 순서 및 그룹화할 수 있는 경우 정렬 기준 및 그룹화별 상황에 맞는 메뉴를 제공합니다. 열 이름을 처음 클릭하면 해당 열의 오름차순으로 목록을 정렬하거나 그룹화하고, 두 번째 클릭은 내림차순으로 정렬하거나 그룹을 그룹화합니다. 이전 순서(다른 열에서)를 보조 키로 사용합니다.
이 예제에서 정렬 기준 상황에 맞는 메뉴는 정렬 순서를 변경합니다. 이름을 클릭하면 이름을 기준으로 오름차순으로 정렬됩니다. 이름을 다시 클릭하면 이름을 기준으로 내림차순으로 정렬됩니다.
키보드를 사용하여 목록 보기 열 머리글에 액세스할 수 있도록 합니다.
- 개발자: 열 머리글 컨트롤에 포커스를 설정하여 이 작업을 수행할 수 있습니다. 이 기능은 Windows Vista의 새로운 기능입니다.
목록 보기를 사용하지 않도록 설정하는 경우 연결된 레이블 및 명령 단추도 사용하지 않도록 설정합니다.
가로 스크롤을 방지합니다. 목록 모드에서는 가로 스크롤을 사용합니다. 이 모드는 일반적으로 가장 간결하지만 가로 스크롤은 일반적으로 세로 스크롤보다 사용하기 어렵습니다. 압축이 중요하지 않은 경우 작은 아이콘 보기를 대신 사용하는 것이 좋습니다. 그러나 사전순으로 정렬된 항목이 많고 넓은 컨트롤을 위한 충분한 화면 공간이 있는 경우 목록 모드를 선택하는 것이 좋습니다.
용인되는:
이 예제에서는 다양한 항목과 넓은 컨트롤에 사용할 수 있는 화면 공간이 많기 때문에 목록 모드가 사용됩니다.
다중 선택 목록
특히 사용자가 여러 항목을 선택할 가능성이 있는 경우 목록 아래에 선택한 항목 수를 표시하는 것이 좋습니다. 이 정보는 유용한 피드백을 제공할 뿐만 아니라 목록 보기에서 여러 선택을 지원한다는 것을 명확하게 나타냅니다.
이 예제에서는 선택한 항목 수가 목록 아래에 표시됩니다.
또는 선택한 항목의 수 대신 선택 영역에 필요한 리소스와 같이 더 의미 있는 다른 선택 메트릭을 제공할 수 있습니다.
이 예제에서는 구성 요소를 설치하는 데 필요한 디스크 공간이 선택한 구성 요소 수보다 더 의미가 있습니다.
확인란 목록 보기의 경우 잠재적으로 많은 항목이 있고 모든 항목을 선택하거나 선택 취소할 가능성이 있는 경우 모두 선택 및 모두 지우기 명령 단추를 추가합니다.
혼합 상태 확인란을 사용하여 컨테이너에 있는 항목의 일부를 선택했음을 나타냅니다. 혼합 상태는 개별 항목에 대한 세 번째 상태로 사용되지 않습니다.
보기 변경
사용자가 보기를 변경할 수 있는 경우:
기본적으로 가장 편리한 보기를 선택합니다. 사용자가 변경한 내용은 사용자별로 목록별 보기에서 영구적으로 수행해야 합니다.
분할 단추, 메뉴 단추 또는 드롭다운 목록을 사용하여 보기를 변경합니다. 실용적일 때마다 도구 모음에서 분할 단추를 사용하고 단추 레이블을 변경하여 현재 보기를 반영합니다.
이 예제에서는 도구 모음의 분할 단추를 사용하여 보기를 변경합니다.
보기 상황에 맞는 메뉴를 제공합니다.
이 예제에서는 보기 상황에 맞는 메뉴를 사용하여 보기를 변경합니다.
세부 정보 보기
타일 보기를 사용하여 가독성을 개선하는 것이 좋습니다.
용인되는:
이 예제에서는 데이터가 너무 많고 창, 목록 및 열이 너무 작아 목록 항목을 읽기가 어렵습니다.
더 좋은:
이 예제에서 타일 보기는 잘림 없이 데이터를 표시합니다.
가장 긴 데이터에 적합한 기본 열 너비를 선택합니다. 목록 보기는 줄임표로 긴 데이터를 자동으로 잘라내므로 기본적으로 줄임표가 거의 표시되지 않는 경우 열 너비가 적절합니다. 사용자는 열의 크기를 조정할 수 있지만 다른 솔루션을 선호합니다.
- 각 열 너비의 크기를 데이터에 맞게 조정합니다.
- 해당 열에 맞게 컨트롤 너비와 가능한 스크롤 막대의 크기를 조정합니다.
- 필요한 경우 가로 스크롤을 사용합니다.
- 홀수 크기의 항목 또는 최후의 수단으로만 데이터를 잘립니다.
기본 크기의 데이터를 기본적으로 잘라내야 하는 경우 창 및 목록 보기의 크기를 조정할 수 있도록 합니다. 지역화할 텍스트(숫자가 아님)에 대해 30%(짧은 텍스트의 경우 최대 200%)를 추가로 포함합니다.
오답입니다:
이 예제에서는 대부분의 데이터가 잘립니다. 많은 줄임표는 컨트롤과 열 너비가 데이터에 비해 너무 작다는 것을 명확하게 나타냅니다.
오답입니다:
이 예제에서 데이터는 이유 없이 잘립니다.
적절한 기본 열 순서를 선택합니다. 일반적으로 다음과 같이 열을 정렬합니다.
- 첫째, 항목 이름 또는 식별 데이터입니다.
- 다음으로 목록 항목을 구분하는 데 유용한 다른 데이터입니다.
- 다음으로, 가장 유용한(가급적 짧은 길이 또는 고정 길이) 데이터입니다.
- 다음으로, 덜 유용한(짧거나 고정 길이가 바람직한) 데이터입니다.
- 마지막, 긴 가변 길이 데이터입니다.
가로 스크롤의 필요성을 줄이기 위해 긴 가변 길이 데이터가 마지막 열에 배치됩니다. 이러한 범주 내에서 관련 정보를 논리적 시퀀스에 함께 배치합니다.
적절한 경우 사용자가 열을 추가 및 제거하고 순서를 변경할 수 있습니다. 기본적으로 가장 유용한 열을 표시합니다. 헤더 끌어서 놓기 특성을 사용하여 이 작업을 수행합니다.
데이터에 적합한 맞춤을 선택합니다. 다음 규칙을 사용합니다.
- 숫자, 통화 및 시간을 오른쪽에 맞춥니다.
- 텍스트, ID(숫자인 경우에도) 및 날짜를 왼쪽으로 맞춥니다.
정렬 가능한 열 머리글 의 경우 첫 번째 클릭은 열을 오름차순으로 정렬하고 두 번째 클릭은 내림차순으로 정렬합니다. 이전 정렬 순서(다른 열에서)를 보조 정렬 키로 사용합니다.
이 예제에서는 이름 열을 먼저 클릭한 다음 Type 열을 클릭합니다. 따라서 오름차순으로 형식이 기본 정렬 키이고 오름차순으로 이름이 보조입니다.
사용자가 모든 열에서 선택한 항목을 쉽게 확인할 수 있도록 전체 행 선택 특성을 사용합니다.
데이터를 정렬할 수 없는 한 정렬 가능한 열 머리글을 사용하지 마세요.
열이 하나만 있고 정렬을 취소할 필요가 없는 경우 열 머리글을 사용하지 마세요. 대신 레이블을 사용하여 데이터를 식별합니다.
오답입니다:
정답입니다:
올바른 예제에서는 열 머리글 대신 레이블이 사용됩니다.
권장 크기 조정 및 간격
목록 보기에 권장되는 크기 조정 및 간격입니다.
- 정수의 항목을 표시하는 목록 보기 높이를 선택합니다. 항목을 세로로 잘림하지 마세요.
- 지원되는 모든 보기에서 불필요한 세로 및 가로 스크롤을 제거하는 목록 보기 크기를 선택합니다. 목록 보기는 3~20개 항목을 표시해야 합니다. 이렇게 하면 스크롤 막대가 제거되는 경우 목록 보기를 약간 크게 만드는 것이 좋습니다. 잠재적으로 많은 항목이 있는 목록은 한 번에 더 많은 항목을 표시하고 스크롤 막대의 위치를 더 쉽게 만들어 스크롤을 용이하게 하기 위해 5개 이상의 항목을 표시해야 합니다.
- 사용자가 목록 보기를 더 크게 만들면 목록 보기와 해당 부모 창의 크기가 조정되도록 합니다. 이렇게 하면 사용자가 필요에 따라 목록 보기 크기를 조정할 수 있습니다. 그러나 크기 조정 가능한 목록 보기에는 3개 이하의 항목이 표시되어야 합니다.
레이블
컨트롤 레이블
모든 목록 보기에는 레이블이 필요합니다. 레이블을 문장이 아닌 단어 또는 구로 쓰고 정적 텍스트를 사용하여 콜론으로 끝납니다.
문장 스타일 대문자를 사용합니다.
레이블을 컨트롤 위에 놓고 레이블을 컨트롤의 왼쪽 가장자리에 맞춥다.
다중 선택 목록 보기의 경우 여러 선택 가능을 명확하게 나타내는 레이블을 작성합니다. 확인란 목록 보기 레이블은 덜 명시적일 수 있습니다.
정답입니다:
이 예제에서 레이블은 여러 선택 가능을 명확하게 나타냅니다.
오답입니다:
이 예제에서 레이블은 여러 선택에 대한 정보를 제공하지 않습니다.
용인되는:
이 예제에서 확인란은 여러 선택 가능함을 명확하게 나타내므로 레이블이 명시적일 필요는 없습니다.
레이블 뒤의 괄호 안에 단위(초, 연결 등)를 지정할 수 있습니다.
제목 레이블
- 제목 레이블을 간략하게 유지합니다(3단어 이하).
- 끝 문장 부호가 없는 단일 명사 또는 명사 구를 사용합니다.
- 문장 스타일 대문자를 사용합니다.
- 제목을 데이터와 동일한 방식으로 정렬합니다.
그룹 레이블
- 상위 수준 컬렉션에 다음 그룹 레이블을 사용합니다.
- 이름: 이름 또는 문자 범위의 첫 글자를 사용합니다.
- 크기: 지정되지 않음, 0KB, 0-10KB, 10-100KB, 100KB - 1MB, 1-16MB, 16-128MB
- 날짜: 오늘, 어제, 지난 주, 올해 초, 그리고 오래 전.
- 그렇지 않으면 그룹 레이블은 대문자 표시 및 문장 부호를 포함하여 그룹화되는 데이터의 정확한 텍스트를 사용합니다.
데이터 텍스트
- 문장 스타일 대문자를 사용합니다.
지침 텍스트
- 목록 보기에 대한 지침 텍스트를 추가해야 하는 경우 레이블 위에 추가합니다. 문장 부호가 끝나는 전체 문장을 사용합니다.
- 문장 스타일 대문자를 사용합니다.
- 유용하지만 필요하지 않은 추가 정보는 짧게 유지해야 합니다. 이 정보를 레이블과 콜론 사이의 괄호 안에 배치하거나 컨트롤 아래에 괄호 없이 배치합니다.
설명서
목록 보기를 참조하는 경우:
- 대문자를 포함하여 정확한 레이블 텍스트를 사용하지만 액세스 키 밑줄 또는 콜론을 포함하지 않고 단어 목록을 포함합니다. 목록 상자를 목록 상자, 목록 보기 또는 필드로 참조하지 마세요.
- 목록 데이터의 경우 대문자를 포함한 정확한 데이터 텍스트를 사용합니다.
- 목록 보기를 프로그래밍 및 기타 기술 설명서에서만 목록 보기로 참조하세요. 다른 모든 곳에서는 목록을 사용합니다.
- 사용자 상호 작용을 설명하려면 데이터에 대한 선택을 사용하고 제목을 클릭합니다.
- 가능하면 굵은 텍스트를 사용하여 레이블 및 목록 옵션의 서식을 지정합니다. 그렇지 않으면 혼동을 방지하기 위해 필요한 경우에만 레이블과 옵션을 따옴표로 묶습니다.
예: 프로그램 및 서비스 목록에서 파일 및 프린터 공유를 선택합니다.
목록 보기에서 확인란을 참조하는 경우:
- 대문자를 포함한 정확한 레이블 텍스트를 사용하고 단어 확인란을 포함합니다. 액세스 키 밑줄을 포함하지 마세요.
- 사용자 상호 작용을 설명하려면 선택 및 선택을 취소합니다.
- 가능하면 굵은 텍스트를 사용하여 레이블의 서식을 지정합니다. 그렇지 않으면 혼동을 방지하기 위해 필요한 경우에만 레이블을 따옴표로 묶습니다.
예: 밑줄 확인란을 선택합니다.