13 최고의 WordPress 404 오류 페이지 디자인 예제

최고의 404 오류 페이지 디자인 예제를 찾고 계십니까?

올바른 404 페이지는 방문자를 사이트에 더 오래 머물게 하고 전환을 유도합니다. 흥미롭고 유용하며 재미있는 404 페이지를 만들어 방문자에게 오류가 표시되는 경우에도 훌륭한 경험을 제공할 수 있습니다.

이 기사에서는 최고의 404 오류 페이지 디자인 중 일부를 공유합니다.

404 설계를 최적화해야 하는 이유

404 오류는 누군가가 방문하려는 페이지에 서버가 도달할 수 없을 때 발생합니다. 빈 화면을 표시하는 대신 서버는 대신 404 페이지를 표시합니다.

대부분의 WordPress 테마는 기본 404 템플릿과 함께 제공되지만 이러한 디자인은 일반적으로 기본적이고 단순합니다.

방문자가 읽고 싶어하는 인기 게시물이나 사이트의 탐색 메뉴와 같은 웹사이트의 콘텐츠도 표시하지 않습니다.

방문자에게 지루하고 도움이 되지 않는 404 페이지를 표시하면 WordPress 웹사이트를 떠날 가능성이 높아져 반송률이 증가하고 WordPress SEO가 손상됩니다.

이를 염두에 두고 나만의 브랜딩과 콘텐츠가 포함된 맞춤 404 페이지를 만드는 것이 현명합니다. 검색 창, 메뉴, 링크 및 기타 유용한 콘텐츠를 추가하여 방문자가 원하는 것을 찾도록 도울 수도 있습니다.

맞춤형 404 디자인을 만드는 가장 쉬운 방법은 SeedProd 플러그인을 사용하는 것입니다. 가장 인기 있는 드래그 앤 드롭 랜딩 페이지 빌더이므로 코드를 작성하지 않고도 사용자 지정 404 페이지를 만들 수 있습니다.

SeedProd에는 전문적으로 디자인된 404 템플릿이 많이 있어 멋진 오류 페이지를 빠르게 만들 수 있습니다.

SeedProd를 설치한 후에는 영감을 얻기 위해 경쟁자에게 문의하는 것이 좋습니다. 이를 염두에 두고 최고의 404 오류 페이지 디자인을 수집했습니다.

1. 디피

많은 웹사이트에서 카운트다운 타이머를 사용하여 긴박감을 조성하고 FOMO를 사용하여 더 많은 전환을 얻습니다. 그러나 DFY는 404 페이지에 카운트다운 타이머를 추가하기로 이례적인 결정을 내렸습니다.

이 타이머는 방문자가 자동으로 홈페이지로 리디렉션될 때까지 초를 카운트다운합니다. 시간 제한을 생성함으로써 DFY는 즉시 404 페이지를 더욱 매력적으로 만들고 시간이 다 떨어지기 전에 방문자가 결정을 내리도록 유도합니다. 또한 특이한 디자인 선택이므로 방문자의 관심을 끌 수 있습니다.

404 페이지의 메시지는 이러한 긴박감을 더하여 매우 극적이고 매력적인 페이지 디자인으로 만듭니다.

사이트에서 시간 제한을 사용하는 방법에 대한 자세한 내용은 WordPress에 타이머 위젯을 추가하는 방법에 대한 가이드를 참조하세요.

2. 옵틴몬스터

OptinMonster는 120만 개가 넘는 웹사이트에서 사용되는 최고의 WordPress용 이메일 캡처 플러그인 중 하나입니다. 방문자를 구독자와 고객으로 전환하는 데 필요한 모든 것이 있습니다.

당연히 OptinMonster는 404 페이지를 눈길을 끄는 애니메이션과 명확한 클릭 유도 문안이 있는 리드 생성 도구로 사용합니다.

더 좋은 점은 피치가 방문자의 상황과 관련이 있다는 것입니다.

누군가 404 페이지에 도달하면 원하는 것을 찾을 수 없기 때문에 웹사이트를 포기하고 포기할 가능성이 큽니다.

OptinMonster의 제안은 다음과 같이 묻습니다. '귀하의 웹사이트를 떠난 방문자의 70% 이상이 다시는 돌아오지 않는다는 사실을 알고 계셨습니까?'

방문자는 이미 웹사이트 이탈에 대해 생각하고 있기 때문에 이 통계에 따라 조치를 취할 가능성이 더 큽니다. 클릭 유도문안은 방문자에게 포기한 웹사이트 방문자를 구독자로 전환할 것을 약속하는 무료 전자책을 제공합니다.

