Nov 142 min read

창의적인 404 에러 페이지 디자인 15가지

우리는 웹사이트를 자유롭게 탐색하고 끊임 없이 피드를 스크롤하는 데 익숙해졌습니다. 그래서인지 오류가 발생하거나 작동하지 않는 링크 등을 클릭해서 "이 페이지를 찾을 수 없습니다"라는 메시지가 보이면 더 실망스럽습니다. 이런 상황에서 404 에러 페이지는 중요한 역할을 하게 됩니다.

404 에러 페이지는 고객에게 멋진 경험을 제공할 수도 있고 망쳐버릴 수도 있습니다. 이 작지만 중요한 웹사이트 디자인 섹션은 판매를 증대하고 방문자의 행동을 촉구할 수 있는 잠재력을 갖고 있습니다. 사이트 방문자가 웹사이트를 포기하고 떠나게 될지 아니면 브랜드의 충성도 높은 고객이자 팬이 될지는 404 에러 페이지의 역할이 크다고 할 수 있습니다.

오늘 소개해드릴 브랜드 및 디자이너들의 404 에러 페이지 디자인은 기존의 오류 메시지가 어떻게 장점으로 사용될 수 있는지 보여줍니다. 이러한 사이트는 고객의 기분이 나쁘지 않도록 만드는 동시에 어떨 때는 미소를, 어떨 때는 안도감을, 심지어 어떨 때는 조그마한 즐거움까지도 제공할 수 있도록 404 에러 페이지를 꾸몄습니다. 그럼 우선 404 not found 페이지라고도 알려진 이 에러 페이지들이 무슨 의미인지 간단하게 살펴보겠습니다.

404 에러 페이지란 무엇인가요?

404 에러 페이지는 존재하지 않는 URL로, 더 이상 사용할 수 없거나 사용 가능한 적이 아예 없었던 온라인 페이지입니다.

이 오류는 URL(브라우저의 주소 표시줄에 나타나는 웹 주소)을 잘못 입력하는 경우에 발생할 수 있습니다. 회사에서 웹사이트의 특정 콘텐츠를 삭제 또는 이동했거나 영구 링크 구조를 변경한 경우에도 404 에러 페이지로 이동할 수 있습니다.

쇼핑몰 웹사이트를 만들 때, 기본 옵션을 그대로 두거나 404 에러 페이지를 사용자 정의 할 수 있습니다. 404 에러 페이지를 사용자 정의하면 고객 경험을 향상하는 매력적인 디자인을 만들 수 있습니다. 디자인 외에도 방문자가 계속 탐색하는 데 필요한 도움과 방향을 제공하는 친근한 브랜드 메시지를 작성할 수도 있습니다.

01. 픽사(Pixar) - 귀여운 404 에러 페이지 템플릿

픽사(Pixar) 팬이라면 이 마음이 따뜻해지는 404 에러 페이지에 분명 공감할 것입니다. 많은 사랑을 받은 영화 인사이드 아웃(Inside Out)의 캐릭터가 등장하는 이 404 에러 페이지 디자인은 픽사의 브랜드 평판을 강화하고 사이트 방문자와의 유대를 구축하는 데 도움이 됩니다. 구어체 언어와 친숙한 캐릭터의 사용은 또한 페이지를 더 인간적으로 느끼게 하여 우리가 관계를 맺고 서로 이어질 수 있습니다.

여러분의 브랜드가 픽사만큼 전 세계적으로 널리 인정받는 브랜드이든 그렇지 않든 간에 친근하고 사람 냄새나는 404 에러 페이지를 텍스트와 이미지를 사용해 실험해 볼 수 있습니다.

02. 오믈렛(Omelet) - 유머가 있는 404 에러 페이지 템플릿

당혹스러운 상황을 가볍게 만드는 데는 제대로 된 유머만큼 좋은 것도 없습니다. 크리에이티브 회사인 오믈렛(Omelet)은 자신들의 계란과 관련된 주제는 유지하면서 404 에러 페이지에 사려 깊은 코미디의 힘을 활용했습니다.

