텍스트 필드, 제대로 쓰는 법
텍스트 필드의 사용방법과 좋은 사례
텍스트 필드의 유형
텍스트 필드(Text Field)는 텍스트를 입력하거나 편집할 수 있게 하는 컴포넌트입니다. 텍스트 필드는 다음과 같이 두 가지 유형으로 나눌 수 있습니다. 본 글에서는 텍스트 필드의 사용방법과 좋은 사례에 대해 알아보겠습니다.
❶ Filled text field (채워진 텍스트 필드)
❷ Outlined text field (외곽선 텍스트 필드)
채워진 텍스트 필드의 구성
채워진 텍스트 필드(Filled text field)는 Enabled와 Focused 상태에 따라 다음과 같이 구성됩니다.
Enabled
❶ Container (컨테이너)
❷ Leading icon (선행 아이콘, Optional)
❸ Label text (empty) (레이블 텍스트)
❹ Active Indicator (enabled) (활성 인디케이터)
❺ Supporting text (보조 텍스트, Optional)
Focused
❻ Label text (Populated) (레이블 텍스트)
❼ Caret (캐럿, 텍스트 커서)
❽ Trailing icon (후행 아이콘, Optional)
❾ Input text (입력 텍스트)
❿ Active indicator (focused) (활성 인디케이터)
외곽선 텍스트 필드의 구성
외곽선 텍스트 필드(Outlined text field)는 Enabled와 Focused 상태에 따라 다음과 같이 구성됩니다. 외곽선 텍스트 필드는 채워진 텍스트 필드보다 시각적 강조가 덜하므로, 레이아웃을 더 간결하게 만드는 데 도움이 됩니다.
Enabled
❶ Container Outline (enable) (컨테이너 외곽선)
❷ Leading icon (선행 아이콘, Optional)
❸ Label text (unpopulated) (레이블 텍스트)
❹ Supporting text (보조 텍스트, Optional)
Focused
❺ Label text (Populated) (레이블 텍스트)
❻ Caret (캐럿, 텍스트 커서)
❼ Trailing icon (후행 아이콘, Optional)
❽ Input text (입력 텍스트)
❾ Container Outline (focused) (컨테이너 외곽선)
텍스트 필드 사용 시 고려사항
다음 내용은 텍스트 필드 사용 시 고려해야 할 사항입니다.
텍스트 필드는 연락처나 결제 정보 등과 같이 사용자가 텍스트를 입력해야 하는 경우 사용합니다.
채워진 텍스트 필드와 외곽선 텍스트 필드 두 가지 유형으로 구분됩니다. 두 유형 모두 컨테이너를 사용하여 상호작용에 대한 시각적 신호를 제공합니다. 기능 역시 동일합니다.
텍스트 필드 선택
두 가지 유형의 텍스트 필드는 동일한 기능을 제공하므로, 어떤 유형을 사용할지는 스타일에 따라 결정할 수 있습니다. 다음 기준을 고려하여 적절한 유형을 선택할 수 있습니다.
앱의 비주얼 스타일과 가장 잘 어울리는지
UI의 목표를 가장 잘 반영할 수 있는지
버튼이나 주변 콘텐츠와 명확하게 구별될 수 있는지
동일 화면에서의 두 가지 유형의 텍스트 필드 사용
두 가지 유형의 텍스트 필드를 UI에서 함께 사용할 경우, 동일한 영역에서 혼합하지 말고 각 섹션별로 일관되게 사용해야 합니다.
예를 들어, 한 섹션에서는 외곽선(Outlined) 텍스트 필드를 사용하고, 다른 섹션에서는 채워진(Filled) 텍스트 필드를 사용하는 방식이 적절합니다.
컨테이너
컨테이너는 텍스트 필드와 주변 콘텐츠 간의 대비를 생성하여 텍스트 필드의 인지 가능성을 향상시킵니다.
배경(Fill)과 테두리(Stroke)
텍스트 필드의 컨테이너는 배경(Fill)과 테두리(Stroke)를 가집니다.
테두리는 전체 컨테이너를 둘러싸거나 하단 가장자리에만 적용될 수 있습니다.
텍스트 필드가 활성화되면 테두리의 색상과 두께가 변경될 수 있습니다.
모서리 라운드 처리(Rounded Corners)
채워진(Filled) 텍스트 필드는 상단 모서리는 둥글고, 하단 모서리는 직각 형태를 가집니다.
외곽선(Outlined) 텍스트 필드는 전체 모서리가 둥근 형태를 가집니다.
다만 위 스타일은 Google의 Material 3의 기준이며, 디자인 시스템마다 다른 스타일의 컨테이너를 가지고 있으니 컨테이너의 역할만 참고해도 좋을 것 같습니다.
레이블 텍스트
레이블(Label) 텍스트는 텍스트 필드에서 사용자에게 어떤 정보를 입력해야 하는지 안내하는 역할을 합니다. 모든 텍스트 필드는 레이블을 포함해야 합니다.
레이블 텍스트의 정렬 및 배치
레이블 텍스트는 입력 텍스트와 정렬되어야 하며, 항상 표시되어야 합니다.
레이블은 텍스트 필드의 중앙에 배치되거나, 컨테이너의 상단 근처에 위치할 수 있습니다.
레이블 텍스트의 가독성 유지
레이블 텍스트는 잘리지 않도록 유지해야 하며, 여러 줄로 나뉘지 않아야 합니다.
짧고 명확하게 작성하여 사용자가 쉽게 이해할 수 있도록 해야 합니다.
인접 레이블
텍스트 필드는 별도의 인접한 레이블이 필드의 용도를 명확히 설명하는 경우, 자체적인 레이블이 필요하지 않습니다. 인접 레이블은 텍스트 필드 컨테이너의 시작 가장자리(Leading Edge)에 정렬되어야 합니다.
필수 텍스트 인디케이터
필드가 필수임을 나타내려면 레이블 텍스트 옆에 별표(*)를 표시하고, 보조 텍스트에서 별표가 필수 필드를 의미한다고 설명해야 합니다.
일부 필드만 필수인 경우, 모든 필수 필드에 별표(*)를 표시해야 합니다.
대부분의 필드가 필수인 경우, 선택 필드를 따로 표시하며 레이블 텍스트 옆에 "(선택 사항)"(optional)을 추가해야 합니다.
필수 입력 표시가 특정 색상을 가질 경우, 별표도 (*) 동일한 색상을 사용해야 합니다.
입력 텍스트
입력 텍스트(Input text)는 사용자가 텍스트 필드에 입력한 텍스트입니다. 텍스트 필드는 사용자 입력 텍스트를 다음과 같은 방식으로 표시할 수 있습니다:
단일 줄 텍스트 필드(Single-line text fields)는 한 줄의 텍스트만 표시합니다.
다중 줄 텍스트 필드(Multi-line text fields)는 여러 줄의 입력을 수용할 수 있도록 크기가 확장됩니다.
텍스트 영역(Text areas)은 고정된 높이를 가지는 필드입니다.
접두사 텍스트
접두사 텍스트(Prefix text)는 텍스트 필드에 포함될 수 있으며, 화폐 기호와 같은 요소를 표시하는 데 사용됩니다.
접미사 텍스트
접미사 텍스트(Suffix text)는 텍스트 필드에 포함될 수 있으며, 단위 표시 또는 이메일 도메인과 같은 요소를 나타내는 데 사용됩니다.
보조 텍스트 · 문자 수 카운터
보조 텍스트는 입력 필드에 대한 추가 정보를 제공하며, 해당 입력이 어떻게 사용될지를 설명합니다. 보조 텍스트는 이상적으로 한 줄만 차지해야 하지만, 필요한 경우 여러 줄로 줄 바꿈 될 수 있으며, 항상 표시되거나 포커스를 받을 때만 표시될 수도 있습니다.
문자 또는 단어 수 카운터는 입력 제한이 있는 경우 사용해야 합니다. 카운터는 사용된 문자 수와 총 문자 제한을 함께 표시합니다.
오류 텍스트(Error text)
내용을 검증하는 텍스트 필드(예: 비밀번호 입력)에서는, 필요한 경우 보조 텍스트를 오류 텍스트로 대체해야 합니다. 보조 텍스트를 오류 텍스트로 전환하면 레이아웃에 새로운 줄이 추가되는 것을 방지하여, 기존 콘텐츠의 위치가 변경되는 것을 막을 수 있습니다.
오류가 하나만 발생할 가능성이 있는 경우, 오류 텍스트는 해당 오류를 피하는 방법을 설명해야 합니다.
여러 가지 오류가 발생할 수 있는 경우, 오류 텍스트는 가장 발생 가능성이 높은 오류를 피하는 방법을 설명해야 합니다.
오류 아이콘(Error icon)
텍스트 필드가 오류 상태일 때, 오류 아이콘을 표시하는 것이 강력하게 권장됩니다. 오류 아이콘은 시각적 장애가 있는 사람들에게 오류를 강조하여 인식할 수 있도록 돕고, 추가적인 감각적 피드백을 제공합니다.
아이콘 및 이미지(Icons & images)
텍스트 필드에서 아이콘은 선택 사항입니다. 아이콘은 유효한 입력 방법을 나타내거나(예: 마이크 아이콘), 추가 기능에 접근할 수 있도록 하거나(예: 입력 내용 지우기), 오류 상태를 표현하는 용도로 사용될 수 있습니다.
선행(Leading) 및 후행(Trailing) 아이콘의 위치는 LTR(왼쪽에서 오른쪽) 또는 RTL(오른쪽에서 왼쪽) 문맥에 따라 변경됩니다. 이미지는 텍스트 필드 내부에 배치될 수 있으며, 이 크기는 필드 내 상하 패딩을 최적화하고 아이콘 크기 권장 사항과 일관성을 유지합니다.
❶ 아이콘 요소(Icon signifier)
텍스트 필드에서 입력해야 할 유형을 설명하며, 중첩된 컴포넌트의 터치 타겟 역할을 할 수 있음 (예: 캘린더 아이콘을 눌러 날짜 선택기 열기)
❷ 유효성 및 오류 아이콘(Valid or error icon)
입력이 유효한지 또는 오류 상태인지 표시하여 색상만으로 오류를 전달할 수 없는 사용자(색각 이상 포함)를 고려
❸ 지우기 아이콘(Clear icon)
입력 필드의 내용을 한 번에 삭제할 수 있도록 하며, 입력 텍스트가 있을 때만 발생
❹ 음성 입력 아이콘(Voice input icon)
마이크 아이콘을 통해 음성 입력이 가능함을 나타냄
❺ 드롭다운 아이콘(Dropdown icon)
드롭다운 화살표를 통해 텍스트 필드에 중첩된 선택 요소가 있음을 나타냄
❻ 이미지(Image)
특정 데이터 입력을 직관적으로 안내하는 역할 (예: 신용카드 정보를 입력할 때 카드 이미지 제공)
읽기 전용 필드(Read-only fields)
읽기 전용 텍스트 필드는 미리 입력된 텍스트를 표시하며, 사용자가 수정할 수 없습니다. 읽기 전용 필드는 일반 텍스트 필드와 동일한 스타일을 가지지만, 읽기 전용임이 명확하게 표시되어야 합니다.
텍스트 필드의 좋은 사례
텍스트 필드의 좋은 사례를 다양한 특징별로 선별해 보았으니, 참고하여 활용하면 좋겠습니다.
Grab Driver외곽선 텍스트 필드로 구성되었으며, 국가 선택을 이미지와 드롭다운 아이콘이 포함된 별도의 텍스트 필드로 표현하였습니다.
Bumble최근 많이 사용되는 AI 아이콘이 선행 아이콘으로 사용된 모습입니다. 채워진 텍스트 필드를 사용하였으나, 레이블 텍스트가 없고 단독으로 사용되어 복잡도가 낮습니다.
AllTrails외곽선 텍스트 필드가 사용되었으며, 하단의 텍스트 필드는 텍스트 줄 바꿈에 따라 늘어나거나 고정된 크기를 가지는 것으로 보입니다.
Gojek채워진 텍스트 필드의 배경과 외곽선 텍스트 필드의 외곽선이 섞인 스타일을 가지고 있습니다. 텍스트 필드 내부에 숫자 카운터 텍스트가 포함되어 있습니다.
Bumble외곽선 텍스트 필드가 사용되었으며, 레이블 텍스트가 텍스트 필드 외부에 배치되었습니다.
마치며
텍스트 필드는 사용자가 입력해야 할 내용을 쉽게 이해할 수 있도록 도우며, 오류 메시지나 보조 텍스트를 사용하여 입력 가이드 역할을 수행합니다.
그러나 텍스트 필드가 많아지면 사용자가 부담을 느낄 수 있으며, 사용자가 입력한 데이터에 대해 즉각적인 피드백을 제공하지 않으면, 오류 메시지를 보고 다시 수정해야 하는 불편함이 생길 수 있습니다. 따라서 페이지 내에 복잡도가 너무 높지 않게 구성하고 적절한 피드백과 보조 텍스트를 제공할 필요가 있습니다.
텍스트 필드에 대한 구체적인 지침은 아래 가이드에서 확인하실 수 있습니다. 추가적으로 유사한 생김새를 가진 검색 필드에 대해서도 아래 글을 통해 확인하실 수 있습니다.
