Form

Form (폼)

폼은 사용자가 데이터를 제공하거나 옵션을 구성할 수 있게 하는 관련 입력 컨트롤 그룹이에요. 다양한 입력 컴포넌트와 레이아웃에 맞게 구성할 수 있는 핵심 컴포넌트입니다.

출처: Form

본문

폼 with AI label이 이제 안정(stable) 버전이 됐어요. 이 추가는 컴포넌트의 시각적 모양을 바꾸고, 컴포넌트에 AI가 있을 때 AI 설명 가능성 기능을 도입합니다. 자세한 내용은 AI 존재(AI presence) 섹션을 참고하세요.

개요 (Overview)

폼 컴포넌트는 다양한 사용 사례와 레이아웃에 맞게 구성할 수 있어요. 기본적으로 의도적으로 단순하며, 사용자가 자신의 필요에 맞게 구성할 책임이 있습니다. 폼을 구성·확장하는 다양한 방법에 대한 심층 디자인 지침은 폼 패턴(form pattern)을 참고하세요.

포맷 (Formatting)

구조 (Anatomy)

  • Default

  • Fluid

  • 헤더(Header, 선택): 제목과 설명을 헤더로 추가해 사용자에게 추가 컨텍스트나 지침을 제공할 수 있어요.

  • 폼 본문(Form body): 사용자가 정보를 제공하는 영역. 텍스트 필드, 체크박스 및 기타 여러 유형을 포함한 다양한 입력 필드를 통해 정보를 입력할 수 있습니다. 입력 컴포넌트는 사용자가 올바른 데이터를 제출하도록 하는 라벨과 헬퍼 텍스트를 포함합니다.

  • 푸터(Footer): 사용자가 폼에 입력한 데이터를 제출하거나 취소할 수 있는 액션을 제공해요.

스타일링 (Styling)

폼은 두 가지 스타일의 입력을 사용할 수 있어요: 기본(default)과 플루이드(fluid). 기능은 같지만 시각적으로 다르며 정렬 규칙도 다릅니다.

스타일 (Style) 모양 (Appearance) 정렬 (Alignment) 사용 사례 (Use case)
Default 라벨이 입력 필드 바깥과 위에 배치되는 전통적인 입력 스타일. 기본 폼은 작은(32px), 중간(40px), 큰(48px)의 세 가지 기본 입력 필드 크기를 모두 사용할 수 있음. 폼 입력이 각 컴포넌트를 32px/2rem 패딩으로 분리해 균등하게 쌓임. 입력 컴포넌트 사이에 여백이 필요하거나 더 작은 컴포넌트가 필요하거나, 복잡한 폼 같은 생산적 순간에 사용.
Fluid 라벨이 입력 필드 안에 배치되고 사용자 입력 텍스트와 정렬되는 대체 입력 스타일. 플루이드 입력은 64px 높이의 한 가지 크기만 있음. 폼 입력이 서로 사이 0px 패딩으로 딱 붙게 쌓임. 표현적 순간이나 더 큰 폼 컴포넌트가 특징 폼을 강조하는 데 도움이 될 때 사용.

정렬 (Alignment)

폼에서 입력 컴포넌트는 다른 모든 폼 컴포넌트와 세로로 정렬되어야 해요. 폼이 그리드 컬럼에 딱 붙게 정렬될지 거터에 걸칠지는 사용하는 폼 입력 스타일과 거터 모드에 따라 달라집니다. 기본 폼은 보통 넓은 거터 모드를 사용하며 세로 라벨 정렬을 우선해 그리드 컬럼에 딱 붙게 정렬됩니다. 플루이드 폼은 밀집 그리드를 사용하며 라벨 정렬을 어긋나게 하지 않고 거터에 걸칠 수 있어요. 플루이드 폼은 입력 사이에 세로·가로 공간을 절대 두지 않음으로써 건축적이고 응집력 있는 상태를 유지합니다.

넓은 거터 모드를 사용해 기본 폼 입력과 라벨을 그리드 컬럼에 정렬하세요.

기본 입력을 그리드 거터에 걸치지 마세요. 그렇게 하면 라벨이 다른 폼 요소와 어긋나게 됩니다.

밀집 거터 모드를 사용해 플루이드 컴포넌트를 서로 사이에 간격 없이 딱 붙게 쌓으세요.

플루이드 컴포넌트 사이에 세로·가로 공간을 추가하지 마세요. 플루이드 폼은 건축적이며 응집력 있는 단위로 유지되어야 합니다.

