40 실제 웹사이트의 영리한 404 오류 페이지

웹사이트를 성공적으로 운영한다는 것은 깨진 페이지나 느린 성능과 같은 오류에 대한 경고를 유지하는 것을 의미합니다. 그러나 때로는 피할 수 없는 문제가 있으며 404 오류가 그 중 하나입니다.

404는 사용자가 웹사이트에 존재하지 않는 페이지를 요청할 때 발생하며, 따라서 사용자에게 올바른 위치로 돌아가도록 요청하는 404 오류 페이지를 표시합니다. 웹사이트가 다운되지 않도록 하기 위해 얼마나 많은 리소스를 투입했든 상관없이 ... 사용자가 여기에서 끝날 가능성은 항상 있습니다.

불편하지만 삶의 사실입니다. 그리고 방문자가 존재하지 않는 페이지를 방문했을 때의 반응은 "보통으로 받아들이는 것"에서 "완전히 정신을 잃는 것"에 이르기까지 다양할 수 있습니다.

후자에 대해 할 수 있는 일은 없지만 크리에이티브 오류 404 메시지를 표시하면 문제를 조금 덜 수 있습니다. 이것은 웹사이트 방문자가 실망스러운 상황에서 미소를 짓게 만드는 놀라운 일을 할 수 있습니다.

웹사이트 디자인을 원활하게 하기 위해 이 게시물은 우리가 가장 좋아하는 웹사이트 오류 페이지 중 일부를 보여줍니다. 자신만의 404 메시지를 멋지게 만들기 위해 몇 가지 아이디어를 얻을 수 있기를 바랍니다.

404 오류란 무엇입니까?

404 오류는 연결하려는 웹 사이트를 서버에서 찾을 수 없음을 의미하는 표준 HTTP 오류 메시지 코드입니다. 이는 클라이언트 측 오류로, 웹페이지가 제거 또는 이동되었지만 그에 따라 URL이 변경되지 않았거나 사용자가 방금 URL을 잘못 입력했음을 의미합니다.

대부분의 경우 사용자 지정된 404 오류 페이지를 생성하도록 서버를 구성할 수 있습니다. (HubSpot 고객인 경우 여기를 클릭하여 HubSpot에서 404 페이지를 사용자 지정하는 방법을 알아보세요.)

일부 사용자 정의된 404 오류 페이지에는 영웅 이미지, 재치 있는 설명, 사이트 맵, 검색 양식 또는 기본 연락처 정보가 포함됩니다.

최고의 404 웹 페이지 예제

수년에 걸쳐 웹 사이트는 방문자에게 404 오류를 알리고 올바른 위치로 안내하는 다양한 방법을 찾았습니다. 먼저 창의적인 404 페이지를 살펴본 다음, 이를 접하는 모든 사람을 기쁘게 할 몇 가지 재미있는 예를 살펴보겠습니다.

페이지를 찾을 수 없음: Creative 404 오류 페이지

1. 핍콘

404 페이지는 웹사이트에서 쉽게 튀어나올 수 있지만 Pipcorn의 오류 페이지는 사이트의 나머지 브랜딩과 완벽하게 일치합니다. 멋진 애니메이션 배경, 방문자가 웹사이트를 검색하도록 지시하는 친숙한 텍스트 프롬프트(영리한 말장난로 완성), "404"에서 "0"으로 사용된 팝콘 조각이 있습니다.

2. 스포티파이

음악 스트리밍 거인 Spotify는 영리한 404 페이지로 기반을 다뤘습니다. Kanye West의 앨범 "808s and Heartbreak"에 대한 재치 있는 말장난과 레코드 애니메이션으로 웹사이트는 잠시 재미를 주고 방문자를 원래 페이지로 다시 보냅니다.

3. 친절하게

404 페이지의 긴장을 완화하는 한 가지 간단한 방법은 빠른 "죄송합니다!"를 추가하는 것입니다. 메시지 — 사용자를 올바른 위치로 안내할 때 사이트가 더 친근하게 느껴지도록 도와줍니다. Genially 사이트의 경우 페이지에는 재미있는 카피와 짝을 이루는 멋진 일러스트레이션도 포함되어 있습니다.

4. 어도비

예상대로 Adobe의 404 오류 페이지는 유용하고 시각적으로도 좋습니다. 여기에는 방문자가 원할 수 있는 인기 있는 링크가 파손되거나 분실된 페이지에 대한 시각적 은유 역할을 하는 멋진 디지털 아트워크와 함께 나열되어 있습니다. 솔직히 웹사이트는 시각적 은유를 더 자주 사용해야 합니다.

5. 클로록스

