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의 Giveaway, Contact Form 및 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 디자인은 큰 영웅 이미지로 방문자의 시선을 단숨에 사로잡습니다.

아파트 테라피 역시 이 공간을 활용해 와시테이프에 대한 농담과 함께 세련된 주방 사진을 선보이며 브랜드 아이덴티티를 강화했다.

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

아파트 치료 웹사이트에는 집처럼 보이는 섹션도 있습니다.

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 채널을 구독하십시오. Twitter와 Facebook에서도 찾을 수 있습니다.