웹 기반, 웹 서비스는 사용자 특정 또는 우리가 흔히 말하는 ‘타겟’에 따라 그 분위기가 모두 다를 수 밖에 없습니다. 서비스 종류에 따라서도 그렇고요. 그런데 이런 서비스 특성과 별개로 조금 더 자유롭고 재치있게 구성할 수 있는 화면이 있다면 404 페이지가 아닐까 싶습니다.

지금 써보러 갑니다를 통해서도 여러번 소개했던 404페이지는 사용자에게 있어 부정적 경험을 받을 수 밖에 없는 공간입니다. 자칫 그 순간 사용자를 잃을 수도 있으며, 긍정적 경험이 순식간에 부정적 경험으로 바뀔 수 있기도 합니다. 그래서 최근에는 이 404페이지를 더 재치있게 꾸미거나 서비스의 일부처럼 느끼게 하는 시도가 많아지고 있는데요. 오늘은 전 세계 다양한 웹서비스들이 404페이지를 어떻게 활용하고 있는지 살펴볼 수 있는 서비스를 소개하고자 합니다.

서비스는 아주 가볍게 구성되어 있지만, 지금껏 소개한 404페이지 관련 서비스와 조금 다릅니다. 기존에는 404 페이지를 리스트 형태로 썸네일에 따라 확인 할 수 있었는데요. 이 곳은 ‘Generate 404 page’를 클릭하면 하나씩 사례를 확인 할 수 있습니다.

슬랙이에요. 올해 말 엄청난 규모의 딜을 만들어 낸 장본인이기도 하고요. (세일즈포스, 슬랙 인수…277억 달러 빅딜) ‘Help Center’로 이동하거나 이전 페이지로 돌아갈 수 있다는 안내를 활용하고 있는 404 페이지 모습!

슬랙이 길을 잃었다는 것을 숲으로 표현했다면, RevStack은 재치있는 사람 일러스트레이션으로 표현하고 있네요. (앞선 404 관련 글에서도 언급한 내용이지만 길을 잃었다는, 존재하지 않는 페이지라는 것에 대한 정보만 제공하는 것으로 끝나선 안됩니다. 어디로든 바로 다시 이동할 수 있는 길을 만들어줘야 해요) 메인 화면으로 이동 할 수 있는 버튼을 넣어두는 것도 잊지 않은 모습입니다.

Bizplan은 마치 우리가 어딘가를 탐험하는 듯한 느낌을 주려고 노력중이네요. 홈화면으로 이동할 수 있는 버튼(링크)은 물론 푸터까지 모두 살려둔 모습입니다. 이정도라면 어디든 빨리 이동 할 수 있겠죠?

Involve.me는 서비스 로고를 재치있게 활용하고 있어요. 피그마의 404페이지와 유사한 방법이기도! 앞선 사례들과 같이 시작 화면 등 다시 서비스를 이용할 수 있는 링크를 제공함과 동시에 페이지를 아래로 내려 다른 정보를 확인 할 수 있도록 구성한 모습입니다.

서비스 소개를 위해 404페이지 4개 정도를 간단히 소개했지만, 이 곳에는 훨씬 많은 404페이가 등록되어 있으니 구성 방법에 대한 힌트가 필요하시다면 지금 바로 확인해보세요!

404 페이지에 대한 내용, 함께 확인해보세요!

국내 서비스의 404페이지는 어떤 모습일까?

  • 스타일쉐어, 지그재그, 크몽, 캐릿 서핏 등 국내 서비스가 404페이지를 활용하고 방법을 볼 수 있는 글

에러페이지는 어떻게 구성하고 활용해야 할까? 사례를 통해 살펴보는 404 에러페이지 두 번째 이야기!

  • 어도비, 이베이, 메일침프 등 해외 서비스들이 404페이지를 어떻게 활용하고 있는지 볼 수 있는 글

25 Examples of Engaging 404 Error Pages

  • Figma, Dribbble 등 25개 해외 서비스, 404페이지 사례를 확인 할 수 있는 글

404 Illustrations

  • 404페이지에 쓰면 좋은 일러스트레이션을 무료로 다운로드 받을 수 있는 곳

Royalty free illustrations for pages

  • 404페이지에 쓰면 좋은 일러스트레이션을 무료로 다운로드 받을 수 있는 곳

지금 써보러 갑니다, 00:00 뉴스레터가 메일리로 이사가요!

올 2월부터 발행한 뉴스레터가 20회차 발행과 더불어 구독자 2000명을 돌파했어요! 부족한 콘텐츠임에도 꾸준히 봐주셔서 정말 감사합니다. 올 마지막 뉴스레터를 기점으로 스티비를 떠나 메일리로 뉴스레터 제작 및 발행 채널을 변경하게 되었습니다. 앞으로는 메일리를 통해 찾아갈게요! 기존 뉴스레터 확인 및 뉴스레터 구독은 링크를 통해 확인해주세요!