목록 상자

참고 항목

이 디자인 가이드는 Windows 7용으로 만들어졌으며 최신 버전의 Windows용으로 업데이트되지 않았습니다. 지침의 대부분은 여전히 원칙으로 적용되지만 프레젠테이션과 예제는 현재 디자인 지침을 반영하지 않습니다.

목록 상자를 사용하면 사용자는 항상 표시되는 목록에 표시되는 값 집합 중에서 선택할 수 있습니다. 단일 선택 목록 상자를 사용하면 사용자는 상호 배타적인 값 목록에서 하나의 항목을 선택합니다. 다중 선택 목록 상자를 사용하여 사용자는 값 목록에서 0개 이상의 항목을 선택합니다.

일반적인 단일 선택 목록 상자입니다.

참고 항목

레이아웃 및 목록 보기와 관련된 지침은 별도의 문서에 나와 있습니다.

올바른 컨트롤인가요?

다음 질문을 고려하여 결정하십시오.

• 목록에 프로그램 옵션이 아닌 데이터가 표시됩니까? 어느 쪽이든 목록 상자는 항목 수에 관계없이 적합한 선택입니다. 반면 라디오 단추 또는 확인란은 적은 수의 프로그램 옵션에만 적합합니다.
• 사용자가 보기를 변경하거나, 그룹화하거나, 열을 기준으로 정렬하거나, 열 너비와 순서를 변경해야 합니까? 그렇다면 목록 보기를 대신 사용합니다.
• 컨트롤이 끌기 원본 또는 놓기 대상이어야 합니까? 그렇다면 목록 보기를 대신 사용합니다.
• 목록 항목을 클립보드에 복사하거나 붙여넣어야 합니까? 그렇다면 목록 보기를 대신 사용합니다.

단일 선택 목록

• 컨트롤은 상호 배타적 값 목록에서 하나의 옵션을 선택하는 데 사용합니까? 해당하지 않을 경우, 다른 컨트롤을 사용합니다. 여러 옵션을 선택하려면 표준 다중 선택 목록, 확인란 목록, 목록 작성기 또는 목록 추가/제거를 대신 사용합니다.
• 대부분의 경우 대부분의 사용자에게 권장되는 기본 옵션이 있나요? 선택한 옵션을 보는 것이 대안을 보는 것보다 훨씬 더 중요합니까? 그렇다면 사용자가 대안을 숨기도록 권장하지 않으려면 드롭다운 목록을 사용하는 것이 좋습니다.

이 예제에서 가장 높은 색 품질은 대부분의 사용자에게 가장 적합한 선택이므로 드롭다운 목록은 대안을 다운플레이하는 좋은 선택입니다.

• 목록에 일정한 상호 작용이 필요합니까? 그렇다면 단일 선택 목록을 사용하여 상호 작용을 간소화합니다.

이 예제에서는 사용자가 표시 항목 목록에서 선택한 항목을 지속적으로 변경하여 전경색과 배경색을 설정합니다. 이 경우 드롭다운 목록을 사용하는 것은 매우 번거로울 것입니다.

• 설정이 상대적 수량처럼 보이나요? 사용자가 변경 내용 설정의 효과에 대한 즉각적인 피드백을 활용할 수 있나요? 그렇다면 대신 슬라이더를 사용하는 것이 좋습니다.
• 목록 항목 간에 중요한 계층적 관계가 있나요? 그렇다면 트리 뷰 컨트롤을 대신 사용합니다.
• 화면 공간이 프리미엄인가요? 그렇다면 사용되는 화면 공간이 고정되어 있고 목록 항목 수와 독립적이므로 드롭다운 목록을 대신 사용합니다.

표준 다중 선택 목록 및 확인란 목록

