텍스트 상자

아티클
06/13/2023

메모

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

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

일반적인 텍스트 상자 및 레이블

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

메모

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

이것이 올바른 컨트롤인가요?

결정하려면 다음 질문을 고려합니다.

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

디자인 개념

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

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

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

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

사용 패턴

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

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

지침

일반

텍스트 상자를 사용하지 않도록 설정할 때 연결된 레이블, 명령 레이블, 스핀 컨트롤 및 명령 단추도 사용하지 않도록 설정합니다.
자동 완성을 사용하여 사용자가반복적으로 사용될 수 있는 데이터를 입력할 수 있습니다. 사용자 이름, 주소 및 파일 이름을 예로 들어 있습니다. 그러나 암호, PIN, 신용 카드 번호 또는 의료 정보와 같은 중요한 정보가 포함될 수 있는 텍스트 상자에는 자동 완성을 사용하지 마세요.
사용자가 불필요하게 스크롤하지 않도록 합니다. 데이터가 텍스트 상자보다 클 것으로 예상되고 레이아웃에 해를 끼치지 않고 텍스트 상자를 쉽게 크게 만들 수 있는 경우 상자 크기를 조정하여 스크롤할 필요가 없습니다.

틀렸습니다.

컴퓨터 이름 텍스트 상자

이 예제에서는 해당 데이터를 처리하기 위해 텍스트 상자를 훨씬 더 길게 만들어야 합니다.
스크롤 막대:
- 여러 줄 텍스트 상자에 가로 스크롤 막대를 배치하지 마세요. 대신 세로 스크롤 및 줄 바꿈을 사용합니다.
- 한 줄 텍스트 상자에 스크롤 막대를 배치하지 마세요.
숫자 입력의 경우 스핀 컨트롤을 사용할 수 있습니다. 텍스트 입력의 경우 드롭다운 목록 또는 편집 가능한 드롭다운 목록을 대신 사용합니다.
형식이 지정된 데이터 입력을 제외하고 자동 종료 기능을 사용하지 마세요. 포커스의 자동 이동은 사용자를 놀라게 할 수 있습니다.

편집 가능한 텍스트 상자

가능한 경우 입력 텍스트의 길이를 제한합니다. 예를 들어 유효한 입력이 0에서 999 사이의 숫자인 경우 3자로 제한된 숫자 텍스트 상자를 사용합니다. 서식이 지정된 데이터 입력을 사용하는 텍스트 상자의 모든 부분에는 짧은 고정 길이가 있어야 합니다.
데이터 형식을 유연하게 사용할 수 있습니다. 사용자가 다양한 형식을 사용하여 텍스트를 입력할 가능성이 있는 경우 가장 일반적인 형식을 모두 처리합니다. 예를 들어 많은 이름, 숫자 및 식별자를 선택적 공백 및 문장 부호로 입력할 수 있으며 대문자는 중요하지 않습니다.
가능한 형식을 처리할 수 없는 경우 서식이 지정된 데이터 입력을 사용하여 특정 형식을 요구하거나 레이블에 유효한 형식을 지정해야 합니다.

허용:

숫자 입력

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

개선:

서식이 지정된 데이터 입력 텍스트 상자

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

Best:

제한되지 않은 텍스트 상자

이 예제에서 텍스트 상자는 가능한 모든 형식을 처리합니다.
최대 입력 길이를 선택할 때 형식 유연성을 고려합니다. 예를 들어 유효한 신용 카드 번호는 최대 19자를 사용할 수 있으므로 길이를 더 짧은 것으로 제한하면 더 긴 형식을 사용하여 숫자를 입력하기가 어려워집니다.
사용자가 길고 복잡한 데이터에 붙여 넣을 가능성이 더 큰 경우 형식이 지정된 데이터 입력 패턴을 사용하지 마세요. 대신 사용자가 데이터를 입력할 가능성이 더 큰 상황에 맞게 형식이 지정된 데이터 입력 패턴을 예약합니다.

레이블이 있는 텍스트 상자의 스크린샷을

이 예제에서는 사용자가 IPv6 주소를 붙여 넣을 수 있도록 형식이 지정된 데이터 입력 패턴이 사용되지 않습니다.
사용자가 전체 값을 다시 입력할 가능성이 더 큰 경우 입력 포커스의 모든 텍스트를 선택합니다. 사용자가 편집할 가능성이 더 높으면 텍스트 끝에 캐리트를 배치합니다.

암호 입력란

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

이 예제에서는 사용자가 텍스트를 바꾸는 것보다 키워드를 추가할 가능성이 높으므로 텍스트 끝에 캐리트가 배치됩니다.
새 줄 문자가 유효한 입력인 경우 항상 여러 줄 텍스트 상자를 사용합니다.
파일 또는 경로에 대한 텍스트 상자가 있는 경우 항상 찾아보기 단추를 제공합니다.

숫자 텍스트 상자

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

수정:

단위

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

개선:

단위

이 예제에서 텍스트 상자는 보다 편리한 단위를 사용합니다.
도움이 될 때마다 스핀 컨트롤을 사용합니다. 그러나 사용자가 많은 숫자를 입력해야 하는 경우와 같이 스핀 컨트롤이 실용적이지 않은 경우도 있습니다. 다음과 같은 경우 스핀 컨트롤을 사용합니다.
- 입력은 일반적으로 100 미만인 작은 숫자일 수 있습니다.
- 사용자는 기존 숫자를 약간 변경할 수 있습니다.
- 사용자는 키보드보다 마우스를 사용할 가능성이 더 높습니다.
때마다 숫자 텍스트를 오른쪽 맞춤:
- 숫자 텍스트 상자가 두 개 이상 있습니다.
- 텍스트 상자가 세로로 정렬됩니다.
- 사용자는 값을 추가하거나 비교할 수 있습니다.
수정:

경비 텍스트 상자(호텔 등)스크린샷

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

틀렸습니다.

rgb 값

이 예제에서는 숫자 텍스트가 왼쪽 맞춤이 잘못되었습니다.
항상 통화 값을 오른쪽 맞춤합니다.
애플리케이션에서 이러한 특별한 의미를 내부적으로 사용하는 경우에도특정 숫자 값에 특별한 의미를 할당하지 마세요. 대신 명시적 사용자 선택에 확인란 또는 라디오 단추를 사용합니다.

틀렸습니다.

레이블 스크린샷 사용하지 않도록 설정

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

수정:

확인란 레이블의

이 예제에서 확인란은 옵션을 명시적으로 만듭니다.

암호 및 PIN 입력

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

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

텍스트 출력

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

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

데이터 출력

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

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

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

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

제품 키 텍스트 상자

이 예제에서 풍선은 잘못된 입력 문자를 보고합니다.
입력 데이터에 유효하지 않은 값이나 형식이 있는 경우 입력 상자에 입력 포커스가 손실되면 입력 문제 풍선을 표시합니다.
입력 데이터가 창의 다른 컨트롤과 일치하지 않는 경우 사용자가 모달 대화 상자에 대해 확인을 클릭하는 경우와 같이 전체 입력이 완료되면 오류 메시지를 표시합니다.

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

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

프롬프트

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

레이블이 있는 프롬프트 텍스트 상자의 스크린샷: 검색

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

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

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

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

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

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

권장 크기 조정 및 간격

한 줄 및 두 줄 텍스트 상자의

텍스트 상자의 크기 조정 및 간격을 권장합니다.

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

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

레이블