UX 디자인과 개발 3. 404 Not found
모든 경우의 수를 대비합시다!
디자인 작업을 끝내고 잠시 숨을 돌리고 있는 어느 날, 팀장님에게 갑자기 연락이 오고마는데...
404 Not Found Page?
'HTTP 404 또는 찾을 수 없습니다' 오류 메시지는 클라이언트가 서버와 통신할 수는 있지만 서버가 요청한 바를 찾을 수 없다는 것을 가리키는 HTTP 표준 응답 코드이다.
'404 Not found'는 브랜드마다 다양한 이미지와 성향을 보여줍니다. 사실 보이지 않으면 좋은 페이지이면서, 없으면 사용자가 무척 당황스러운 페이지라 기획과 디자인할 때 잊기 쉽습니다.
그리고 저는 잊어버렸죠...
학부생, 취업 준비를 할 때 404 페이지를 중요하게 여겨 디자인한 적은 없었습니다. 주로 메인 기능, 문제가 되는 기능을 고려하여 포트폴리오와 프로젝트를 진행했으니 그 당시에는 꼭 해야 하나? 라는 생각으로 중요하게 생각하지 않았습니다.
하지만 현업에선 모든 경우의 수를 대비해야 합니다. 완벽한 개발로 굳이 만들 일도 없고, 보일 일이 없으면 좋겠지만 혹시 모를 문제 발생을 위해 404 페이지 작업은 필수입니다. 에러가 발생했을 때 보이는 페이지로 한 페이지만 작업해두면 다양한 경로에서 호출될 수 있는 사용성이 있는 페이지지만 자주 보이면 안되는 아이러니한 페이지입니다.
작업 전에 다른 브랜드의 404 페이지는 어떻게 만들었는지 레퍼런스를 찾아보았습니다.
404 Not Found Page Point
1. 의도 : 돌아가거나, 새로운 길을 알려주거나.
기본적으로 모든 앱, 웹 페이지는 기획 의도가 있습니다. 사용자의 구매를 유도하거나, 정보를 보여주기도 합니다. 404 Not Found 페이지 또한 의도치 않게 길을 잃고 에러를 만난 사람에게 이전으로 돌아가거나, 새로운 길을 알려주는 의도를 보여줘야 합니다. 갑자기 예상했던 페이지가 아니라 당황했을 사용자에게 뒤로 가기, 새로운 검색 혹은 다른 위치로 이동할 수 있는 버튼 클릭을 유도해 에러에서 벗어나도록 해야 합니다.
Adobe는 직관적으로 홈페이지로 돌아갈 것인지, 검색 할 것인지 두가지 선택지를 보여줍니다2. 안내 : Microcopy, 잊지말자
에러 페이지에 당황했을 사용자를 안심시키고 그동안 진행했던 행동을 이어갈 수 있도록 문제가 생기기 전으로 돌아가는 게 최선의 해결책입니다. 그러기 위해선 사용자를 안심시키면서 서비스에서 제공할 수 있는 문제 해결 기능을 알려줘야 합니다. 이때 사용되는 이미지와 안내 텍스트는 사용자를 안심시킬 수 있는 404 페이지에 대한 설명, 해당 페이지를 벗어날 수 있는 행동 가이드를 사용자가 이해 할 수 있도록 표현되어야 합니다. (자세한 Microcopy에 대한 이야기는 하단 참고 글에서 확인 할 수 있습니다.)
Note는 404 페이지가 왜 발생했는지 알려주면서 문제의 원인과 해결 방법으로 홈으로 돌아갈 수 있는 버튼을 보여줍니다3. 통일성 : 디자인과 구성 요소의 톤앤매너
갑자기 에러가 났는데, 지금까지 봤던 디자인도 달라진다면? 사용자는 더 당황할 수밖에 없습니다. 이전 페이지까지 보았던 디자인과 일괄된 디자인 시스템을 유지하면서 현재 위치와 앞으로 할 수 있는 해결방법을 함께 화면에 녹여내야 합니다. 보편적으로 404 페이지는 하나의 디자인으로 다양한 경로에서 문제 발생 시 호출될 수 있다는 점을 잊어선 안 됩니다.
레고니까, 레고를 이용한 레고의 404 페이지4. 재치 : 당혹감과 불쾌감을 줄여주기
딱딱한 안내와 할 수 있는 일을 알려준다면 사용자는 해결방법을 알게 되었지만 불편한 기억으로 남아 서비스 평가에 큰 영향을 줄 수 있습니다. 사람은 부정적이고, 불편하며 당황스러운 일을 즐겁고 편리했던 기억보다 더 오래 기억하며 평가에 더 큰 비율로 반영하기 합니다. 그러니 위의 요소보다 더 중요하다고 단언할 순 없지만 놓칠 수 없는 요소이기도 합니다
MailChimp은 잃어버린 페이지를 찾는 것처럼 구멍 속에 얼굴을 넣은 동물 그림을 이용해 현재 상황을 재치있게 보여줍니다404 페이지 레퍼런스 참고
20 Top Examples of 404 Error Pages : https://blog.fluidui.com/top-404-error-page-examples/
'20 Top Examples of 404 Error Page'가 번역된 글
[번역] '404 에러페이지' 24가지 분석 -1 https://brunch.co.kr/@hyeminimi/31
마이크로카피 참고 글
The Four Cornerstones of Writing UX Microcopy : https://xd.adobe.com/ideas/process/information-architecture/four-cornerstones-writing-ux-microcopy/
UX : 마이크로카피 작성방법과 5가지 예시 https://www.hellodigital.kr/blog/dmkt-general-ux-how-to-write-microcopy/