• 작업에 여러 선택 항목이 필수인가요, 아니면 일반적으로 사용되는가요? 이 경우 확인란 목록을 사용하여 특히 대상 사용자가 고급이 아닌 경우 여러 항목을 명확하게 선택할 수 있습니다. 대부분의 사용자는 표준 다중 선택 목록이 여러 선택을 지원한다는 사실을 인식하지 못합니다. 확인란이 여러 선택 영역에 너무 많은 관심을 끌거나 화면이 너무 복잡해지면 표준 다중 선택 목록을 사용합니다.
• 여러 선택 영역의 안정성이 중요합니까? 이 경우 한 번에 하나의 항목만 변경되므로 확인란 목록, 목록 작성기 또는 추가/제거 목록을 사용합니다. 표준 다중 선택 목록을 사용하면 실수로도 모든 선택을 쉽게 지울 수 있습니다.
• 컨트롤이 값 목록에서 0개 이상의 항목을 선택하는 데 사용하나요? 해당하지 않을 경우, 다른 컨트롤을 사용합니다. 하나의 항목을 선택하려면 단일 선택 목록을 대신 사용합니다.

미리 보기 목록

• 텍스트만 있는 것보다 이미지로 옵션을 선택하는 것이 더 쉬울까요? 그렇다면 미리 보기 목록을 사용합니다.

목록 작성기 및 목록 추가/제거

• 컨트롤이 값 목록에서 0개 이상의 항목을 선택하는 데 사용하나요? 해당하지 않을 경우, 다른 컨트롤을 사용합니다. 하나의 항목을 선택하려면 단일 선택 목록을 대신 사용합니다.
• 선택한 항목의 순서가 중요합니까? 이 경우 목록 작성기 및 목록 패턴 추가/제거가 순서를 지원하는 반면 다른 다중 선택 패턴은 그렇지 않습니다.
• 사용자가 선택한 모든 항목의 요약을 보는 것이 중요합니까? 이 경우 목록 작성기 및 목록 추가/제거 패턴은 선택한 항목만 표시하는 반면 다른 다중 선택 패턴은 표시되지 않습니다.
• 가능한 선택이 제한되지 않는가요? 그렇다면 사용자가 현재 목록에 없는 값을 선택할 수 있도록 추가/제거 목록을 사용합니다.
• 목록에 값을 추가하려면 개체를 선택하기 위한 특수 대화 상자가 필요한가요? 그렇다면 추가/제거 목록을 사용하고 사용자가 추가를 클릭할 때 대화 상자를 표시합니다.
• 화면 공간이 프리미엄인가요? 이 경우 옵션 집합을 항상 표시하지 않음으로써 화면 공간을 더 적게 사용하기 때문에 추가/제거 목록을 대신 사용합니다.

목록 상자 의 경우 목록의 항목 수는 수천 개의 항목에서 단일 선택 목록(다중 선택 목록의 경우 없음)으로 확장되기 때문에 컨트롤 을 선택하는 요인이 아닙니다. 목록에 있는 상자를 데이터에 사용할 수 있으므로 항목 수를 미리 알 수 없습니다.

참고: 목록 상자처럼 보이는 컨트롤은 목록 보기를 사용하여 구현되고 그 반대의 경우도 마찬가지입니다. 이러한 경우 구현이 아닌 사용량에 따라 지침을 적용합니다.

사용 패턴

목록 상자에는 다음과 같은 몇 가지 사용 패턴이 있습니다.

