에러 페이지 UX: 404·500·오프라인 상태를 기회로 바꾸는 설계

UX 디자인

에러 페이지404 UX오류 상태Empty StateUX 카피

이 글은 누구를 위한 것인가

  • 기본 nginx 404 페이지를 그대로 쓰고 있는 팀
  • 에러 페이지에서 사용자가 어디로 가야 할지 모르는 상황
  • 브랜드 개성을 에러 페이지에 담고 싶은 디자이너

들어가며

404는 실패가 아니라 기회다. 사용자가 길을 잃었을 때 친절하게 길을 안내하면 이탈하지 않는다. 좋은 에러 페이지는 문제를 인정하고, 다음 행동을 명확히 제시한다.

이 글은 bluefoxdev.kr의 에러 상태 UX 가이드 를 참고하여 작성했습니다.

1. 에러 유형별 UX 전략

[에러 상태별 메시지 전략]

404 - 페이지 없음:
  원인: URL 오타, 삭제된 콘텐츠, 링크 오류
  메시지: "찾으시는 페이지가 없어요"
  복구: 홈으로 가기 + 검색 + 인기 카테고리
  톤: 가볍고 친근하게

500 - 서버 오류:
  원인: 서버 에러, 예상치 못한 오류
  메시지: "서버에 문제가 생겼어요. 곧 복구될 거예요."
  복구: 새로고침 버튼 + 고객센터 링크
  톤: 사과하되 불안 유발 금지

503 - 점검 중:
  원인: 예정된 유지보수
  메시지: "더 나은 서비스를 위해 점검 중이에요"
  복구: 예상 복구 시간 + SNS/이메일 알림 구독
  톤: 긍정적, 기대감

오프라인:
  원인: 인터넷 연결 없음
  메시지: "인터넷에 연결되어 있지 않아요"
  복구: 연결 확인 후 자동 재시도
  톤: 중립적, 기술적이지 않게

Empty State (빈 상태):
  원인: 데이터 없음, 첫 사용
  메시지: "아직 [내용]이 없어요"
  복구: 첫 행동 유도 CTA
  톤: 격려, 다음 행동 유도

2. 에러 페이지 구현

// Next.js 404 페이지
// app/not-found.tsx
import Link from "next/link";

export default function NotFound() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center max-w-md px-4">
        {/* 일러스트 또는 애니메이션 */}
        <div className="text-8xl mb-6 animate-bounce">🔍</div>
        
        <h1 className="text-2xl font-bold mb-2">
          앗, 페이지를 찾을 수 없어요
        </h1>
        <p className="text-gray-500 mb-8">
          주소를 다시 확인하거나, 아래에서 찾고 싶은 것을 검색해보세요.
        </p>
        
        {/* 검색 박스 */}
        <form action="/search" className="flex gap-2 mb-6">
          <input
            name="q"
            type="search"
            placeholder="상품, 브랜드 검색..."
            className="flex-1 px-4 py-2 border rounded-lg"
          />
          <button className="px-4 py-2 bg-blue-600 text-white rounded-lg">
            검색
          </button>
        </form>
        
        {/* 복구 경로 */}
        <div className="flex gap-3 justify-center flex-wrap">
          <Link href="/" className="px-4 py-2 bg-gray-100 rounded-lg text-sm hover:bg-gray-200">
            홈으로
          </Link>
          <Link href="/products" className="px-4 py-2 bg-gray-100 rounded-lg text-sm hover:bg-gray-200">
            전체 상품
          </Link>
          <Link href="/sale" className="px-4 py-2 bg-red-50 text-red-600 rounded-lg text-sm hover:bg-red-100">
            세일 상품
          </Link>
        </div>
      </div>
    </div>
  );
}

// app/error.tsx - 500 에러
"use client";
export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center max-w-md px-4">
        <div className="text-7xl mb-6">🛠️</div>
        <h1 className="text-2xl font-bold mb-2">서버에 문제가 생겼어요</h1>
        <p className="text-gray-500 mb-8">
          잠시 후 다시 시도하거나, 문제가 계속되면 고객센터에 문의해주세요.
        </p>
        <div className="flex gap-3 justify-center">
          <button
            onClick={reset}
            className="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium"
          >
            다시 시도
          </button>
          <a
            href="/help"
            className="px-6 py-3 border rounded-lg font-medium"
          >
            고객센터
          </a>
        </div>
      </div>
    </div>
  );
}

마무리

에러 페이지 UX의 3원칙: 사과(문제를 인정), 안내(다음 행동), 회복(이탈 방지). "죄송합니다" 한 마디보다 "여기서 다음에 뭘 하실 수 있어요"가 훨씬 중요하다. 검색 바 하나 추가하는 것만으로 404 이탈률을 20-30% 줄일 수 있다.