최근 만들어진 웹페이지들은 반응형 화면은 기본이 되었고 더불어 기존 웹페이지들과 가장 눈에 띄는 차이 나는 부분은 메뉴 버튼이다.

웹페이지를 방문해서 내가 가장 먼저 보는 부분은 메뉴 버튼이다. 메뉴 버튼만 클릭해 보아도 여러가지 사이트의 정보나 분위기를 파악할 수 있다.

얼마전 클립아트에 관심이 생겨서 이것 저것 많이 시도해보았으나 역시 사용하는데 한계가 있다. 버튼이나 배경, 라인 이외에는 쓸만한 곳이 별로 없다. 재미도 없고... 그래서인지 관심이 급 사라져버렸다. ㅡ,.ㅡ;

클립아트 대신 제이쿼리로 관심이 이동했다. 블로그에 제이쿼리를 활용할만한 것들을 찾아보고 있다.

요즘 블로그의 몇군데를 조금씩 수정하였다. 본문의 사진 뿅뿅 기능이라던지, 구분 선을 사선의 라인으로 변경하기도 했고, 메뉴 화면도 새로 구성하였다. 그 중 메뉴 화면 변경이 내게는 가장 큰 부분이다.

1. 기본 메뉴 화면

처음에 이 블로그에는 기본적으로 설치되어 있던 카테고리와 최근 글 최근 댓글이 보이는 메뉴 화면을 약간 수정해서 사용했었다.

SONYLOVE

기본 메뉴 화면

처음 메뉴 구성

2. 전체 메뉴 화면

이후에 화면 구성을 좀 더 넓게 사용하기 위해 구성 요소들을 모두 삭제하고 간단한 몇개의 메뉴만을 이용해 완전 새롭게 만들어 사용했다.

SONYLOVE

전체 메뉴 화면

핑크빛 배경의 전체 화면 메뉴 구성이다. 최근 웹 사이트들에서 가장 보편적인 메뉴 화면 구성이다.

나도 화면 구성이 심플하고 마음에 들어 꽤 오랫동안 사용했다.

좀 의외인건 티스토리 스킨들 중에는 전체 화면 메뉴를 구성한 스킨을 보기 어렵다.

모두들 다 같이 약속이라도 한듯이 작게 만드는지 그 이유는 나도 잘 모르겠다.

작은 화면이 더 블로그에 적합하다고 생각했을 수도 있다.

각 메뉴에 마우스를 가져다 대면 아이콘이 회전하는 애니메이션을 사용했다.

3. 플립 메뉴 화면

최근에 메뉴 화면 중에 마음에 드는걸 발견했는데 기존의 메뉴화면은 완전 제거하고 새로 설치해야 한다. 이 블로그에 적용해 보려고 몇번 시도했다가 제대로 작동하지 않아 포기한적이 있다.

이번에 다시 한번 시도해 보았다. 모바일이나 태블릿 화면 구성에 있어 아직 몇군데 완벽하지는 않지만 어느 정도 만족할 만한 수준은 완성되었다.

SONYLOVE

플립 메뉴 화면

PC 화면 - 플립 효과를 이용한 메뉴 화면

SONYLOVE

플립 메뉴 화면

모바일 화면

아마 이 글도 조만간 비공개로 전환될 것이다. 단지 기록 차원에서 남기는 것일뿐..