웹서핑을 하면서 링크를 클릭하다 보면 "Page Not Found"를 심심치 않게 볼 수 있다. 별로 중요하지 않은 서비스의 중요하지 않은 링크라면 '어 링크 깨졌네' 하면서 아무 생각 없이 슥 지나가면 될텐데, 이게 내가 매일 애용하는 서비스에서 자꾸만 마주치게 되는 화면이라면 참 성의없어보이고 거슬리기 시작한다.
이때 이 404 Not Found 페이지를 좀 더 의미있게 꾸밀 수는 없을까? 이쁘고 발랄하고 큐트하게.
사람들을 충격과 공포로 몰아넣었던 mint.com
더러운남정네의 사진과
"페이지를 사용할 수 없습니다. 하지만 Justin은 (데려가도) 됩니다."
유심히 보면 몇 가지를 알 수 있는데,
단순히 "찾을 수 없습니다"라고만 말하는 것이 아니라
사이트의 주요 페이지로 향하는 링크들을 연결해 준다.
이정도만 해도 기본 페이지보단 훨씬 낫다. 사진 선택이 좀 미스지만.
GitHub 500 - Application Error
전세계의 오픈 소스가 모이는 곳, GitHub. 얘네 서비스 참 잘 만든다(-고 생각한다).
Application Error(서비스 제공자 측 에러) 페이지
서비스 운영에 문제가 있을 때 보여지는 페이지. 하단 중앙을 보면 "GitHub Status"라는 링크가 있다. 현재 GitHub의 서비스 운영/에러/복구 상황을 라이브로 보여주겠다는 것. 들어가 보면 다음과 같은 페이지가 나타난다.
GitHub Status 페이지. 다운타임, 응답시간 및 현재 상황에 대한 메시지를 보여준다.
어떤 시스템이 잘 동작 중이고, 어떤 시스템이 어떤 이유로 잘 동작하지 않고 있는지 자세하게 보여준다. 사용자는 이 페이지를 보면서 무슨 일이 일어났는지 알 수 있기 때문에 안심하고 놀다 올 수 있게 된다.
사실 GitHub Status 양 옆에도 버튼이 있는데, 각각 Contact Support, @githubstatus라고 해서, 현실의 사람(customer service 담당자)을 괴롭힐 수 있는 무시무시한 기능이다. 성질이 급한 사람만 사용하도록 하자.
GitHub에는 500페이지와 조금 다른 형태를 한 Fallback 페이지가 하나 더 있는데, 바로 404(Not Found) 페이지.
이 페이지에는 500에 없는 한 가지 기능이 더 있는데, 바로 검색창이다. 404는 500과는 달리 잘못된 링크를 타고 들어온 상황이기 때문에 원래 의도하던 목적지로 이동할 수 있게 검색창을 제공하는 것. 아 이 세심한 배려...
※ 사족인데, GitHub의 저 두 404, 500 페이지의 이미지/애니메이션에서 쓰인 parallax 효과는 plax라는 오픈 소스 라이브러리로 공개되어 있다.
그럼 이번엔 국내 포털들을 보자. 네이버와 다음밖에 모르는 관계로 이 둘만.
국내 대표 포털 네이버와 다음의 404 Not Found 페이지
앞에 너무 센 GitHub을 봐버려서 감흥이 없지만.. 역시나 메인 페이지로의 링크와 통합검색이 있다. 담당자를 괴롭히는 고객센터 링크도 물론.
이번에는 조금 다른 성격의 500 Application Error 페이지다. 내가 애정하는 독서 로깅 서비스인 Goodreads의.
특별한 디자인이나 기능이 아닌 문구만으로도 충분히 큰 기능을 할 수 있다는 것을 보여주는 Goodreads의 500 페이지.
> "고객님들께서 정말 활발히 많이 열정적으로 이용해 주셔서 잠시 용량을 초과했지만, 걱정마세요! 용량을 늘리도록 작업 중입니다."
이 정도 멘트면 30분 정도는 기쁜 마음으로 딴 일 하다 돌아올 수 있다.
구글도 있다! 크롬을 사용하면 가끔 마주칠 수 있었다.
크롬을 사용하면 가끔 마주쳤을 화면. "이것을 찾으셨나요?"
구글이 제공하는 custom 404 위젯 스크립트를 사용하면 내 홈페이지에 "Closest match"라고 해서, 입력한 URL과 가장 유사한 URL/페이지를 추천해 주는 기능을 붙일 수도 있다. 구글 검색창은 덤.
구글의 custom 404 위젯을 사용한 예제. 예쁘게 고칠 수도 있다.
앞에서 본 것처럼, 태생적으로 짜증나는 404, 500 페이지를 어떻게 잘 디자인하면 유저가 짜증내는 상황을 막고 좋은 인상과 가치있는 정보를 줄 수 있다. 큰 노력이 필요한 것도 아니니 지금처럼 Apache/nginx/Tomcat 기본 페이지만 보여주지 말고, 우리 스스로의 웹서핑 경험(experience)을 위해서라도 좀 더 샤방샤방 재미있는 커스텀 fallback 페이지가 늘어났으면 좋겠다.
보너스. Werkzeug라는 파이썬 웹 개발 라이브러리가 있는데, Werkzeug의 디버거(Flask의 디버그 모드)가 아주 훌륭하다.
Fiddler만큼이나 은혜로운 Werkzeug의 디버거
이 디버거를 이용하면 404, 500페이지 등 에러가 발생하는 상황에서 코드의 어느 부분에서 에러가 발생했는지 보여주고, 웹 브라우저상에서 바로 Python 코드를 실행할 수 있기 때문에 개발자의 디버깅을 훨씬 손쉽게 해준다.
유저 입장에서 마주칠 일은 없겠지만 이 또한 정말 유용한 커스텀 fallback 페이지.