갑자기 오늘 밤(이 아니라 어젯밤...)에 블로그를 손보고 싶다는 생각이 들어 이 새벽까지 매달렸다. HTML이고 CSS고 건드려본지 너무 오래되서 구조 보는 것도 겁나더라. 사실 계기는 별 거 아니었는데 내가 쓴 리뷰를 다시 읽어보다가 문득 너무 빽빽하단 느낌이 들어서 글씨 크기를 키우려고 했다. 줄간격도 좀 늘이고 해봤는데 갑자기 글씨체가 걸리는 것이다! 그래서 급 글씨체 바꾸기를 하려고 마음먹고 무료 글씨체를 찾았는데 역시 만만한게 서울남산 & 한강체와 네이버 나눔글꼴들이더라.
여튼 그리되어 글씨를 받으러 돌아다녔다. 둘 다 네이버든 다음이든 검색만 하면 쉽게 나오니 받는 것은 어렵지 않았다. 사실 웹폰트 형식인 *.eot 형태로 바꾸는 것까진 일사천리였다. 참고로 본인은 EotFast란 프로그램을 썼다.
그런데 웹폰트 자체를 홈페이지에 적용시키는 과정은 이해가 가도 직접 할 수가 없는 것이다. 사실 내가 항상 그런 면이 있지마는 요번에는 이 시간까지 고생했으니 머리가 썩었다는 생각을 다시금 하게 되었다. 어찌어찌하여
/'pəlp/ 님의 블로그에서 찾은 방법으로 웹폰트를 적용시켰다. 많이 헤맸지만 어떻게든 되어서 다행이다. 기본글꼴 중에는 명조체를 좋아하는데 받은 글꼴은 서울남산체와 나눔고딕이 더 끌려서 그 둘만 등록하였다(전부 하려면 스킨 파일 최대 한도인 20MB를 넘어서 어쩔 수 없었다). 사람들이 나눔고딕 많이 쓰는데엔 이유가 있더라. 보기에 꽤 깔끔해 보인다. 그리고 서울남산체만 하더라도 작은 글씨체에서 약간 뭉개지는데 나눔글꼴은 웹을 겨냥하고 만들어서 그런지 이런 문제가 악질적이지 않다.
(참조한 블로그 :
http://circlash.tistory.com/508 )
하나 마음에 걸리는 것은 웹폰트가 익스플로러에서나 적용된다는 것이다. 파폭도 자주 쓰는 나로썬 뼈아프다. 글씨 크기를 키우니까 굴림은 너무 꽉 차 보이는 느낌이 드는걸 어떡하나.
다음으로 같은 분의 블로그에서 글씨체 관련 팁 보다가 눈에 들어와서 얼떨결에 하게 된 버튼식 스크롤. 이녀석이 나의 새벽 2시~5시를 잡아먹었다. 요즘은 문명도 안하는데 이 시간까지 깨어있게 되다니... 자바스크립트는 내가 넣기 싫어서 뺐는데 버튼은 내가 직접 만들고 싶어서 포토샵가지고 이러쿵 저러쿵 했다. 그 결과가 다음과 같다.
티스토리는 그냥 사진 놓는게 뭐 이리 어려운지 가로로 쭉 늘어놓고 싶은데 그런 기능은 없다. 처음 만든게 왼쪽 네개인데 각각 클릭하면 들어갔다가 다시 떼면 나오도록 만들었다. 근데 너무 눈에 띄는 것 같아서 다시 만든게 나머지들. 멋은 떨어지지만 난 그냥 눈에 안 띄게 돌아다니는 녀석을 원했기에 이걸로 했다. 언제 맘에 안들면 또 퇴출당할지 모르는 녀석들이다.
지금도 보일텐데, 화면 맨 오른쪽 아래에서 시큰둥하게 있는 녀석들이다. menu 버튼 누르면 맨 위로 가고 sidebar 버튼 누르면 사이드바까지 간다. 잘 작동하니 흐뭇하다. 이 버전은 클릭이 아니라 마우스의 over, out에 반응하게 되어있다. 즉, 마우스 올리면 짙어진다
이리 바꾸고 나니 전체 디자인도 바꾸고 싶어졌다. 티스토리에서 주는 팀 스프링 노트 디자인을 그대로 쓰고 있는데 사실 그닥 맘에 드는 건 아니다. 1단 사이드 바로 바꾸느라 고생한 기억이 아직도 새록새록한데 이제 또 고생이 태산같이 몰려올 것 같다.
... 이거 쓰는 동안 파이어폭스로 다시 확인했더니 소스가 깨져있었다. 그래서 고치느라 다시 삼십분을 썼다. 사실 내가 뻘짓을 한 거지만... sidebar가 멋대로 margin값이 바뀌고 background image가 먹히지 않아서 그거에 맞게 다시 추가한 뒤 괜찮다고 생각했는데 방명록같은데 들어가면 반대로 이상해 지는 것이다. 알고보니 내 스킨 css 문제가 아니라 글씨체 바꿀때 강제로 글씨체 지정 없앤답시고 본문 글들의 html 버전을 좀 고쳤는데 거기서 발생한 문제인걸 알았다. 꽤 전에 쓴(하지만 바로 직전 글인) 아서 C. 클라크 유년기의 끝 리뷰를 재저장하고 적당히 오류를 끝냈다.
기념으로 스크린샷이나 남겨야지.
