티스토리 뷰


  2008년 8월에 시작한 블로그가 벌써 1년 6개월을 넘어서서 2년을 향해 달려가고 있다. 짧은 기간이지만 그 동안 많은 분들이 사랑해 주신 덕분에 요즘은 '파워 블로거' 또는 '우수 블로거'라는 닉네임을 들을때가 가끔(?) 있다. 그런 닉네임에 부끄럽지 않은 블로거가 되기 위해서 보다 좋은 글솜씨도 필요하고 정확한 정보 전달도 필요하겠지만 무엇보다 블로그에서 보여지는 디자인 그 자체도 많이 신경이 쓰이는게 사실이다.

  몇몇 파워 블로거들의 블로그를 구경해보면 일명 '포스'라고 불리는 것이 블로그 디자인에서 부터 느껴진다. 그런 '포스'를 아무나 쉽고 빨리 습득할 수 있는 방법은 '글을 잘 쓰는 것'만큼 어렵다. 


  보다 정확한 사례를 들자면 위에 보이는 '용의자님'이나 '피플즈님'의 블로그를 구경해보면 말 그래도 '입이 쩍 벌어진다'는 것을 느낄 정도이다. 물론, 이 두분은 개인적으로 좋아하는 블로그 디자인을 운영하시는 분이며 이외에도 멋진 블로그 디자인을 갖고 계신 분들이 많다.

  이렇게 멋진 디자인도 좋지만 하나하나 '만지는 재미'를 통해서 '나만의 블로그'를 만들어가는 것도 좋다. 물론, 처음부터 독창성있는 블로그 디자인을 만든다는 것은 쉽지 않으니 잘 만든 블로그를 '벤치마킹'하는 것부터 시작하자. 이번에 필자도 블로그 스킨을 변경하면서 3일 정도 포스팅을 멈추고 스킨쪽에 투자를 했다.

  그리고 부족하지만 나름 만족스러운 깔끔한 디자인의 블로그를 만들었는데... 블로그 스킨의 노하우는 없지만 스킨을 변경하면서 '알아두면 좋은 자잘한 기능'에 대해서 이번 포스트를 통해 소개해보려고 한다. 만약 괜찮은 기술이다 생각된다면 살짝 사용해 보는 것도 좋다.



  전산쪽에서 '개발'을 한다는 분들도 날코딩을 통해서 프로그램을 만들어내는 경우는 거의 없다. 개발자의 시작인 'Ctrl+C / V'라는 말이 있듯이 어느 정도 정해진 틀안에서 변경하는 것부터 시작하는 것이 좋다. 그렇다고 항상 남의 것을 도용하는 것이 '정도'라고 이야기하고 싶지는 않다. 실력이 없을때 한달내내 스킨만 잡고 있는 것보다 공개 스킨을 적용하고 자신의 스타일로 살짝 변경해주는 것이 좋다는 것이다.

  필자의 이번 스킨도 '용의자님'이 공개한 Plain이라는 스킨을 이용해서 블로그 스킨을 재탄생해본 것이다. 물론, 부족한 실력탓에 많은 부분이 부족하지만 필자와 같이 HTML 코딩에 약한 분들이라면 괜찮은 '블로그 틀'을 구하고 거기서부터 시작하자!
