드롭다운 목록 & 콤보 상자Drop-down Lists & Combo Boxes

참고

이 디자인 가이드는 Windows 7 용으로 만들어졌으며 최신 버전의 Windows에 대해 업데이트 되지 않았습니다.This design guide was created for Windows 7 and has not been updated for newer versions of Windows. 이 설명서의 대부분은 원칙적으로 여전히 적용 되지만, 프레젠테이션과 예제에는 현재 디자인 지침이반영 되지 않습니다.Much of the guidance still applies in principle, but the presentation and examples do not reflect our current design guidance.

드롭다운 목록 또는 콤보 상자를 사용 하 여 사용자는 상호 배타적인 값 목록 중에서 선택할 수 있습니다.With a drop-down list or combo box, users make a choice among a list of mutually exclusive values. 사용자는 옵션을 하나만 선택할 수 있습니다.Users can choose one and only one option. 표준 드롭다운 목록을 사용 하면 목록에서 사용자가 선택할 수 있지만 콤보 상자를 사용 하면 목록에 없는 선택 항목을 입력할 수 있습니다.With a standard drop-down list, users are limited to choices in the list, but with a combo box they can enter a choice that isn't in the list.

미리 알림 시간 콤보 상자 스크린샷screen shot of reminder time combo box

일반적인 콤보 상자입니다.A typical combo box.

이 문서를 읽을 때 다음과 같은 용어를 이해 하는 것이 중요 합니다.The following terms are important to understand as you read this article:

  • 표준 목록 상자는 여러 항목을 표시 하는 여러 항목의 목록을 포함 하는 상자입니다.A standard list box is a box containing a list of multiple items, with multiple items visible.
  • 드롭다운 목록은 선택 된 항목이 항상 표시 되 고 다른 항목은 드롭다운 단추를 클릭 하 여 요청 시 볼 수 있는 목록입니다.A drop-down list is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button.
  • 콤보 상자는 표준 목록 상자나 드롭다운 목록과 편집 가능한 텍스트 상자의조합 이므로 사용자가 목록에 없는 값을 입력할 수 있습니다.A combo box is a combination of a standard list box or a drop-down list and an editable text box, thus allowing users to enter a value that isn't in the list.
    • 편집 가능한 드롭다운 목록은 드롭다운 목록과 편집할 수 있는 입력란의 조합입니다.An editable drop-down list is a combination of a drop-down list and an editable text box.
    • 편집 가능한 목록 상자는 표준 목록 상자와 편집 가능한 텍스트 상자의 조합입니다.An editable list box is a combination of a standard list box and an editable text box.

참고

레이아웃과 관련 된 지침은 별도의 문서에 나와 있습니다.Guidelines related to layout are presented in a separate article.

올바른 컨트롤인가요?Is this the right control?

결정하기 전에 다음 사항을 고려합니다.To decide, consider these questions:

  • 상호 배타적인 값 목록에서 하나의 옵션을 선택 하는 데 사용 되는 컨트롤 입니까?Is the control used to choose one option from a list of mutually exclusive values? 그렇지 않다면 다른 컨트롤을 사용합니다.If not, use another control. 여러 옵션을 선택 하려면 표준 다중 선택 목록, 확인란 목록, 목록 작성기 또는 목록 추가/제거를 대신 사용 합니다.To choose multiple options, use a standard multiple-selection list, check box list, list builder, or add/remove list instead.
  • 옵션 명령이 있나요?Are the options commands? 그렇다면 메뉴 단추나 분할 단추를 대신 사용 합니다.If so, use a menu button or split button instead. 개체 (명사) 또는 특성 (형용사)에 대해 드롭다운 목록 및 콤보 상자를 사용 하지만 명령 (동사)은 사용 하지 않습니다.Use drop-down lists and combo boxes for objects (nouns) or attributes (adjectives), but not commands (verbs).
  • 목록에서 프로그램 옵션이 아닌 데이터를 제공 하나요?Does the list present data, rather than program options? 어떤 경우 든 드롭다운 목록 또는 콤보 상자를 선택 하는 것이 적합 합니다.Either way, a drop-down list or combo box is a suitable choice. 이와 대조적으로 라디오 단추 는 적은 수의 프로그램 옵션에만 적합 합니다.By contrast, radio buttons are suitable only for a small number of program options.

