목록 상자

참고

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

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

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

참고

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

올바른 컨트롤인가요?

결정하기 전에 다음 사항을 고려합니다.

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

단일 선택 목록

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

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

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

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

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

표준 다중 선택 목록 및 검사 상자 목록

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

미리 보기 목록

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

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

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

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

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

사용 패턴

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

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

지침

프레젠테이션

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

정답:

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

틀렸습니다.

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

정답:

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

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

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

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

틀렸습니다.

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

정답:

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

상호 작용

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

정답:

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

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

허용 가능:

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

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

허용 가능:

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

다중 선택 목록

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

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

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

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

• 잠재적으로 많은 목록 항목이 있고 모든 항목을 선택하거나 선택 취소할 가능성이 있는 경우 모두 선택 및 모두 지우기 명령 단추를 추가합니다.
• 표준 다중 선택 목록의 경우 이 선택 모드가 더 이상 사용되지 않으므로 다중 선택 모드를 사용하지 마세요. 동등한 동작의 경우 대신 검사 상자 목록을 사용합니다.

기본값

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

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

권장 크기 조정 및 간격

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

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

레이블

컨트롤 레이블

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

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

허용 가능:

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

Better:

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

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

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

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

정답:

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

오답:왼쪽

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

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

정답:

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

틀렸습니다.

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

베스트:

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

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

옵션 텍스트

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

교육 및 추가 텍스트

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

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

설명서

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

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

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