TISTORY - 티스토리 활용 팁 공개하기

활용팁이라고 하긴 거창하지만, 블로그 유저 마다 자신의 블로그를 사용하는 요령이 있을 거라고 봅니다. 저같은 경우는 기존의 스킨을 수정해 액센트를 주려고 노력하는 편인데(최근엔 거의 포기했지만요)  타이틀 이라던지 스킨 배경 이미지 제작은 최소한으로 줄이려고 합니다. 그 외에는 문단 간격을 br 태그를 써서 일정하게 유지한다던지 등의 잔재주가 전부군요. 아마 그런 것들을 적으란 이야기겠죠? 초기 티스토리에서 사용하던 몇가지 요령들이 있긴 합니다.

전 주로 꾸미기나 관리 측면에서 팁을 적어볼까 합니다. 이번에 베타테스트 중 새로 나타난 기능 중 아직 팁이랄 것은 그렇게까지 없더라구요. 기억나는게 많이 있으려나 그게 고민이네요. 생각만 하고 있던 것을 정리하는 것도 힘든 일입니다. 이번에 기간이 짧아서 기록할 시간이 없는게 조금 억울할 정도라는.  하긴 시간이 넉넉하다고 쳐도 특별히 중요한 내용이 없을 지 모르겠군요. 오늘 내일 중에 베타테스트는 끝날 터이고 이 포스팅도 끝이 나겠네요. 어서어서 정리하고 자렵니다.

이미지 크기는 되도록 500px를 넘기지 말아야 한다

이건 작년 초부터 지켜오던 원칙인데 새로운 스킨이 추가되고 나서도 마찬가지로 지키고 있다. 스킨은 자주 바뀌지만 200개가 넘는 포스트는 일일이 수정해줄 수가 없다. 스킨에 자동으로 이미지 크기를 리사이징하는 옵션이 있으면 모를까 대부분 경우 스킨이 바뀔 때 마다 이미지 크기는 들쑥날쑥하게 된다. 그나마 파이어폭스(2 버전대)에서는 제대로 보이지만 IE 6같은 경우 스킨이 깨져보이기도 한다. 글쓰기 영역 보다 크게 지정된 이미지는 스킨 영역을 넘치게 되어 있다는 뜻. 이건 정말 안심할 수 없는 부분이다. 이미지가 크면 강제 지정이라도 해둬야한다. 원본크기 그대로 출력하는 스킨도 종종 있다.

같은 이유로 글쓰기 영역의 너비를 한번 정하면 바꾸지 않는게 좋다. 종종 포스트 마다 왼쪽 혹은 오른쪽으로 정렬한 이미지가 있게 마련인데 아무리 나름대로 깔끔하게 정렬한 이미지일 지라도 글너비가 달라지면 위치가 변하게 되어 있다. 수백개의 포스트를 일일이 수정할 열정을 가질 사람이라면 절대, 네버 글쓰기 영역 너비는 변경하지 말라. more 버튼을 비롯한 box 같은 것도 글너비에 따라 달라지게 마련이니 전체적으로 신경쓰는게 좋다. 그리고 블로그 대표 이미지 역시 스킨을 보고 크기를 맞추는게 낫다(물론 귀찮으면 막 다루지만).

사이드바가 항상 고정되어 있을 것이라 믿지 말라

홈페이지형 편집에 익숙했던 터라 편리하게 정리한다는 개념의 사이드바는 상당히 불편한 경향이 있었다. 초반엔 융통성있는 공간이나 움직이기 편리한 건 좋지만 html로 고정할 수도 있는 소스를 왜 사이드바로 고정해야하는지도 의문이었다. 결정적으로 종종 애써 정렬해둔 사이드바가 스킨 상의 여러 이유로 움직여버릴 땐 징징거리기도 했었다. 이건 대체 왜 깨지는 것이냐며 삽질도 많이 했고, 스킨 한번 바꿀 때 마다 날아가는 플러그인 소스 때문에 '헉'을 연발하기도 했었다.

베타테스트 중에 아직 공개되지 않은 사이드바.