선명한 빨간색 음영은 자동으로 경고 신호를 나타내지만, 처음에 맞닥뜨리는 당황스러움은 코믹한 "이 페이지는 멸종되었습니다(This page is eggstinct)" 메시지를 통해 해소됩니다. 사이트 방문자가 계속 탐색할 수 있도록 화면 맨 위에 메뉴 표시줄을 남겨 편리한 웹 내비게이션을 어떻게 제공하고 있는지 살펴보세요.

03. 드리블(Dribbble) - 인터랙티브 404 에러 페이지 템플릿

집중력 분산이 항상 나쁜 것은 아닙니다. SNS 플랫폼 드리블(Dribbble)의 404 에러 페이지 디자인은 집중력이 분산되는 것도 괜찮다는 것을 잘 보여줍니다. 재미있는 인터랙티브 디자인은 방문자가 원하는 웹페이지에 도달하지 못했다는 사실에서 잠시 관심을 돌리는 역할을 합니다.

꽤나 중독성이 있을 뿐만 아니라 탐색의 형태로 제공되어 이미지를 클릭하면 이미지 크리에이터의 프로필로 이동할 수 있으므로 자연스럽게 404 에러 페이지에서 벗어나게 됩니다. 또한 검색창과 홈페이지 링크도 포함되어 있습니다.

04. 드롭박스(Dropbox) - 유용한 404 에러 페이지 템플릿

자전거로 균형을 잡는 묘기를 부리는 이 친근한 2인조는 좋아하지 않을 이유가 없습니다. 천진난만한 일러스트레이션 스타일로 그려진 이 캐릭터들은 양쪽 뺨에 닿는 큰 미소를 짓고 있어 모든 것이 그저 조금 더 좋아 보이게 합니다. 웹 디자인에 일러스트레이션을 통합하는 이 멋진 예는 친숙함과 접근성을 담아 404 에러 페이지에 도달하는 당혹스러움을 완화합니다.

드롭박스(Dropbox)는 또한 사용자가 기업 웹사이트의 나머지 부분을 탐색하는 데 도움이 되는 몇 가지 유용한 링크도 추가했습니다. 404 에러 페이지를 만들 때는 홈페이지, 문의하기, 정보 페이지 등 방문이 가장 잦은 섹션에 대한 링크를 추가하여 사이트 방문자의 편의를 도모하는 것이 좋습니다.

05. 디아터리(The-Artery) - 브랜드 이미지에 맞는 404 에러 페이지 템플릿

이 아름답게 디자인된 디아터리(The-Artery)의 404 에러 페이지에 도달한다면 불만을 표할 사람이 그리 많지 않을 것입니다. 이 세련된 404 에러 페이지 디자인은 이 창의적인 스튜디오 웹사이트의 나머지 부분과 조화를 이루므로 잘못된 링크인 경우에도 원활한 브라우징 경험을 제공합니다.

이미지 자체는 커서에 반응하여 움직이며 흥미로운 요소로 구성됩니다. 덕분에 사이트 방문자가 의도적으로 이 페이지에서 조금 더 오래 머물게 될 가능성이 있습니다. 사용된 텍스트도 편안한 느낌을 주기 때문에 화면 아무 곳이나 클릭하도록 유도하여 손쉽게 브라우징을 계속하도록 합니다.

06. 레이지 오프(Lazy Oaf) - 트렌디한 404 에러 페이지 템플릿의 예

이 404 에러 페이지는 규칙에 얽매이지 않습니다. '2001년부터 기발함'이라는 정체성을 말하는 패션 브랜드 레이지 오프(Lazy Oaf)는 최선을 다해 이 정체성을 지키고 있습니다.

레이지 오프는 사이트 방문자에게 에러 페이지에 도달하게 된 이유를 평범하게 설명하는 대신 재미난 구실, 슬픈 이모티콘, '되도 않는 일이 벌어졌어요'라고 말하는 이미지를 표시합니다. 이 아주 솔직하고 밝은 색으로 구성된 404 에러 페이지 디자인은 결코 슬프게 느껴지지 않습니다. 레이지 오프는 메뉴 모음을 계속 표시하고 온라인 쇼핑몰 이미지를 스크롤을 조금만 하면 도달할 수 있는 거리에 포함시켜 직관적인 탐색을 보장합니다

07. 스포티파이(Spotify) - 개인적인 감성을 주는 404 에러 페이지 템플릿

