텍스트 입력
콘텐츠의 테이블 축소
콘텐츠의 테이블 확장

텍스트 입력에 대한 지침

텍스트 입력란을 통해 사용자는 실제 또는 화상 키보드로 문자를 입력하고 편집할 수 있습니다. 텍스트 줄바꿈을 사용하면 입력란에 여러 줄의 텍스트를 입력할 수 있습니다.

예제

표준 텍스트 상자는 한 줄 입력 텍스트, 텍스트 선택, 사용 안 함, 여러 줄 입력 텍스트의 네 가지 상태로 표시됩니다.

텍스트 입력란의 예

올바른 컨트롤인가요?

이러한 질문은 표준 텍스트 상자와 다른 컨트롤 중 어떤 것이 텍스트 입력에 가장 적합한지를 결정하는 데 도움이 됩니다.

  • 유효한 값을 모두 효율적으로 열거하는 것이 효과적인가요? 효과적이라면 선택 컨트롤(예: 확인란, 드롭다운 목록, 목록 상자, 라디오 단추, 슬라이더, 토글 스위치, 날짜 선택기 또는 시간 선택기) 중 하나를 사용하는 것이 좋습니다.
  • 유효한 값 집합이 매우 적은가요? 이때 값이 일부 문자 길이보다 큰 경우 드롭다운 목록 또는 목록 상자를 사용하는 것이 좋습니다.
  • 유효한 데이터는 아무런 제약이 없습니까? 아니면 형식에 의해서만 제약을 받습니까(길이 제한 또는 문자 형식 제한)? 그렇다면 텍스트 입력 컨트롤을 사용합니다. 입력할 수 있는 문자 수를 제한하고, 입력 범위 목록에서 선택하여 입력을 특정 문자 집합 또는 형식—(예: 숫자, URI(Uniform Resource Identifier) 또는 통화)으로 제한할 수 있습니다.
  • 값이 특수한 공통 컨트롤을 가진 데이터 유형을 표현합니까? 그렇다면 텍스트 입력 컨트롤 대신 적절한 컨트롤을 사용합니다. 예를 들어 데이터 입력을 수락하려면 텍스트 입력 컨트롤 대신 DatePicker를 사용합니다.
  • 데이터가 엄격히 숫자인 경우
    • 값을 근사값 및/또는 동일한 페이지에 있는 다른 수량을 기준으로 입력하나요? 그렇다면 슬라이더를 사용하세요.
    • 설정을 변경하면 어떤 효과가 있는지에 대해 즉각적인 피드백을 받게 되면 사용자에게 이익이 되나요? 그렇다면 함께 표시되는 컨트롤과 함께 슬라이더를 사용하세요.
    • 결과를 확인한 후 입력한 값을 조정할 수 있나요(예: 볼륨 또는 화면 밝기)? 그렇다면 슬라이더를 사용하세요.

권장 사항

  • 텍스트 상자의 용도가 명확하지 않은 경우 레이블 또는 개체 틀 텍스트를 사용하세요. 레이블은 텍스트 입력란에 값이 있는지 여부에 상관없이 표시됩니다. 개체 틀 텍스트는 텍스트 입력란 내에 표시되었다가 값을 입력하면 사라집니다.
  • 입력할 수 있는 값의 범위에 적절한 너비로 텍스트 상자를 설정하세요. 단어 길이는 언어에 따라 달라지므로 앱을 세계화하려는 경우 지역화를 고려해야 합니다.
  • 텍스트 입력란은 일반적으로 한 줄(텍스트 줄 바꿈 해제)입니다. 긴 문자열을 입력하거나 편집해야 하는 경우 텍스트 입력란을 여러 줄(텍스트 줄 바꿈 설정)로 설정합니다.
  • 일반적으로 텍스트 입력란은 편집 가능한 텍스트에 사용됩니다. 내용을 읽고, 선택하고, 복사할 수 있지만, 편집할 수 없도록 텍스트 입력란을 읽기 전용으로 설정할 수 있습니다.
  • 보기를 깔끔하게 정리해야 하는 경우 제어 확인란을 선택한 경우에만 텍스트 입력 상자를 표시하도록 설정하는 것이 좋습니다. 사용 상태인 텍스트 입력 상자를 컨트롤(예: 확인란)에 바인딩할 수도 있습니다.
  • 값이 포함된 텍스트 입력란을 탭할 때 텍스트 입력란이 어떻게 동작하는지를 고려하세요. 기본 동작은 값을 바꾸지 않고 편집하는 데 적합합니다. 삽입 지점은 단어 사이에 있고 아무것도 선택되어 있지 않습니다. 주어진 텍스트 입력란의 가장 일반적인 사용 사례가 바꾸기인 경우 컨트롤이 포커스를 받을 때마다 필드에서 모든 텍스트를 선택할 수 있습니다. 입력이 선택을 대체합니다.
  • 입력을 특정 문자 집합 또는 형식—(예: 숫자, URI, 통화—)으로 제한하려면 입력 범위를 적절하게 설정합니다. 그러면 사용되는 화상 키보드가 결정됩니다.