새로운 어드민에서는 이런 메뉴가 제공된다.

덕분에 바탕화면에 깔린 txt 문서에는 유난히 많이 달린 내 사이드바의 소스를 저장해두고 있다는 사실. 행여나 깜빡 잊고 업데이트하지 못한 소스는 다시 받아야 하거나 조정해야 한다. 대부분은 금방 수정할 수 있지만, 귀찮은 작업일 떄도 많다. 그렇다고 스킨 소스 자체에 많은 배너를 삽입하는 것 역시 부담스럽긴 마찬가지이다. 스킨이 바뀔 때 마다 카피해 넣는 건 마찬가지이고 사이드바 편집에 영향을 끼칠 수도 있기 때문이다. 현재의 사이드 배너 중 한 파트는 html 소스 자체에 삽입된 것이다. 사이드바에 들어간 메뉴는 웬만하면 백업을 마련해 두라.

카테고리가 많아서 펼치고 싶을 때?

워낙 알아서 쓰는 사람이 많아서 그런지 특별히 사용할 까닭이 없어서 그런지 몰라도 카테고리는 '펼치기' 기능이 있는게 좋다고 생각한다. 어떤 사람들은 두 스텝 이상의 카테고리를 사용하고 있고 그 세부 메뉴가 방문자에게 모두 보이길 원한다. 또는 본인이 해당 영역의 글을 찾을 때 그 세부 카테고리를 누르고 싶어한다. 티스토리는 카테고리 펼치기 기능을 제공하지 않았지만 해당팁은 초기에 종종 볼 수 있었다. 지금도 찾아지는 지 알 수 없지만, '티스토리 팁'이란 검색어 같은 걸로 구글이나 티스토리닷컴을 누비면 많은 걸 찾아볼 수 있다. 아래의 소스를 skin.html 사이에 삽입하면 카테고리가 펼쳐진다.

 <script language="JavaScript">try{expandTree();}catch(e){}</script>

스킨 위치에 복사해넣으면 카테고리가 펼쳐진다.

사이드바 메뉴에 이미지를 쓰고 싶으세요?

내 블로그에 있는 블로거뉴스 플러그인, 이올린 플러그인, 레몬펜 플러그인과 기존 사이드바 메뉴는 타이틀 배경이미지가 똑같다. 모두 일부러 만든 이미지가 아니라 배경 이미지를 만들어 background 시킨 것이다. 타이틀은 text로 정리해야 수정이 편리한 까닭에 배경 이미지만 통일하고 나머지는 텍스트 처리해서 같은 스타일을 입혔다. 초반에 이올린 타이틀과 블로거뉴스 플러그인 타이틀이 마음대로 편집되지 않을 땐 짜증도 좀 냈었던 기억이 난다. 요즘엔 계절에 따라 두 개의 배경이미지를 교체해서 쓰고 있는데 (스킨이 좁으니 모두 160 픽셀 이하이다) 슬슬 이것도 디자인을 바꿀 때가 되었나 보다.

기본 배경이미지

움직이는 배경이미지

이 두 배경이미지를 메뉴에 집어넣은 방법은 아래와 같다. 일단 스킨의 css를 일부 조정한다(동일한 스킨 사용시에는 편리하겠지만 다른 스킨 이용시 알맞게 지정해주면 된다). 우선 배경으로 쓸 적당한 크기의 이미지를 파일업로드를 통해 업로드하고 css에 각 메뉴의 타이틀에 어떤 css가 적용되었는지 살펴본다. 내가 사용하는 스킨의 경우 각 메뉴별로 다른 css를 적용하고 있기 때문에 모든 css에 배경이미지 적용을 넣어야 했다(통일했으면 편리했겠지만 h3가 다양하게 이용되는 까닭에 따로 지정). 나중엔 저 이미지를 다른 것으로 바꿔어주면 아주 간단하게 메뉴바 모양이 변하고 스킨도 분위기가 달라지게 된다. 크리스마스 시즌엔 움직이는 별모양을 배경으로 썼다.