Clorox 청소 제품에 대한 404 페이지는 방문자가 잘못 걸었다는 신호를 주기 위해 가벼운 사진 3장 사이를 순환합니다. 잃어버린 사용자를 도우면서 짧은 기쁨의 순간을 추가하는 것은 브랜딩을 현명하게 사용하는 것입니다.

6. 두마 컬렉티브

다른 경우에는 재치 있는 설명이 필요하지 않을 수 있습니다. 방문자에게 주소에 페이지가 없다고 말하고 계속 진행하게 하십시오. 엔터테인먼트 컨설팅 에이전시 Duma Collective는 약간의 감각을 위한 배경 이미지로 보완되지만 오류 페이지로 이를 수행합니다.

7. 칠하우스

감각에 대해 말하자면, 셀프 케어 브랜드 Chillhouse는 방문자를 스타일리시하게 경로를 변경하기 위해 추가 작업을 수행했습니다. 404 페이지는 적절하게 브랜드화되어 있으며 방문자가 홈페이지로 돌아가기 전에 몇 가지 이미지 스틸을 통해 약간의 여행을 하도록 안내합니다.

8. 비트리

잘못된 Bitly 링크를 입력하면 Bitly의 404 페이지로 이동합니다. 우리는 이것이 상당한 양의 일이라고 가정합니다. 이것이 404 페이지가 바로 요점으로 가는 이유입니다. 무엇이 잘못되었을 수 있는지 설명하고 사용자가 원하는 경우 Bitly 홈페이지를 방문하도록 안내합니다.

9. 이케아

Ikea의 404 페이지는 유사하게 미니멀하지만 여전히 스마트한 브랜딩을 거기에 숨길 수 있습니다. 이 예는 오류 페이지가 요점을 전달하기 위해 정교할 필요는 없지만 재미를 주입하는 데 아무런 문제가 없음을 보여줍니다.

10. (주)목시디자인

물론 "인터넷 폭파"는 과장된 표현일 수 있지만 방문자에게 Moxie Design Co.는 이와 같은 작은 실수에 대해 너무 심각하게 생각하지 않는다는 것을 알려줍니다. 또한 하단에는 검색창을 편리하게 배치하여 길을 안내해 드립니다.

11. 맥키삭 & 맥키삭

아, 고전적인 "우리는 페이지를 잃었습니다" 트릭. 다시 말하지만 청중을 소외시키지 않고 404를 발표하는 쉬운 방법입니다. McKissack & McKissack과 같이 많은 고객 상호 작용을 관리하는 대행사인 경우 오류 페이지를 포함하여 사이트의 모든 페이지에 명확하고 간결한 사본이 필수적입니다.

12. CSS 트릭

웹사이트의 포장을 뜯어 그 밑에 무엇이 있는지 확인해본 적이 있습니까? 이것이 CSS Tricks가 404 오류 페이지에서 의도한 개념입니다. 이것은 재치 있고 웹사이트의 모든 것을 연상케 합니다. 즉, 페이지 스타일을 스마트하게 사용합니다.

13. 옛날 게임

다른 웹사이트의 경우 프론트 엔드를 풀면 … 광대한 공간이 생깁니다. 이 페이지는 Good Old Games의 기본 비디오 게임 클라이언트인 GOG Galaxy에 대한 영리한 참조입니다. 고맙게도 방문자가 원하는 경우 오류를 보고할 수 있는 작은 비디오 게임 캐릭터가 있습니다.

14. 칸바

조금 다른 내용은 Canva의 404 페이지를 확인하세요. 여기에는 오류 메시지뿐만 아니라 방문자가 간단한 오락을 위해 플레이할 수 있는 멋진 타일 퍼즐이 포함되어 있습니다. 방문자가 몇 분 동안 여유를 가질 수 있도록 하는 것은 나쁠 것이 없습니다. 그렇죠?

15. 이노텍

Canva의 접근 방식과 유사하게 Innotech는 404페이지에 Pong-esque 게임을 제공하여 간단한 엔터테인먼트를 제공합니다. 아마 당신은 이와 같은 웹사이트를 기억할 것입니다. 또한 재미있는 우회는 진정으로 인상적인 웹사이트를 보완합니다. 진지하게, 게임을 마치면 홈 페이지로 이동하여 모든 것을 살펴보세요.

16. 무수히 많은

비디오 에이전시 미리어드(Myriad)는 오래된 테이프와 TV에 나타나는 고전적인 SMPTE 색상 막대를 모방한 기발한 브랜드 내 404 페이지 디자인을 선택했습니다. 존재하지 않는 웹 페이지의 보다 현대적인 문제를 나타내면서 오래된 기술에 대한 재미있는 후퇴입니다.

17. 콘마리

그녀의 인기 있는 청소 및 정리 방법과 브랜드로 알려진 Marie Kondo는 웹사이트의 404 페이지에 비슷한 느낌을 가져왔습니다. 카피는 짧고 유머러스하게 그녀의 정리 철학, 즉 팬들이 알아볼 수 있는 작지만 잘 브랜드화된 디테일을 떠올리게 합니다.

