사용자를 위한 멋진 404 페이지를 만드는 방법

404 페이지에 도달하는 것은 즐거운 경험이 아닙니다. 그러나 사용자가 웹사이트에서 경험하는 것이 최종 경험이 아님을 확인하기 위해 할 수 있는 일이 있습니다.

훌륭한 404 페이지를 디자인하려면 어떤 요소가 사용자에게 가장 유용하고 페이지를 돋보이게 할 수 있는지 알아야 합니다.

다음 은 404 페이지를 최대한 활용하는 데 도움이 되는 6가지 기능 목록입니다.

404 코드란?

404는 페이지를 찾을 수 없을 때 나타나는 HTTP 상태 코드 중 하나입니다.

404는 4xx 그룹에 속하며 클라이언트 측 오류임을 나타냅니다. 더 구체적으로 말하면 클라이언트가 서버에 도달했지만 서버가 요청한 파일을 찾지 못했음을 의미합니다.

404 코드는 다음과 같은 다양한 이유로 나타날 수 있습니다.

• 페이지가 삭제되었습니다.
• 사용자가 URL을 입력하는 동안 오타를 만들었습니다.
• 페이지를 가리키는 링크가 잘못되었습니다.

404 코드의 이유에 관계없이 사용자는 단순히 페이지를 찾을 수 없기 때문에 페이지에 액세스할 수 없습니다.

누락된 페이지 대신 사용자에게 표시되는 페이지는 귀하가 제어할 수 있습니다. 옵션은 다음과 같습니다.

• 표준 404 페이지 또는
• 사용자 정의 404 페이지입니다.

사용자 정의되지 않은 표준 404 페이지에는 흰색 배경에 "찾을 수 없음"이라는 간단한 텍스트가 포함될 수 있습니다. 서버에서 이 페이지를 자동으로 생성합니다.

반면에 404 페이지를 사용자 정의하도록 선택할 수 있습니다. 웹사이트의 나머지 부분에 맞게 디자인하고 포함할 요소를 선택하십시오.

맞춤 404 페이지를 만들어야 하는 이유

잘 디자인된 사용자 정의 404 페이지는 사용자와 비즈니스 모두에게 유익합니다.

사용자가 표준 404 페이지를 입력하면 문제가 발생했으며 페이지를 찾을 수 없다는 것만 이해합니다. 그들은 무슨 일이 일어났는지, 다음에 무엇을 해야 하는지 모릅니다.

결과적으로 고객은 요구 사항을 충족하지 않고 사이트를 종료할 수 있습니다. 이것은 이상적이지 않습니다. 사용자가 검색에 만족하지 않아 귀하는 비즈니스를 잃었습니다.

사용자 정의 404 페이지를 사용하면 도움이 되지 않는 기본 페이지를 사용자와 비즈니스 모두에 유용한 페이지로 변경할 수 있습니다.

사용자 정의 404 페이지를 사용하면 다음을 수행할 수 있습니다.

• 사용자가 원하는 정보를 찾을 수 있도록 지원
• 사용자가 페이지를 탐색하도록 유도하고,
• 브랜드의 목소리와 창의성을 보여주세요.

또한 Google 에서는 맞춤 404 페이지를 만드는 것이 좋습니다 .

서버의 구성 파일에 액세스할 수 있는 경우 사용자 정의하여 이러한 오류 페이지를 사용자에게 유용하게 만들 수 있습니다. 좋은 사용자 지정 404 페이지는 사람들이 원하는 정보를 찾는 데 도움이 되며 사람들이 귀하의 사이트를 더 자세히 탐색하도록 권장하는 다른 유용한 콘텐츠도 제공합니다.

출처: 구글

인용문에는 Google이 사용자 정의 404 페이지를 사용자에게 유용하다고 생각하고 사이트 소유자가 404 페이지를 사용자 정의하도록 권장한다는 내용이 명확하게 나와 있습니다.

훌륭한 맞춤형 404 페이지를 만드는 방법

404 페이지를 완전히 사용자 지정하더라도 서버가 여전히 404 HTTP 상태 코드를 반환하는지 확인하십시오. 페이지가 실제로 존재하지 않을 때 성공적인 응답을 제안하는 200 코드를 설정하는 것은 나쁜 습관입니다.

404 페이지에 포함할 내용을 결정할 때 필수 요소 중 하나는 오류 페이지임을 분명히 명시하는 메시지입니다 . 사용자에게 친절하고 직접적인 방법으로 문제가 발생했음을 알립니다.

하지만 그것은 시작일 뿐입니다. 다음은 사용자 지정 404 페이지를 더 유용하게 만들기 위해 추가할 수 있는 주요 기능입니다.

• 검색창,
• 웹사이트에서 사용할 수 있는 리소스 목록,
• CTA 버튼,
• 귀하의 주요 콘텐츠에 대한 링크,
• 브랜드와 어울리는 디자인.

좋은 404 페이지의 핵심은 사용자에 대한 유용성입니다. 위 목록의 모든 요소를 ​​포함할 필요는 없습니다. 사용자가 웹사이트에서 길을 찾는 데 도움이 되는 요소만 포함하면 됩니다.

오류 메시지 지우기

좋은 404 페이지에는 항상 오류 페이지라는 명확한 메시지가 포함되어야 합니다. 어떤 디자인을 선택하든 항상 사용자에게 문제가 발생했으며 페이지를 찾을 수 없다는 사실을 알려야 합니다.