레이블	값
단일 선택 목록 사용자가 한 번에 하나의 항목을 선택할 수 있습니다.	이 예제에서는 사용자가 하나의 표시 항목만 선택할 수 있습니다.
표준 다중 선택 목록 사용자가 없음을 포함하여 여러 항목을 선택할 수 있도록 허용합니다.	표준 다중 선택 목록은 단일 선택 목록과 정확히 같은 모양을 갖기 때문에 목록 상자에서 여러 선택을 지원한다는 시각적 단서가 없습니다. 사용자가 이 기능을 검색해야 하기 때문에 이 목록 패턴은 여러 선택이 필수적이지 않고 거의 사용되지 않는 작업에 가장 적합합니다. 다중 선택 모드에는 다중 및 확장 모드의 두 가지가 있습니다. 확장된 선택 모드 는 훨씬 더 일반적입니다. 여기서 선택 영역은 Shift+click 및 Ctrl+click을 사용하여 각각 연속 값과 인접하지 않은 값 그룹을 선택하여 선택 영역을 확장할 수 있습니다. 다중 선택 모드에서 항목을 클릭하면 Shift 키와 Ctrl 키에 관계없이 선택 상태가 전환됩니다. 이 비정상적인 동작을 감안할 때 다중 선택 모드는 더 이상 사용되지 않으며 대신 확인란 목록을 사용해야 합니다. 이 예제에서는 사용자가 다중 선택 모드를 사용하여 원하는 수의 항목을 선택할 수 있습니다.
확인란 목록 (예: 표준 다중 선택 목록 상자)을 선택하면 사용자가 없음을 포함하여 여러 항목을 선택할 수 있습니다.	표준 다중 선택 목록과 달리 확인란은 여러 항목을 선택할 수 있음을 명확하게 나타냅니다. 여러 선택 항목이 필수이거나 일반적으로 사용되는 작업에는 이 목록 패턴을 사용합니다. 이 예제에서는 사용자가 일반적으로 둘 이상의 항목을 선택하므로 확인란 목록이 사용됩니다. 여러 선택 항목이 명확하게 표시되면 확인란 목록이 표준 다중 선택 목록보다 선호된다고 가정할 수 있습니다. 실제로 여러 작업을 선택하거나 많이 사용하는 작업은 거의 없습니다. 이러한 경우 확인란 목록을 사용하면 선택에 너무 많은 주의가 집중됩니다. 따라서 표준 다중 선택 목록이 훨씬 더 일반적입니다.
미리 보기 목록은 단일 또는 여러 선택일 수 있지만 텍스트가 아닌 선택 효과의 미리 보기를 표시합니다.	이 예제에서 각 옵션의 미리 보기는 선택한 효과를 명확하게 보여 하며, 이는 텍스트만 사용하는 것보다 더 효과적입니다.
목록 작성기를 사용하면 사용자가 한 번에 하나의 항목을 추가하고 선택적으로 목록 순서를 설정하여 선택 목록을 만들 수 있습니다.	목록 작성기는 두 개의 단일 선택 목록으로 구성됩니다. 왼쪽의 목록은 고정된 옵션 집합이며 오른쪽 목록은 작성 중인 목록입니다. 목록 사이에는 두 개의 명령 단추가 있습니다. 현재 선택한 옵션을 빌드 중인 목록으로 이동하고 선택한 항목 앞에 삽입하는 추가 단추입니다. 옵션 항목을 두 번 클릭하면 효과가 동일합니다. 선택한 항목을 기본 제공 목록에서 제거하고 옵션 목록으로 반환하는 제거 단추입니다. (빌드된 목록에서 항목을 두 번 클릭하면 효과가 동일합니다.) 기본 제공 목록에는 선택적으로 목록 항목의 순서를 지정 하는 위로 이동 및 아래로 이동 명령이 있을 수 있습니다. 이 예제에서는 목록 작성기를 사용하여 사용 가능한 옵션 집합에서 항목을 선택하고 순서를 설정하여 도구 모음을 만듭니다.
목록 추가/제거를 통해 사용자는 한 번에 하나 이상의 항목을 추가하고 선택적으로 목록 순서(예: 목록 작성기)를 설정하여 선택 목록을 만들 수 있습니다.	목록 작성기와 달리 추가를 클릭하면 목록에 추가할 항목을 선택하는 대화 상자가 표시됩니다. 별도의 대화 상자를 사용하면 특수한 개체 선택기 또는 일반적인 대화 상자를 사용할 수 있는 항목을 유연하게 선택할 수 있습니다. 목록 작성기보다 이 변형은 더 간결하지만 항목을 추가하려면 약간 더 많은 노력이 필요합니다. 이 예제에서는 사용자가 메뉴에서 도구를 추가하거나 제거하고 순서를 설정할 수 있습니다. 목록 작성기 및 목록 추가/제거 패턴은 다른 다중 선택 목록보다 훨씬 무겁지만 두 가지 고유한 이점을 제공합니다. 사용자는 목록을 작성하는 동안 및 이후의 목록 순서를 제어할 수 있습니다. 사용자는 선택한 항목의 요약을 검토할 수 있습니다. 이는 선택 항목 수가 큰 경우 상당한 이점이 될 수 있습니다. 그들의 단점은 훨씬 더 많은 화면 공간이 필요하고 처음부터 항목의 큰 목록을 만들 때 사용하기 어려울 수 있다는 것입니다. 따라서 짧은 목록을 만들거나 이미 존재하는 목록을 수정하는 데 가장 적합합니다.

