Skip to Content
PatternsDesign PatternsError Handling

Error Handling

시스템/사용자에 의해 발생한 에러의 위험 수준에 따른 적절한 에러 메시지 설계 방법을 안내합니다.

Overview

Definition

에러(Error)는 사용자가 특정 기능을 실행한 후 예상하지 못한 결과를 경험할 때 발생합니다. 에러 발생 시 사용자는 좌절감 및 불만과 같은 부정적 감정을 느낄 수 있으며, 더 나아가 제품 사용 이탈에 영향을 미칠 수 있습니다.

에러 핸들링(Error handling)은 이러한 에러 상황에서 최적화된 사용자 경험을 제공하기 위한 접근 방식입니다. 구체적으로, 에러 상황별 위험 수준(Level)을 식별하고, 사용자가 문제를 해결할 수 있도록 적절한 interaction, components 및 writing을 설계하는 방법으로 정의할 수 있습니다. 체계적으로 설계된 에러 핸들링은 시스템에 대한 안정성 확보를 넘어 사용자의 신뢰 회복을 가능하게 합니다. 본 문서에서는 에러 상황에 따른 위험 수준을 구분하는 방법과 각 수준별 적절한 디자인 패턴에 대한 안내를 진행합니다.

Criteria

Classification Criteria

에러 상황에 따라 사용자가 체감하는 부정적인 감정 수준은 다를 수 있습니다. 사용자가 경험하는 부정적 경험의 정도는 에러에 동반된 위험 수준에 따라 결정됩니다. 일반적으로, 위험한 에러에 노출될수록 사용자가 체감하는 부정적 감정의 수준 또한 높게 나타나는 경향이 있습니다. 위험한 에러일수록 보다 명시적이고 엄중한 디자인 원칙이 적용된 에러 메시지가 설계되어야 하며, 문제가 해결되기 전까지 사용자의 액션을 제한하는 것이 요구될 수도 있습니다. 대조적으로, 위험 수준이 낮은 에러가 발생한 경우에는 상황에 대한 안내만으로 충분한 경우가 있습니다.

결과적으로, 에러 유형별 심각도를 자가 진단하여 적절한 에러 메시지를 설계할 수 있어야 합니다. 본 문서에서는 이러한 심각도를 측정할 수 있는 체계적인 분류 방법을 안내합니다. 본 분류 방법을 토대로 에러를 분류하고 각 수준별 최적화된 design principle을 적용해야 합니다.

Level 1Level 2Level 3
Definition사용자가 오류를 인지하고 조치를 취하지 않아도 과업 성과에 이상이 없는 유형사용자가 오류를 인지하고 조치를 취하지 않으면 과업 성과가 저하되는 유형사용자 스스로 해결하기 어렵거나 해결할 수 없는 유형
Error Cognition NecessityXOO
Error Resolution NecessityXOO
Error Resolution Feasibility by UserOOO OR X
Impact of Unresolved Errors on Risk Level낮음(1.0/4.0)보통(2.0/4.0) OR 높음(3.0/4.0)높음(3.0/4.0) OR 매우 높음(4.0/4.0)

Practices

위험 수준별 에러 메시지 설계 방법에 대한 디자인 원칙을 안내합니다.

Interaction

위험 수준과 관계없이 사용자는 모든 에러 상황을 인지할 수 있어야 합니다. 화면상에서 확인 가능한 형태로 명시적으로 제공되어야 하며, 직접적인 액션을 통해서만 에러 메시지가 제거되도록 설계합니다.

Toast 에러 메시지 인터랙션
Toast 에러 메시지 제공 예시: 에러 메시지는 close 액션을 취할 때 제거되어야 하며 자동으로 삭제될 수 없음

Content

에러 발생 원인을 직관적으로 인지할 수 있도록 사용자 액션이 주체가 되는 문장으로 구성합니다.

에러 위험 수준에 따라 “상황적 요소”, “해결 방안” 및 “조치”와 관련된 문장 요소를 적절히 배치할 수 있습니다.

에러 메시지 구성 요소

상황적 요소(What happened)

에러 인지를 목적으로 하는 문장 요소입니다. 기본적으로 모든 에러 유형에 적용될 수 있습니다.

해결 방안(How to fix it)

에러 해결 방법에 대한 안내에 중점을 둔 문장 요소입니다. 사용자의 조치가 요구되는 Level 2에 적합하며, 상황적 요소와 함께 구성해야 합니다. 문제 해결을 위한 액션을 시도해볼 수 있는 일부 Level 3 에러 유형에서도 부분적으로 적용될 수 있습니다.

조치(Action)

에러 해결을 위한 액션에 즉시 연결되는 문장 요소이며, button label에 반영됩니다. 사용자의 조치가 요구되는 Level 2에 적합하며, 상황적 요소 및 해결 방안과 함께 구성되어야 합니다. Level 3의 경우 사용자가 해결하기 어려운 에러 유형이 많지만, 일부 문제 해결을 위한 액션을 시도해볼 수 있으므로 부분 적용될 수 있습니다.

조치(Action) 버튼 라벨 예시

Designing with Risk Levels

Level 1

사용자의 조치가 요구되지 않으므로 메시지 구성은 “상황적 요소”만 포함합니다.

Toast

Toast를 통해 Level 1에 대한 에러 메시지를 제공할 수 있습니다.

Level 1 Toast 에러 메시지
  • 사용자가 Close icon button을 클릭하기 전까지 toast는 유지됩니다.
  • 페이지 전환 시에도 toast는 유지됩니다.

Level 2

사용자의 조치가 요구되므로 메시지는 “상황적 요소” 및 “해결 방안”으로 구성합니다.

Toast

Toast를 통해 Level 2에 대한 에러 메시지를 제공할 수 있습니다.

Level 2 Toast 에러 메시지
  • 사용자가 Close icon button을 클릭하기 전까지 toast는 유지됩니다.
  • 페이지 전환 시에도 toast는 유지됩니다.
  • Level 1, 2 에러 유형을 표현하기에 적합한 toast는 최대 5개까지 생성될 수 있습니다. 5개 초과 시 사용자 액션이 없더라도 outdated 항목이 우선적으로 자동 제거됩니다.
  • Toast 메시지는 최신순일수록 최하단에 생성됩니다.
  • 관련된 상세 내용은 toast 스펙을 확인해 주세요.
Toast 스택 동작

Level 3

페이지 위계에서 통해 에러 및 해결 방법을 안내합니다.

  • 일반적으로 Level 3은 사용자 스스로 해결할 수 없는 에러 유형이므로 메시지 구성은 “상황적 요소”를 기본으로 합니다.
  • 그러나, Level 3에는 어려울 수 있지만 해결 가능성이 있는 에러 유형이 부분적으로 존재합니다. 즉, 상황에 따라 “해결 방안” 및 “조치” 또한 함께 구성될 수 있습니다.
  • 오류가 해결되기 전까지 사용자는 진행 중이었던 과업을 재개할 수 없습니다.
Level 3 404 에러 페이지
404 에러는 문제 해결이 불가한 유형이므로 '해결 방안'은 생략된 채 이전에 수행하던 과업으로 복귀할 수 있도록 문제 해결과 관련 없는 최소한의 '조치'를 제공한 경우
Level 3 모든 구성 요소가 제공된 에러 페이지
문제 해결이 어려울 수 있지만 사용자의 시도를 통해 해결 가능성이 있으므로 모든 구성 요소가 제공된 경우