예외 페이지

예외 페이지 (Exception Page)

페이지에 오류 상태가 발생했을 때 보여주는 화면이에요. 무엇이 잘못됐는지 설명하고, 사용자에게 적절한 제안이나 행동을 안내해요.

출처: 문서

본문

페이지의 오류 상태를 표시하기 위한 문서예요.

디자인 목표 (Design Goals)

무엇이 잘못됐는지 설명하고, 사용자에게 적절한 제안이나 행동을 안내해서, 혼란과 방향 상실을 피하게 해요.

디자인 원칙 (Design Principles)

친근함 (Friendly)

사용자를 혼란스럽게 할 수 있는 애매한 용어를 피하고, 친근하고 명확한 언어로 표현해요.

초대 제공 (Provide Invitation)

리마인더와 힌트로 사용자를 다음 단계의 상호작용으로 안내하며, 다음 화면에서 무엇을 할 수 있는지 보여줘요.

유형 (Types)

오류 페이지 (Error Page)

페이지에서 오류가 발생했을 때 표시돼요. 다음 요소를 포함해요:

일러스트레이션: 무거운 오류에 재미를 더해 사용자의 불만을 완화해요;
오류 코드/이슈: 가능하면 구체적인 HTTP 오류 코드를 표시해요;
오류 설명: 오류 원인을 간단히 설명해서 사용자가 문제를 신고하기 쉽게 해요;
제안된 행동: 사용자가 오류를 처리하거나 올바른 길로 다시 안내하도록 도와줘요.

템플릿 - 404

언제 사용하나요

사용자가 요청한 페이지, 항목, 리소스 등을 찾을 수 없을 때.

템플릿 - 403

언제 사용하나요

권한이 없을 때. 상황에 따라 애플리케이션 권한이나 데이터 권한이 없는 경우가 포함돼요.

템플릿 - 500

언제 사용하나요

서버에서 오류가 발생해 사용자에게 서비스를 제공하지 못할 때.

템플릿 - 브라우저 비호환

언제 사용하나요

브라우저가 호환되지 않아 사용자가 웹페이지를 열 수 없을 때.

디자인 권장 사항

브라우저가 호환되지 않아 어느 정도 동작이 영향을 받을 때, 사용에 지장이 심각하지 않다면 전역 프롬프트를 사용해 사용자가 계속 진행할 수 있게 해요.

빈 상태 (Empty State)

사용자에게 보여줄 내용/데이터가 없을 때 표시돼요. 빈 상태 역시 오류 페이지의 특정 유형이에요. 자세한 내용은 빈 상태 문서를 참고하세요.

로드 실패 (Load Failure)

언제 사용하나요

네트워크 문제 등 여러 이유로 페이지 콘텐츠를 불러오지 못했을 때 표시돼요. 보통 재시도(retry) 옵션과 함께 사용해요.

디자인 권장 사항

페이지의 전체 상호작용 흐름은 서로 다른 상태로 구성될 수 있어요. 디자이너는 이상적인 상태에만 집중하지 말고 다양한 예상 밖 시나리오를 종합적으로 고려해서, 사용자 경험의 단절을 막아야 해요.

이상적 상태 (Ideal State): 모든 페이지 모듈이 정상적으로 표시되는 상태;
부분 상태 (Partial State): 일부 모듈이 누락되거나 일부 콘텐츠가 빈 상태. 빈 상태의 디자인을 참고해요;
로딩 상태 (Loading State): Spin이나 Skeleton으로 로딩 상태를 표시해요;
오류 상태 (Error State): 시스템 오류, 권한 없음 등;
빈 상태 (Empty State): 콘텐츠가 완전히 비어 있는 상태. 안내형 빈 상태 프롬프트 사용을 권장해요. 새 사용자라면 신규 사용자 가이드 페이지를 참고해요.

예외 페이지