드롭다운 목록Drop-down lists

  • 대부분의 경우 대부분의 사용자에 게 권장 되는 기본 옵션이 있나요?Is there a default option that is recommended for most users in most situations? 선택한 옵션이 대안을 표시 하는 것 보다 훨씬 더 중요 하다는 것을 볼 수 있나요?Is seeing the selected option far more important than seeing the alternatives? 대안을 숨겨 사용자가 변경 하도록 권장 하지 않으려는 경우 드롭다운 목록을 사용 하는 것이 좋습니다.Consider using a drop-down list if you don't want to encourage users to make changes by hiding the alternatives. 그렇지 않은 경우 라디오 단추, 단일 선택 목록 또는 편집 가능한 목록 상자를 고려 하 여 대체 선택 항목을 더 강조 표시 합니다.If not, consider radio buttons, a single-selection list, or an editable list box, which give more emphasis to the alternative choices.

    기본 단추로 최고 품질의 스크린샷screen shot of highest quality as default button

    이 예에서는 대부분의 사용자에 게 가장 높은 색 품질이 가장 적합 하므로 드롭다운 목록을 선택 하는 것이 좋습니다.In this example, the highest color quality is the best choice for most users, so a drop-down list is a good choice to downplay the alternatives.

  • 옵션에 주목 하 시겠습니까?Do you want to draw attention to the option? 이 경우에는 화면 공간을 더 많이 차지 하 여 더 많은 주의가 필요 하므로 라디오 단추, 단일 선택 목록 또는 편집 가능한 목록 상자를 고려 하십시오.If so, consider radio buttons, a single-selection list, or an editable list box, which tend to draw more attention by taking more screen space. 드롭다운 목록이 압축 되기 때문에 강조 하려는 옵션을 선택 하는 것이 좋습니다.Because drop-down lists are compact, they are good choices for options that you want to underemphasize.

  • 프리미엄의 화면 공간 인가요?Is screen space at a premium? 사용 되는 경우 사용 되는 화면 공간이 고정 되 고 선택 항목 수와 독립적 이므로 드롭다운 목록을 사용 합니다.If so, use a drop-down list because the screen space used is fixed and independent of the number of choices.

  • 창에 다른 드롭다운 목록이 있나요?Are there other drop-down lists on the window? 그렇다면 일관성을 위해 드롭다운 목록을 사용 하는 것이 좋습니다.If so, consider using a drop-down list for consistency.

편집 가능한 드롭다운 목록Editable drop-down lists

드롭다운 목록에 대해서만 제공 되는 원칙 외에도 다음이 적용 됩니다.In addition to the principles just provided for drop-down lists, the following also apply:

  • 선택할 수 있는 항목은 무엇 인가요?Are the possible choices constrained? 그렇다면 일반 드롭다운 목록을 대신 사용 합니다.If so, use a normal drop-down list instead. 콤보 상자는 제한 없는 입력을 위한 것 이며, 사용자가 현재 목록에 없는 값을 입력 해야 할 수도 있습니다.Combo boxes are for unconstrained input, in which users may need to enter a value not currently in the list. 입력은 제한 되지 않으므로 사용자가 유효 하지 않은 텍스트를 입력 하는 경우 오류 메시지와 함께 오류를 처리 해야 합니다.Because the input is unconstrained, if users enter text that isn't valid you must handle the error with an error message.

  • 가장 가능성 있는 항목을 미리 열거할 수 있나요?Can you enumerate the most likely choices in advance? 그렇지 않은 경우 텍스트 상자를 대신 사용 합니다.If not, use a text box instead.

  • 이전 사용자 입력을 나열 하는 데 사용 되는 드롭다운 목록 입니까?Is the drop-down list being used to list previous user input? 사용자가 이전 입력의 전체 목록을 검토 해야 하는 경우가 아니면 대신 자동 완성 옵션을 사용 하 여 텍스트 상자를 사용 합니다.Unless users need to review the complete list of previous input, use a text box with the auto-complete option instead.

    드롭다운 목록이 있는 실행 대화 상자 스크린샷screen shot of run dialog box with drop-down list

    이 예에서는 사용자가 이전 입력을 검토 해야 할 수 있으므로 편집 가능한 드롭다운 목록을 선택 하는 것이 좋습니다.In this example, users may need to review their previous input, so an editable drop-down list is a good choice.

    outlook을 온라인으로 만들고 자동 완성 하는 스크린샷screen shot of outlook to line and auto-complete

    이 예에서는 자동 완성을 사용 하는 텍스트 상자를 선택 하는 것이 좋습니다.In this example, a text box with auto-complete is a good choice.

  • 사용자가 유효한 값을 선택 하는 데 도움이 필요 한가요?Will users need assistance in selecting valid values? 그렇다면 찾아보기 단추가 있는 입력란을 대신 사용 합니다.If so, use a text box with a Browse button instead.

    outlook에서 줄 및 찾아보기 단추 스크린샷screen shot of outlook to line and browse button

    이 예제에서 사용자는 "대상"을 클릭 하 여 올바른 값을 선택 하도록 도울 수 있습니다.In this example, users can click "To" to help them select valid values.

  • 사용자가 대체 선택 항목을 검토 하거나 변경 내용을 초대 하는 것이 좋습니다.Is it important to encourage users to review the alternative choices or invite change? 그렇다면 편집 가능한 목록 상자를 대신 사용 하는 것이 좋습니다.If so, consider using an editable list box instead. 사용자는 편집할 수 있는 드롭다운 목록을 사용 하 여 목록을 삭제할 때까지 대안을 인식 하지 못합니다.With an editable drop-down list, users aren't going to be aware of the alternatives until the list is dropped.

  • 사용자가 많은 목록에서 항목을 신속 하 게 찾아야 하나요?Do users need to locate an item rapidly in a large list? (Win32 전용) 이 경우 사용자가 전체 이름을 입력 하 여 항목을 선택할 수 있으므로 콤보 상자를 사용 합니다.(Win32 only) If so, use a combo box because users can select an item by typing its full name. 이와 대조적으로 Win32 드롭다운 목록은 입력 한 마지막 문자만 기반으로 항목을 선택 합니다. 따라서 월 목록에 "6 월"을 입력 하면 6 월이 아닌 11 월이 일치 합니다.By contrast, the Win32 drop-down list selects items based only by the last character typed (so typing "Jun" into a list of months would match November, not June). 이 경우 가능한 선택 항목이 제한 되는 경우에도 콤보 상자를 사용 합니다.In this case, use a combo box even if the possible choices are constrained.

