Text input
Text input (텍스트 입력)
텍스트 입력은 사용자가 자유 형식의 텍스트 데이터를 입력할 수 있게 해주는 컴포넌트예요. 짧은 형식과 긴 형식의 입력 모두에 사용할 수 있습니다.
출처: Text input
본문
AI 라벨이 있는 텍스트 입력과 텍스트 영역이 이제 안정(stable) 버전으로 제공돼요. 이 추가 사항은 컴포넌트의 시각적 모양을 바꾸고, 컴포넌트에 AI가 있을 때 AI 설명 가능성 기능을 도입합니다. 자세한 내용은 AI 프레즌스 섹션을 참고하세요.
개요 (Overview)
텍스트 입력은 사용자가 자유 형식의 텍스트 데이터를 입력할 수 있게 해줘요. 사용할 텍스트 필드의 유형은 사용자가 입력할 것으로 예상되는 콘텐츠의 길이를 반영해야 합니다. 기본 텍스트 입력은 짧고 한 줄짜리 콘텐츠용이고, 텍스트 영역은 더 길고 여러 줄짜리 입력용이에요.
언제 사용할까요
- 사용자가 옵션의 사전 설정으로 예측할 수 없는 고유한 정보를 입력해야 할 때
- 사용자가 더 복잡한 컨트롤보다 손글씨 형식으로 더 빨리 입력할 수 있는 기억할 만한 데이터를 입력해야 할 때
언제 사용하지 말아야 할까요
- 사용자가 사전 정의된 리스트에서만 옵션을 선택할 수 있다면 자유 형식 텍스트 입력을 피하세요. 오류가 발생하기 쉽기 때문이에요. 대신 드롭다운, 선택(select), 라디오 버튼 그룹 같은 선택 컨트롤을 고려하세요.
변형 (Variants)
| Variant | Purpose |
|---|---|
| Text input | 예상되는 사용자 입력이 한 줄의 텍스트일 때. |
| Text area | 예상되는 사용자 입력이 여러 줄에 걸칠 수 있는 몇 단어 이상일 때. |
텍스트 입력 (Text input)
예상되는 사용자 입력이 한 줄의 텍스트일 때 텍스트 입력을 사용하세요. 텍스트 입력은 고정 높이를 가지며 문자, 숫자, 기호의 어떤 조합이라도 간단한 자유 형식 데이터 입력에 사용됩니다. 텍스트 입력에는 기본(default)과 플루이드(fluid)라는 두 가지 스타일이 있으며, 기능은 같지만 시각적으로는 다르게 보여요. 컴포넌트를 어떻게 또는 어디서 쓰는지에 따라 어떤 스타일을 쓸지가 정해집니다.
| Style | Purpose |
|---|---|
| Default | 가장 흔히 쓰이는 텍스트 입력 스타일로, 라벨과 도움말 텍스트가 필드 바깥에 있어요. 입력 컴포넌트 사이에 여백이 필요할 때나 공간이 중요한 비생산적 순간에 더 작은 컴포넌트가 필요할 때 사용하세요. |
| Fluid | 더 표현적인 순간에 사용하는 텍스트 입력의 대체 스타일이에요. 플루이드 폼, 포함된 공간, 또는 툴바 같은 복잡한 컴포넌트에 붙어 있을 때 사용합니다. 플루이드 컴포넌트는 주변 컴포넌트와 항상 딱 붙어 있어요. |
구조 (Anatomy)
- 라벨(Label): 사용자가 필드에 입력해야 할 콘텐츠를 알려주는 텍스트예요. 승인된 접근성 면제를 받지 않았다면 필수입니다.
- 값(Value): 사용자가 필드에 입력한 콘텐츠예요.
- 필드(Field): 사용자가 데이터를 입력하는 컨테이너예요. 3:1 비텍스트 대비 요구사항을 충족해야 합니다.
- 도움말 텍스트(Helper text, 선택): 사용자에게 추가 도움 또는 맥락을 줄 수 있는 보조 텍스트예요. 올바른 데이터 형식을 설명하는 데 자주 쓰입니다. 기본 스타일에서는 필드 아래에 위치하고, 플루이드 스타일에서는 툴팁을 통해 표면화됩니다.
크기 (Sizing)
기본 입력 높이 (Default input heights)
텍스트 입력에는 작은(small), 중간(medium), 큰(large) 세 가지 높이 크기가 있어요. 세 가지 크기를 지원하면 레이아웃을 구성할 때 더 많은 유연성을 얻을 수 있습니다. 같은 페이지에서 폼 컴포넌트를 짝지을 때는 일관된 필드 높이를 사용하세요.
| Size | Height (px/rem) | Use case |
|---|---|---|
| Small (sm) | 32 / 2 | 공간이 제한될 때나 길고 복잡한 폼에 텍스트 입력을 넣을 때 사용하세요. |
| Medium (md) | 40 / 2.5 | 기본 크기이자 가장 흔히 쓰이는 크기예요. 확실하지 않으면 중간 크기를 사용하세요. |
| Large (lg) | 48 / 3 | 작업할 공간이 많을 때 사용하세요. 큰 크기는 보통 단순한 폼이나 페이지에 텍스트 입력을 단독으로 넣을 때 쓰입니다. |
플루이드 입력 높이 (Fluid input heights)
플루이드 입력 높이는 하나뿐이며 기본 높이보다 시각적으로 더 큽니다. 경고 또는 오류 메시지가 아래에 추가된 경우를 제외하고 입력은 설정된 높이를 유지해요.
텍스트 영역 (Text area)
예상되는 사용자 입력이 몇 단어 이상이고 여러 줄에 걸칠 수 있을 때 텍스트 영역을 사용하세요. 사용자 코멘트나 설명 같은 기능에 흔히 쓰입니다. 비밀번호 기능을 제외하고 텍스트 입력과 같은 모든 상태와 기능을 지원해요. 텍스트 영역에는 크기 조절 핸들, 단어 카운터, 문자 카운터처럼 텍스트 입력에는 없는 몇 가지 고유한 기능이 있습니다.
| Style | Purpose |
|---|---|
| Default | 가장 흔히 쓰이는 텍스트 영역 스타일로, 라벨과 도움말 텍스트가 필드 바깥에 있어요. 입력 컴포넌트 사이에 여백이 필요할 때나 공간이 중요한 비생산적 순간에 더 작은 컴포넌트가 필요할 때 사용하세요. |
| Fluid | 더 표현적인 순간에 사용하는 텍스트 영역의 대체 스타일이에요. 플루이드 폼, 포함된 공간, 또는 툴바 같은 복잡한 컴포넌트에 붙어 있을 때 사용합니다. 플루이드 컴포넌트는 주변 컴포넌트와 항상 딱 붙어 있어요. |
구조 (Anatomy)
- 라벨(Label): 사용자가 필드에 입력해야 할 콘텐츠를 알려주는 텍스트예요. 승인된 접근성 면제를 받지 않았다면 필수입니다.
- 값(Value): 사용자가 필드에 입력한 콘텐츠예요.
- 필드(Field): 사용자가 데이터를 입력하는 컨테이너예요. 3:1 비텍스트 대비 요구사항을 충족해야 합니다.
- 크기 조절 핸들(Resize handle): 사용자가 필드 높이를 더 길거나 짧게 조작할 수 있게 해줘요.
- 선택/필수 표시자(Optional versus required indicator, 선택): 이 라벨은 필드가 사용자가 완료하기에 선택인지 필수인지를 나타내요.
- 카운터(Counter, 선택)
- 문자 카운터(Character counter): 입력되는 문자 수와 허용되는 총 문자 수를 나타내요.
- 단어 카운터(Word counter): 입력되는 단어 수와 허용되는 총 단어 수를 나타내요.
크기 (Sizing)
텍스트 영역은 필드 오른쪽 아래의 크기 조절 핸들을 사용해 사용자가 길거나 짧게 할 수 있는 가변 높이를 가져요. 기본적으로 텍스트 영역은 최소 높이 40px/2.5rem이지만 최대 높이는 없습니다.
크기 조절 핸들 (Resize handle)
기본 및 플루이드 텍스트 영역 모두에 기본적으로 크기 조절 핸들이 포함됩니다. 사용자가 필드 높이를 더 길거나 짧게 조작할 수 있게 해줘요. 크기 조절 핸들은 텍스트 영역 컨테이너의 너비에는 영향을 주지 않고 높이에만 영향을 줍니다. 사용자가 필드 크기를 필드 안의 콘텐츠보다 짧게 만들면 세로 스크롤이 사용 가능해집니다.
포맷 (Formatting)
정렬 (Alignment)
입력 라벨은 그리드와 페이지의 다른 타이포그래피 요소에 세로로 정렬되어야 해요. 입력 컨테이너의 정렬은 사용 중인 텍스트 입력 스타일에 따라 달라집니다. 기본 입력은 항상 컬럼에 딱 붙고, 플루이드 입력은 거터(gutter)로 걸쳐집니다.
기본 입력 컨테이너를 그리드에 정렬해서 입력 라벨이 페이지의 다른 타이포그래피와 정렬되게 하세요. 플루이드 입력 컨테이너를 거터로 걸치게 해서 입력 라벨이 페이지의 다른 타이포그래피와 정렬되게 하세요.
배치 (Placement)
텍스트 입력과 텍스트 영역 모두의 필드 너비는 그리드 컬럼이나 미니 유닛 그리드에 여전히 정렬하면서 의도된 콘텐츠 길이를 반영해야 해요. 높이와 달리 텍스트 영역의 너비는 사용자가 제어할 수 없습니다. 최소 또는 최대 너비는 없지만, 수집하려는 의도된 데이터에 비례하지 않는 지나치게 넓은 필드는 피해야 합니다.
텍스트 입력 너비를 콘텐츠에 비례하게 만들고 그리드 컬럼에 정렬하세요. 공간을 채우기 위해 텍스트 입력을 지나치게 넓게 만들지 마세요.
정렬 (Alignment)
라벨과 필드 컨테이너는 그리드와 페이지의 다른 폼 컴포넌트에 세로로 정렬되어야 해요.
필드 컨테이너를 그리드에 정렬하세요. 필드 텍스트를 그리드에 정렬하고 필드를 거터에 걸치게 하지 마세요.
콘텐츠 (Content)
주요 요소 (Main elements)
라벨 (Labels)
효과적인 라벨링은 사용자가 텍스트 입력에 무엇을 입력할지 이해하도록 도와줘요. 텍스트 필드에는 항상 라벨이 있어야 합니다. 입력의 맥락이 보이는 라벨의 필요성을 무효화하는 드문 경우도 있지만, 라벨 없는 디자인으로 진행하기 전에 접근성 전문가와 상의할 것을 권장해요.
- 제품 이름과 고유 명사를 제외한 모든 라벨에는 문장형 대문자를 사용하세요.
- 라벨을 짧고 간결하게 유지하세요.
- 라벨 이름 뒤에 콜론을 사용하지 마세요.
도움말 텍스트 (Helper text)
선택적인 도움말 텍스트는 사용자가 필드를 올바르게 완료하도록 돕는 적절한 정보예요. 올바른 데이터 형식을 설명하는 데 자주 쓰입니다.
- 문장형 대문자를 사용하고, 대부분의 경우 텍스트를 구두점이 있는 완전한 문장으로 쓰세요.
- 사용할 때 도움말 텍스트는 오류 또는 경고 메시지가 그것을 대체하지 않는 한 필드 아래에 지속적으로 나타납니다.
플레이스홀더 텍스트 (Placeholder text)
선택적인 플레이스홀더 텍스트는 무엇을 입력할지에 대한 힌트나 예를 제공해요. 플레이스홀더 텍스트는 사용자가 입력에 데이터 입력을 시작한 후 사라집니다. 따라서 지속적인 라벨의 대체물로 사용해서는 안 되며 중요한 정보를 담아서도 안 됩니다.
- 문장형 대문자를 사용하고, 대부분의 경우 텍스트를 구두점 없는 직접적인 진술로 쓰세요.
- 플레이스홀더 텍스트는 필수가 아니며 기본적으로 텍스트 입력 필드에 표시되지 않아요.
- 플레이스홀더 텍스트는 사용자 인터랙션에 해로울 수 있으므로 필요한 경우에만 추가해야 합니다.
오버플로 콘텐츠 (Overflow content)
텍스트 입력에서의 오버플로 (Overflow in a text input)
사용자의 콘텐츠가 예상보다 길어 텍스트 입력의 한 줄에 맞지 않으면, 커서를 값의 한쪽 끝에서 다른 쪽 끝으로 이동할 때 값 콘텐츠가 필드 컨테이너 안에서 가로로 스크롤될 수 있어요.
텍스트 영역에서의 오버플로 (Overflow in a text area)
사용자의 콘텐츠가 가변 텍스트 영역의 세로 공간을 초과하면 크기 조절 핸들로 필드 컨테이너를 확장하거나, 설정된 필드 컨테이너 안에서 콘텐츠를 세로로 스크롤할 수 있습니다.
추가 가이드 (Further guidance)
더 자세한 콘텐츠 가이드는 Carbon의 콘텐츠 가이드라인을 참고하세요.
보편적 동작 (Universal behaviors)
이 섹션에 나열된 동작은 모든 변형에 걸쳐 보편적이에요. 각 변형에 고유한 동작은 아래의 변형별 섹션을 참고하세요.
상태 (States)
텍스트 입력과 텍스트 영역에는 여러 인터랙티브 상태가 있어요: 활성(enabled), 활성화(active), 포커스, 오류(error), 경고(warning), 비활성(disabled), 스켈레톤, 읽기 전용(read-only). 자세한 내용은 스타일 탭을 참고하세요.
| State | When to use |
|---|---|
| Enabled | 텍스트 입력이나 텍스트 영역이 활성 상태이지만 사용자가 직접 상호작용하지 않을 때예요. 보통 컴포넌트의 기본 또는 일반 상태라고 부릅니다. 활성 텍스트 입력 필드는 콘텐츠 없음, 플레이스홀더 텍스트, 또는 사용자 생성 콘텐츠를 담을 수 있습니다. |
| Active | 사용자가 필드에 콘텐츠를 활발히 입력하고 있을 때예요. |
| Focus | 사용자가 텍스트 입력이나 텍스트 영역을 탭하거나 클릭하면 포커스되어 컴포넌트로 성공적으로 이동했음을 나타내요. |
| Error | 사용자 입력이 유효하지 않거나 필수 텍스트 입력이나 텍스트 영역이 채워지지 않았을 때예요. 시스템 오류로 인해 발생할 수도 있습니다. 이 상태는 데이터를 제출하거나 저장하기 전에 사용자 응답이 필요해요. |
| Warning | 예외 조건에 사용자의 주의를 환기해야 할 때예요. 그 조건이 오류는 아닐 수 있지만 해결하지 않으면 문제를 일으킬 수 있습니다. |
| Disabled | 사용자가 컴포넌트와 상호작용할 수 없고 모든 인터랙티브 기능이 제거되었을 때예요. 읽기 전용 상태와 달리 비활성 상태는 포커스 가능하지 않고, 스크린 리더가 읽지 않으며, 시각적 대비를 통과할 필요가 없어 해석해야 한다면 접근 불가능할 수 있습니다. |
| Skeleton | 초기 페이지 로드에 사용해 텍스트 입력이나 텍스트 영역이 아직 완전히 로드되지 않았음을 나타내요. |
| Read-only | 사용자가 컴포넌트를 검토할 수 있지만 수정할 수 없을 때예요. 이 상태는 비활성 상태처럼 모든 인터랙티브 기능을 제거하지만, 여전히 포커스 가능하고 스크린 리더가 접근할 수 있으며 가독성을 위한 시각적 대비를 통과합니다. |
검증 (Validation)
실시간 검증은 사용자가 폼을 채울 때 프로세스를 간소화하고 데이터를 깨끗하게 유지하는 데 도움을 줘요. 그렇지 않으면 사용자가 관련 폼을 제출할 때 텍스트 입력 데이터를 검증하세요. 오류와 검증에 대한 완전한 가이드는 폼 패턴을 참고하세요.
잘못됨 (Invalid)
데이터가 유효하지 않거나 필수 필드가 비어 있으면 오류 상태가 발생해요. 오류 상태에는 잘못된 콘텐츠를 나타내는 세 가지 시각적 표시자가 있습니다: 빨간 테두리, 오류 아이콘 표시자, 오류 메시지.
필수 대 선택 (Required versus optional)
텍스트 입력은 상황에 따라 선택(optional) 또는 필수(required)로 라벨링될 수 있어요. 요구사항 라벨링에 대한 자세한 가이드는 폼 패턴을 참고하세요.
대부분의 필드가 필수라면 선택 필드 라벨만 (optional)로 표시하세요. 대부분의 필드가 선택이라면 필수 필드 라벨만 (required)로 표시하세요.
인터랙션 (Interactions)
마우스 (Mouse)
사용자는 필드 컨테이너를 클릭해 텍스트 입력을 활성화할 수 있어요. 비밀번호 표시 토글 같은 텍스트 입력과 연관된 추가 동작을 활성화하려면 별도의 클릭이 필요합니다.
키보드 (Keyboard)
추가 키보드 인터랙션은 접근성 탭을 참고하세요.
| Key | Interaction |
|---|---|
| Tab | 텍스트 입력에 포커스를 가져와요. |
| Enter or Space | 비밀번호 표시 토글처럼 입력에 추가된 연관 동작을 엽니다. |
| Esc | 입력에 추가된 연관 동작을 닫아요. |
| ctrl or opt + left/right arrows | 필드 안에서 단어 단위로 이동해요. |
| ctrl or opt + up/down arrows | 입력 콘텐츠의 시작 또는 끝으로 이동해요. |
수정자 (Modifiers)
비밀번호 입력 (Password input)
비밀번호 입력은 텍스트 입력의 하위 변형이에요. 개인 데이터를 수집하는 데 사용하며, 사용자가 입력할 때 문자를 숨깁니다. 입력 필드 맨 오른쪽의 보기 아이콘을 클릭하면 문자 표시를 토글할 수 있습니다. 비밀번호 입력을 사용할 때는 허용되는 문자 유형이나 날짜 구조 같은 데이터 형식과 관련된 요구사항을 나열하는 상세한 도움말 텍스트를 꼭 제공하세요.
문자 카운터 (Character counter)
텍스트 영역에 문자 카운터를 추가해 입력되는 문자 수와 허용되는 총 문자 수를 모두 나타낼 수 있어요. 최대 문자 수에 도달하면 텍스트 영역은 사용자가 추가 문자를 입력하지 못하게 하고 한도에 도달했다는 메시지를 사용자에게 제공해야 합니다.
단어 카운터 (Word counter)
텍스트 영역에 단어 카운터를 추가해 입력되는 단어 수와 허용되는 총 단어 수를 모두 나타낼 수 있어요. 최대 단어 수에 도달하면 텍스트 영역은 사용자가 추가 문자를 입력하지 못하게 하고 한도에 도달했다는 메시지를 사용자에게 제공해야 합니다.
AI 프레즌스 (AI presence)
텍스트 입력과 텍스트 영역에는 입력에 AI 라벨이 있을 때 AI 시각적 스타일을 취하는 수정이 있어요. AI 변형은 설명 가능성 팝오버의 시각적 표시자이자 트리거인 AI 라벨의 추가를 제외하고 일반 버전과 동일하게 동작합니다.
AI 설계에 대한 자세한 내용은 Carbon for AI 가이드라인을 참고하세요.
AI로 되돌리기 (Revert to AI)
텍스트 입력과 텍스트 영역은 사용자 인터랙션에 따라 AI 변형과 비-AI 변형 사이를 전환할 수 있어요. 사용자가 AI가 제안한 콘텐츠를 수동으로 재정의하면 입력은 AI 변형에서 비-AI 변형으로 바뀝니다. 편집 후에도 사용자는 AI로 되돌리기 버튼을 통해 처음 AI 생성 콘텐츠로 다시 전환할 수 있어야 합니다.
관련 (Related)
- 폼 패턴 (Form pattern)
더 알아보기 (Learn more)
텍스트 입력은 사용자가 자유 형식 데이터를 입력할 때 쓰는 기본 입력 컴포넌트예요. 짧은 한 줄 입력에는 텍스트 입력을, 여러 줄이 될 수 있는 긴 입력에는 텍스트 영역을 사용하세요. 기본과 플루이드 스타일을 공간과 맥락에 맞게 고르고, 항상 라벨을 제공하며, 검증과 오류 상태를 잘 설계하는 게 중요합니다. AI 프레즌스 변형을 쓰면 AI 설명 가능성 기능을 컴포넌트에 더할 수 있어요.