스포티파이(Spotify)의 에러 페이지는 밀레니얼 핑크 색상과 LP판 이미지를 트렌디하게 사용하여 브랜드 정체성을 확실히 보여줍니다. 에러 페이지의 머리글과 바닥글 모두에 메뉴 모음이 있어 탐색도 간편합니다.

스포티파이는 메뉴를 통한 간편한 탐색 외에도 친근한 대화체를 사용해 다른 유용한 페이지를 제안하기도 합니다. 에러 페이지를 직접 만들 때 "아마도요"처럼 가벼운 표현을 사용하면 사이트 방문자가 사람과 대화하는 것 같이 느끼도록 할 수 있습니다.

08. 줄리 보네모(Julie Bonnemoy) - 애니메이션 404 에러 페이지 템플릿

프리랜서 디자이너 줄리 보네모(Julie Bonnemoy)의 디자인 포트폴리오는 진정한 시각적 축제라고 할 수 있습니다. 이 404 에러 페이지는 홈페이지 디자인과 거의 동일하며 텍스트만 다릅니다. 즉, 방문자는 404 에러 페이지에 도달했다는 것을 거의 알아채지 못한 채로 사이트의 다른 섹션으로 원활하게 이동할 수 있습니다.

홈페이지와 404 에러 페이지를 비슷한 스타일로 디자인하기로 결정한 경우 특정 요소를 추가하여 매력적인 경험을 만들어 볼 수 있습니다. 사이트에서 애니메이션 요소를 여러모로 활용하고 투명한 동영상과 독특한 벡터 아트 일러스트레이션을 추가해 보세요.

09. 오케이큐피드(OkCupid) - 평온한 404 에러 페이지 템플릿

데이팅 사이트인 오케이큐피드(OkCupid)는 사이트 방문자가 서비스에 가입하도록 장려하는 주요 목표를 숨기려고 한 적이 없습니다. 이 눈에 잘 띄는 CTA(콜투액션)는 매우 직접적인 접근 방식이지만 섬세한 글꼴이 화면을 부드럽게 흐르는 매끄러운 수중 이미지와 짝을 이룹니다. 이 두 가지가 합쳐져 강요하는 것과는 거리가 먼 전체적으로 균형이 잡힌 모습이 됩니다.

또 다른 팁은 404 에러 페이지 디자인을 차분한 색조 중앙에 배치하여 페이지가 누락되었을 수 있지만 여전히 제대로 가고 있음을 고객이 확신할 수 있도록 하는 것입니다. 오케이큐피드의 푸른 색조는 평온함과 신뢰를 불러올 수 있으므로 404 에러 페이지에 사용하기에 알맞습니다. 색채 심리를 연구하면 디자인에 알맞은 색조를 찾는 데 도움이 될 수 있습니다.

10. 레고(Lego) - 친근한 404 에러 페이지 템플릿

레고(Lego)는 404 에러 페이지 디자인에 익숙한 캐릭터를 사용하여 고객과 브랜드를 연결하고 친근한 분위기를 조성합니다. 대화 스타일 텍스트는 느낌표와 일상 언어를 사용해 가볍고 재미있는 어조를 유지합니다.

유머러스한 404 에러 페이지를 만들고자 한다면 대체 탐색 옵션을 제공하는 레고의 에러 페이지처럼 기능성을 유지해야 합니다. 레고는 흰색 배경을 사용해 CTA 버튼을 강조했습니다. 머리글과 바닥글 모두에 메뉴를 계속 표시하기 때문에 사이트 방문자는 다른 페이지에 쉽게 접근할 수 있습니다.

11. 우에노(Ueno) - 창의적인 문구가 돋보이는 404 에러 페이지 템플릿

디지털 에이전시 우에노(Ueno)는 재미있는 가벼운 느낌의 404 에러 페이지 디자인을 여러 개 만들었습니다. 마치 살기 위해 달리는 움직이는 핫도그는 우리가 얼굴에 미소를 짓기에 충분히 재미있습니다. 더군다나 왼쪽에 있는 재치 있는 텍스트까지 보면 사이트 방문자는 이 누락된 페이지를 우연히 만나게 된 것이 참 기쁜 일이라고 생각하게 될 것입니다.

