React 오류 처리 UX 완전 정복: 실패 상황에서도 친절한 앱 만들기
🚨 React 앱에서 오류 처리 UX 제대로 설계하기
실패했을 때도 당황하지 않게 만드는 사용자 경험 전략
❗왜 오류 처리 UX가 중요한가요?
사용자가 앱을 이용하다가 어떤 작업을 실패했을 때,
가장 당황스러운 건 “아무 반응이 없을 때”입니다.
- 저장 버튼을 눌렀는데 아무 변화 없음
- API 요청 실패인데 에러 메시지가 없음
- 화면이 멈춘 것처럼 보이고, 어디서부터 잘못된 건지 알 수 없음
이럴 때 사용자는 두 가지 행동을 합니다.
- 다시 한 번 시도해보지만 확신이 없음
- 앱을 떠남 (또는 앱이 고장 났다고 느낌)
즉, 오류 처리 UX는 앱의 신뢰도와 직결된 요소입니다.
✅ 오류 UX의 기본 원칙
- 사용자에게 무슨 일이 일어났는지 설명할 것
- 그 상황에서 사용자가 할 수 있는 조치를 제안할 것
- 가능하다면 다시 시도하거나 피할 수 있게 만들 것
1. API 실패에 대한 피드백 처리
React 앱은 대부분 비동기 요청으로 데이터를 주고받습니다.
하지만 try-catch만 해두고 사용자에게 아무 것도 알리지 않으면 UX 실패입니다.
try {
await axios.post('/submit', data);
} catch (err) {
console.error(err); // ❌ 콘솔만 찍으면 UX 실패
}
✅ 개선된 패턴
try {
await axios.post('/submit', data);
toast.success('저장에 성공했습니다!');
} catch (err) {
toast.error('저장에 실패했습니다. 다시 시도해주세요.');
}
📌 react-toastify, react-hot-toast, notistack 등으로 피드백을 구성해보세요.
2. Form 제출 시 에러 메시지 처리
폼에서 입력이 잘못되었을 때는
어느 필드가 왜 잘못되었는지를 명확하게 안내해줘야 합니다.
❌ Bad UX 예시
- 버튼 클릭 후 아무 반응 없음
- 필수 입력 안 했는데 어떤 필드인지 모름
✅ Good UX 구성
{errors.email && <p className="error-msg">이메일 형식이 잘못되었습니다.</p>}
{errors.password && <p className="error-msg">비밀번호는 8자 이상이어야 합니다.</p>}
에러 메시지는 구체적이고 행동 지시가 포함되어야 해요.
❌ "에러 발생" → ❌ 불친절
✅ "이메일 주소가 올바르지 않습니다. 예: user@example.com"
3. 에러 경로는 fallback을 마련하자 (ErrorBoundary)
React에서 런타임 에러가 발생하면 전체 앱이 멈출 수 있습니다.
이를 방지하려면 ErrorBoundary를 도입해야 합니다.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <p>문제가 발생했어요. 잠시 후 다시 시도해주세요.</p>;
}
return this.props.children;
}
}
사용 방법:
<ErrorBoundary>
<ComponentThatMayCrash />
</ErrorBoundary>
📌 Next.js나 CRA에서는 공식적으로 권장되는 방식이에요.
📌 Suspense fallback과 함께 쓰면 더욱 강력한 UX 설계가 가능합니다.
4. 사용자에게 ‘선택지’를 제공하는 UX
오류가 발생했을 때 “막기”만 하지 말고,
“다시 시도” / “홈으로 이동” / “로그아웃” 등의 선택지를 줘야 합니다.
{error && (
<div className="error-box">
<p>서버와 연결할 수 없습니다. 네트워크 상태를 확인해주세요.</p>
<button onClick={retry}>다시 시도</button>
<button onClick={() => navigate('/')}>홈으로</button>
</div>
)}
5. 페이지 단위 오류: 404 / 500 UX
단순한 “404 not found”보다
재미와 안내, CTA 버튼이 있는 UX가 필요합니다.
예시 UX
- "찾고 계신 페이지가 사라졌어요 😢"
- "홈으로 돌아가기"
- "최근 본 페이지로 이동"
404 페이지도 브랜드 정체성을 담는 공간으로 활용할 수 있어요.
6. 오류 처리 UX 체크리스트
| 항목 | 체크 |
|---|---|
| 에러 발생 시 사용자에게 메시지를 보여주는가? | ✅ |
| 에러 메시지가 사용자가 이해할 수 있는 언어인가? | ✅ |
| 에러 발생 시 다시 시도할 수 있는 방법이 제공되는가? | ✅ |
| Form 오류 시 각 필드별로 안내가 있는가? | ✅ |
| 전체 앱 에러 발생 시 fallback UI가 있는가? | ✅ |
| 404/500 페이지에 사용자 안내가 있는가? | ✅ |
| 로그로만 남기고 피드백 안 하는 경우는 없는가? | ❌ 지양 |
✅ 마무리 정리
React 앱의 UX는 성공 흐름만 잘 만드는 게 아닙니다.
실패했을 때도 친절하게 안내하는 것이 진짜 UX 설계입니다.
✔ 핵심 요약
- 비동기 요청 실패 시 사용자에게 알림 제공
- Form 에러는 구체적 메시지 + 위치 강조
- ErrorBoundary로 앱 전체 멈춤 방지
- 에러 발생 시 선택지 제공
- 404/500 페이지 UX도 브랜드 요소로
- 콘솔 에러만 찍는 건 이제 그만!
실패했을 때도 친절한 앱.
그것이 좋은 프론트엔드의 첫걸음입니다 😊