편집 가능한 목록 상자Editable list boxes

  • 선택할 수 있는 항목은 무엇 인가요?Are the possible choices constrained? 그렇다면 단일 선택 목록 또는 일반 드롭다운 목록을 대신 사용 합니다.If so, use a single-selection list or normal drop-down list instead. 콤보 상자는 제한 없는 입력을 위한 것으로, 사용자가 현재 목록에 없는 값을 입력 해야 할 수도 있습니다.Combo boxes are for unconstrained input, where users may need to enter a value not currently in the list. 입력은 제한 되지 않으므로 사용자가 유효 하지 않은 텍스트를 입력 하는 경우 오류 메시지와 함께 오류를 처리 해야 합니다.Because the input is unconstrained, if users enter text that is not valid you must handle the error with an error message.
  • 가장 가능성 있는 항목을 미리 열거할 수 있나요?Can you enumerate the most likely choices in advance? 그렇지 않은 경우 텍스트 상자를 대신 사용 합니다.If not, use a text box instead.
  • 사용자가 대체 선택 항목을 검토 하거나 변경 내용을 초대 하는 것이 좋습니다.Is it important to encourage users to review the alternative choices or invite change? 그렇지 않은 경우 편집 가능한 드롭다운 목록을 대신 사용해 보세요.If not, consider an editable drop-down list instead.
  • 옵션에 주목 하 시겠습니까?Do you want to draw attention to the option? 그렇지 않은 경우 편집 가능한 드롭다운 목록을 대신 사용해 보세요.If not, consider an editable drop-down list instead. 드롭다운 목록이 압축 되기 때문에 강조 하려는 옵션을 선택 하는 것이 좋습니다.Because drop-down lists are compact, they are good choices for options that you want to underemphasize.
  • 프리미엄의 화면 공간 인가요?Is screen space at a premium? 사용 되는 경우 사용 되는 화면 공간을 고정 하 고 선택 항목 수와 독립적으로 사용 하 여 편집 가능한 드롭다운 목록을 사용 합니다.If so, use an editable drop-down list because the screen space used is fixed and independent of the number of choices.

드롭다운 목록의 경우 목록에 있는 항목의 수는 컨트롤을 선택 하는 것이 아니라 수천 개의 항목을 기준으로 크기가 조정 되기 때문입니다.For drop-down lists, the number of items in the list isn't a factor in choosing the control because they scale from thousands of items all the way down to one. 사용자가 목록에 없는 값을 입력할 수 있으므로 편집 가능한 드롭다운 목록에서 1000 개 항목에서 없음으로 축소 합니다.Editable drop-down lists scale from thousands of items down to none, because users can enter a value that isn't in the list. 드롭다운 목록을 데이터에 사용할 수 있기 때문에 항목의 수를 미리 알 수 없으며이를 보장할 수 없는 경우도 있습니다.Because drop-down lists can be used for data, the number of items might not be known in advance and perhaps cannot be guaranteed. 편집 가능한 목록 상자에 세 개 이상의 항목을 포함 하 여 추가 화면 공간을 정렬 합니다.Always include at least three items in editable list boxes to justify the additional screen space.

사용 패턴Usage patterns

드롭다운 목록 및 콤보 상자에는 다음과 같은 여러 사용 패턴이 있습니다.Drop-down lists and combo boxes have several usage patterns:

드롭다운 목록에는 미리 결정 된 값의 고정 집합을 포함 하는 표준 드롭다운 목록이 표시 됩니다.Drop-down list a standard drop-down list, with a fixed set of predetermined values.
닫으면 선택한 항목만 표시 됩니다.when closed, only the selected item is visible. 사용자가 드롭다운 단추를 클릭 하면 모든 옵션이 표시 됩니다.when users click the drop-down button, all the options become visible. 사용자가 값을 변경 하려면 목록을 열고 다른 값을 클릭 합니다.to change the value, users open the list and click another value.
드롭다운 목록, 숨겨진 옵션의 스크린샷screen shot of drop-down list, options hidden
이 예제에서 목록은 표준 상태입니다.in this example, the list is in its normal state.
드롭다운 목록의 스크린샷, 표시 된 옵션screen shot of drop-down list, options displayed
이 예에서는 목록이 삭제 되었습니다.In this example, the list has been dropped down.
미리 보기 드롭다운 목록 사용자가 선택할 수 있도록 선택 항목의 결과를 미리 보는 드롭다운 목록입니다.Preview drop-down list a drop-down list that previews the results of the selection to help users choose.
색 및 텍스트 옵션의 스크린샷screen shot of color and text options
이 예에서는 드롭다운 목록에서 선택 항목의 결과를 미리 봅니다.In these examples, the drop-down lists preview the results of the selection.
편집 가능한 드롭다운 목록 드롭다운 목록에 없는 값을 입력할 수 있는 드롭다운 콤보 상자입니다.Editable drop-down list a drop-down combo box, which allows users to enter a value that isn't in the drop-down list.
aa511458. dropdownlists27 (en-us, msdn. 10) .png편집 가능한 글꼴 크기 콤보 상자의 스크린 샷screen shot of editable font-size combo box
편집 및 드롭다운 모드의 편집 가능한 드롭다운 목록 예Examples of an editable drop-down list in edit and dropped-down modes.
텍스트 상자의 유연성을 제공 하지만 편리한 선택 항목 목록을 제공 하 여 사용자에 게 도움을 원하는 경우이 컨트롤을 사용 합니다.Use this control when you want to give the flexibility of a text box, yet want to assist users by providing a convenient list of likely choices.
편집 가능한 목록 상자 에는 사용자가 항상 표시 되는 목록에 없는 값을 입력할 수 있는 일반 콤보 상자가 표시 됩니다.Editable list boxes a regular combo box, which allows users to enter a value that isn't in the always visible list.
글꼴 옵션의 드롭다운 목록 스크린샷screen shot of drop-down list of font options
이 예에서는 편집 가능한 목록 상자가 항상 표시 됩니다.In these examples, the editable list boxes are always displayed.
이 컨트롤은 사용자가 대체 선택 항목을 검토 하거나 변경할 수 있도록 하는 것이 중요 한 경우 편집 가능한 드롭다운 목록 보다 더 적합 합니다.This control is a better choice than the editable drop-down list when it is important to encourage users to review the alternative choices or invite change.

지침Guidelines

일반General

  • 드롭다운 목록 또는 콤보 상자의 변경 내용을 사용 하지 마십시오.Don't use the change of a drop-down list or combo box to:
    • 명령을 수행 합니다.Perform commands.
    • 추가 입력을 수집 하는 대화 상자와 같은 다른 창을 표시 합니다.Display other windows, such as a dialog box to gather more input.
    • 선택 된 컨트롤과 관련 된 다른 컨트롤을 동적으로 표시 합니다.화면 판독기 는 이러한 이벤트를 검색할 수 없습니다.Dynamically display other controls related to the selected control (screen readers cannot detect such events).