우에노는 정밀하고 미니멀한 디자인에 코믹함을 담았습니다. 404 에러 페이지 디자인에 유머를 담고자 한다면 디자인 원칙을 준수하는 전문적인 외형을 유지하여 균형을 맞춰야 합니다. 공백, 최소한의 색상 팔레트 및 텍스트 계층 구조를 사용하면 브랜드가 전문적인 느낌이 나도록 할 수 있습니다.

12. 피그마(Figma) - 흥미로운 404 에러 페이지 템플릿

피그마(Figma)의 에러 페이지는 처음에는 클래식한 흰색 배경에 검은색 텍스트로 된 디자인으로만 보일 수 있지만 이런 진부한 것과는 거리가 멉니다. 자세히 살펴보면 텍스트를 다양하게 활용하여 약간 중독적인 대화형 게임을 할 수 있으며 이는 피그마의 특성을 보여주는 것이기도 합니다.

피그마는 페이지 상단과 하단에 메뉴를 두는 등 다양한 탐색 옵션을 통합해 놓기도 했습니다. 그래서 당황할 수 있었던 방문자가 여러 메뉴 항목을 클릭해 손쉽게 원하는 페이지로 이동할 수 있습니다.

13. 메일침프(MailChimp) - 마음이 따뜻해지는 404 에러 페이지 템플릿

아이와 같은 천진함과 감동 사이에 완벽하게 위치하는 일러스트 스타일을 구현하는 메일침프(MailChimp)는 404 에러 페이지에 도달하게 되는 다소 낙담할 수 있는 상황을 완화하는 데 있어 달인입니다. 메일침프는 에러 페이지 중간에 큰 버튼을 유일하게 컬러로 배치하여 눈에 띄게 만들었습니다.

하지만, 이 404 에러 페이지가 진정으로 특별한 점은 각 요소를 센스 있게 만든 것입니다. 구멍에 머리를 넣고 필사적으로 방문자가 원하는 페이지를 찾는 당나귀 이미지는 그 자체로 감동적입니다. 시적인 언어와 세리프체와 산세리프체의 글꼴 조합이 결합되어 전체적인 효과가 감동적이고 기분을 고양시킵니다.

14. 웨이드 앤 레타(Wade and Leta) - 이상하면서도 멋진 404 에러 페이지 템플릿

창의력 넘치는 2인조 웨이드(Wade)와 레타(Leta)가 제작한 이 독특한 디자인은 그야말로 군계일학입니다. 포트폴리오의 다른 부분처럼 이 에러 페이지는 개인적이며 좋은 쪽으로 이상합니다. 웨이드와 레타는 404 에러 페이지와는 관련이 없어 보이는 웨이드가 슈퍼마켓 통로에서 이야기하며 손짓을 하는 짧은 반복 GIF 이미지를 포함했습니다.

그렇지만 이 이미지는 미소를 불러 일으키며 에러 페이지 도달을 긍정적으로 생각할 수 있게 해줍니다. 크고 대담한 텍스트는 웹디자인 트렌드일 뿐만 아니라 세련되고 당당한 방식으로 문제에 대해 직설적으로 알립니다.

15. Wix - 깔끔하고 간결한 404 에러 페이지 템플릿

홈페이지 만들기 플랫폼 Wix도 빼놓을 수 없죠. 물론 복슬복슬한 고양이가 등장해서만은 아니지만요. 이 고양이 친구는 확실히 귀여움으로 시선을 사로잡지만, 사이트 방문자가 사이트 방문자가 도메인 이름을 잘못 입력했을 수 있거나 다른 반려동물이 잘못 눌렀을 수도 있음을 미묘하게 암시하는 역할을 하기도 합니다.

눈에 보이는 모습 외에도 이 에러 페이지는 방문자를 원하는 위치로 안내하는 유용한 링크를 제공합니다. 텍스트는 간결합니다. 간단한 웹사이트 색상표와 결합되고 회색과 검정색이 살짝 포함된 큰 흰색 배경으로 구성된 이 페이지의 웹 디자인은 차분한 느낌을 불러 일으킵니다.

Wix의 웹 디자인을 이용하면 다양한 웹페이지를 디자인할 수 있답니다 😉

By 조윤정

SEO & 블로그 전문가