'지금 다운로드' 버튼을 클릭하면 이메일 주소를 입력하고 무료로 다운로드할 수 있는 팝업이 열립니다.

보시다시피 OptinMonster는 404 오류를 유리하게 사용하여 매우 적절하고 시의적절하다고 느껴지는 피치를 생성합니다.

리드 생성을 위해 자신의 404 페이지를 사용하려는 경우 SeedProd의 경품, 문의 양식 및 Optin Form 블록을 사용하여 이메일 주소를 수집할 수 있습니다.

3. 쿠알로

많은 웹사이트에서 게임화를 사용하여 고객 충성도를 높이고 사람들이 사이트를 다시 방문하도록 합니다.

Kualo는 한 단계 더 나아가 404 페이지를 게임화했습니다.

방문자가 기본 Kualo 웹사이트로 돌아가는 길을 찾도록 돕는 대신 404 페이지는 방문자에게 스페이스 인베이더 게임에 도전합니다.

이것은 실망스러운 오류 메시지를 재미있는 놀라움으로 바꿉니다.

더 좋은 점은 수명이 다하면 Kualo는 계속 플레이할 수 있는 인센티브를 제공한다는 것입니다.

팝업은 플레이어가 1000점 이상을 획득하면 호스팅 할인을 제공합니다. 이것은 방문자를 웹사이트에 더 오래 머물게 하고 사용자 경험에 가치를 더하는 404 페이지의 완벽한 예입니다.

4. 트립어드바이저

TripAdvisor의 404 페이지는 재미있고 기능적이며 여행 업계에 특화된 농담으로 열립니다.

누군가 귀하의 404 페이지를 방문하면 자신의 경험에 실망할 수 있습니다. 유머는 이러한 사람들을 다시 참여시키는 좋은 방법이 될 수 있습니다.

더 좋은 점은 농담이 항상 TripAdvisor 브랜드와 관련이 있다는 것입니다.

브랜딩은 표준 WordPress 404 페이지를 맞춤형 디자인으로 대체할 때 얻을 수 있는 주요 이점 중 하나이며, TripAdvisor의 페이지는 브랜딩이 맞춤형 로고와 이미지가 아니라는 것을 보여줍니다. 404 페이지의 단어는 그래픽만큼 중요합니다.

404 페이지는 또한 방문자가 원하는 것을 찾는 데 도움이 되는 TripAdvisor 웹사이트의 모든 주요 영역을 강조 표시합니다.

탐색이 매우 중요하므로 페이지 편집기 내에서 직접 모든 종류의 메뉴를 빌드할 수 있는 SeedProd의 탐색 메뉴 블록을 살펴보는 것이 좋습니다.

5. 브렛 테렙스트라

언뜻 보기에 Brett Terpstra의 404 페이지는 기본적으로 보일 수 있지만 진정한 힘은 추천 게시물 목록에 있습니다.

Brett Terpstra의 404 페이지에는 방문자가 404 오류가 발생했을 때 액세스를 시도했던 링크와 관련된 키워드가 포함된 게시물 목록이 표시됩니다.

방문자 경험에 많은 것을 추가하는 간단한 트릭입니다.

개인화된 콘텐츠는 사이트를 더 유용하고 매력적이며 매력적으로 만들 수 있으므로 이를 404 페이지로 확장하는 것이 좋습니다.

타겟 콘텐츠에 대해 자세히 알아보려면 WordPress에서 개인화된 콘텐츠를 다른 사용자에게 표시하는 방법에 대한 가이드를 참조하세요.

6. 지속적인 접촉

Constant Contact는 좌절한 방문자를 설득하기 위해 유머를 사용하는 또 다른 404 페이지입니다. 이메일 서비스 제공업체는 비공식적인 언어를 사용하여 대상 고객에게 어필하는 동시에 방문자에게 홈페이지로 쉽게 돌아갈 수 있는 경로를 제공합니다.

페이지를 아래로 스크롤하면 Constant Contact 웹 사이트의 다른 중요한 영역에 대한 링크를 찾을 수 있습니다.

그러나 우리가 정말 좋아하는 것은 파란색 블록 중 하나 위로 마우스를 이동할 때마다 재생되는 짧은 호버 애니메이션입니다.

애니메이션은 페이지를 더욱 매력적으로 만들 수 있으며 여러 호버 애니메이션은 방문자가 404 페이지를 이동할 때 스토리텔링 요소를 만듭니다.

