콘텐츠로 건너뛰기
Home » 블로그 » 자신만의 404 페이지를 만드는 방법

자신만의 404 페이지를 만드는 방법

마지막으로 열쇠를 찾을 수 없었던 때를 생각해 보십시오. 당신은 아마도 화가 났고 다음에 무엇을 해야 할지 확신이 서지 않았을 것입니다. 이것이 잘못 설계된 404 페이지가 사이트 방문자에게 미칠 수 있는 영향입니다. 그리고 조심하지 않으면 갑자기 사용자 경험을 중단할 수 있습니다. 결과적으로 방문자는 좌절감을 느끼거나 사이트에 대해 덜 생각하거나 단순히 더 푸르른(또는 최소한 더 사용자 친화적인) 목초지를 찾아 떠날 수 있습니다.

사용자 지정 404 페이지는 이러한 시나리오를 완전히 방지하는 데 도움이 될 수 있습니다. 약간의 계획과 창의성으로 이러한 페이지를 사용하여 사용자의 참여와 감동을 유지하고 이탈률을 낮추고 방문자 만족도를 높게 유지할 수 있습니다.

이 글 아래에서 사용자 지정 404 페이지를 만드는 방법을 설명하고 있습니다. 계속 스크롤하여 확인해보세요.

기본 및 사용자 정의 404 페이지는 무엇입니까?

고속도로를 운전하다가(물론 열쇠를 찾은 후) 막다른 골목, 진입 금지 라는 표지판을 만난다고 상상해 보십시오 . 유일한 선택은 고속도로로 돌아가 다른 길을 선택하는 것입니다. 인터넷에 해당하는 사용자는 웹 사이트를 방문하여 링크를 클릭하고 404 페이지를 수신합니다.

이 오류 페이지는 사용자에게 막다른 골목에 도달했으며 유효한 목적지를 찾으려면 기본 웹사이트로 돌아가야 함을 알려줍니다.

 

404 오류의 원인은 무엇입니까?

어떤 경우에는 일부 방문자에게 404 페이지가 표시되지 않도록 할 수 있는 방법이 없습니다. 예를 들어 다음과 같은 경우에 발생할 수 있습니다.

  • 검색 엔진은 오래된 링크를 표시합니다. 또는
  • 다른 사이트는 오래된 페이지로 연결됩니다.

그러나 다음과 같은 몇 가지 원인을 제어할 수 있습니다.

  • 사이트에서 제거된 페이지 또는
  • 다시 시작되는 사이트.

또한 웹사이트 내 또는 외부 소스에서 잘못된 링크가 없어도 사용자는 때때로 잘못된 URL을 입력하여 404 페이지로 이동합니다.

이유가 무엇이든 관계를 유지하는 방법이 필요합니다.

 

맞춤 404 페이지를 사용하는 이유는 무엇입니까?

방문자가 찾을 수 없는 페이지를 요청하면 각 사이트는 404 페이지에 의존하여 나쁜 소식을 전달합니다. 개인화된 콘텐츠로 404 페이지를 만드는 방법을 배우면 향상된 사용자 경험을 통해 방문자의 불만과 트래픽을 리디렉션할 수 있습니다.

그러나 사용자 경험 측면에서 기본 404 페이지와 사용자 정의 404 페이지 사이에는 큰 차이가 있습니다. 일반적으로 평범한 흰색 배경에 검은색 텍스트가 포함된 기본 404 페이지는 일반적으로 매우 기본적입니다.

기본 페이지 404

그러나 사용자 지정 404 페이지 는 사이트의 고유한 스타일을 반영하고 전반적인 사용자 경험을 개선하도록 특별히 설계될 수 있습니다. 클릭할 수 있는 회사 로고, 장난기 넘치는 로봇 삽화, 일어난 일에 대한 간단한 설명이 있는 Google에서 가져온 것입니다.

404페이지 구글

일부 회사는 유머, 유용한 링크 및 애니메이션 GIF를 추가하여 다음 단계로 나아가고 있습니다. 길을 잃은 방문자를 위한 Discord 페이지는 문제에 대한 우스꽝스러운 설명, 따라갈 수 있는 유용한 링크, 좋은 측정을 위한 멋진 GIF로 이를 보여줍니다.

불화 404 페이지

페이지는 다르지만 최종 결과는 동일합니다. 사용자는 다른(유효한) 페이지로 이동해야 합니다. 그러나 Google 및 Discord의 사용자 지정 404 페이지를 사용하면 사용자가 무슨 일이 일어났는지 빠르게 이해하고 편리한 링크를 클릭하여 원하는 곳으로 이동하고 개별 브랜드 개성을 엿볼 수도 있습니다.