이케아 는 이것을 아주 잘합니다. 404 코드와 사용자가 쉽게 이해할 수 있는 간단한 설명을 모두 포함하는 명확한 메시지를 제공합니다.

검색 창

검색 표시줄을 사용하면 특정 콘텐츠를 찾는 사용자가 다시 한 번 기회를 제공하고 웹사이트에서 찾고 있던 내용을 검색할 수 있습니다.

검색 표시줄이 있는 404 페이지의 좋은 예는 Moz.com입니다.

따라서 Moz.com에서 특정 항목을 찾고 있었는데 찾지 못했다면 404 페이지에서 바로 다시 찾을 수 있습니다.

리소스 목록

사용자가 404 페이지를 방문했지만 검색창에 입력할 특정 항목이 없는 경우 웹사이트에서 찾을 수 있는 리소스 목록을 제공할 수 있습니다.

Backcountry 에는 웹사이트와 필수 페이지 목록에 맞는 심플한 디자인의 맞춤형 404 페이지가 있습니다.

이 페이지는 사용자에게 도움이 될 뿐만 아니라 Backcountry가 콘텐츠를 과시하고 사람들이 웹사이트를 탐색하도록 장려할 수 있습니다.

리소스 목록이 있는 404 페이지의 또 다른 예는 트립어드바이저입니다. 약간의 유머와 4개의 간단한 버튼으로 트립어드바이저는 사용자가 가장 관심을 가질 만한 섹션을 쉽게 탐색할 수 있는 옵션을 제공합니다.

CTA 버튼

CTA 버튼을 포함하면 사용자가 취할 수 있는 다음 단계를 보여줄 수 있습니다.

CTA 버튼의 가장 간단한 용도는 사용자를 귀하의 홈페이지 로 안내하는 것 입니다. 사용자에게 지침을 제공하는 간단하지만 효과적인 방법입니다.

다음은 홈 페이지로 연결되는 CTA 버튼이 있는 Netflix 404 페이지의 예입니다.

또 다른 솔루션은 "문의하기" CTA 버튼 을 포함하는 것 입니다. 예를 들어, 사용자가 특정 질문을 가지고 왔는데 404 페이지로 인해 답변을 얻을 수 없는 경우 자세한 내용을 문의하기 위해 귀하에게 연락할 수 있습니다.

사용자는 "문의하기" 옵션을 사용하여 오류를 보고할 수도 있습니다.

Kinsta 에는 "메인 페이지"와 "문의하기" 버튼이 모두 있습니다. 사용자는 웹 사이트를 방문하거나 회사에 연락할 수 있습니다. 따라서 웹 사이트를 탐색하거나 특정 질문에 대한 답변을 찾고자 하는 사람들에게 솔루션을 제공합니다.

CTA 버튼은 사용자에게 도움이 될 뿐만 아니라 비즈니스 목표에도 부합해야 합니다. 예를 들어 이메일을 남기고 뉴스레터를 구독하는 옵션을 포함할 수 있습니다.

9gag 는 404 페이지를 사용하여 사람들이 앱을 다운로드하도록 권장합니다. 배경 gif 추가는 9gag 스타일에 완벽하게 맞습니다.

상위 콘텐츠에 대한 링크

인기 있는 콘텐츠는 사용자의 참여를 유도할 수 있는 가장 좋은 기회를 제공합니다. 사용자가 404 페이지를 떠나기 전에 사용자의 관심을 끌 수 있는 기회를 제공합니다.

가장 인기 있는 콘텐츠에 대한 링크는 막다른 골목에 있는 페이지에서 가장 많이 팔리는 제품을 홍보할 수 있기 때문에 전자 상거래 웹사이트에 특히 유용할 수 있습니다.

최고의 콘텐츠를 제공하는 404 페이지의 훌륭한 예는 Urban Outfitters의 웹사이트에 나와 있습니다. 그것은 바로 아이템을 구매할 수 있는 "인기" 섹션이 있습니다.

브랜드 정체성

404 페이지를 사용자 정의하고 웹사이트 디자인에 맞추면 웹사이트를 통한 고객 여정 전체에 대해 진정으로 관심을 갖고 있음을 보여줄 수 있습니다.

404 페이지는 브랜드의 어조와 개성을 보여줄 수 있습니다. 웹사이트의 스타일에 맞는 독창적인 디자인은 사람들을 미소 짓게 하고 친구와 페이지를 공유하도록 권장할 수도 있습니다.

Pixar 는 404 페이지에서 잘 알려진 캐릭터 중 하나를 사용하고 있습니다. 페이지가 광범위한 탐색 기능을 제공하지는 않지만 그래픽과 따뜻한 메시지는 브랜드 스타일에 완벽하게 맞습니다.

Canva 에는 "Take me home" 버튼 외에도 사용자가 즐길 수 있는 작은 퍼즐이 포함되어 있습니다. 그것의 독창성과 독창성은 다른 페이지들 사이에서 두드러집니다. 표준 404 페이지에 대한 재미있는 대안입니다.

마무리

표준 404 페이지로 사용자를 혼자 두지 마십시오.

사용자는 무슨 일이 일어났고 다음에 무엇을 해야 하는지에 대한 정보 없이 방치되어서는 안 됩니다.

대신 사이트 전체에 좋은 경험을 제공하기 위해 노력하십시오. 여기에는 오류 페이지가 포함됩니다.