입력란

참고

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

텍스트 상자를 사용하면 사용자가 텍스트 또는 숫자 값을 표시, 입력 또는 편집할 수 있습니다.

일반적인 텍스트 상자입니다.

참고

레이아웃, 글꼴 및 풍선과 관련된 지침은 별도의 문서에 제공됩니다.

올바른 컨트롤인가요?

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

• 유효한 모든 값을 효율적으로 열거하는 것이 실용적인가요? 그렇다면 단일 선택 목록, 목록 보기, 드롭다운 목록, 편집 가능한 드롭다운 목록 또는 슬라이더 를 고려합니다.
• 유효한 데이터에는 아무런 제약이 없나요? 또는 유효한 데이터가 형식(제한된 길이 또는 문자 형식)으로만 제한되는가요? 그렇다면 텍스트 상자를 사용합니다.
• 값이 특수한 공통 컨트롤이 있는 데이터 형식을 나타내나요? 예를 들어 날짜, 시간 또는 IPv4 또는 IPv6 주소가 있습니다. 그렇다면 텍스트 상자가 아닌 날짜 컨트롤과 같은 적절한 컨트롤을 사용합니다.
• 데이터가 숫자인 경우:
  • 사용자가 설정을 상대적 수량으로 인식합니까? 그렇다면 슬라이더를 사용합니다.
  • 설정을 변경하면 어떤 효과가 있는지에 대해 즉각적인 피드백을 받게 되면 사용자에게 도움이 되나요? 그렇다면 텍스트 상자와 함께 슬라이더를 사용합니다. 예를 들어 사용자는 색조, 채도 또는 광도 값 변경의 영향을 즉시 볼 수 있으므로 슬라이더를 사용하여 색을 쉽게 선택할 수 있습니다.

설계 개념

텍스트 상자는 매우 유연하다는 이점이 있지만 최소한의 제약 조건을 갖는 단점이 있습니다. 편집 가능한 텍스트 상자의 유일한 제약 조건은 다음과 같습니다.

• 필요에 따라 최대 문자 수를 설정할 수 있습니다.
• 필요에 따라 입력을 숫자 문자(0 9)로만 제한할 수 있습니다.
• 스핀 컨트롤을 사용하는 경우 스핀 컨트롤 선택을 유효한 값으로 제한할 수 있습니다.

텍스트 상자에는 길이와 스핀 컨트롤의 선택적 존재 외에 유효한 값이나 형식을 제안하는 시각적 단서가 없습니다. 즉, 레이블을 사용하여 사용자에게 이 정보를 전달합니다. 사용자가 유효하지 않은 텍스트를 입력하는 경우 오류 메시지와 함께 오류를 처리해야 합니다.

일반적으로 가능한 가장 제한된 컨트롤을 사용해야 합니다. 텍스트 상자와 같은 제한되지 않은 컨트롤을 최후의 수단으로 사용합니다. 즉, 제약 조건을 고려할 때 글로벌 사용자의 요구 사항을 염두에 두어야 합니다. 예를 들어 미국 우편 번호로 제한되는 컨트롤은 전역화되지 않지만 우편 번호 형식을 허용하는 제한되지 않은 텍스트 상자는 입니다.

사용 패턴

텍스트 상자는 몇 가지 사용 가능한 유연한 컨트롤입니다.