그런 의미에서 차이점은 분명합니다. 사용자는 잘 디자인되고 쉽게 이해할 수 있는 사용자 지정 404 페이지를 통해 보다 즐거운 경험을 즐깁니다. 사용자 지정 404 페이지를 만드는 방법을 배우면 방문자는 더 오래 머물고 다른 곳으로 갈 가능성은 줄어듭니다.

 

사용자가 좋아할 404 페이지를 만드는 방법

시작하려면 다른 유형의 콘텐츠와 마찬가지로 빈 사이트 페이지를 만듭니다. 준비가 되면 간단한 지침을 따르면 관심을 끄는 맞춤형 404 페이지를 쉽게 만들 수 있습니다.

  • 사용자에게 왜 존재하는지 알려주세요. 오류 페이지가 표시되는 이유를 일반 언어로 설명합니다.
  • 사용자에게 계속 진행할 수 있는 방법을 제공합니다. 뒤로 버튼을 클릭하지 않고도 탐색할 수 있도록 도와주세요. 예를 들어 검색 표시줄, 몇 가지 유용한 링크, 고객 지원과 채팅할 수 있는 옵션, 클릭할 수 있는 기본 로고 또는 위의 모든 항목이 있습니다.
  • 시각적 매력을 유지하십시오. 오류 페이지라고 해서 보기 흉해야 하는 것은 아닙니다. 유용 하고 매력적인 페이지 가 나올 때까지 디자인 요소를 가지고 놀아보세요 .
  • 일관성을 유지하십시오. 사용자 정의 404 페이지는 귀하의 사이트와 일치하는 디자인을 가져야 합니다. 동일한 언어, 색상 팔레트, 테마 및 브랜드 아이덴티티를 유지합니다.

마지막으로 기본 404 페이지 대신 페이지가 자동으로 표시되도록 설정합니다. 이것은 사이트의 웹 서버 소프트웨어(예: Apache 또는 Nginx)를 구성하여 수행할 수 있습니다. WordPress 사이트에서 플러그인을 사용하여 사용자 정의 404 페이지를 설정할 수도 있습니다.

 

참고 할만한 사용자 지정 404 페이지 6가지

훌륭한 맞춤형 404 페이지를 만드는 올바른 방법은 없습니다. 각 페이지의 성공 여부는 사이트의 나머지 부분과 얼마나 잘 통합되는지에 달려 있습니다.

아이디어를 얻으려면 좋아하는 다른 사이트의 사용자 지정 404 페이지(예: 즐겨찾기)를 살펴보십시오.

 

Netflix

적절한 프로그램( Lost in Space ) 의 아름다운 정지 이미지와 친근한 언어가 결합되어 방문자가 Netflix 오류 페이지에서 바로 콘텐츠를 계속 검색하도록 유도합니다.

넷플릭스 404 페이지

 

ModCloth

재미있는 말장난을 통해 ModCloth의 오류 페이지는 방문자가 브랜드 개성, 간편한 탐색을 위한 제품 페이지 링크, 구매자가 즉각적인 도움을 받을 수 있도록 클릭 가능한 고객 서비스 옵션을 제공합니다.

ModCloth 404 페이지

 

Twitter

간단한 설명과 새로운 것을 검색할 수 있는 다양한 방법으로 인해 Twitter는 페이지를 짧고 쉽게 찾을 수 없습니다.

트위터 404 페이지

 

Allrecipes

적절한 사진은 시각적으로 매력적으로 유지하고 짧은 말장난은 사물을 가볍게 유지하며 Allrecipes 오류 페이지의 친근한 언어는 방문자가 계속 탐색하도록 권장합니다.

모든 레시피 404 페이지

 

Ars Technica

브랜드의 “moonshark” 마스코트는 Ars Technica의 오류 페이지에 기억에 남을 만한 모습을 보여주며 검색 표시줄은 방문자가 원하는 것을 찾는 데 도움이 됩니다.

아르스 테크니카 404 페이지

 

Pixar

맞춤형 404 페이지 브랜딩의 전형일 것인 Pixar는 영화 Inside Out 의 캐릭터를 사용 하여 오류 페이지에 도착한 느낌을 완벽하게 보여줍니다.

픽사 슬픔 404 페이지

 

404 페이지는 불가피하지만 좌절하는 방문자는 그렇지 않습니다

사용자 지정 404 페이지를 만들 때 사용할 수 있는 다양한 사용자 친화적인 옵션은 문제가 발생하더라도 방문자를 확보하고 사이트의 이탈률을 낮게 유지할 수 있다는 증거입니다.

다음에 사용자가 잘못된 링크를 따라갈 때 유용하고 매력적이며 개성이 가득한 사용자 지정 404 페이지를 만들어 긍정적인 경험을 유지하도록 합니다.

이 문서는 2022년 05월 02일에 마지막으로 수정되었습니다.