[관련 사이트 : 용의자님의 plain스킨]



  최근 티스토리의 '첫화면 꾸미기' 테스터로 새로운 기능을 테스트하면서 다시 한번 느끼는 것이지만 포스팅을 할때 가장 먼저 추가(첨부)하는 이미지(그림)의 경우는 꼭 신경을 써야 한다.

  포스트의 첫 그림이 바로 그 포스트의 얼굴이 되는 것이다. 일명 대표사진(썸네일)로 지정되는 '첫 그림'은 몇가지 사항을 지켜주는 것이 좋다.

          (1) 그림의 가로/세로 비율을 4:3정도로 지켜준다.
          (2) 그림의 테두리를 만들지 않는다.
          (3) 될 수 있으면 글자가 없는 그림을 사용한다.
          (4) 포스트의 전체적인 내용을 보여줄 수 있는 그림을 사용한다.

  블로그에서 첫화면이나 포스트는 방문객들에게 블로거의 실력과 솜씨를 보여주는 가장 빠르고 쉬운 방법이다. 그러니 각 포스트의 첫 그림을 조금만 신경써도 깔끔한 블로그를 운영하는 블로거가 되는 것이다.



  HTML 코딩 뿐만 아니라 C++부터 자바까지 어떤 프로그래밍언어를 공부할때 '주석'에 대한 부분은 초반에 배우게 된다. 그럴수밖에 없는 것이 수십수백개이상의 코딩을 하고 나서 어디가 어디인지 알 수 있는 개발자도 흔하지 않다. 그러니 자기뿐만 아니라 다른 사람이 보아도 알 수 있도록 '주석문'을 코딩 중간중간에 넣어주는 것이다.

  티스토리의 'skin.html'과 'style.css'라는 코딩이 필요한 부분에도 남뿐만 아니라 블로거 자신을 위해서도 꼭 하나하나 변경시 '주석'을 추가하는 습관을 기르자.

  skin.html의 경우 <!-- 테스트 --> 와 같이 코딩부분에 설명을 추가하면 되고, style.css의 경우는 /* 테스트 */로 추가하면 된다. 힘들게 힘들게 수십줄의 코딩속에서 꼭 필요한 부분을 찾았는데 다음날 도대체 어디인지 기억이 안나는 모습을 경험한 분이라면 '주석'의 중요성을 잘 알것이다.



  포스팅을 하면서 '예쁘게 포스팅해볼까?'하는 궁금증이 생겼던 분들이라면 99%가 그림을 이용한다. 그만큼 포스트에서 그림이 차지하는 부분은 크다. 인터넷에서 인기를 얻었던 동영상 '롤러코스터'를 보다보면 인터넷을 할때 그림만 훑어보는 경우도 많다고 하니... 포스트에서 그림은 정말 중요한 전달방법이다.

  그런 그림을 예쁘게 보이고 싶은데 그림을 붙여넣으면 항상 보이는 '테두리'때문에 골치가 아프다면 깨끗하게 처리할 수 있는 부분이 있다.

(1) style.css에 아래 내용 추가하기
  만약 style.css에 .imageblock 부분이 있다면 border만 0px로 변경하고, .imageblock부분이 없다면 아래와 같이 추가한다.

.imageblock img{
border:0px; }

  보통 이정도만 하면 그림의 테두리 선이 사라지지만 포스트를 보다가 사라지지 않은 테두리 선을 발견하게 되었다면 이렇게 다시 해보자.

(2) style.css의 포스트 본문 부분을 변경하자.

.article img{ padding:4px; background-color:#f7f7f7; border:0px solid #ddd; }

  위와 같이 .article img 부분을 찾아서 border부분은 0px로 변경한다.



  티스토리 툴바 덕 좀 봤다는 분들이 있다면 당연히 숨길 이유가 없겠지만... 특별히 사용하지도 않는데 항상 블로그의 우측상단에서 검색부분이나 메뉴부분에 겸쳐지는 '티스토리 툴바'가 거추장 스러웠다면 한번에 없애보자.

  style.css에 아래 내용을 추가해보자.

/* 티스토리 툴바 숨기기 */ #tistorytoolbarid { display : none; }



  위에 언급한 내용은 정말 기본 중의 기본일뿐! 더 많은 기능이 몇줄의 코딩으로 변경될 수 있다는 것을 느껴보면 '티스토리'와 같은 설치형 블로그의 참맛을 느낄 것이다. 필자도 최근 변경작업을 하면서 새로운 블로그를 만난거 같아 새로운 마음으로 시작해보려 한다.



댓글