두 컬럼 폼 (Two column forms)

폼에 컬럼이 둘 이상이면 가능할 때 컬럼이 비례하고 그리드 컬럼에 정렬되어야 해요. 폼 컬럼 사이의 공간은 사용하는 거터 모드에 의해 결정되며, 기본 폼은 폼 컬럼 사이 32px 패딩의 넓은 거터 모드를, 플루이드 폼은 1px 패딩의 밀집 거터 모드를 사용합니다. 좁은 거터 모드(16px)는 종종 텍스트를 거터에 배치하므로 폼에서 보통 사용되지 않아요.

두 컬럼을 사용할 때는 행이 그룹으로 반응해야 해요. 예를 들어 왼쪽 컬럼의 폼 항목이 유효하지 않게 되어 오류 메시지 공간을 확보하기 위해 폼 콘텐츠를 아래로 밀면, 함께 있는 오른쪽 폼 항목도 필요한 공간을 수용하도록 커집니다.

세로 간격 (Vertical spacing)

컴포넌트 사이의 일반적인 권장 세로 간격은 32px이에요. 폼 간격에 대한 모든 지침과 권장 사항은 폼 패턴을 참고하세요.

콘텐츠 (Content)

라벨 (Labels)

효과적인 라벨링은 사용자가 텍스트 입력에 어떤 정보를 입력해야 하는지 이해하도록 돕습니다. 텍스트 필드에는 항상 라벨이 있어야 해요. 입력의 컨텍스트가 보이는 라벨의 필요성을 무효화하는 드문 경우가 있지만, 라벨 없는 디자인을 진행하기 전에 접근성 전문가와 상의할 것을 권합니다.

라벨 모범 사례 (Best practices for labels)

  • 제품 이름과 고유 명사를 제외한 모든 라벨에 문장식 대소문자(sentence-style capitalization)를 사용하세요.
  • 라벨을 짧고 간결하게 유지하세요.
  • 라벨 이름 뒤에 콜론을 사용하지 마세요.

기본값 (Default values)

가능한 곳에서는 프로그래밍 지원을 추가하세요. 오류를 줄이고 시간을 절약하기 위해 입력을 감지하고 미리 채우세요. 소프트웨어가 입력에 들어갈 값을 결정할 수 없을 때는 type-ahead를 사용해 제안하세요. 기본값, 감지된 값, 자동 완성 텍스트에는 문장식 대소문자를 사용하세요.

헬퍼 텍스트 (Helper text)

선택적인 헬퍼 텍스트는 사용자가 필드를 올바르게 완성하도록 돕는 관련 정보예요. 헬퍼 텍스트는 입력이 포커스될 때 항상 사용할 수 있어야 합니다. 올바른 데이터 형식을 설명하는 데 자주 사용됩니다. 헬퍼 텍스트는 기본 입력 아래에 지속적인 텍스트로 나타나며(플루이드 입력은 대신 툴팁을 사용하므로 헬퍼 텍스트를 사용할 수 없음), 사용자가 추가 노력 없이 참조할 수 있도록 항상 보이기 때문에 사용자를 돕는 선호되는 방법입니다.

헬퍼 텍스트 모범 사례 (Best practices for helper text)

  • 문장식 대소문자를 사용하고, 대부분의 경우 구두점이 있는 완전한 문장으로 텍스트를 작성하세요.
  • 사용될 때, 필드 아래에 지속적으로 나타나는 헬퍼 텍스트는 상태 변경이 발생하면 오류 또는 경고 메시지로 대체됩니다.

툴팁 도움 (Tooltip help)

폼 라벨과 인라인으로 툴팁을 추가할 수 있는데, 컨텍스트 설정처럼 사용자가 필드를 올바르게 완성하도록 돕는 추가적인 관련 없는 정보가 필요할 때 그렇습니다. 툴팁 콘텐츠는 필드나 사용자가 선택하는 옵션에 대한 더 심층적인 정보를 포함할 수 있어요. 필요하면 추가 정보나 참조에 대한 링크도 포함할 수 있습니다. 복잡한 지침이나 추가 컨텍스트가 적절한 특정 상황에서는 툴팁을 헬퍼 텍스트와 함께 사용할 수 있어요. 그러나 형식 콘텐츠 같은 폼 완성에 관한 모든 관련 보조 정보는 필드 아래의 헬퍼 텍스트로 간단하고 직접적으로 제시하고, 툴팁에 두지 않는 것이 권장됩니다.