한 줄 입력 상자

  • 한 줄 입력란을 여러 개 사용하여 다양한 텍스트 정보를 캡처합니다. 입력란이 본질적으로 관련된 경우 함께 그룹화합니다.

  • 한 줄 입력란은 예상되는 제일 긴 입력보다 약간 넓게 만듭니다. 이 경우 컨트롤이 너무 넓어지면 두 개의 컨트롤로 분리합니다. 예를 들어 단일 주소 입력을 "주소 1"과 "주소 2"로 분할할 수 있습니다.
  • 입력할 수 있는 문자의 최대 길이를 설정합니다. 지원 데이터 원본이 긴 입력 문자열을 허용하지 않는 경우 입력을 제한하고 유효성 검사 팝업을 사용하여 사용자에게 한계에 도달했음을 알립니다.
  • 한 줄 텍스트 입력 컨트롤을 사용하여 사용자로부터 텍스트 조각들을 수집할 수 있습니다.

    다음 예는 보안 질문에 대한 답변을 캡처하기 위한 한 줄 입력란을 보여줍니다. 답변은 짧을 것이므로 여기서는 한 줄 입력란이 적합합니다. 수집된 정보는 Windows가 인식하는 어떤 특수 입력 형식과도 일치하지 않으므로 일반 "Text" 형식이 적합합니다.

    기본 데이터 입력

  • 짧고 크기가 정해져 있는 한 줄 텍스트 입력 컨트롤 집합을 사용하여 특수한 형식의 데이터를 입력할 수 있습니다.

    서식이 지정된 데이터 입력

  • 제약이 없는 한 줄 텍스트 입력 컨트롤과 사용자가 유효한 값을 선택하는 데 도움이 되는 명령 단추를 이용하여 문자열을 입력 또는 편집할 수 있습니다.

    보조 데이터 입력

  • 한 줄 숫자 입력 컨트롤을 사용하여 숫자를 입력 또는 편집할 수 있습니다.
  • 한 줄 암호 입력 컨트롤을 사용하여 암호와 PIN을 안전하게 입력할 수 있습니다.

    암호 및 PIN 입력
  • 한 줄 메일 입력 컨트롤을 사용하여 메일 주소를 입력할 수 있습니다.

    메일 입력

    메일 입력 컨트롤을 사용하는 경우 다음 기능이 무료로 제공됩니다.

    • 사용자가 입력란으로 이동하면 메일 관련 키 레이아웃을 사용한 터치 키보드가 나타납니다.
    • 사용자가 잘못된 메일 형식을 입력하면 이를 알려주는 대화 상자가 나타납니다. 메일 입력
  • 웹 주소를 입력할 때는 URL 입력 컨트롤을 사용합니다.
  • 전화 번호를 입력할 때는 전화 번호 입력 컨트롤을 사용합니다.
  • 한 줄 입력란을 만들 때는 행 높이가 1인 텍스트 영역을 사용하지 마세요. 대신 입력란을 사용합니다.
  • 개체 틀 텍스트를 사용하여 텍스트 컨트롤을 채우지 마세요. 컨트롤을 사용하면 입력란이 개체 틀 텍스트를 지웁니다. 대신 "value" 특성을 사용합니다.
  • 다른 컨트롤을 암호 입력란의 바로 옆에 배치하지 마세요. 암호 입력란에는 사용자가 자신이 입력한 암호를 확인할 수 있도록 암호 표시 단추가 있습니다. 그 바로 옆에 또 다른 컨트롤을 두면 사용자가 다른 컨트롤을 조작하려고 할 때 실수로 자신의 암호를 노출할 수 있습니다. 이런 일을 방지하려면 암호 입력란과 다른 컨트롤 사이에 간격을 두거나 다른 컨트롤을 다음 행에 배치합니다.