지침

프레젠테이션

• 관련된 옵션을 그룹화하거나, 가장 자주 사용하는 항목을 먼저 배치하거나, 사전순으로 정렬하는 등의 논리적 순서로 목록 항목을 정렬합니다. 이름을 사전순으로 정렬하고 숫자를 숫자 순서로 정렬하고 날짜를 시간순으로 정렬합니다. 항목을 더 쉽게 찾을 수 있도록 12개 이상의 항목이 있는 목록을 사전순으로 정렬해야 합니다.

옳음:

이 예제에서는 목록 상자 항목이 공간 관계에 따라 정렬됩니다.

틀림:

이 예제에는 사전순으로 정렬해야 하는 목록 항목이 너무 많습니다.

옳음:

이 예제에서는 목록 항목이 사전순으로 정렬되므로 쉽게 찾을 수 있습니다. 그러나 "모든 Windows 제품" 항목은 정렬 순서에 관계없이 목록의 시작 부분에 있습니다.

• 나머지 항목의 정렬 순서에 관계없이 목록의 시작 부분에 모두 또는 없음을 나타내는 옵션을 배치합니다.
• 메타 옵션을 괄호로 묶습니다.

이 예제에서 "(없음)"은 선택 항목에 유효한 값이 아니므로 메타 옵션입니다. 이는 옵션 자체가 사용되지 않음을 나타냅니다.

• 대신 빈 목록 항목이 메타 옵션을 사용하지 않습니다. 사용자는 빈 항목을 해석하는 방법을 모르는 반면 메타 옵션의 의미는 명시적입니다.

틀림:

이 예제에서는 빈 항목의 의미가 명확하지 않습니다.

옳음:

이 예제에서는 "(none)" 메타 옵션이 대신 사용됩니다.

상호 작용

• 두 번 클릭 동작을 제공하는 것이 좋습니다. 두 번 클릭하면 항목을 선택하고 기본 명령을 수행하는 것과 같은 효과가 있어야 합니다.
• 두 번 클릭 동작을 중복합니다. 항상 동일한 효과가 있는 명령 단추 또는 상황에 맞는 메뉴 명령이 있어야 합니다.
• 사용자가 선택한 항목으로 아무 작업도 수행할 수 없는 경우 선택을 허용하지 않습니다.

옳음:

이 목록 상자에는 읽기 전용 변경 내용 목록이 표시됩니다. 선택할 필요가 없습니다.

• 목록 상자를 사용하지 않도록 설정하는 경우 연결된 레이블 및 명령 단추도 사용하지 않도록 설정합니다.
• 목록 상자에서 선택한 항목을 다음과 같이 변경하지 마세요.
  • 명령을 수행합니다.
  • 더 많은 입력을 수집하기 위한 대화 상자와 같은 다른 창을 표시합니다.
  • 선택한 컨트롤과 관련된 다른 컨트롤을 동적으로 표시합니다(화면 읽기 프로그램은 이러한 이벤트를 검색할 수 없음). 예외: 선택한 항목을 설명하는 데 사용되는 정적 텍스트를 동적으로 변경할 수 있습니다.

용인되는:

이 예제에서는 선택한 항목을 변경하면 설명이 변경됩니다.

• 가로 스크롤을 방지합니다. 여러 열 목록은 가로 스크롤을 사용하므로 일반적으로 세로 스크롤보다 사용하기가 어렵습니다. 사전순으로 정렬된 항목이 많고 넓은 컨트롤에 충분한 화면 공간이 있는 경우 가로 스크롤이 필요한 여러 열 목록을 사용할 수 있습니다.