플루이드 컴포넌트의 툴팁 (Tooltips in fluid components)

플루이드 입력은 툴팁에 중요 정보를 넣지 말라는 규칙의 예외예요. 건축적 특성 때문에 플루이드 입력은 헬퍼 텍스트에 필요한 필드 아래 공간을 제공하지 않습니다. 플루이드 입력을 사용할 때는 관련 여부와 관계없이 모든 보조 텍스트가 툴팁을 통해 제공됩니다.

자리 표시자 텍스트 (Placeholder text)

선택적인 자리 표시자 텍스트는 사용자 입력 텍스트보다 낮은 대비로 입력 필드 안에 나타나는 텍스트예요. 무엇을 입력할지에 대한 힌트나 예시를 제공합니다. 자리 표시자 텍스트는 사용자가 입력에 데이터를 입력하기 시작하면 사라집니다. 따라서 지속적인 라벨의 대체물로 사용해서는 안 되며 중요 정보를 포함해서도 안 됩니다. 때로는 사용자가 입력할 수 있는 종류의 예시를 제공하는 것이 유용합니다. 특정 예시를 자리 표시자 텍스트로 사용하는 것은 허용되지만 여전히 필수 정보를 포함해서는 안 됩니다.

자리 표시자 텍스트 모범 사례 (Best practices for placeholder text)

  • 문장식 대소문자를 사용하고, 대부분의 경우 구두점 없이 직접적인 진술로 텍스트를 작성하세요.
  • 자리 표시자 텍스트는 필수가 아니며 기본적으로 텍스트 입력 필드에 표시되지 않습니다.
  • 자리 표시자 텍스트는 사용자 인터랙션에 해로울 수 있으므로 필요할 때만 추가해야 해요.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

동작 (Behaviors)

선택 사항과 필수 필드 (Optional versus required fields)

폼 항목은 여러 요인에 따라 선택 사항 또는 필수로 라벨링될 수 있어요. IBM 제품에서 필수 또는 선택 사항을 사용하는 일반적인 구분은 폼의 복잡성입니다.

  • 단순 폼(Simple forms) - 일반적으로 더 짧고 사용자·소비자 중심이며, 가입·연락처 폼과 체크아웃 화면이 이에 해당합니다. 대부분의 필드는 필수인 경향이 있습니다.
  • 복잡한 폼(Complex forms) - 일반적으로 더 길고 제품 중심이며, Enterprise 소프트웨어를 구성하는 데 사용되는 속성과 설정을 포함합니다. 보통 최소한 하나의 필수 필드는 포함하지만, 대부분의 필드는 선택 사항인 경향이 있습니다.

필드의 대부분이 필수인지 선택 사항인지에 주목하세요. 제품 전체의 폼 필드 총 수가 처리 방식을 결정해야 하기 때문입니다. 사용되는 패턴은 제품 전체에서 일관되어야 하며, 최소한 제품 안의 같은 유형의 폼 모두 사이에서는 일관되어야 합니다.

  • 필드의 대부분이 필수라면 선택 사항 필드 라벨만 (optional)로 표시하세요.

  • 필드의 대부분이 선택 사항이라면 필수 필드 라벨만 (required)로 표시하세요.

  • Optional

  • Required

폼 컨트롤 (Form controls)

Carbon은 사용자가 데이터를 입력하거나 선택할 수 있게 하는 다양한 데이터 입력 컴포넌트를 제공해요. 컴포넌트는 세 가지 다른 상호작용 유형으로 나뉩니다.

유형 (Type) 개요 (Overview)
Free form inputs 자유 형식 텍스트 입력은 폼에서 가장 흔히 사용되는 컴포넌트. 사용자가 문자나 숫자의 어떤 조합이든 입력할 수 있게 함. 흔한 자유 형식 입력: text input과 text area.
Selection controls 선택 컨트롤은 사전 결정된 옵션에서 사용자에게 선택을 제공. 흔한 선택 컨트롤: checkboxes, radio buttons, file uploaders, toggles, select lists (combo box and multiselect).
Bound entry controls 경계 입력 컨트롤은 날짜·시간 같은 숫자 데이터를 입력할 수 있게 하고 사용자 입력을 특정 범위로 제한할 수 있음. 흔한 경계 입력 컨트롤: number input, date picker, slider 컴포넌트.

상태 (States)

다음은 폼에서 사용될 때 컴포넌트에 적용할 수 있는 공통 상태예요.

