요즘엔 모바일의 사용이 보편화되어 이에 맞춰 대부분 인터넷 사이트들이 반응형 화면을 선택하고 있다. 개인 블로그도 변화에 발맞춰 요즘은 반응형 스킨으로의 이동이 점점 늘어나고 있다. 기존에는 PC 환경에만 맞추어 화면을 구성하면 됐지만 이젠 모바일 환경에서의 화면도 고려해야 한다. 특히 기존의 JPG, PNG, GIF 등 아이콘 이미지의 경우 모바일 환경에서 제대로 표현하지 못하고 있다.
얼마전에 스킨을 수정하면서 아이콘 폰트의 존재를 알게되었다. 일반 폰트와 같이 크기가 변해도 이미지가 열화되지 않는다. 이곳 블로그에 아이콘 폰트를 적용해 보려고 인터넷 여기저기 글들을 엄청 찾아보았다. 결국엔 찾지 못하고 스킨 만드신 분한테 도움을 받아 https://icomoon.io/라는 곳을 이용해 내게 필요한 나만의 아이콘 셋트를 일단 모아 폰트를 다운로드 받았다. 다운받은 폰트를 티스토리 스킨에 기존에 있던 파일을 교체해 업로드했다. CCZ-CROSS 스킨에 포함된 reset.css 도 새로 만든 폰트에 맞게 일부 수정해줘야 한다.
- LINK
- ICOMOON 사이트 바로 가기
사이드바의 카테고리 각각에 다른 아이콘 폰트를 넣는게 우선 목표이다. 어떤 블로그를 갔다가 보니 카테고리를 링크로 가져와서 새로 짜맞추는 방법으로 아이콘을 삽입하는 경우도 있던데 어쩌면 더 자유롭게 다양한 기능을 구현할 수 있을거 같다. 하지만 나는 블로그의 가장 중요한 구성인 카테고리를 그런식으로 모두 쪼개서 누더기처럼 만들고 싶지는 않다. -.-; 최대한 카테고리 형태를 유지한채로 아이콘폰트만 삽입하는 쪽으로 방향을 잡았다. 이제 카테고리 치환자를 구조를 알아야 되는데 이전까지 카테고리를 제대로 만져본적이 없어 뭐가 뭔지 전혀 모르겠고 제대로 설명되어져 있는 사이트도 별로 없었다. 인터넷에는 대체적으로 상위 카테고리와 서브 카테고리 펼치기, 전체 카테고리, 카테고리의 다른글 꾸미기에 관한 설명만 보인다. 그나마 도움이 될만한 글들을 짜맞춰 이것저것 해볼 수 있는건 모두 시도해보다 소 뒷걸음질에 하나 걸렸다. ㅎㅎ 하나가 되니 나머지들은 금방 해결되었다.
카테고리별 위치를 알았으니 이제 각 카테고리의 주제에 맞는 아이콘 폰트를 순서대로 넣기만 하면 된다.
뭐가 이리 복잡한지;; 그래도 다 해놓고 나니 왠지 뿌듯하다. 원하는 대로 표현이 제대로 안되니까 짜증만 났는데;;
