Daily UI 008 / 404 Page 404 페이지

8번째 과제: 404 페이지 디자인

 

404란?
HTTP에서 파일을 찾지 못했을 때 나오는 오류 코드다.
서버는 찾았으나 해당 서버 내에서 파일을 찾지 못했을 때 리턴되는 코드값이다.

UX적인 관점에서 이탈율을 줄이기 위해서는 404 페이지에
Home 화면으로 가는 버튼 or 다른 흥미로운 콘텐츠 추천 or 검색 기능 or 간단한 게임 / 인터랙션 / 마음을 누그러뜨릴 수 있는 귀여운 이미지 등을 사용하는 것이 좋다.

대부분의 웹사이트 주소 뒤에 /404 를 붙이면 404 페이지를 볼 수 있다.
(예시: https://dribbble.com/404)

 

주제
IT서비스 웹사이트의 404페이지

내용
404
페이지를 찾을 수 없습니다.
입력한 페이지의 주소가 정확한지 다시 한번 확인해주세요.

 

- IT 느낌을 살려서 0이 null 같이 생긴 폰트를 사용했다. 또한 IT 업계 특성상 눈의 피로감을 줄이기 위하여 다크 모드를 사용하였다.

- 연결이 잘 되지 않은, 끊어짐을 단순한 그래픽으로 표현하였다. 저 끊어진 부위에 원을 애니메이션으로 넣으면 좋을 것 같다. 다만 저 끊어진 부위를 어떻게 코드로 작성할지 생각해보니 아주 복잡할 것 같아서 개발 관점에서는 좋지 않은 디자인인 것 같다.

 

- 원래는 귀여운 냥냥이에 이 친구가 실을 배배배배 엉켜놓은 일러스트를 넣어서 404 페이지를 만들려고 했다. 하지만 IT 느낌이 영 안 나서 사용하지 못했다. 사실 github 404 페이지도 외계고양이 일러스트로 표현되었는데, 여기 일러스트는 stroke가 없는 아주 깔끔한 그림이어서 어울리는 것 같다. 나도 냥냥이를 stroke 없이 단순한 도형으로 만들었으면 더 적절했을 것 같다.

- 그려놓은 게 아까워서 티스토리 프로필 이미지로라도 사용하기로 했다!