프레젠테이션Presentation

  • 목록 항목을 논리적 순서에 따라 정렬 합니다. 예를 들어 관련성이 높은 옵션을 함께 그룹화 하거나 가장 일반적인 옵션을 먼저 배치 하거나 알파벳 순서를 사용 합니다.Sort list items in a logical order, such as grouping highly related options together, placing most common options first, or using alphabetical order. 사전순으로 이름을 정렬 하 고 숫자 순서를 숫자로 정렬 하며 날짜를 시간순으로 정렬 합니다.Sort names in alphabetical order, numbers in numeric order, and dates in chronological order. 항목을 쉽게 찾을 수 있도록 항목을 12 개 이상 포함 하는 목록을 사전순으로 정렬 해야 합니다.Lists with 12 or more items should be sorted alphabetically to make items easier to find.

    수정:  논리적 드롭다운 목록의 스크린샷 Correct: screen shot of logical drop-down list

    이 예에서는 목록 항목이 해당 공간 관계를 기준으로 정렬 됩니다.In this example, the list items are sorted by their spatial relationship.

    잘못 됨:  보인다면 드롭다운 목록의 스크린샷 Incorrect: screen shot of disorganized drop-down list

    이 예제에서는 사전순으로 정렬 해야 하는 많은 목록 항목이 있습니다.In this example, there are so many list items that they need to be sorted in alphabetical order.

    수정:  사전순 드롭다운 목록의 스크린 샷 Correct: screen shot of alphabetized drop-down list

    이 예제에서 목록 항목은 모든 항목을 나타내는 옵션을 제외 하 고 사전순으로 정렬 됩니다.In this example, the list items are sorted in alphabetical order except for the option that represents all items.

  • 나머지 항목의 정렬 순서에 관계 없이 목록의 시작 부분에서 All 또는 None을 나타내는 옵션을 배치 합니다.Place options that represent All or None at the beginning of the list, regardless of the sort order of the remaining items.

  • Meta 옵션을 괄호로 묶습니다.Enclose meta-options in parentheses.

    ' (없음) '이 선택 된 드롭다운 목록을 보여 주는 스크린샷

    이 예에서 "(없음)"은 선택 항목에 유효한 값이 아니므로 옵션 자체를 사용 하지 않는다는 것을 설명 하는 메타 옵션입니다.In this example, "(None)" is a meta-option because it is not a valid value for the choice rather it describes that the option itself isn't being used.

  • 드롭다운 목록 또는 콤보 상자를 사용 하지 않도록 설정 하는 경우 연결 된 레이블과 명령 단추도 사용 하지 않도록 설정 됩니다.When disabling a drop-down list or combo box, also disable any associated labels and command buttons.

  • 단일 드롭다운 목록을 사용 하 여 연결 된 컨트롤의 뷰를 변경 하는 경우 별도의 명령 단추를 사용 하는 대신 선택에서 즉시 보기를 변경 합니다.When a single drop-down list is used to change the view of an associated control, change the view immediately on selection instead of requiring a separate command button. 목록에 렌더링 하는 데 상당한 시간이 소요 되는 경우에만 별도의 명령 단추를 사용 합니다.Use a separate command button only if the list takes a significant amount of time to render. 그러나이 목적을 위해 목록 헤더 및 메뉴 단추가 선호 되는 컨트롤입니다.However, list headers and menu buttons are the preferred controls for this purpose.

  • 비어 있는 목록 항목을 사용 하지 마십시오 .Don't have blank list items use meta-options instead. 사용자는 빈 항목을 해석 하는 방법을 몰라도 meta 옵션의 의미는 explicit입니다.Users don't know how to interpret blank items, whereas the meaning of meta-options is explicit.

    수정:  선택 항목이 없는 드롭다운 목록의 스크린샷 Correct: screen shot of drop-down list with none selected

    잘못 됨:  선택 된 빈 드롭다운 목록 스크린샷 Incorrect: screen shot of drop-down list with blank selected

    잘못 된 예제에서 blank 옵션의 의미는 명확 하지 않습니다.In the incorrect example, the meaning of the blank option is unclear.

드롭다운 목록 미리 보기Preview drop-down lists

  • 텍스트를 사용 하는 설명 보다 이미지를 사용 하 여 표시 하는 것이 더 좋을 경우 목록 항목에서 미리 보기를 사용 합니다.Use previews in the list items when it is better to show with images than describe using text alone.

    미리 본 글꼴의 드롭다운 목록 스크린샷screen shot of drop-down list of fonts previewed

    이 예에서 미리 보기는 텍스트 뿐 보다 훨씬 더 좋은 옵션을 설명 합니다.In this example, the preview explains the options far better than text alone.

  • 미리 보기에서 불필요 하 고 유용한 아이콘을 사용 하지 마세요.Don't use unnecessary, unhelpful icons in previews.

    잘못 됨:  아이콘이 있는 레이블의 드롭다운 목록 스크린샷 Incorrect: screen shot of drop-down list of labels with icons

    이 예에서는 정보를 전달 하지 않기 때문에 미리 보기 아이콘이 필요 하지 않습니다.In this example, the preview icons are unnecessary because they don't communicate any information.