레이블	값
데이터 입력 짧은 문자열을 입력하거나 편집하는 데 사용되는 한 줄로 제한되지 않는 텍스트 상자입니다.	한 줄로 제한되지 않은 텍스트 상자입니다.
서식이 지정된 데이터 입력 특정 형식으로 데이터를 입력하는 데 사용되는 짧고 고정된 크기의 단일 줄 텍스트 상자 집합입니다.	형식이 지정된 데이터 입력에 사용되는 텍스트 상자입니다. 참고:자동 종료 기능은 입력 포커스를 한 텍스트 상자에서 다음 텍스트 상자로 자동으로 진행합니다. 이 방법의 한 가지 단점은 데이터를 단일 단위로 복사하거나 붙여넣을 수 없다는 것입니다.
보조 데이터 입력 사용자가 유효한 값을 선택하는 데 도움이 되는 명령 단추와 함께 문자열을 입력하거나 편집하는 데 사용되는 제한되지 않는 한 줄 텍스트 상자입니다.	이 예제에서 Browse 명령은 사용자가 유효한 값을 선택하는 데 도움이 됩니다.
텍스트 입력 긴 문자열을 입력하거나 편집하는 데 사용되는 여러 줄의 제한 없는 텍스트 상자입니다.	여러 줄로 제한되지 않는 텍스트 상자입니다.
숫자 입력 마우스 기반 입력을 용이하게 하는 선택적 스핀 컨트롤 을 사용하여 숫자를 입력하거나 편집하는 데 사용되는 한 줄 숫자 전용 텍스트 상자입니다.	숫자 입력에 사용되는 텍스트 상자입니다. 텍스트 상자와 연결된 스핀 컨트롤의 조합을 스핀 상자라고 합니다.
암호 및 PIN 입력 암호 및 PIN을 안전하게 입력하는 데 사용되는 제한되지 않는 한 줄 텍스트 상자입니다.	암호를 입력하는 데 사용되는 텍스트 상자입니다.
데이터 출력 짧은 문자열을 표시하는 데 사용되는 테두리 없이 항상 표시되는 한 줄 읽기 전용 텍스트 상자입니다.	정적 텍스트와 달리 텍스트 상자를 사용하여 표시되는 데이터는 스크롤(데이터가 컨트롤보다 넓은 경우 유용함) 선택하고 복사할 수 있습니다. 데이터를 표시하는 데 사용되는 한 줄 읽기 전용 텍스트 상자입니다.
텍스트 출력 긴 문자열을 표시하는 데 사용되는 여러 줄 읽기 전용 텍스트 상자입니다.	데이터를 표시하는 데 사용되는 읽기 전용 텍스트 상자입니다.

지침

일반

• 텍스트 상자를 사용하지 않도록 설정하는 경우 연결된 레이블, 명령 레이블, 스핀 컨트롤 및 명령 단추도 사용하지 않도록 설정합니다.

• 자동 완성을 사용하여 사용자가 반복적으로 사용될 수 있는 데이터를 입력할 수 있습니다. 예를 들어 사용자 이름, 주소 및 파일 이름이 있습니다. 그러나 암호, PIN, 신용 카드 번호 또는 의료 정보와 같은 중요한 정보가 포함될 수 있는 텍스트 상자에는 자동 완성을 사용하지 마세요.

• 사용자가 불필요하게 스크롤하지 않도록 합니다. 데이터가 텍스트 상자보다 클 것으로 예상되고 레이아웃에 해를 끼치지 않고 텍스트 상자를 쉽게 크게 만들 수 있는 경우 상자 크기를 조정하여 스크롤할 필요가 없습니다.

  잘못된 예:

  

  이 예제에서는 해당 데이터를 처리하기 위해 텍스트 상자를 훨씬 더 길게 만들어야 합니다.

• 스크롤 막대:

  • 여러 줄 텍스트 상자에 가로 스크롤 막대를 배치하지 마세요. 대신 세로 스크롤 및 줄 바꿈을 사용합니다.
  • 한 줄 텍스트 상자에 스크롤 막대를 배치하지 마세요.

• 숫자 입력의 경우 스핀 컨트롤을 사용할 수 있습니다. 텍스트 입력의 경우 드롭다운 목록 또는 편집 가능한 드롭다운 목록을 대신 사용합니다.

• 형식이 지정된 데이터 입력을 제외하고 자동 종료 기능을 사용하지 마세요. 포커스의 자동 이동은 사용자를 놀라게 할 수 있습니다.

편집 가능한 텍스트 상자

