※ Creative Bloq의 「404 pages: Check out the best error pages around」을 각색한 글입니다.
웹사이트를 만들 때 에러가 표시되는 페이지를 만드는 사람들은 많이 없겠으나, 그래도 필수적인 페이지인 것은 맞습니다. 사람들이 에러페이지를 보지 않도록 하는 게 이상적이지만 잘 만들어 놓는다면 에러가 난 상황에서도 디자이너와 브랜드에 대한 좋은 인상을 남길 수 있습니다.
위트와 재치가 있는 UX나 디자인으로 에러페이지를 만드는 사례는 점점 더 많아지는 추세입니다. 에러페이지는 잘 생각해서 만든 CSS 애니메이션일 수도 있고, 패럴렉스 스크롤을 이용해서 멋진 효과를 보여줄 수도 있고, 단순한 에러 안내 문구만 보여줄 수도 있습니다. 여러분의 에러페이지에 활기를 불어넣을 방법은 아주 다양한 편이죠. 아래 사례들처럼 말입니다.
잘 만든 에러페이지는 웹사이트의 작은 홍보대사 같은 역할을 할 수 있습니다. 사람들이 이런 화면들을 캡처해서 트위터와 관련 블로그에 공유하면서, 고객 서비스와 참신한 디자인을 위해 들인 노력이 알려지죠. 지금부터 위시켓이 여러 기업의 에러페이지 디자인을 소개해드릴 테니, 잘 살펴보시고 여러분의 웹사이트에도 적용해보시기 바랍니다 :^)
01. 슬랙 SLACK
슬랙은 편리한 업무용 메신저 툴을 제공하는 회사입니다. 슬랙에서 에러가 발생하면 무성한 나뭇잎과 산과 무지개가 펼쳐진 환상적인 풍경이 화면에 나타납니다. 나비와 닭과 꼬마 돼지가 자유롭게 돌아다니며, 마우스를 스크롤 하면 화면이 위아래로 움직이기도 합니다. 사용자는 에러라는 화가 날 만한 상황에서 마음이 평화로워지는 화면을 보게 됩니다.
02. 퓨레메종 PURÉE MAISON
퓨레메종은 커뮤니케이션 전략에 전문성을 가진 크리에이티브 에이전시입니다. 개성 있는 웹사이트에는 재미있는 애니메이션으로 가득 차 있죠! 동영상을 클릭해서 보시면 이곳의 에러페이지가 얼마나 기발한지 보실 수 있습니다. 디지털 공간에서 어떤 장벽에 부딪혔을 때의 괴로움을 애니메이션으로 아주 잘 표현해내거든요.
03. 픽사 PIXAR
에러페이지를 디자인할 때는 사람들의 마음을 자극하는 방법을 사용할 수도 있습니다. 픽사의 에러페이지는 2015년에 엄청나게 큰 인기를 끈 애니메이션 〈인사이드 아웃〉의 슬픔이(Sadness)입니다. 이 캐릭터를 통해서 보여주는 감정이 에러페이지를 만났을 때 느껴지는 일반적인 우리의 감정을 보여줍니다. 굉장히 간단하면서도 직관적인 이미지라고 볼 수 있습니다.
4. 20세기 폭스 20TH CENTRY FOX
20세기 폭스의 영화 사이트에는 페이지가 잘못되면 기발한 방식으로 사용자를 안내합니다. 에러페이지와 함께 컬트 무비의 한 장면이 튀어나오는데요. 화면에는 간략한 안내 문구와 함께 여러분이 좋아할 수 있는 영화들을 추천해줍니다. 폭스 웹사이트에서 에러페이지로 보여준 장면들로는 〈가위손〉 〈기숙사 대소동〉 〈나폴레옹 다이너마이트〉가 있었습니다.
5. 마블 MARVEL
마블은 에러페이지에 마블 유니버스의 주시자(Watcher) 캐릭터를 등장시켜서 자신들의 브랜드 입지를 더욱 견고하게 보여줍니다. 블랙 위도(Black Widow)를 배경에 두고, 우아투의 눈알이 여러분의 마우스 움직임을 따라다니는데요. 마블의 팬이라면 이러한 에러페이지도 굉장히 달갑게 느껴질 것 같습니다.
6. 쿠알로 KUALO
웹 호스팅 기업인 쿠알로는 에러페이지에서 방문자들이 스페이스 인베이더 게임을 즐길 수 있도록 만들었습니다. 침공하는 외계인들은 KUALO라는 글자로 진영을 이루는데, 아주 잘 만든 게임은 아니지만 굉장히 재미있는 편이라고 합니다. 1,000점 이상을 획득하면 호스팅 비용을 할인해준다고 하니 UX를 중시한 좋은 에러페이지 디자인이라고 볼 수 있습니다.
7. 피그마 FIGMA
다양한 UI를 제작할 수 있는 툴인, 피그마는 에러페이지도 서비스의 특성을 잘 반영한 디자인을 사용하였습니다. 우선 404라는 글자가 커다랗게 표시되어 보이는데, 벡터로 렌더링이 되기 때문에 원하는 사용자가 원하는 모양으로 얼마든지 바꿀 수 있습니다.
8. 에어비앤비 AIRBNB
에어비앤비의 에러페이지는 간단하지만 재미있는 애니메이션을 볼 수 있습니다. 불운한 소녀가 아이스크림을 바닥에 떨어뜨렸는데요. 에어비앤비는 친근한 매력으로 명성을 얻는데, 에러페이지에서도 역시나 그런 브랜드 이미지를 정확하게 잘 보여줍니다.
9. 레고 LEGO
우리가 익히 잘 아는 레고도 위트 있는 에러페이지를 가졌습니다. 공사 현장에서 갓 뛰어온 듯한 레고 무비의 캐릭터인 에밋(Emmet)이 나와서 에러페이지에를 안내하는데요. 레고의 캐릭터와 에러페이지의 절묘함이 돋보입니다.
10. 드롭박스 DROP BOX
드롭박스는 난해한 상자를 표현한 에러페이지로 오랫동안 사랑을 받아왔습니다. 그런데 에셔(Esher)의 판화 같은 원래의 이미지를 개구쟁이가 그린 것 같은 그림으로 바꾸었습니다. 자전거의 바퀴가 빠져버렸을 때와 같이 난감한 상황이라는 것을 표현한 것으로 보이는데요. 드롭박스의 메시지를 잘 전달해주는 간단하면서도 멋진 그림인 것 같습니다. 아래에는 UX를 위해 내비게이션 메뉴의 링크를 추가해 놓는 것도 잊지 않았죠.
마치며
지금까지 IT 아웃소싱 플랫폼 위시켓과 함께 재미있고, 기발하고, 신기한 에러페이지 디자인을 알아보았습니다. 이제 실제로 에러페이지 디자인을 만들어볼 차례입니다! 앞서 말씀드렸다시피, 에러페이지 하나까지도 신경 써서 제작한다면 소비자에게 불편한 경험을 즐겁게 풀어낼 수 있습니다. 여러분의 브랜드에도 긍정적인 영향을 끼칠 수 있죠.
혹시 에러페이지 제작에 어려움을 겪고 계시나요? 위시켓에서 여러분의 에러페이지 디자인 제작을 도와줄 전문가를 만나보세요! :^)
원문: 위시켓