상태 (State) 언제 사용하나요 (When to use)
Enabled 텍스트 입력이 활성화되어 있지만 사용자가 직접 상호작용하지 않을 때. 보통 컴포넌트의 기본 또는 정상 상태라고 함. 활성 텍스트 입력 필드는 콘텐츠, 자리 표시자 텍스트, 또는 사용자 생성 콘텐츠를 포함할 수 있음.
Active 사용자가 필드에 적극적으로 콘텐츠를 입력하고 있을 때.
Focus 사용자가 텍스트 입력에 tabs 하거나 클릭하면 포커스되어, 사용자가 컴포넌트로 성공적으로 이동했음을 나타냄.
Error 사용자 입력이 유효하지 않거나 필수 텍스트 입력이 채워지지 않았을 때. 시스템 오류로 인해 발생할 수도 있음. 데이터를 제출·저장하기 전에 사용자 응답이 필요함.
Warning 예외 조건에 사용자의 주의를 환기해야 할 때. 그 조건은 오류가 아닐 수 있지만 해결되지 않으면 문제를 일으킬 수 있음.
Disabled 권한, 종속성, 사전 요구 사항 때문에 사용자가 텍스트 입력과 상호작용할 수 없을 때. 비활성 상태는 컴포넌트에서 인터랙티브 기능을 완전히 제거함. 스타일링은 WCAG 대비 준수 대상이 아님.
Skeleton 초기 페이지 로드 시 텍스트 입력이 아직 완전히 로드되지 않았음을 나타내는 데 사용.
Read-only 곧 제공 예정!
  • Default
  • Fluid
  • AI

추가 지침 (Additional guidance)

폼 패턴은 폼 컴포넌트에서 찾을 수 있는 정보에 추가적이고 정교한 지침을 제공해요. 아래는 패턴에서 사용할 수 있는 핵심 섹션 목록입니다.

주제 (Topic) 개요 (Overview)
Buttons in forms 폼과 관련된 버튼 정렬, 강조, 배치, 명명에 대한 지침을 제공.
Errors and validation 효과적이고 즉각적인 오류 메시징은 사용자가 문제를 이해하고 고치는 데 도움이 됨.
Form layout 폼의 레이아웃, 간격, 컬럼에 대한 추가 지침.
Designing for longer forms 아코디언과 다단계 폼을 위한 지침을 포함해 더 긴 폼을 덜 압도적으로 만드는 기법.
Form variants 폼은 사용 사례와 상황에 따라 전용 페이지, 사이드 패널, 다이얼로그로 제시될 수 있음.

AI 존재 (AI presence)

폼에는 폼에 AI가 있을 때 AI 시각적 스타일링을 취하는 수정(modification)이 있어요. 폼의 AI 변형은 AI 라벨이 추가된 것 외에는 일반 변형과 동일하게 동작하며, AI 라벨은 시각적 표시이자 설명 가능성 팝오버의 트리거 역할을 합니다.

폼의 AI 존재는 두 가지 방식으로 나타날 수 있어요: 광범위하게 폼 전체에, 또는 집중적으로 폼의 특정 부분에만. 폼 전체가 AI용으로 스타일링되면 사용자에게 폼의 모든 측면에 AI가 존재함을 나타냅니다. 폼 콘텐츠의 일부만 AI로 생성된다면 폼 전체가 아닌 해당 컴포넌트만 AI 존재 스타일링을 받아야 해요.

AI용 디자인에 대한 자세한 내용은 Carbon for AI 가이드라인을 참고하세요.

왼쪽에 전체 AI 존재가 있는 폼 예시, 오른쪽에 컴포넌트 기반 AI 존재가 있는 폼 예시.

컴포넌트 (Components)

  • Button
  • Checkbox
  • Combo box
  • Multiselect
  • Password input
  • Radio button
  • Text area
  • Text input
  • Toggle

패턴 (Patterns)

  • Dialogs
  • Notifications

더 알아보기 (Learn more)

폼은 사용자 데이터 입력과 옵션 구성을 위한 컨테이너예요. 기본·플루이드 스타일 입력과 간격 규칙을 일관되게 적용하고, 라벨·헬퍼 텍스트·툴팁을 적절히 조합해 사용자가 올바른 데이터를 제출하도록 도우세요. 필수/선택 필드 표기는 폼의 대부분이 어느 쪽인지에 따라 정하고, 폼 상태와 AI 존재를 상황에 맞게 적용하면 됩니다.