• 가능한 경우 입력 텍스트의 길이를 제한합니다. 예를 들어 유효한 입력이 0에서 999 사이의 숫자인 경우 3자로 제한된 숫자 텍스트 상자를 사용합니다. 서식이 지정된 데이터 입력을 사용하는 텍스트 상자의 모든 부분에는 짧고 고정된 길이가 있어야 합니다.

• 데이터 형식을 유연하게 사용할 수 있습니다. 사용자가 다양한 형식을 사용하여 텍스트를 입력할 가능성이 있는 경우 가장 일반적인 형식을 모두 처리해 보세요. 예를 들어 많은 이름, 숫자 및 식별자를 선택적 공백 및 문장 부호로 입력할 수 있으며 대문자는 중요하지 않은 경우가 많습니다.

• 가능한 형식을 처리할 수 없는 경우 형식이 지정된 데이터 입력을 사용하여 특정 형식을 요구하거나 레이블에 유효한 형식을 나타냅니다.

  용인되는:

  

  이 예제에서 텍스트 상자에는 특정 형식의 입력이 필요합니다.

  Better:

  

  이 예제에서는 형식이 지정된 데이터 입력 패턴을 사용하여 특정 형식을 요구합니다.

  최고의:

  

  이 예제에서 텍스트 상자는 가능한 모든 형식을 처리합니다.

• 최대 입력 길이를 선택할 때 형식 유연성을 고려합니다. 예를 들어 유효한 크레딧 카드 숫자는 최대 19자를 사용할 수 있으므로 길이를 더 짧은 값으로 제한하면 더 긴 형식을 사용하여 숫자를 입력하기가 어렵습니다.

• 사용자가 길고 복잡한 데이터에 붙여넣을 가능성이 더 높은 경우 형식이 지정된 데이터 입력 패턴을 사용하지 마세요. 대신 사용자가 데이터를 입력할 가능성이 높은 상황에 대해 형식이 지정된 데이터 입력 패턴을 예약합니다.

  

  이 예제에서는 형식이 지정된 데이터 입력 패턴이 사용되지 않으므로 사용자가 IPv6 주소를 붙여 넣을 수 있습니다.

• 사용자가 전체 값을 다시 입력할 가능성이 높은 경우 입력 포커스의 모든 텍스트를 선택합니다. 사용자가 편집할 가능성이 더 높은 경우 텍스트 끝에 캐리트를 배치합니다.

  

  이 예제에서는 사용자가 편집보다 바꿀 가능성이 높으므로 입력 포커스에서 전체 값이 선택됩니다.

  

  이 예제에서는 사용자가 텍스트를 바꾸는 것보다 키워드를 추가할 가능성이 더 높기 때문에 텍스트 끝에 캐리트가 배치됩니다.

• 줄 바꿈 문자가 유효한 입력인 경우 항상 여러 줄 텍스트 상자를 사용합니다.

• 텍스트 상자가 파일 또는 경로에 대한 경우 항상 찾아보기 단추를 제공합니다.

숫자 텍스트 상자

• 가장 편리한 단위를 선택하고 단위에 레이블을 지정합니다. 예를 들어 리터(또는 그 반대) 대신 밀리리터, 직접 값 대신 백분율(또는 그 반대) 등을 사용하는 것이 좋습니다.

  올바름:

  

  이 예제에서는 단위에 레이블이 지정되어 있지만 사용자가 소수 자릿수를 입력해야 합니다.

  Better:

  

  이 예제에서 텍스트 상자는 더 편리한 단위를 사용합니다.

• 도움이 될 때마다 스핀 컨트롤을 사용합니다. 그러나 사용자가 많은 숫자를 입력해야 하는 경우와 같이 스핀 컨트롤이 실용적이지 않은 경우가 있습니다. 다음과 같은 경우 스핀 컨트롤을 사용합니다.

  • 입력은 일반적으로 100 미만인 작은 숫자일 수 있습니다.
  • 사용자는 기존 숫자를 약간 변경할 수 있습니다.
  • 사용자는 키보드보다 마우스를 사용할 가능성이 더 높습니다.

