글
블로그 운영
블로그 작업노트 27: 목차 인터랙션 추가 및 기타 변경건
그간 눈에 계속 밟혔던 몇가지 수정사항과 더불어 요즘 글을 길게쓰다보니 자연스럽게 목차가 늘어나게되고 이를 좀 더 사용성을 높이고자 몇가지 인터랙션을 추가했다.
목차 인터랙션
기존에 목차는 글의 최상단에 배치해두고 스크롤을하면 그대로 컨텐츠에 밀려 사라지는 방식을 취했다.
일반적으로 대부분의 목차는 이런식으로 되어있고 일부 개발문서처럼 내용이 길거나 원하는 내용을 빨리 찾아가기위해서 사이드에 목차가 배치되어있는 경우가 있다.
하지만 이런 사이드 배치형은 모바일 뷰를 지원해야하는 블로그 특성상 레이아웃으로 잡기 힘들고, 그렇다고 컨텐츠 상단에 목차를 배치해두면 글이 길어지면 도대체 내가 어디까지 읽었는지 길을 잃기도한다.
그래서 나는 모바일의 경우는 무시하고 데스크탑뷰에서는 목차가 사이드에 붙도록 아래와 같이 인터랙션을 추가했다.
아마 본 글도 목차가 생성되어서 위 움짤처럼 목차가 사이드로 붙을꺼고 이와동시에 컨텐츠 밸런스를 목적으로 본문이 약간 우측으로 움직일 것이다.
생각보다 마음에 드는 패치이자 피시에서의 웹사이트 사용성을 높이는 좋은 방법이라고 생각한다.
사이드바 컨텐츠 순서 변경
기존에 사이드바는 광고/월간방문자/카테고리/게시물/댓글 순서로 배치되어있었는데, 월간방문자 파트를 가장아래로 내리는 수정을 했다.
이렇게 재배치한건 이유가 있는데, 나는 사이드바가 어느정도이상 스크롤이 내려가면 sticky 방식으로 화면상단에 달라붙고 컨텐츠의 끝에도달하면 나머지 사이드바가 스크롤되는 방식을 채용했다.
근데 이렇게 해버리니까 빠르게 사이드바의 아래 부분을 보고싶을때 강제로 컨텐츠를 끝까지 스크롤해야한다는 문제가 발생했다.
특히 기존 사이드바 형태는 카테고리정도만 눈에보이고 최근 게시물은 반정도가 가려져있고 댓글은 보이지도 않았다.
이런부분이 좀 마음에 안들어서 사이드바의 컨텐츠 순서를 위에 처럼 변경하니 이제는 한화면에서 사이드바의 스크롤이 굳이 필요하지않을정도로 한눈에 모든 정보를 확인할 수 있게 되었다.
월간 방문자는 웹사이트를 찾아준 사람들 입장에선 중요한 정보가 아니니까 하단으로 미뤄버렸다.
동영상 캡션 스타일 추가
경우에 따라서 동영상에도 캡션을 달아야할일이 있는데, 기본적으로 동영상은 캡션이 존재하지않아서 직접 캡션 스타일을 생성하는 기능을 플로라 에디터에 추가했다.
최대한 이미지 캡션과 비슷하게 보이게 추가는 해뒀다.
프로필 이미지 인터랙션 추가
개귀여워!
뭐 거의 재미용이긴한데, 헤더에 내 프로필 사진에 커서를 가져다대면 움찔거리는 애니메이션을 추가했다.
RSS/ATOM 피드 제공 기능 추가
이제 푸터에서 RSS, ATOM 링크를 누르면 내 사이트도 피드를 제공한다.
나도 한번 테스트로 내 네이버 계정으로 들어가 이웃 등록(RSS)해봤는데 생각보다 잘 작동했다.
오 네이버 블로그 이웃글에 보임ㅋㅋ뭐 이기능을 쓰는 사람이 나말고 있겠냐 싶겠지만...
만드는데 재밌었으면 만사 오케이다.
끝!
#블로그 #UI #광고
0
개의 댓글
블로그 운영 콜렉션의 다른 글
글 카테고리의 다른 글
03/24
22주차 그림 결산
이번주 제일 재미있게 그린 그림.어쩌다가 두들 댄스밈을 알게 되어서 로스트 소드 신캐릭터인 에린을 이용해서 한번 그려봤다.원래 두들댄스 밈 자체가 움짤이라서 한장짜리 짤로는 전달이 잘 안되기는하는데, 다음주중으로 한번 프레임 몇개 더 그려서 움짤로도 만들어볼까? 하는 생각이 드는 연습 작품이다. 이어서 그린...
03/18
구글 검색 엔진 2025년 3월 코어 업데이트 영향 분석
구글 검색엔진 관련 정보를 찾아보다가 해외 사이트에서 구글 검색엔진을 통해 사이트 트래픽이 발생하는 여러 사이트 관리자들이 모인 커뮤니티를 알게 되었다.해당 사이트에서는 사이트 운영에 필요한 여러가지 뉴스 소식을 찾아볼 수 있었는데, 그중에 최근에 꽤나 재미있는 상황이 일어나고 있다는걸 알게 되어서 한 번...
03/17
구글 애드센스 광고 단가 관리 하는 법
구글 애드센스를 이용해 블로그나 개인 사이트에 광고를 붙이면 참 여러가지 광고가 붙는다. 사이트를 운영하는 사람 입장에선 당연히 광고 단가가 높은 광고가 떠주면 좋겠지만 실상은 대부분 단가가 낮은 광고가 붙기 마련이다. 보통 이런 고단가 광고를 붙이기위해서 사이트의 성향을 '고단가' 키워드로 운용하거나 게시...