오류 상태 일러스트레이션: 문제가 생긴 제품의 순간을 유용하게 만드는 방법

오류 상태는 장식할 기회가 아닙니다. 복구를 위한 순간입니다.

무언가 문제가 생기면 사용자는 이미 추가로 주의를 기울이고 있습니다. 좋은 일러스트레이션은 불안감을 줄일 수 있지만, 나쁜 일러스트레이션은 제품을 가볍거나 문제를 회피하는 것처럼 보이게 할 수 있습니다.

오류 상태 일러스트레이션의 목표는 간단합니다. 그 순간을 이해하기 쉽고, 차분하며, 해결 가능한 것으로 느끼게 만드는 것입니다.

오류 일러스트레이션의 역할

오류 일러스트레이션은 다음 3가지 중 하나를 해야 합니다.

1. 문제 유형을 알려 주기 — 파일 누락, 연결 실패, 권한 문제, 오프라인 상태를 나타냅니다.
2. 감정적 긴장 완화하기 — 화면이 덜 위협적으로 느껴지게 합니다.
3. 복구 방법 제시하기 — 다시 시도하기, 다시 연결하기, 고객 지원에 문의하기, 돌아가기, 복원하기, 새로고침하기를 안내합니다.

이 중 어느 것도 하지 못한다면 제거하세요.

예시: 친근하지만 문제가 분명한 경우

출처: David Revoy의 Erreur 404 일러스트레이션, CC BY 4.0.

이 일러스트레이션이 효과적인 이유는 실패를 재미있는 일인 것처럼 꾸미지 않으면서도 감정을 잘 전달하기 때문입니다. 장면은 “무언가 잘못되었다”는 사실을 즉시 전달하지만, 분위기는 불안감을 주기보다 친근합니다.

제품 팀이 목표로 삼아야 하는 것이 바로 이 균형입니다.

오류 심각도에 맞춰 일러스트레이션 선택하기

모든 오류를 같은 방식으로 시각화할 필요는 없습니다.

낮은 심각도

예: 검색 결과 없음, 업로드할 항목 없음, 선택 사항인 연동이 연결되지 않은 경우.

가볍고 친근한 일러스트레이션을 사용하세요. 마스코트가 호기심을 보이거나 주변을 살피거나 다음 행동을 부드럽게 가리키는 모습을 활용할 수 있습니다.

중간 심각도

예: 저장 실패, 결제 시도 실패, 가져오기 오류, 요청 시간 초과.

차분한 우려를 표현하세요. 일러스트레이션은 마찰이 발생했다는 사실을 인정하되, 이를 농담처럼 다루어서는 안 됩니다. 다시 시도하거나 문제를 해결할 수 있는 명확한 경로를 추가하세요.

심각도 높음

예: 데이터 손실 위험, 보안 문제, 계정 잠금, 결제 중단.

일러스트는 최소화하거나 사용하지 않습니다. 직접적인 안내 문구, 지원 경로, 신뢰감을 우선하세요. 이 경우 만화풍 마스코트를 사용하면 무례하게 느껴질 수 있습니다.

도움이 되는 오류 상태의 구성 요소

완성도 높은 오류 상태는 4가지 요소로 구성됩니다:

1. 쉬운 말로 쓴 제목

나쁜 예: Something went wrong

더 나은 예: We could not save your changes

제목에는 무엇이 실패했는지 명확히 드러나야 합니다.

2. 구체적인 설명

문제가 일시적인지, 로컬 환경에서 발생했는지, 권한과 관련된 것인지, 아니면 원인을 알 수 없는지 사용자에게 알려주세요.

3. 복구 작업

주요 작업은 1가지만 두는 것이 좋습니다:

• 업로드 재시도
• 연동 다시 연결
• 초안 복원
• 고객 지원팀에 문의
• 대시보드로 돌아가기

4. 보조 일러스트

이미지는 메시지를 강화해야 합니다. 문구에서 업로드에 실패했다고 안내한다면, 일러스트에는 떨어진 파일, 공구 상자 또는 작은 화면을 수리하는 마스코트를 보여줄 수 있습니다.

오류 상황에 잘 어울리는 마스코트 포즈

오류 상태에 잘 어울리는 마스코트 포즈는 다음과 같습니다:

• 공구를 들고 있는 모습
• 망가진 물체를 살펴보는 모습
• 재시도 작업을 가리키는 모습
• 걱정스러워 보이지만 침착한 모습
• 경고 표지판을 들고 있는 모습
• 돋보기를 들고 찾는 모습

주의가 필요한 포즈:

• 웃는 모습
• 과장되게 우는 모습
• 축하하는 모습
• 잠든 모습
• 어깨를 으쓱하는 모습
• 죄책감을 느끼는 모습

사용자는 마스코트의 과장된 연기를 원하는 게 아닙니다. 도움이 필요합니다.

오류 상태의 문구와 일러스트는 서로 어울려야 합니다

일러스트는 유쾌한데 문구는 진지하면 상태가 혼란스럽게 느껴집니다. 반대로 문구가 모호하고 일러스트가 구체적이어도 사용자는 무엇을 해야 할지 알 수 없습니다.

다음과 같이 의도적으로 짝을 지어 보세요:

• 오프라인 상태: 연결이 끊긴 케이블을 든 마스코트 + You're offline. We'll retry when your connection returns.
• 업로드 실패: 망가진 파일을 든 마스코트 + The upload stopped before it finished.
• 접근 권한 없음: 잠긴 문 앞에 있는 마스코트 + Ask an admin for access to this workspace.
• 404 페이지: 지도를 든 마스코트 + We couldn't find this page.

오류 일러스트를 위한 디자인 규칙

오류 일러스트는 다음과 같이 유지하세요:

• 헤드라인과 액션보다 작게
• 시각적으로 차분하게
• 제품의 마스코트 체계와 일관되게
• 라이트 모드와 다크 모드 모두에서 접근성을 확보하고
• 모바일에서 사라질 만큼 작은 디테일은 배제하고
• 문제의 심각도에 정서적으로 어울리게

설명이 부족한 부분을 일러스트로 가리려 하지 마세요.

일러스트를 사용하지 말아야 할 때

다음과 같은 경우에는 일러스트를 생략하세요:

• 문제가 보안과 관련된 경우
• 사용자가 돈이나 데이터를 잃었을 수 있는 경우
• 페이지에서 즉각적인 조치가 필요한 경우
• 오류가 복잡한 작업 흐름 안에서 발생한 경우
• 일러스트 때문에 CTA가 첫 화면 아래로 밀리는 경우

좋은 제품 디자인은 때로 절제하는 것을 의미합니다.

최고의 오류 일러스트는 하나의 약속입니다

좋은 오류 상태 일러스트는 이렇게 말합니다. 문제가 생겼지만, 막힌 것은 아니에요.

이것이 일러스트의 정서적 역할입니다. 마스코트나 비주얼 체계는 단지 귀엽기만 한 것이 아니라, 제품이 책임감 있고 도움을 준다는 느낌을 전달해야 합니다.

확신이 서지 않는다면 먼저 복구 경험을 디자인하세요. 그런 다음 이를 뒷받침하는 일러스트를 추가하세요.

제품 상태에 맞는 마스코트 포즈 둘러보기 →