• 다음과 같은 경우 숫자 텍스트를 오른쪽 맞춤

  • 숫자 텍스트 상자가 두 개 이상 있습니다.
  • 텍스트 상자가 세로로 정렬됩니다.
  • 사용자는 값을 추가하거나 비교할 수 있습니다.

  올바름:

  

  이 예제에서는 숫자 텍스트가 오른쪽 맞춤되어 값을 쉽게 비교할 수 있습니다.

  잘못된 예:

  

  이 예제에서는 숫자 텍스트가 왼쪽 맞춤이 잘못되었습니다.

• 항상 통화 값을 오른쪽 맞춤합니다.

• 애플리케이션에서 이러한 특수 의미를 내부적으로 사용하는 경우에도 특정 숫자 값에 특별한 의미를 할당하지 마세요. 대신 명시적 사용자 선택에 검사 상자 또는 라디오 단추를 사용합니다.

  잘못된 예:

  

  이 예제에서 값 -1은 특별한 의미가 있습니다.

  올바름:

  

  이 예제에서 검사 상자는 옵션을 명시적으로 만듭니다.

암호 및 PIN 입력

• 사용자 고유의 컨트롤을 만드는 대신 항상 암호 공용 컨트롤을 사용합니다. 암호 및 PIN은 안전하게 처리해야 하는 특별한 처리가 필요합니다.

자세한 지침 및 예제는 풍선을 참조하세요.

텍스트 출력

• 여러 줄의 큰 읽기 전용 텍스트에 흰색 배경 시스템 색을 사용하는 것이 좋습니다. 흰색 배경을 사용하면 텍스트를 더 쉽게 읽을 수 있습니다. 회색 배경의 많은 텍스트는 읽기를 권장하지 않습니다.

배경색에 대한 자세한 내용은 글꼴을 참조하세요.

데이터 출력

• 한 줄 읽기 전용 텍스트 상자에는 테두리를 사용하지 마세요. 테두리는 텍스트를 편집할 수 있다는 시각적 단서입니다.
• 한 줄 읽기 전용 텍스트 상자를 사용하지 않도록 설정하지 마세요. 이렇게 하면 사용자가 텍스트를 선택하고 클립보드에 복사할 수 없습니다. 또한 경계 크기를 초과하는 경우 사용자가 데이터를 스크롤할 수 없습니다.
• 사용자가 텍스트를 스크롤하거나 복사해야 하는 경우가 아니면 한 줄 읽기 전용 텍스트 상자에서 탭 중지를 설정하지 마세요.

입력 유효성 검사 및 오류 처리

텍스트 상자는 일반적으로 유효한 입력만 허용하도록 제한되지 않으므로 입력의 유효성을 검사하고 문제를 처리해야 할 수 있습니다. 다음과 같이 다양한 유형의 입력 문제의 유효성을 검사합니다.

• 사용자가 유효하지 않은 문자를 입력하는 경우 문자를 무시하고 유효한 문자를 설명하는 입력 문제 풍선 을 표시합니다.

  

  이 예제에서 풍선은 잘못된 입력 문자를 보고합니다.

• 입력 데이터에 유효하지 않은 값 또는 형식이 있는 경우 입력 상자에 입력 포커스가 손실되면 입력 문제 풍선을 표시합니다.

• 입력 데이터가 창의 다른 컨트롤과 일치하지 않는 경우 사용자가 모달 대화 상자에 대해 확인을 클릭하는 경우와 같이 전체 입력이 완료되면 오류 메시지를 표시합니다.

사용자가 오류를 쉽게 수정할 수 없는 한 잘못된 입력 데이터를 지우지 마세요. 이렇게 하면 사용자가 다시 시작하지 않고도 실수를 수정할 수 있습니다. 예를 들어 사용자가 쉽게 수정할 수 없으므로 잘못된 암호 및 PIN을 지워야 합니다.

자세한 지침 및 예제는 오류 메시지 및 풍선을 참조하세요.

프롬프트