.sideinfo .category h3 { background:url(images/h3back.gif) no-repeat; width:160px; height:19px; margin:0px;padding-top:2px;  padding-left:20px; color:#99CC66; font: 1em Dotum; font-weight:bold;}

메뉴별로 css가 따로 지정되어 있는 경우 각각 메뉴바를 적용해야 한다.

블로가 뉴스 플러그인 - div 태그 닫는 위치가 다르다

레몬펜 플러그인 - h3 태그 앞에 div를 써야 한다

이올린 플러그인 - 여기도 h3 앞에 넣는다

이 과정으로 기본 메뉴의 모든 타이틀을 동일하게 수정했으면 다음엔 플러그인의 타이틀을 수정해보자. 마이블로거 뉴스, 이올린, 레몬펜은 기본적으로 수정할 수 있는 html 소스를 약간 제공하고 있다. css가 적용된 메뉴 타이틀 중에서 하나 골라(다른 걸 추가하면 잘 되지 않는다) 이 타이틀에 적용해준다. 메뉴바의 모양이 모두 통일되고 나면 꽤 산뜻한 이미지로 메뉴를 유지할 수 있다. 메뉴에 들어가는 텍스트는 skin.html에서 수정하면 된다.

박스를 쓰고 싶지 않을 땐 padding을 활용해보면?

박스 기능을 활용하는 이유는 본문을 깔끔하게 정리하고 싶어서이다. 그렇지만 지나치게 자주 사용하면 반복적인 사용으로 전체적인 모양이 망가지게 된다. 박스 기능과 비슷한 강조 부분을 만들고 싶을 땐 백그라운드 컬러 기능과 padding 기능, 그리고 줄간격 기능을 이용해 보자. 개인적으로 p 태그를 별로 좋아하지 않지만 span 태그나 줄간격을 적용하기엔 이만한 기능이 없다. 아기자기한 줄간격을 보장하지 않는다는게 p 태그의 단점이 아닐까 싶다. 일단 테스트 문구를 만들어 보겠다.

베타테스터 시간이 너무 촉박해요!

위 문장에 쓰인 태그는 아래와 같다. 그걸 아래와 같이 바꿔보면 문장의 모양이 변한다. padding :6 px 이란 부분을 추가하면 위의 샘플 문장이 맨아래와 같이 변하게 된다.

<p><span style="font-weight: bold; background-color: rgb(157, 108, 8); color: rgb(255, 255, 255);">베타테스터 시간이 너무 촉박해요!</span></p>

<p><span style="padding : 6px; font-weight:bold; background-color: rgb(157, 108, 8); color: rgb(255, 255,255);">베타테스터 시간이 너무 촉박해요!</span></p>

베타테스터 시간이 너무 촉박해요!

만약 아랫줄 문자와의 간격이 너무 빠빡하다면 이번에 줄간격기능을 이용해 혹은 p 태그에 p style="line-height: 1.8;" 같은 태그를 추가하여 간격을 떨어뜨리면 된다. 이번 서식을 만드는데 종종 사용했는데 IE 6.0에서도 아주 잘 보인다. 7.0에서도 테스트했지만 깨진 모양은 없었다는 결과를 보고 대만족.

실제 적용된 모습

티스토리는 html을 이용하면 꽤 창의적으로 이용할 수 있는 반설치형 블로그이다. 그 점이 가장 큰 매력이었기 때문에 선택했고 지금도 태그를 손질할 수 있도록 깔끔하게 제공해주는 건(소스가 깔끔하지 않아 보기 힘든 웹에디터도 의외로 많다) 장점 중의 장점이다. 이번 개편으로 혹시 더 복잡한 소스가 포함되는 건 아닐까 고민했는데 테이블 태그가 추가된 이상 약간의 무거움은 피할 수 없지 않을까 싶다. 대신 사이드바를 비롯한 많은 블로그 속 장난감들이 다양해진 사실엔 기뻐할 수 밖에. 마지막으로 시간이 급해서 예전 기억을 완전히 되살리지 못한 건 여전히 억울하다.  엉엉.