기획자의 모바일 앱 뜯어보기③
‘HTTP 404’의 다양한 모습
최근 핀터레스트에서 QR코드 관련 이미지를 검색하던 중 이미지 링크를 타고 크몽으로 넘어갔습니다. 그런데 글이 삭제된 상태라서 404 페이지가 뜨더군요. 크몽 캐릭터가 유령 모습을 한 채 해당 페이지가 없다는 내용을 알리고 있었습니다. 사용자의 접근 경로가 다양할 것이기 때문에 ‘돌아가기’ 버튼은 메인 페이지로 연결됐고요.
이처럼 인터넷을 쓰면서 ‘HTTP 404’나 ‘페이지를 찾을 수 없습니다’라는 메시지를 본 적 있을 겁니다. 접근하려 했던 페이지가 이동 또는 삭제됐을 때 나타나는 오류죠. 그런데 이 메시지를 보여주는 404 페이지에도 서비스마다 차이가 있다는 것 아시나요?
에러 페이지를 디자인할 때 중요하게 고려해야 할 점은 해당 페이지로의 접근이 사용자 잘못 때문인 것처럼 느껴지거나 서비스에 문제가 생긴 것처럼 보이지 않게 해야 한다는 것입니다. 부정적 메시지를 전하면서도 최대한 긍정적 경험이 될 수 있도록 하기 위해 각 서비스는 어떻게 하고 있는지 알아보겠습니다.
MZ세대 트렌드를 정리해 주는 서비스 ‘캐릿’도 서비스 대표 캐릭터를 활용해 404 페이지를 디자인했습니다. 앞서 언급한 크몽과 다른 점이라면 사용자 접근 경로를 고려해 ‘뒤로가기(BACK)’ 버튼과 ‘메인 페이지로 이동(MAIN)’ 버튼을 함께 배치했다는 것입니다.
‘디자이너를 위한 모든 디자인 콘텐츠’를 표방하는 ‘서핏’ 역시 서비스 톤과 어울리는 404 페이지를 갖고 있습니다. 특히 GIF와 이모지를 적절히 활용하는 게 인상적이네요. ‘서핏으로 이동하기’라는 버튼이 있는데, 사실 서핏은 원페이지 구성이기 때문에 그리 낯설지는 않습니다.
다음으로 패션 커머스를 살펴보겠습니다. 브랜디, 스타일쉐어, 지그재그는 제각기 다른 스타일의 404 페이지를 갖고 있었습니다. 브랜디는 사용자가 왜 이 화면을 보게 됐는지에 대해 설명하고는 있지만 앞서 본 크몽이나 캐릿처럼 페이지를 이동할 수 있는 버튼은 없었습니다. 스타일쉐어는 사용자들이 업로드한 사진을 배경으로, 다음에도 동일한 문제가 발생하면 연락할 수 있는 이메일 주소와 대응 방법 등을 잘 표현해 놓았습니다. 스타일쉐어의 서비스 성격과 잘 맞는 구성으로 보이네요. 이유를 알 수는 없지만 지그재그의 404 페이지는 날 것(?) 그대로군요.
잡플래닛과 원티드 역시 404 페이지에 자신들의 색깔을 담았습니다. 잡플래닛의 404 페이지에서 인상 깊었던 것은 설명 문구였습니다. 사용자에게 잘못된 접근이라고 말하는 대신 새로운 길을 찾았다는 메시지를 전합니다. “빈페이지를 발견하셨습니다!”라고 말이죠. 이후 사용자가 취할 수 있는 행동 중에서도 주소를 다시 확인하라는 내용에는 별도 컬러를 적용해 강조했습니다. 캐릿처럼 이전 페이지나 메인 페이지로 이동할 수 있는 버튼을 제공하고 있고요.
원티드는 등대 일러스트를 활용했습니다. 의도를 파악할 수 없는 건 아니지만, 조금 불친절한 게 아닌가 싶은 생각을 지울 수 없었습니다.
이밖에 29CM, 마켓컬리, 무신사 같은 경우 사용자가 잘못된 페이지로 접근할 때 404 페이지를 띄우는 게 아니라 자동으로 메인 페이지로 연결되도록 했습니다. 이는 사용자가 ‘잘못된 접근’에 대해 인식하지 않고도 바로 서비스를 이용할 수 있다는 장점이 있습니다.
‘지금 써보러 갑니다’ 블로그에도 404 페이지에 대한 글을 두 편 쓴 적이 있습니다. 해외 서비스들의 재치 있는 404 페이지를 보기 위해 일부러 URL을 바꿔가며 들어가봤죠. ‘잘못된 접근’이라고 인식하기도 전에 ‘이 서비스는 굉장히 재치있고 센스있구나’라는 생각이 먼저 들었습니다. 당시 인상적이었던 4개 서비스를 소개합니다.
‘Placepass’는 다양한 아웃도어 활동을 둘러보고 예약하도록 도와주는 여행 서비스입니다. 404 페이지 역시 여행과 탐험 관련 이미지로 재치있게 채워 놓았네요.
2.Emoji Book
Emoji Book’은 다양한 작가들과 함께 우리가 자주 쓰는 이모티콘으로 프린트북을 만들어 제공하는 서비스입니다. 404 페이지를 보면 여러 이모티콘이 404라는 글자를 형성하고 있는 게 보이는데요. 각각의 이모티콘을 클릭하면 해당 이모티콘을 재해석한 작가의 작품들을 볼 수 있습니다.
3.Musement
‘Musement’는 박물관, 행사, 아웃도어 등 여행지에서 특별한 경험을 할 수 있게 돕는 서비스입니다. 뭉크의 ‘절규’를 통해 박물관의 이미지를 404 페이지에 심어뒀습니다. 많은 사람이 알고 있는 이미지와 각종 일러스트 요소를 활용해 자신들이 제공하는 정보를 보여주고 있네요.
4.TED
‘TED’는 404 페이지에서 로고 중 가운데 ‘E’를 빼놓은 이미지를 보여줌으로써 무언가 잘못됐다는 점을 알리고 있습니다. 검색창은 물론 이전 페이지, 메인 페이지, 도움말 페이지로 이동할 수 있는 링크도 만들어놓았네요.
