04 · Patterns · 입력 · 폼
폼 레이아웃Form Layout
라벨·입력·도움말·에러가 한 단위로 묶여 반복되는 형태. 필드 순서와 수직 리듬이 흐트러지면 폼의 체감 난이도가 급격히 올라갑니다.
기본 구조
필드 하나는 라벨 → 입력 → 도움말 → 에러 순으로 세로 배치합니다. 도움말은 입력 위가 아닌 아래에 두어야 스크린리더가 입력에 포커스할 때 aria-describedby로 자연스럽게 읽어줍니다.
로그인 ID로 사용됩니다. 변경은 설정에서 가능.
- · Label — 항상 입력 위, 필수는 별표 또는 ‘(선택)’ 라벨.
- · Input — 높이 40px, 테두리 1px, 포커스 시 accent.
- · HelpText — 입력 바로 아래, 12.5px, muted.
- · Error — 에러 시 HelpText를 대체하거나 아래로.
수직 리듬
필드 간 간격은 24px(gap-6)를 기본으로 합니다. 관련성이 높은 필드끼리는 16px(gap-4)로 묶고, 다른 섹션 사이는40px(gap-10)로 크게 벌립니다. 리듬이 살아야 눈이 쉽게 흐름을 따라갑니다.
Do· 일관된 간격
모든 필드 사이 24px. 섹션 전환은 눈에 보이는 Divider + 넓은 여백으로 분리해 “여기서 새로운 맥락이 시작된다”를 선언하세요.
Don't· 붙이기
필드를 12px 이하로 붙이면 라벨이 어느 입력의 것인지 모호해집니다. 이름과 전화처럼 쌍으로 묶은 2열 레이아웃이 아니라면 세로 붙이기는 피하세요.
그룹과 Fieldset
여러 필드가 하나의 목적으로 묶이면 Fieldset + legend로 그룹화합니다. 주소(우편번호·도로명·상세)처럼 의미가 하나로 모이는 케이스가 대표적입니다.
도움말과 에러의 공존
같은 필드에 도움말과 에러가 모두 필요하면 에러가 우선입니다. 에러가 있을 때 도움말은 숨기거나 에러 아래로 밀어내세요. 둘을 동시에 보여주면 시각적 노이즈만 늘어납니다.
- 도움말은 항상 같은 위치(입력 아래, 12~13px, muted)에.
- 에러는 빨간 아이콘 + 빨간 텍스트. 입력 테두리는 danger 색으로 전환.
aria-describedby는 도움말·에러 둘 다 참조 가능. 현재 표시되는 쪽만 연결하세요.
접근성
- 모든 입력은
<label>과htmlFor로 연결. placeholder는 라벨 대체가 아닙니다. - 필수 표시(별표)는 시각 힌트일 뿐.
aria-required="true"와 제출 시 에러 메시지로 반드시 보완하세요. - 탭 순서는 DOM 순서를 따릅니다. CSS로 컬럼 순서를 바꿨다면 접근성도 깨집니다.