프롬프트는 텍스트 상자 내에 기본값으로 배치된 레이블 또는 간단한 명령입니다. 정적 텍스트와 달리 사용자가 텍스트 상자에 항목을 입력하거나 입력 포커스를 가져오면 메시지가 화면에서 사라집니다.

일반적인 프롬프트입니다.

다음과 같은 경우 프롬프트를 사용합니다.

• 화면 공간은 도구 모음과 같이 레이블 또는 명령을 사용하는 것이 바람직하지 않은 프리미엄입니다.
• 프롬프트는 주로 텍스트 상자의 용도를 간결하게 식별하기 위한 것입니다. 텍스트 상자를 사용하는 동안 사용자가 확인해야 하는 중요한 정보가 되어서는 안 됩니다.

사용자에게 무언가를 입력하거나 단추를 클릭하도록 지시하기 위해 프롬프트를 사용하지 마세요. 예를 들어 파일 이름 입력이라는 프롬프트 텍스트를 작성하지 않고 보내기를 클릭합니다.

프롬프트를 사용하는 경우:

• 프롬프트 텍스트를 기울임꼴 회색으로 그리고 실제 입력 텍스트를 보통 검은색으로 그립니다. 프롬프트 텍스트는 실제 텍스트와 혼동해서는 안 됩니다.
• 프롬프트 텍스트를 간결하게 유지합니다. 전체 문장 대신 조각을 사용할 수 있습니다.
• 문장 스타일의 대문자를 사용합니다.
• 끝 문장 부호 또는 줄임표를 사용하지 마세요.
• 사용자가 입력란을 클릭하거나 탭을 클릭하면 프롬프트 텍스트를 편집할 수 없으며 사라집니다.
  • 예외: 입력란에 기본 입력 포커스가 있으면 프롬프트가 표시되고 사용자가 입력을 시작하면 사라집니다.
• 입력 포커스가 손실될 때 텍스트 상자가 여전히 비어 있으면 프롬프트 텍스트가 복원됩니다.

권장 크기 조정 및 간격

텍스트 상자에 권장되는 크기 조정 및 간격입니다.

텍스트 상자의 너비는 예상 입력 크기의 시각적 단서입니다. 텍스트 상자의 크기를 조정하는 경우:

• 가장 긴 유효한 데이터에 적합한 너비를 선택합니다. 대부분의 경우 사용자는 입력하거나 볼 가능성이 가장 긴 문자열을 스크롤할 필요가 없습니다.
• 지역화될 텍스트(숫자가 아님)에 대해 추가 30%(짧은 텍스트의 경우 최대 200%)를 포함합니다.
• 예상 입력에 특정 크기가 없는 경우 창의 다른 텍스트 상자 또는 컨트롤과 일치하는 너비를 선택합니다.
• 여러 줄 텍스트 상자의 크기를 조정하여 정수 텍스트 줄을 표시합니다.

레이블

텍스트 상자 레이블

• 모든 텍스트 상자에는 레이블이 필요합니다. 레이블을 문장이 아닌 단어나 구로 쓰고 콜론으로 끝나고 정적 텍스트를 사용합니다.

  예외:

  • 공간이 프리미엄인 위치에 프롬프트가 있는 텍스트 상자.

  • 레이블 지정의 경우 서식이 지정된 데이터 입력 에 사용되는 텍스트 상자 그룹을 단일 텍스트 상자로 처리해야 합니다.

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

  • 기본 명령을 다시 표시하는 컨트롤 레이블을 생략합니다. 이 경우 기본 명령은 콜론(질문이 아닌 경우)과 액세스 키를 사용합니다.

    용인되는:

    

    이 예제에서 텍스트 상자 레이블은 기본 명령의 재시도일 뿐입니다.

    Better:

    

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

• 고유한 액세스 키를 할당합니다. 액세스 키 할당 지침은 키보드를 참조 하세요.

• 문장 스타일의 대문자를 사용합니다.