콤보 상자Combo boxes

  • 가능 하면 입력 텍스트의 길이를 제한 합니다.Limit the length of the input text when you can. 예를 들어 유효한 입력이 0에서 999 사이의 숫자 이면 세 문자로 제한 되는 콤보 상자를 사용 합니다.For example, if the valid input is a number between 0 and 999, use a combo box that is limited to three characters.

  • 가능한 여러 가지 옵션이 있는 경우 가장 가능성이 높은 옵션에 대 한 목록 내용에 집중 합니다.If there are many possible options, focus the list contents on the most likely options. 사용자가 목록에 없는 값을 입력할 수 있으므로 콤보 상자에는 모든 선택 항목을 나열할 필요가 없으며, 선택 사항 또는 대표 샘플만 표시 될 수 있습니다.Because users can enter values that aren't in the list, combo boxes don't have to list all choices, just the likely choices or a representative sample.

    글꼴 크기 드롭다운 목록의 스크린샷screen shot of drop-down list of font sizes

    이 예제에서는 15 또는 9.5와 같은 절반 크기의 글꼴과 같이 유효한 여러 선택 항목이 나열 되지 않습니다.In this example, many valid choices aren't listed, such as 15, or half-size fonts such as 9.5.

기본값Default values

  • 데이터 또는 시스템 액세스의 손실을 방지 하기 위해 가장 안전한 옵션을 선택 하 고 기본적으로 가장 안전 합니다.Select the safest (to prevent loss of data or system access) and most secure option by default. 안전 및 보안이 요인이 아닌 경우 가장 가능성이 있거나 편리한 옵션을 선택 합니다.If safety and security aren't factors, select the most likely or convenient option.
    • 예외: 컨트롤이 혼합 상태의속성을 나타내는 경우 빈 기본값을 표시 합니다 .이는 동일한 설정이 없는 여러 개체의 속성을 표시할 때 발생 합니다.Exception: Display a blank default value if the control represents a property in a mixed state, which happens when displaying a property for multiple objects that don't have the same setting.

프롬프트Prompts

프롬프트는 편집 가능한 드롭다운 목록 내에 기본값으로 배치 된 레이블 또는 짧은 명령입니다.A prompt is a label or short instruction placed inside an editable drop-down list as its default value. 정적 텍스트와 달리, 사용자가 콤보 상자에 항목을 입력 하거나 입력 포커스를 가져오는 경우 프롬프트가 화면에서 사라집니다.Unlike static text, prompts disappear from the screen once users type something into the combo box or it gets input focus.

검색 상자의 스크린샷screen shot of a search box

일반적인 프롬프트입니다.A typical prompt.

프롬프트를 사용 하는 경우:Use a prompt when:

  • 화면 공간은 도구 모음 에서처럼 레이블이나 명령을 사용 하는 것이 바람직하지 않은 프리미엄입니다.Screen space is at such a premium that using a label or instruction is undesirable, such as on a toolbar.
  • 프롬프트는 주로 목록 용도를 간단한 방법으로 식별 하는 데 사용할 수 있습니다.The prompt is primarily for identifying the purpose of the list in a compact way. 콤보 상자를 사용 하는 동안 사용자가 확인 해야 하는 중요 한 정보가 아니어야 합니다.It must not be crucial information that users need to see while using the combo box.

사용자가 목록에서 항목을 선택 하거나 단추를 클릭 하도록 지시 하는 경우에만 프롬프트를 사용 하지 마세요.Don't use prompts just to direct users to select something from the list or to click buttons. 예를 들어, 옵션을 선택 하거나 파일 이름을 입력 하 라는 메시지를 표시 한 다음 보내기를 클릭 하지 않아도 됩니다.For example, prompts like Select an option or Enter a filename and then click Send are unnecessary.

프롬프트를 사용 하는 경우:When using prompts:

  • 기울임꼴로 표시 된 프롬프트 텍스트와 일반 텍스트를 일반 검정으로 그립니다.Draw the prompt text in italic gray and real text in normal black. 프롬프트 텍스트를 실제 텍스트와 혼동 해서는 안 됩니다.The prompt text must not be confused with real text.
  • 프롬프트 텍스트를 간결 하 게 유지 합니다.Keep the prompt text concise. 전체 문장 대신 조각을 사용할 수 있습니다.You can use fragments instead of full sentences.
  • 문장 스타일 대문자표시를 사용 합니다.Use sentence-style capitalization.
  • 끝 문장 부호 또는 줄임표를 사용 하지 않습니다.Don't use ending punctuation or ellipsis.
  • 프롬프트 텍스트는 편집할 수 없으며, 사용자가 텍스트 상자에서 또는 탭을 클릭 하면 사라집니다.The prompt text should not be editable, and should disappear once users click in or tab into the text box.
    • 예외: 텍스트 상자에 기본 입력 포커스가 있는 경우 프롬프트가 표시 되 고 사용자가 입력을 시작한 후에만 사라집니다.Exception: The prompt is displayed if the text box has default input focus, and only disappears once the user starts typing.
  • 텍스트 상자가 입력 포커스를 잃으면 여전히 비어 있으면 프롬프트 텍스트가 복원 됩니다.The prompt text is restored if the text box is still empty when it loses input focus.

잘못 됨:  편집 가능한 6 개의 드롭다운 목록 스크린샷Incorrect:screen shot of six editable drop-down lists

