3주만에 돌아온 블로그 작업노트!
이번에 작업한거는 기존에 밋밋했던 상단 헤더를 확 바꿔보았다.
1. 상단 헤더 리뉴얼 작업
기존꺼도 전혀 나쁜건 아니었는데, 뭔가 공간이 허했던 것도 있고, 내 사이트는 대부분의 핵심기능이 사이드바에 있는데, 우측 사이드바 상단이 광고나 내 애니 명작선 바로가기로 표기되다보니까 접근이 좀 아쉬운 부분이라고 생각했다.
그리고 사이트에 이런저런 웹 도구가 많은데, 그걸 메뉴 버튼을 직접 눌러보지 않는 한 있는지 알기도 어려웠고 말이다.
그래서 이 부분을 좀 개선하기위해... 아래와 같이 바꿔보았다!
기존에 사이트 로고와 프로필, 검색 영역을 재정비하고 아래로 내 사이트의 대표적인 기능(어느새 자막위주로되어버린...)페이지로 이동하는 대 메뉴를 배치했다.
기본적으로 자막, 개발 카테고리와 블로그운영 콜렉션이 보이게 해뒀는데, 이 부분은 나중에 상황에 맞춰서 바뀔수도 있을 것 같다.
그리고 마지막은 최근 게시글을 언제든지 확인할 수 있도록 배치했다.
이 부분의 경우엔 만약에 새로운 글이 있다면 아래처럼 New 강조 효과가 보인다!
그리고 마우스 오버시, 포커스시 인터랙션시 여러 효과가 들어가있다...
태블릿의 경우와 모바일의 경우에도 아래와 같이 스크린 사이즈에 맞게 알맞는 헤더가 보이도록 해놨다.
태블릿 뷰, 최근게시글보기 메뉴가 사라진다
모바일뷰, 헤더 대메뉴가 사라진다뭔가 만지면 만질수록 아쉬운 부분도 많았지만, 일단 이정도로 마무리...
2. 사이드바 약간 개선
기존에는 카테고리나 컬렉션에 현재 게시글이나 검색영역의 강조효과가 없었는데, 이부분도 적절히 효과 스타일을 추가했다.
그리고 댓글의 경우에는 텍스트만 있을땐 몰라도 댓글콘과 하니 너무 영역이 들쭉날쭉해서 배경으로 한번 영역을 감싸서 눈에 잘 보이게 개선했다. (사실 지피티가 이렇게하는게 좋을거 같다고 야시줌...)
3. 툴 페이지 디자인 변경
툴 페이지들도 제목과 툴 설명부분을 위와같이 바꿔보았다.
예전엔 게시글이랑 비슷하게 표현하려고 라인바를이용한 구분을 뒀는데, 지금 게시글도 박스식 헤더라...
이부분은 천천히 잡아줘야하는거라서 순차적으로적용하기로...
4. 파일 다운로드 UX 개선
아마 일반적인 방문자분들은 크게 눈치채지 못하셨을 수도 있지만, 작업 노트 성격으로 간단히 적어두려 한다.
예전에도 광고 차단과 관련해서 한 번 이야기를 한 적이 있는데, 이번 내용도 그 연장선이라고 볼 수 있다.
현재 광고 차단이나 일부 스크립트 차단 기능을 사용하는 환경에서는 파일 다운로드 시 아래와 같은 안내 화면이 표시될텐데...
이런 처리를 넣은 이유는, 이전부터 파일 다운로드의 비정상적인 접근을 걸러내기 위해 Cloudflare Turnstile 기능을 사용하고 있었기 때문이다.
다만 Turnstile은 스크립트를 통해 호출되고 동작하는 방식이라, 일부 차단 환경에서는 정상적으로 실행이 보장되지 않는 문제가 있었다.
쉽게 말해 페이지에 접근하자마자 곧바로 다운로드를 클릭하는 경우, 각종 스크립트가 초기화되기 전에 다운로드 요청이 먼저 발생하는 일이 많았던 것.
이때 Turnstile 쪽에서는 해당 요청을 봇이나 비정상 요청으로 판단하는 경우가 대다수였다.
이를 줄이기 위해, 일반적인 접속 환경이 아닌 경우에도 검증 요청이 최대한 정상적으로 처리될 수 있도록 약간의 지연 시간을 두고, 페이지를 유지하지 않은 상태에서 발생하는 다운로드 요청은 예외 처리하도록 로직을 조정했다.
이 사이트는 방문해주시는 분들의 관심 덕분에 계속 운영되고 있습니다.
하지만 개인적으로 운영비를 부담하며 유지하고 있는 공간이다 보니, 가능하다면 광고 차단 없이 이용해주시면 큰 도움이 되지 않을까 싶습니다.
슥 들르시면서 광고 봐주는 정도의 가벼운 양해만 좀 부탁드립니다!
(자동광고가 도배되거나 불쾌한 부분은 지속적으로 모니터링하면서 제어 해보고 있습니다. 애드센스 최적화가 참 힘드네요. 자동 설정은 영향범위가 너무 두루뭉실해서;;;)