• 텍스트 상자의 왼쪽 또는 위에 레이블을 놓고 텍스트 상자의 왼쪽 가장자리에 레이블을 맞춥다. 레이블이 왼쪽에 있는 경우 레이블 텍스트를 텍스트 상자 텍스트와 세로로 정렬합니다.

  올바름:

  

  

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

  잘못된 예:

  

  

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

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

• 텍스트 상자에서 임의로 적은 수의 문자를 허용하는 경우 레이블의 최대 입력을 지정할 수 있습니다. 텍스트 상자 너비도 최대 크기를 제안해야 합니다.

  

  이 예제에서 레이블은 최대 문자 수를 제공합니다.

• 지역화할 수 없으므로 텍스트 상자(또는 해당 단위 레이블)의 내용을 문장의 일부로 만들지 마세요.

• 텍스트 상자를 사용하여 여러 항목을 입력할 수 있는 경우 레이블의 항목을 구분하는 방법을 명확히 합니다.

  

  이 예제에서는 항목 구분 기호가 레이블에 지정됩니다.

• 필수 입력을 나타내는 지침은 대화 상자의 필수 입력을 참조하세요.

명령 레이블

• 텍스트 상자에 대한 지침 텍스트를 추가해야 하는 경우 레이블 위에 추가합니다. 문장 부호가 끝나는 전체 문장을 사용합니다.

• 문장 스타일의 대문자를 사용합니다.

• 유용하지만 필요하지 않은 추가 정보는 짧게 유지해야 합니다. 이 정보를 레이블과 콜론 사이의 괄호 안에 배치하거나 텍스트 상자 아래에 괄호 없이 배치합니다.

  

  이 예제에서는 추가 정보가 텍스트 상자 아래에 배치됩니다.

프롬프트 레이블

• 프롬프트 텍스트를 간결하게 유지합니다. 전체 문장 대신 조각을 사용할 수 있습니다.
• 문장 스타일의 대문자를 사용합니다.
• 끝 문장 부호 또는 줄임표를 사용하지 마세요.
• 사용자에게 텍스트 상자 옆의 단추로 동작할 정보를 입력하도록 지시하는 경우 텍스트 상자 옆에 단추를 놓기만 하면 됩니다. 프롬프트를 사용하여 사용자에게 단추를 클릭하도록 지시하지 마세요(예: 파일을 끌어서 보내기를 클릭하는 프롬프트 텍스트를 작성하지 않음).

설명서

텍스트 상자를 참조하는 경우:

• 형식을 사용하여 입력 또는 붙여넣기를 필요로 하는 사용자 상호 작용을 참조합니다. 그렇지 않으면 사용자가 목록에서 값을 선택하거나 찾아보기 단추를 사용하는 등의 다른 방법을 사용하여 입력란에 정보를 넣을 수 있는 경우 Enter 키를 사용합니다.

• 읽기 전용 텍스트 상자에서 항목을 참조하려면 select를 사용합니다.

• 대문자를 포함한 정확한 레이블 텍스트를 사용하고 단어 상자를 포함합니다. 액세스 키 밑줄 또는 콜론을 포함하지 마세요. 텍스트 상자를 텍스트 상자 또는 필드로 참조하지 마세요.

• 가능하면 굵은 텍스트를 사용하여 레이블의 서식을 지정합니다. 그렇지 않으면 혼동을 방지하기 위해 필요한 경우에만 레이블을 따옴표로 묶습니다.

  예: 암호 상자에 암호를 입력한 다음 확인을 클릭합니다.

• 텍스트 상자에 특정 형식이 필요한 경우 가장 일반적으로 사용되는 허용 가능한 형식만 문서화합니다. 사용자가 다른 형식을 직접 검색할 수 있도록 합니다. 데이터 형식을 유연하게 사용하려고 하지만 이렇게 하면 복잡한 설명서가 생성되지 않습니다.

  올바름:

  1234-56-7890 형식을 사용하여 부품의 일련 번호를 입력합니다.

  잘못된 예:

  다음 형식을 사용하여 부품의 일련 번호를 입력합니다.

  1234567890

  1234-56-7890

  1234 56 7890