SeedProd Animated Headline 블록을 사용하여 텍스트를 강조 표시하고 회전하는 것을 포함하여 404 페이지에 애니메이션을 적용하는 몇 가지 방법이 있습니다. 자세한 내용은 WordPress에 CSS 애니메이션을 추가하는 방법에 대한 가이드를 참조하세요.

7. IMDB

대부분의 사람들은 완전히 다른 것을 찾을 때 404 페이지를 보게 됩니다. 404 오류는 예기치 않은 오류이므로 브랜드 친숙성을 유지하여 방문자가 여전히 사이트에 있다는 것을 안심시키는 것이 중요합니다.

IMDB는 영화나 TV 쇼의 유명한 인용문을 보여줌으로써 매우 미묘하고 가벼운 방식으로 이를 수행합니다.

또한 인용한 TV 프로그램이나 영화에 대해 자세히 알아볼 수 있는 링크도 포함되어 있습니다.

이러한 방식으로 IMDB의 404 페이지는 방문자에게 콘텐츠를 탐색할 수 있는 재미있는 방법을 제공하는 동시에 브랜드를 강화합니다.

404 페이지에 임의의 인용문을 표시하는 것은 재미있고 매력적일 수 있습니다. 그러나 방문자가 임의로 선택한 링크에 관심이 없는 경우를 대비하여 사이트의 가장 중요한 콘텐츠에 대한 링크를 제공하는 것은 여전히 ​​좋은 생각입니다.

IMDB는 홈페이지에 대한 링크를 포함하여 이것이 복잡할 필요가 없음을 보여줍니다.

8. 스티브 매든

Steve Madden은 404 페이지에 베스트셀러 제품을 표시하여 오류 메시지를 판매로 전환하려고 합니다.

더 나아가 필터를 추가하여 고객이 404 페이지에서 직접 다양한 제품을 찾아볼 수 있습니다.

온라인 스토어를 운영한다면 가장 인기 있는 상품, 세일 중인 상품, 최신 상품 등을 쉽게 진열할 수 있습니다. 404 페이지에 '베스트셀링 제품' 블록을 추가하기만 하면 SeedProd가 이러한 제품을 찾은 다음 자동으로 404 페이지에 추가합니다.

자신의 404 페이지를 디자인할 때 웹사이트의 나머지 부분과 동일한 머리글 및 바닥글을 사용하는 것이 좋습니다. 이렇게 하면 브랜딩이 강화되고 방문자가 올바른 위치에 있는지 궁금해하지 않게 됩니다.

이것은 Steve Madden의 404 페이지에서 볼 수 있는 것과 정확히 일치하지만 특히 이 두 개의 작은 영역에 얼마나 많은 콘텐츠를 넣을 수 있는지가 마음에 듭니다.

머리글과 바닥글은 방문자가 Steve Madden 매장의 어느 부분이나 회사의 Twitter 및 Facebook 페이지와 같은 타사 사이트로 바로 이동할 수 있도록 도와줍니다.

스마트 제품 검색 표시줄을 포함하여 대화형 영역에 대한 액세스도 제공합니다.

9. 아파트 테라피

Apartment Therapy의 이 404 디자인은 큰 영웅 이미지로 방문자의 시선을 즉시 사로잡습니다.

Apartment Therapy는 이 공간을 사용하여 와시 테이프에 대한 농담과 함께 세련된 주방 사진을 보여줌으로써 브랜드 아이덴티티를 강화합니다.

디자인에 영웅 이미지를 추가하려는 경우 SeedProd에는 기성품 영웅 섹션이 많이 있습니다. 버튼 클릭 한 번으로 404 디자인에 추가할 수 있는 이미지 모음, 클릭 유도문안 및 간단한 리드 모음 양식입니다.

Apartment Therapy 웹 사이트에는 집에서 바로 볼 수있는 섹션도 있습니다.

10. 비명을 지르는 개구리

이 목록에 있는 다른 404페이지와 마찬가지로 Screaming Frog는 유머를 사용하여 방문자와 소통하려고 합니다.

그러나 이 목록에 있는 다른 비즈니스와 달리 Screaming Frog는 웹 사이트 소유자가 끊어진 링크를 찾아 수정하는 데 도움이 되는 도구를 만듭니다. 그들의 404 페이지는 URL이 깨진 Screaming Frog 웹 사이트의 아이러니를 지적하는 데 시간을 낭비하지 않습니다.

