04 · Patterns · 피드백 · 상태
오류 상태Error
무엇이 잘못되었고, 사용자가 지금 할 수 있는 일이 무엇인지. 오류는 사과보다 복구가 우선입니다.
3가지 레벨
- 필드 레벨 — 입력이 잘못됐을 때 해당 필드 아래. 빨간 텍스트 + 아이콘.
- 영역/페이지 레벨 — 특정 섹션의 데이터 로딩 실패. 영역 안에 메시지 + 재시도.
- 전역 레벨 — 네트워크 단절·서버 장애. 상단 배너(Alert)나 풀페이지 오류.
네트워크 오류
서버에 연결할 수 없습니다. 잠시 후 다시 시도해주세요.
설교 목록을 불러오지 못했습니다
서버와의 연결이 일시적으로 끊겼을 수 있습니다.
메시지 작성 3원칙
- 무엇이 잘못됐는지. 기술 용어는 피하고 사용자의 맥락으로.
- 왜 일어났는지 (가능한 범위에서). “네트워크 연결이 끊겼습니다”처럼.
- 지금 무엇을 할 수 있는지. ‘다시 시도’ 버튼, ‘교회 사무실 문의’ 링크, ‘이전으로 돌아가기’.
Do· 복구 가능성 먼저
“잠시 후 다시 시도해주세요”라는 안내와 재시도 버튼을 같이. 사용자가 바로 다음 행동으로 넘어갈 수 있어야 합니다.
Don't· 기술 에러 노출
“TypeError: cannot read property x of undefined”는 로그에만. 사용자는 뭘 해야 할지 전혀 알 수 없습니다.
HTTP 상태별 가이드
| 상태 | 메시지 | 주요 액션 |
|---|---|---|
| 400 | 요청이 올바르지 않습니다. | 입력 수정 |
| 401 / 403 | 로그인이 필요하거나 권한이 없습니다. | 로그인하기 |
| 404 | 요청한 페이지를 찾을 수 없습니다. | 홈으로 · 검색 |
| 500 / 503 | 잠시 후 다시 시도해주세요. | 재시도 · 상태 페이지 |
회복 경로
- 네트워크 오류는 자동 재시도(지수 백오프)를 배경에서. 3회 실패 후 사용자에게 노출.
- 입력 중이던 값은 반드시 보존. 오류가 폼을 초기화하지 않도록.
- 전역 오류 화면에는 ‘홈으로’, ‘뒤로’, ‘교회 사무실’ 최소 3개 출구.
접근성
- 즉시 알려야 할 오류는
role="alert". 상태 업데이트형은role="status". - 색만으로 오류를 구분하지 않기. 아이콘·텍스트·테두리를 함께 사용.
- 재시도 버튼은 명시적인 텍스트(“다시 시도”). ‘OK’는 피하세요.