용인되는:

이 예제에서는 다양한 항목과 넓은 컨트롤에 사용할 수 있는 화면 공간이 많기 때문에 가로 스크롤이 필요한 여러 열이 사용됩니다.

다중 선택 목록

• 특히 사용자가 여러 항목을 선택할 가능성이 있는 경우 목록 아래에 선택한 항목 수를 표시하는 것이 좋습니다. 이 정보는 유용한 피드백을 제공할 뿐만 아니라 목록 상자에서 여러 선택을 지원함을 명확하게 나타냅니다.

이 예제에서는 선택한 항목 수가 목록 아래에 표시됩니다.

• 선택 영역에 필요한 리소스와 같이 더 의미 있는 다른 선택 메트릭을 제공할 수 있습니다.

이 예제에서는 구성 요소를 설치하는 데 필요한 디스크 공간이 선택한 항목 수보다 더 의미 있습니다.

• 목록 항목이 여러 개 있을 수 있고 모든 항목을 선택하거나 선택 취소할 가능성이 있는 경우 모두 선택 및 모두 지우기 명령 단추를 추가합니다.
• 표준 다중 선택 목록의 경우 이 선택 모드가 더 이상 사용되지 않으므로 다중 선택 모드를 사용하지 마세요. 동일한 동작의 경우 대신 확인란 목록을 사용합니다.

기본값

• 데이터 또는 시스템 액세스 손실을 방지하기 위해 가장 안전한 옵션과 가장 안전한 옵션을 기본적으로 선택합니다. 안전 및 보안이 요인이 아닌 경우 가장 가능성이 높거나 편리한 옵션을 선택합니다.

예외: 컨트롤이 혼합 상태의 속성을 나타내는 경우 동일한 설정이 없는 여러 개체에 대한 속성을 표시할 때 발생하는 항목을 선택하지 마세요.

권장 크기 조정 및 간격

목록 상자의 권장 크기 조정 및 간격입니다.

• 가장 긴 유효한 데이터에 적합한 목록 상자 너비를 선택합니다. 표준 목록 상자는 가로로 스크롤할 수 없으므로 사용자는 컨트롤에 표시되는 항목만 볼 수 있습니다.
• 지역화할 텍스트(숫자가 아님)에 대해 30% (짧은 텍스트의 경우 최대 200%)를 추가로 포함합니다.
• 정수의 항목을 표시하는 목록 상자 높이를 선택합니다. 항목을 세로로 잘림하지 마세요.
• 불필요한 세로 스크롤을 제거하는 목록 상자 높이를 선택합니다. 목록 상자는 스크롤할 필요 없이 3~20개 항목을 표시해야 합니다. 이렇게 하면 세로 스크롤 막대가 제거되는 경우 목록 상자를 약간 더 길게 만드는 것이 좋습니다. 잠재적으로 많은 항목이 있는 목록은 한 번에 더 많은 항목을 표시하고 스크롤 막대의 위치를 더 쉽게 만들어 스크롤을 용이하게 하기 위해 5개 이상의 항목을 표시해야 합니다.
• 사용자가 목록 상자를 더 크게 만들면 목록 상자와 해당 부모 창의 크기가 조정되도록 합니다. 이렇게 하면 사용자가 필요에 따라 목록 상자 크기를 조정할 수 있습니다. 그러나 크기 조정 가능한 목록 상자에는 3개 이하의 항목이 표시되어야 합니다.

레이블

컨트롤 레이블

• 모든 목록 상자에는 레이블이 필요합니다. 레이블을 문장이 아닌 단어나 구로 씁니다. 는 레이블의 끝에 콜론을 사용합니다.

예외: 대화 상자의 기본 명령의 재시도일 뿐이면 레이블을 생략합니다. 이 경우 기본 명령은 콜론(질문이 아닌 경우)과 액세스 키를 사용합니다.

용인되는:

이 예제에서 목록 상자 레이블은 주 명령을 다시 표시합니다.

더 좋은:

이 예제에서는 중복 레이블이 제거되므로 기본 명령은 콜론 및 액세스 키를 사용합니다.

• 목록 상자가 라디오 단추 또는 확인란에 종속되어 있고 콜론으로 끝나는 해당 컨트롤의 레이블에 의해 도입된 경우 목록 상자 컨트롤에 추가 레이블을 배치하지 마세요.

이 예제에서 목록 상자는 라디오 단추에 종속되고 레이블을 공유합니다.

• 고유한 액세스 키를 할당합니다. 지침은 키보드를 참조 하세요.
• 문장 스타일 대문자를 사용합니다.
• 레이블을 컨트롤의 왼쪽 또는 위쪽에 배치하고 레이블을 컨트롤의 왼쪽 가장자리에 맞춥다.
  • 레이블이 왼쪽에 있는 경우 레이블 텍스트를 컨트롤의 첫 번째 텍스트 줄에 세로로 맞춥다.

옳음:

이러한 예제에서 맨 위에 있는 레이블은 목록 상자의 왼쪽 가장자리에 맞춰지고 왼쪽의 레이블은 목록 상자의 텍스트에 맞춰 정렬됩니다.

틀림:

이러한 잘못된 예제에서 맨 위에 있는 레이블은 목록 상자의 텍스트에 맞춰지고 왼쪽의 레이블은 목록 상자의 위쪽에 맞춰 정렬됩니다.

• 다중 선택 목록 상자의 경우 여러 선택 가능함을 명확하게 나타내는 레이블을 사용합니다. 확인란 목록 레이블은 덜 명시적일 수 있습니다.

옳음:

이 예제에서 레이블은 여러 선택 가능을 명확하게 나타냅니다.

틀림:

이 예제에서 레이블은 여러 선택에 대한 명확한 정보를 제공하지 않습니다.

제일:

이 예제에서 확인란은 여러 선택 가능함을 명확하게 나타내므로 레이블이 명시적일 필요는 없습니다.

• 레이블 뒤의 괄호 안에 단위(초, 연결 등)를 지정할 수 있습니다.

옵션 텍스트

• 각 옵션에 고유한 이름을 할당합니다.
• 항목이 적절한 명사인 경우가 아니면 문장 스타일 대문자 표시를 사용합니다.
• 레이블을 문장이 아닌 단어나 구로 작성하고 끝 문장 부호를 사용하지 않습니다.
• 병렬 구문을 사용하고 모든 옵션에 대해 길이를 동일하게 유지합니다.

지침 및 추가 텍스트

• 목록 상자에 대한 지침 텍스트를 추가해야 하는 경우 레이블 위에 추가합니다. 문장 부호가 끝나는 전체 문장을 사용합니다.
• 문장 스타일 대문자를 사용합니다.
• 유용하지만 필요하지 않은 추가 정보는 짧게 유지해야 합니다. 이 텍스트를 레이블과 콜론 사이의 괄호 안에 배치하거나 컨트롤 아래에 괄호 없이 배치합니다.

이 예제에서는 추가 텍스트가 목록 아래에 배치됩니다.

설명서

목록 상자를 참조하는 경우:

• 대문자를 포함하여 정확한 레이블 텍스트를 사용하지만 액세스 키 밑줄 또는 콜론을 포함하지 않습니다. 단어 목록을 포함합니다. 목록 상자를 목록 상자 또는 필드로 참조하지 마세요.
• 목록 항목의 경우 대문자를 포함하여 정확한 항목 텍스트를 사용합니다.
• 프로그래밍 및 기타 기술 설명서에서 목록 상자를 목록 상자로 참조합니다. 다른 곳에서는 목록을 사용합니다.
• 사용자 상호 작용을 설명하려면 Select를 사용합니다.
• 가능하면 굵은 텍스트를 사용하여 레이블 및 목록 항목의 서식을 지정합니다. 그렇지 않으면 혼동을 방지하기 위해 필요한 경우에만 레이블과 항목을 따옴표로 묶습니다.

예: 이동 목록에서 책갈피를 선택합니다.