Screaming Frog는 자신을 놀리면서 너무 심각하게 생각하지 않는 기억에 남는 404 페이지를 제공합니다.

애니메이션 배경은 또한 이 404 디자인이 다른 제품보다 돋보이도록 도와줍니다.

동영상과 애니메이션은 404 페이지를 더욱 매력적으로 만드는 좋은 방법입니다. 그러나 그들은 404 페이지의 로딩 시간을 추가할 수 있으므로 특히 404 디자인에서 크거나 고해상도 비디오를 많이 사용하는 경우 WordPress 성능을 가속화하기 위한 팁을 따르는 것이 좋습니다.

11. 몬스터 인사이트

MonsterInsights는 Google Analytics를 위한 최고의 WordPress 플러그인입니다. WordPress에 Google 애널리틱스를 쉽게 설치할 수 있으며 WordPress 대시보드에 유용한 보고서가 표시됩니다.

MonsterInsights는 브랜드 페이지의 좋은 예입니다. 방문자가 이 페이지에 도착하면 MonsterInsights 로고를 기반으로 한 고유한 그래픽이 표시됩니다.

이는 방문자가 끊어진 링크를 따라가더라도 여전히 MonsterInsights 웹 사이트에 있음을 알리는 재미있는 방법입니다.

이 페이지에서는 또한 404 오류가 무엇인지 설명하고 방문자가 오류를 수정하기 위해 할 수 있는 몇 가지 작업을 제안합니다. 사람들이 스스로 404 오류를 해결하도록 돕는 것은 방문자 경험을 개선할 수 있으므로 자신의 404 페이지에 이 정보를 포함하는 것이 좋습니다.

방문자가 스스로 문제를 해결하도록 권장하더라도 사이트의 가장 중요한 콘텐츠에 대한 링크를 포함하는 것이 여전히 중요합니다. MonsterInsights 404 페이지는 지원 페이지, MonsterInsights 설명서 및 가격 책정 페이지에 대한 링크를 포함하여 사람들에게 몇 가지 옵션을 제공합니다.

12. 미친

MAD는 토글을 사용하여 404 오류 메시지를 생성함으로써 단순하지만 고도의 대화형 페이지를 만들었습니다. 모든 토글을 꺼서 이 메시지를 제거하거나 토글을 활성화하여 나만의 메시지를 만들 수도 있습니다.

방문자로부터 많은 상호 작용을 얻을 수 있도록 설계된 매우 간단하지만 즐거운 경험입니다. 방문자가 기억하고 다른 사람과 공유할 수도 있는 매우 독특한 404 페이지이기도 합니다.

이 놀라운 디자인은 단순한 아이디어에서 기억에 남고 재미있는 404 페이지를 만들 수 있음을 증명합니다.

13. 남서부

Southwest의 404 페이지는 404가 무엇이며 오류가 표시되는 이유를 설명하여 방문자가 정상 궤도로 돌아올 수 있도록 돕습니다. 대상 고객이 404 오류에 익숙하지 않은 경우 도움이 될 수 있는 몇 가지 가능한 수정 사항도 제안합니다.

이 디자인이 정말 눈에 띄는 부분은 표시할 수 있는 링크의 수와 이러한 URL이 얼마나 깔끔하게 구성되어 있는지입니다.

화면 하단으로 스크롤하면 소셜 미디어 링크, 연락처 정보, 이메일 목록에 가입할 수 있는 링크 및 기타 수십 개의 링크가 모두 명확하고 사용자 친화적인 범주로 정렬되어 있음을 알 수 있습니다.

Southwest 404 페이지는 방문자를 압도하지 않고 페이지에 얼마나 많은 정보를 담을 수 있는지 보여주는 좋은 예입니다.

여기에서 올바른 레이아웃이 핵심이며 Southwest는 카테고리, 목록 및 다양한 섹션을 사용하여 정보가 풍부하지만 여전히 읽기 쉬운 404 페이지를 만드는 훌륭한 작업을 수행합니다.

이 기사가 최고의 404 오류 페이지 디자인 예제를 찾는 데 도움이 되었기를 바랍니다. 최고의 WordPress 페이지 빌더 플러그인에 대한 가이드와 최고의 이메일 마케팅 서비스 비교를 확인하여 잠재 고객을 유료 고객으로 전환할 수도 있습니다.

이 기사가 마음에 드셨다면 WordPress 비디오 자습서용 YouTube 채널을 구독하십시오. 트위터와 페이스북에서도 우리를 찾을 수 있습니다.