이 예제에서 화면 공간은 프리미엄이 아닙니다. 편집 가능한 드롭다운 목록을 입력 한 후에는 사용자가 자신의 기능을 기억할 수 있습니다. 프롬프트 텍스트를 편집 하 여 실제 텍스트와 동일한 방식으로 그릴 수 있습니다.In this example, screen space is not at a premium; once an editable drop-down list is filled out, it is difficult for users to remember what it is for; and the prompt text is editable and drawn the same way as real text.

드롭다운 목록 및 사양의 스크린샷screen shot of drop-down list and specifications

드롭다운 목록 및 콤보 상자의 권장 크기 조정 및 간격입니다.Recommended sizing and spacing for drop-down lists and combo boxes.

  • 가장 긴 유효 데이터에 적합 한 너비를 선택 합니다.Choose a width appropriate for the longest valid data. 드롭다운 목록을 가로로 스크롤할 수 없으므로 사용자는 컨트롤에 표시 되는 내용만 볼 수 있습니다.Drop-down lists cannot be scrolled horizontally, so users can see only what is visible in the control. 단, 콤보 상자는 자동 스크롤 기능을 사용 하도록 설정할 수 있습니다.(Note, however, that combo boxes can have AutoScroll functionality enabled.)
  • 지역화할 텍스트 (숫자 아님)에 대 한 추가 30% (짧은 텍스트의 경우 최대 200%)를 포함 합니다.Include an additional 30 percent (up to 200 percent for shorter text) for any text (but not numbers) that will be localized.
  • 불필요 한 세로 스크롤을 제거 하는 목록 길이를 선택 합니다.Choose a list length that eliminates unnecessary vertical scrolling. 드롭다운 목록이 요청 시 표시 되기 때문에 목록에 최대 30 개의 항목이 표시 되어야 합니다.Because drop-down lists are displayed on demand, their lists should show up to 30 items. 편집 가능한 목록 상자 (드롭다운 단추가 없는)는 3 개에서 12 개 사이에 표시 되어야 합니다.Editable list boxes (those that don't have a drop-down button) should show between 3 and 12 items.

레이블Labels

컨트롤 레이블Control labels

  • 문장이 아닌 단어 또는 구로 레이블을 쓰고 콜론으로 종료 합니다.Write the label as a word or phrase, not as a sentence, and end it with a colon. Exceptions:

    • 공간이 프리미엄으로 표시 되는 프롬프트를 사용 하 여 편집할 수 있는 드롭다운 목록입니다.Editable drop-down lists with prompts located where space is at a premium.
    • 드롭다운 목록 또는 콤보 상자가 라디오 단추나 확인란의 하위 항목이 고 콜론으로 끝나는 레이블에 의해 추가 된 경우 컨트롤에 레이블을 추가 하지 마세요.If a drop-down list or combo box is subordinate to a radio button or check box and is introduced by its label ending with a colon, don't put an additional label on the control.
  • 각 레이블에 대해 고유한 액세스 키 를 할당 합니다.Assign a unique access key for each label. 지침은 키보드를 참조 하세요.For guidelines, see Keyboard.

  • 문장 스타일 대문자표시를 사용 합니다.Use sentence-style capitalization.

  • 레이블을 컨트롤의 왼쪽 이나 위에 배치 하 고 컨트롤의 왼쪽 가장자리에 레이블을 맞춥니다.Position the label either to the left of or above the control, and align the label with the left edge of the control. 레이블이 왼쪽에 있으면 레이블 텍스트를 컨트롤 텍스트와 세로로 맞춥니다.If label is on the left, vertically align the label text with the control text.

    수정:  드롭다운 목록 레이블 맞춤의 스크린샷 Correct: screen shot of drop-down list label alignment

    이 예제에서는 레이블이 컨트롤 텍스트와 올바르게 정렬 됩니다.In this example, the label is correctly aligned with the control text.

    잘못 됨:  잘못 정렬 된 드롭다운 목록의 스크린샷 Incorrect: screen shot of drop-down list incorrectly aligned

    이 예제에서는 레이블이 컨트롤 텍스트와 잘못 정렬 됩니다.In this example, the label is incorrectly aligned with the control text.

  • 레이블 뒤에 괄호 안에 단위 (초, 연결 등)를 지정할 수 있습니다.You may specify units (seconds, connections, and so on) in parentheses after the label.

  • 지역화할 수 없으므로 드롭다운 목록 또는 콤보 상자 (또는 해당 단위 레이블)의 콘텐츠를 문장의 일부로 만들지 마십시오.Don't make the content of the drop-down list or combo box (or its units label) part of a sentence, because this is not localizable.

옵션 텍스트Option text

  • 각 옵션에 고유한 이름을 지정 합니다.Assign a unique name to each option.
  • 항목이 적절 한 명사가 아니면 문장 스타일 대문자표시를 사용 합니다.Use sentence-style capitalization, unless an item is a proper noun.
  • 문장이 아닌 단어 또는 구로 레이블을 작성 하 고 종료 문장 부호를 사용 하지 않습니다.Write the label as a word or phrase, not as a sentence, and use no ending punctuation.
  • 병렬 구문을 사용 하 고 모든 옵션에 대 한 길이를 동일 하 게 유지 합니다.Use parallel phrasing, and try to keep the length about the same for all options.

지침 텍스트Instructional text

  • 드롭다운 목록 또는 콤보 상자에 대 한 지침 텍스트를 추가 해야 하는 경우 레이블 위에 추가 합니다.If you need to add instructional text about a drop-down list or combo box, add it above the label. 문장 부호가 있는 전체 문장을 사용 합니다.Use complete sentences with ending punctuation.

  • 문장 스타일 대문자표시를 사용 합니다.Use sentence-style capitalization.

  • 유용 하지만 필요 하지 않은 추가 정보는 짧게 유지 해야 합니다.Additional information that is helpful but not necessary should be kept short. 레이블 및 콜론 사이 또는 괄호 없이 컨트롤 아래에이 정보를 추가 합니다.Place this information either in parentheses between the label and colon, or without parentheses below the control.

    추가 된 데이터가 포함 된 드롭다운 목록의 스크린샷screen shot of drop-down list with added data

    이 예제에서는 컨트롤 아래에 배치 되는 추가 정보를 보여 줍니다.This example shows additional information placed below the control.

설명서Documentation

드롭다운 목록을 참조할 때:When referring to drop-down lists:

  • 대문자 표시를 포함 하 여 정확한 레이블 텍스트를 사용 하지만 액세스 키 밑줄 또는 콜론은 포함 하지 않습니다. 목록 또는 상자를 포함 하 여 명확 하 게 표시 합니다.Use the exact label text, including its capitalization, but don't include the access key underscore or colon; include either list or box, whichever is clearer.
  • 목록 옵션의 경우 대문자 표시를 포함 하 여 정확한 옵션 텍스트를 사용 합니다.For list options, use the exact option text, including its capitalization.
  • 프로그래밍 및 기타 기술 문서에서는 드롭다운 목록을 드롭다운 목록으로 참조 합니다.In programming and other technical documentation, refer to drop-down lists as drop-down lists. 다른 모든 경우에는 목록 또는 상자 중에서 더 명확 하 게 사용할 수 있습니다.Everywhere else, use either list or box, whichever is clearer.
  • 사용자 상호 작용을 설명 하려면 클릭을 사용 합니다.To describe user interaction, use click.
  • 가능 하면 굵게 텍스트를 사용 하 여 레이블 및 목록 옵션의 서식을 지정 합니다.When possible, format the label and list options using bold text. 그렇지 않은 경우 혼동을 방지 하는 데 필요한 경우에만 레이블과 옵션을 따옴표로 묶어 입력 합니다.Otherwise, put the label and options in quotation marks only if required to prevent confusion.

예: 글꼴 크기 목록에서 큰 글꼴 을 클릭 합니다.Example: In the Font size list, click Large fonts.

콤보 상자를 참조할 때:When referring to combo boxes:

  • 대문자 표시를 포함 하 여 정확한 레이블 텍스트를 사용 하지만 액세스 키 밑줄 또는 콜론은 포함 하지 않습니다. 단어 상자를 포함 합니다.Use the exact label text, including its capitalization, but don't include the access key underscore or colon; include the word box.
  • 목록 옵션의 경우 대문자 표시를 포함 하 여 정확한 옵션 텍스트를 사용 합니다.For list options, use the exact option text including its capitalization.
  • 프로그래밍 및 기타 기술 문서에서 콤보 상자를 콤보 상자로 참조 합니다.In programming and other technical documentation, refer to combo boxes as combo boxes. 다른 모든 경우에는 box를 사용 합니다.Everywhere else, use box.
  • 사용자 상호 작용을 설명 하려면 enter 키를 사용 합니다.To describe user interaction, use enter.
  • 가능 하면 굵게 텍스트를 사용 하 여 레이블 및 목록 옵션의 서식을 지정 합니다.When possible, format the label and list options using bold text. 그렇지 않은 경우 혼동을 방지 하는 데 필요한 경우에만 레이블과 옵션을 따옴표로 묶어 입력 합니다.Otherwise, put the label and options in quotation marks only if required to prevent confusion.

예: 글꼴 상자에 사용할 글꼴을 입력 합니다.Example: In the Font box, enter the font you want to use.