18. 브랜드크라우드

이 오류 페이지의 그림은 상세하고 매력적일 뿐만 아니라 카피도 영리합니다. 우리는 Semisonic 노래 "Closing Time"에 대한 언급을 좋아합니다. "다른 곳은 클릭할 수 있지만 여기를 클릭할 수는 없습니다."

19. 핫도트 프로덕션

Hot Dot의 오류 페이지는 "새로운 기술과 디자인의 교차점"이라는 슬로건에 충실합니다. 페이지는 커서를 이동하는 위치에 따라 방향이 바뀌는 수백 개의 작은 점으로 애니메이션됩니다. 그것은 에이전시의 디자인 능력에 대한 매혹적이고 훌륭한 쇼케이스입니다.

20. 오렌지코트

오류 메시지를 표시하려는 경우 사용자를 돕는 동안 몇 초 동안 사용자를 즐겁게 하지 않겠습니까? 친절한 인사에 이어 OrangeCoat는 사용자가 처음에 오류 페이지에 도달한 이유를 실제로 파악하는 데 도움이 되는 순서도를 제공합니다.

21. 어빈 & 스미스

이 404 페이지는 사용자를 활성 페이지로 다시 리디렉션하는 것 이상을 수행합니다. 대신, Ervin & Smith의 404 페이지는 아래로 스크롤하여 디지털 마케팅 대행사가 필요한 이유, 특히 Ervin & Smith를 선택해야 하는 이유를 알아보도록 초대합니다. 사명에 맞게 이 대행사는 모든 페이지가 전환 기회가 될 수 있음을 보여줍니다.

22. 데이클라우드 스튜디오

... 또는 DayCloud Studios 웹 사이트에서 볼 수 있듯이 404는 잠시 시간을 낭비하는 장소일 수 있습니다. 화면에서 커서를 움직이면 고양이의 눈에서 레이저를 쏘아 비추는 404 메시지가 나타납니다. 왜 안돼?

23. 헤드스페이스

브랜드 메시지를 404 페이지에 현명하게 통합한 웹사이트의 또 다른 예입니다. 안내 명상 앱 Headspace는 사용자를 진정시키기 위해 노력하고 심호흡을 한 다음 기본 사이트로 돌아가도록 권장합니다.

24. 와일드우드 베이커리

지금까지 일부 웹사이트는 페이지에 영리한 브랜드 카피를 통합한 반면, 다른 웹사이트에서는 본격적인 온라인 게임을 호스팅했습니다. 그러나 올바른 방향으로 짧게 밀면 나쁠 것이 없습니다. Wildwood Bakery의 절묘한 사이트는 내용을 짧고 달콤하게 유지합니다(말 그대로).

페이지를 찾을 수 없음: 재미있는 404 오류 페이지

25. 아스투테오

디자인 에이전시 Astuteo의 404 페이지는 우아한 비주얼과 유머, 도움이 완벽하게 균형을 이루고 있습니다. 최소한의 레이아웃은 사용자에게 또 다른 재미있는 시각적 은유, 가라앉는 화물선 및 도주하는 인물과 함께 필요한 정보를 제공합니다.

26. 레고

LEGO의 404 오류 페이지에는 필요한 단어가 거의 없습니다. 캐릭터의 표정이 모든 것을 명확하게 보여줍니다. 또한 LEGO 영화 프랜차이즈의 팬들은 사본에서 재미있는 참조를 즐길 수 있습니다.

27. 마그네트

이 재미있는 오류 메시지에서 Magnt는 예, 그들이 무언가를 깨뜨렸을 수 있다는 사실을 비웃습니다. 아니면 그냥 입력할 수 없습니다. 시각 자료는 요점을 신속하게 설명하는 빠른 방법입니다.

28. 아이콘 파인더

IconFinder의 오류 페이지는 간단하지만 유쾌합니다. 가운을 입고 피곤해 보이는 회사의 마스코트는 길을 잃은 방문자에게 공감할 수 있는 끄덕임입니다. 사이트에 아래에 방문할 링크가 나열되어 있으므로 걱정하지 마십시오.

29. 달콤한 꿈

분명히 수면 보조제 회사 Sweet Dreams의 팀은 웹 사이트의 404 페이지에 따라 제품을 너무 많이 가져갔습니다. 이 페이지는 유머러스할 뿐만 아니라 사이트의 나머지 프론트 엔드 미학과 메시지와 잘 어우러져 응집력 있는 느낌을 줍니다.

30. 깃허브

