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