여러 줄 텍스트 입력 컨트롤

  • 서식 있는 텍스트 상자를 만들 때 스타일 단추를 제공하고 해당 작업을 구현합니다.
  • 앱의 스타일과 일치하는 글꼴을 사용합니다.
  • 텍스트 컨트롤의 높이는 기본 입력을 수용하기에 충분하게 만듭니다.
  • 최대 개수의 문자 또는 단어가 포함된 긴 텍스트를 캡처할 때는 일반 입력란을 사용하고 한계에 도달하려면 몇 글자 또는 몇 단어가 남았는지 보여 주는 카운터를 제공합니다. 카운터는 직접 만들어야 합니다. 카운터를 입력란 아래에 놓고 사용자가 문자 또는 단어를 입력할 때 동적으로 업데이트되도록 합니다.

    긴 텍스트 스팬

  • 사용자가 입력하는 동안 텍스트 입력 컨트롤의 높이가 늘어나도록 만들지 마세요.
  • 한 줄만 필요한 경우에는 여러 줄 입력란을 사용하지 마세요.
  • 일반 텍스트 컨트롤이 적절한 경우 서식 있는 텍스트 컨트롤을 사용하지 마세요.

추가 사용법 지침

텍스트 입력란을 사용하여 텍스트 값을 입력하거나 이미 입력된 값을 편집할 수 있습니다. 입력할 수 있는 문자 수를 제한하고 입력 범위 목록에서 선택하여 입력을 특정 문자 집합 또는 형식—(예: 숫자, URI, 통화)으로 제한할 수 있습니다.

올바른 여러 줄 텍스트 입력 컨트롤 선택

긴 문자열을 입력 또는 편집해야 할 때는 여러 줄 텍스트 컨트롤을 사용합니다. 일반 텍스트 컨트롤과 서식 있는 텍스트 컨트롤의 두 가지 유형의 여러 줄 텍스트 입력 컨트롤이 있습니다.

  • 여러 줄 입력란의 주된 목적이 문서(예, 블로그 항목 또는 메일 메시지의 본문)를 만드는 것이며 그 문서에 서식을 지정해야 하는 경우에는 서식 있는 입력란을 사용합니다.
  • 사용자가 텍스트에 서식을 지정할 수 있도록 하려면 서식 있는 입력란을 사용합니다.
  • 데이터 처리에 사용 후 사용자에게 다시 표시하지는 않을 텍스트를 캡처할 때는 일반 텍스트 입력 컨트롤을 사용합니다.
  • 기타 모든 시나리오에서는 일반 텍스트 입력 컨트롤을 사용합니다.

[이 문서에는 UWP(유니버설 Windows 플랫폼) 앱 및 Windows 10과 관련된 정보가 있습니다. Windows 8.1 참고 자료는 Windows 8.1 지침 PDF 를 다운로드하세요.]

관련 항목

디자이너용
맞춤법 검사에 대한 지침
검색 추가
개발자용(XAML)
TextBox class
개발자용(HTML)
input type=text element | input type=text object
textArea element
contenteditable
개발자용(기타)
String.Length 속성

 

 

표시:
© 2017 Microsoft