Patterns
Form & Feedback
Small components connect into a complete flow. This is the standard for input → validation → processing → feedback.작은 구성 요소를 연결해 완전한 흐름을 만듭니다. 입력 → 확인 → 처리 → 피드백의 기준입니다.
Example: setting interests관심사 설정 예시
Submit with the name empty or no interests picked to see the error flow, or fill everything in to see processing → done.이름을 비우거나 관심사를 선택하지 않고 제출해 오류 흐름을, 모두 입력해 처리 중 → 완료 흐름을 확인하세요.
Order of feedback피드백의 순서
| Situation상황 | Expression표현 |
|---|---|
| Before input입력 전 | Explain the purpose of the input and whether it's required입력 목적과 필수 여부 안내 |
| Error오류 | Show how to fix it near the field / move focus to that field문제 필드 가까이에 수정 방법 표시 / 해당 필드로 포커스 이동 |
| Processing처리 중 | Block duplicate submits with aria-busy and show progressaria-busy로 중복 제출을 막고 진행 상태 표시 |
| Done완료 | Say specifically what was completed완료된 내용을 구체적으로 안내 |
| Failure실패 | Keep the entered values / explain how to retry입력값 유지 / 재시도 방법 제시 |
Usage사용 가이드
Validate at the right time알맞은 때에 검증하기
Check a field when people leave it, then re-check as they type once it has an error.입력창을 벗어날 때 검사하고, 오류가 생긴 뒤에는 입력하는 동안 다시 검사합니다.
Don't flag a field as wrong while someone is still typing their first characters.사용자가 첫 글자를 입력하는 중인데 오류로 표시하지 않습니다.
Mark the exception예외만 표시하기
If most fields are required, mark only the optional ones with '(optional)'.대부분이 필수라면 선택 항목에만 '(선택)'을 붙입니다.
Don't rely on a red asterisk alone. It's easy to miss and means nothing to a screen reader.빨간 별표에만 의존하지 않습니다. 놓치기 쉽고 스크린 리더에는 의미가 없습니다.
Long forms get a summary긴 폼에는 요약을
On submit, list every error at the top with links to each field, and move focus to that list.제출 시 모든 오류를 위쪽에 각 필드 링크와 함께 나열하고, 포커스를 그 목록으로 옮깁니다.
Don't show only a toast saying 'Please fix the errors' and leave people searching.'오류를 수정해 주세요' 토스트만 띄우고 사용자가 직접 찾게 두지 않습니다.
Field states필드 상태
| State상태 | Visual시각 | Attribute속성 |
|---|---|---|
| Default기본 | 3:1 control border3:1 컨트롤 테두리 | - |
| Focus포커스 | 3px focus ring3px 포커스 링 | :focus-visible |
| Invalid오류 | Red border + message with icon빨간 테두리 + 아이콘과 메시지 | aria-invalid="true" |
| Disabled비활성 | Muted; explain why nearby흐리게, 이유를 근처에 설명 | disabled |
| Read-only읽기 전용 | Subtle background, still selectable옅은 배경, 선택은 가능 | readonly |
Words that match actions언어와 행동의 일치
Buttons say what actually happens. If you're not sure something was saved, don't show it as a success. Ask for only the minimum health or personal information the purpose requires.버튼에는 실제로 일어나는 행동을 적습니다. 저장 여부가 불확실하면 성공으로 표시하지 않습니다. 건강이나 개인 정보는 목적에 필요한 최소한만 요청합니다.