v0.10.0

ComponentsP3 본문

FormMessage

폼 레벨(Tier 2) 인라인 메시지 — 단일 필드에 귀속되지 않는 제출 실패·계정 잠금을 CTA 바로 위에 컴팩트하게. 메시지 위계의 가운데 층.

마지막 업데이트 2026-06-13

한눈에#

FormMessage는 한 필드에 귀속되지 않는 폼 단위 피드백(인증 실패·계정 잠금·레이트리밋·네트워크 오류)을 제출 버튼 바로 위에 인라인으로 노출합니다. Alert(상단 배너)보다 가볍고, 폼 흐름 안에 머뭅니다.

조직 SSO 사용자는 SSO로 계속해 주세요.
  • 폼 레벨 Tier 2
  • CTA 바로 위
  • 무배경 *-text 잉크
  • error=role=alert

Alert와 달리 배경 틴트·좌측 보더가 없습니다 — surface 위 AA 보장 잉크로 가볍게 머뭅니다

메시지 위계#

WDS는 메시지를 범위(scope) 기준 3층으로 둡니다. 같은 메시지를 두 층에 중복으로 띄우지 마세요.

Tier범위컴포넌트 · 위치예
1 필드단일 입력FormField error/description — 인풋 바로 아래형식·필수 오류, 요구사항 체크리스트, 강도, Caps Lock
2 폼교차필드·비필드FormMessage — CTA 바로 위인증 실패(제너릭), 계정 잠금, 레이트리밋, 네트워크
3 페이지/일시전역·비차단Alert(상단 배너) · Toast(일시)점검·장애 공지, 저장 완료 알림

긴/다중 오류 폼에서는 Tier 3 Alert를 상단 오류 요약으로 함께 쓰되, 각 필드의 Tier 1 인라인 메시지와 페어로 둡니다. 짧은 인증 폼(로그인 등)은 Tier 1 + Tier 2만으로 충분합니다.

사용 시점#

특정 필드로 귀속되지 않는 폼 단위 피드백이면 FormMessage — 필드 오류나 페이지 공지는 다른 층입니다.

쓴다

로그인 실패(제너릭)·계정 잠금·레이트리밋처럼 폼 전체에 걸린 지속 메시지를 CTA 바로 위에

대신 FormField
FormField

한 필드의 형식·필수 오류(Tier 1, 인풋 바로 아래)

대신 Alert
Alert

페이지 전역 공지·긴 폼 상단 요약(Tier 3)

변형#

로그인 시도가 많아 약 30초 후 다시 시도해 주세요.
인증 메일을 보냈습니다. 메일함을 확인하세요.
조직 SSO 사용자는 SSO로 계속해 주세요.
의미 4종 — *-text 잉크(무배경, AA 보장)

Alert와 달리 배경 틴트·좌측 보더가 없습니다 — 아이콘과 텍스트가 *-text 잉크로, surface 위 AA가 보장된 페어를 그대로 씁니다. 폼 안에 가볍게 머무는 것이 의도입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { FormMessage } from '@wds/ui-web';

<FormMessage>이메일 또는 비밀번호를 확인해 주세요.</FormMessage>

검증 타이밍#

인라인 검증은 늦게 벌하고 일찍 보상합니다(reward early, punish late).

  • 제출이 기준선 — 비거나 입력 중인 필드는 검증하지 않습니다.
  • 인라인 오류는 blur(필드 이탈) 시 표시하고, 이미 오류인 필드는 키 입력 즉시 해제합니다.
  • Tier 2 FormMessage는 보통 제출 직후 나타나며, 성공·정정 시 즉시 사라집니다.

Props#

Prop타입기본값설명
variant'info' | 'success' | 'warning' | 'error''error'의미 색 — error만 role="alert", 그 외 role="status"
childrenReactNode—메시지 본문(단문, 필수)
…restHTMLAttributes<div>—id·className 등 전달

접근성#

  • error → role="alert"(즉시 낭독), 그 외 → role="status"(폴라이트 낭독) — 제출 직후 포커스를 옮기지 않고도 결과가 낭독됩니다(WCAG 2.2 §4.1.3).
  • 아이콘은 장식(aria-hidden) — 의미는 색 + 텍스트가 병행 전달(색맹 안전, §1.4.1).
  • 잉크는 *-text 토큰 — 라이트/다크 모두 AA 대비가 빌드 게이트로 보장됩니다.
  • 로그인 실패 문구는 제너릭으로 — 계정 열거(account enumeration) 방지(OWASP).

토큰#

component 토큰 없이 semantic을 직접 소비합니다.

속성토큰
잉크(아이콘+텍스트)color.info/success/warning/error-text (AA 보장)
본문font-size.body-2
형태space.2 · icon.size-sm

관련#