로그
에루라보
블로그 작업노트 26: 에러 페이지 개편
이번엔 에러페이지 작업을 진행해 보았다.
에러페이지는 일반적인 접근이 아닌 경우의 페이지라 보통 심플하게 만들어두고 신경안쓰는 부분이긴하다.
근데 내 사이트는 몇번의 리뉴얼을 거쳐서 만들어졌기 때문에 옛날에 써둔 글의 링크가 현재 링크값과 맞지 않아서 빈번하게 404에러가 뜨는 링크가 살아있어 해당 페이지로의 접근이 발생하고 있었다.
굳이 신경 안써도 되는 부분인긴한데, 이런 에러페이지도 UX를 고려한 홍보 페이지가 될 수 있지 않을까라는 생각이 들어서 이번에 한번 에러페이지 개편작업을 진행해보았다.
404 에러페이지에러페이지는 위와 같은 형식으로 바꿔보았다.
기본적은 에러코드와 메시지를 기반으로 HOME으로 돌아가는 버튼링크까지 여느 에러페이지와 비슷한 구성인데, 여기에 내 사이트의 최신을글 바로 볼 수 있도록 포스트 카드를 넣어보았다.
위 코드는 기존 게시글 하단의 같은 카테고리내 게시글을 보는 레이아웃을 그대로 채용해서 가져온 방식이다.
그리고 에러 페이지에 맞는 SEO용 타이틀 설정과 더불어 로봇에게 404 페이지를 크롤링하지 말라는 강제 태그를 추가로 아래처럼 달아놓았다.
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="robots" content="noindex, follow">
<title>@yield('title')</title>
<meta property="og:title" content="@yield('title')">
<meta name="description" content="@yield('description', '요청하신 페이지를 찾을 수 없습니다. 사이트의 다른 콘텐츠를 확인하세요.')">
<meta property="og:description" content="@yield('description', '요청하신 페이지를 찾을 수 없습니다. 사이트의 다른 콘텐츠를 확인하세요.')">
<meta name="keywords" content="@yield('keywords', '에루라보')">
<meta property="og:url" content="{{ uri() }}">
<meta property="og:type" content="website">
<meta property="og:site_name" content="{{ config('app.name') }}">
<meta property="og:image" content="@yield('image', '/web-app-manifest-512x512.png')">Copy모바일에서도 에러페이지가 이쁘게 보이는걸 원해서 어느정도 위 레이아웃이 모바일에도 적절히 적용될 수 있도록 개선했다.
실제 모바일에서 에러페이지는 아래와 같은 형태로 노출된다.
효율성의 기준으로보면 굳이 에러페이지에 저런 컨텐츠를 넣는게 무의미한 내용이긴한데, 내가 뭐 개인사이트 만드는이유가 내가 하고싶은거 다 해보려고 하는거다보니까...
하나의 시도라고 생각하고 적용해보았다.
뭐 통상적으로 볼일이 없는 페이지라는 사실은 맞다보니 좀 의미는 없을진 몰라도 말이다...
더불어 약간의 헤더 메뉴 스타일 변경을 진행했다.
기존
개선기존에는 반투명 레이아웃을 살린다고 드롭다운 배경을 검은 반투명으로 제공했는데, 이게 드롭다운의 인식이 일반적으로 백색을 기반으로 하다보니 여간 어색한게 아니었을까 싶다.
그래서 드랍다운을 다시 백색으로 바꾸고 글자색도 그거게 맞게 검정으로 변경했다.
그래도 헤더 부분이 영 맘에안들어서 주변 쌉고수분과 머리를 맞대고 이거저거 시도해본바, 상단 헤더에 버튼모양의 블럭 구조가 많아서 불편한게 아닌가 싶어서 메뉴 버튼의 백그라운드와 라인을 제거하니 뭔가 매우 깔쌈해졌다.
일단 되게 맘에드는 구조여서 이대로 더 써보려고한다. 굿!
#블로그 #UI
0
개의 댓글
에루라보 콜렉션의 다른 글