"이들은 당신이 찾고 있는 드로이드가 아닙니다"라는 라인은 스타워즈 에피소드 IV 의 스톰트루퍼에 대한 오비완 케노비의 제다이 마인드 트릭을 말하며, 누군가에게 그들이 잘못된 것을 쫓고 있다고 말할 때 사용되는 잘 알려진 문구가 되었습니다. 행동의 과정. GitHub는 404 오류 메시지에서 이 유명한 라인을 재생합니다.

31. 파타고니아

Patagonia의 맞춤형 404 페이지는 "404"와 "aloha"를 결합한 영리한 말장난, 프리스비 트위러의 부메랑 비디오, 제품 페이지 링크로 완성되어 브랜드의 분위기를 완벽하게 포착합니다. 엉뚱한 곳에서 상처를 입은 방문객을 맞이하는 친절하고 재미있는 방법입니다.

32. 클라우드 시그마

확인하십시오: Cloud Sigma는 우리에게 몇 가지 비하인드 스토리를 보여줍니다. 그들의 404 오류 페이지는 "주니어 개발자의 홈페이지"인 것처럼 가장합니다. 그 주니어 개발자는 음, 고양이입니다.

33. AMC 극장

이전에 AMC 영화관에 가본 적이 있을 수 있지만 웹사이트의 404 페이지는 본 적이 없을 것입니다. 웹사이트는 당신을 올바른 장소로 보내기 전에 빠르고 재미있고 관련성 있는 한 줄짜리를 사용합니다.

34. 브루노

크리에이티브 에이전시가 멋진 404 페이지를 만드는 데 능숙하다는 것은 우연이 아닙니다. 여기에 2000년 컬트 코미디 클래식 Dude, Where's My Car? 를 재생하는 Bruno의 크리에이티브가 또 하나 있습니다. 아니요, 회사나 웹사이트와는 아무 관련이 없지만 분명히 웃을 것입니다.

35. NPR

처음에는 NPR의 오류 페이지가 특별할 것 같지 않습니다. 그러나 계속 읽으면 Amelia Earhart와 Waldo의 한 조각과 같이 잃어버린 사람, 장소 및 사물에 대한 훌륭한 이야기 ​​중 일부에 영리하게 연결되어 있음을 알 수 있습니다. 이것은 길을 잃은 사용자가 외로움을 덜 느끼게 만들 수 있습니다.

36. 중간

Medium은 NPR의 404 페이지와 유사한 접근 방식을 취하여 분실물에 대한 기사를 추천합니다. 시간이 있으면 이 기사를 확인하십시오. 꽤 좋은 글입니다.

37. 홈스타러너

Flash 애니메이션 만화 시리즈의 본고장인 HomeStarRunner.com에는 수년 동안 일련의 재미있는 404 오류 페이지가 있었습니다. 가장 최근에는 에피소드 중 하나에서 바로 나올 수 있는 장면에 만화 시리즈의 캐릭터가 등장합니다. 페이지를 로드할 때 소리를 켜면 "404'd!"라고 큰 소리로 문구를 외치는 것으로 알려진 그들의 캐릭터 Strong Bad를 들을 수 있습니다.

38. 블리자드 엔터테인먼트

매끄럽게 보이는 간단한 아이디어가 있습니다. Blizzard Entertainment의 404 페이지에는 실제 눈보라 속에서 길을 잃은 애니메이션 캐릭터와 World of Warcraft 팬들이 좋아할 유머가 있습니다.

39. 안녕하세요 빅 아이디어

마케팅 및 소셜 미디어 전문가를 둘러보는 빠른 여행 Hello Big Idea의 웹사이트는 대담하고 무뚝뚝한 스타일의 카피에 대해 알아야 할 사항을 알려줄 것입니다. 물론 404 오류 페이지도 예외는 아닙니다.

40. 허브스팟

우리에게도 일어난다! 이것은 사이트 방문자에게 웹 사이트 문제가 있음을 알리기 위해 게시한 메시지입니다. 우리의 목표는 가능한 한 사랑스럽고 공감하며 도움을 주어 HubSpot의 브랜드 보이스에 충실하는 것이었습니다.

404 오류 페이지를 즐거운 순간으로 만드십시오

아무도 404 페이지에 도달하고 싶어하지 않습니다. 짜증나고 예상치 못한 일입니다. 그러나 실제로 피할 수는 없으므로 웹 사이트에 대한 대체 페이지를 항상 404 페이지로 만드는 것이 좋습니다.

그리고 사용자 경험의 관점에서 404 페이지는 벽돌 벽이 아니라 작은 과속 방지턱이어야 합니다. 올바른 디자인은 좌절된 바운스와 가능한 전환 사이의 차이일 수 있습니다. 그러니 재미있게 만들어 보는 것은 어떨까요?

편집자 주: 이 게시물은 원래 2015년 12월에 게시되었으며 포괄성을 위해 업데이트되었습니다.