티스토리 스킨 : 내 생의 첫 스킨 꾸미기

오늘은 티스토리의 '스킨 꾸미기'에 대해서 처음 시작하시는 분들 혹은 아직 티스토리에 대해서 아직 잘 모르겠다라고 생각하시는 분들을 위해 가능한 쉽고 솔직하게 공유를 해드릴까합니다. 많은 분들이 블로그를 개설하시고 가장 먼저 하시는 일이 스킨을 꾸미는 일일텐데, 스킨을 꾸미기에서 초반에 막히지 않으셨으면 좋겠습니다. 자, 지피지기면 백전백승! 티스토리는 어떤 특징들을 가지고 있는지 숙지하시면 조금 더 쉽게(?) 이용을 하실 수 있으리라 믿습니다.

들어가기 :  티스토리 스킨의 기본알기

 티스토리의 매력이라고 꼽으면, (과도하게 심한) 스킨 자유도로 인하여 내 입맞에 맞는 스킨을 제작하여 사용할 수 있다라는 점입니다. 기본적으로 블로그 안에서 웹사이트 하나를 만든다라고 생각하시는 편이 조금 더 쉬울 것 같습니다. 즉, 이러한 자유를 만끽하기위해서는 '나는 이런 자유를 맞이할 준비가 되어있는가'라는 부분과 '나는 이 자유에 대해 감당할 수 있는가'에 대한 고민은 먼저 필요할 것 같습니다. 자칫 잘못 건드시면, 스킨이 다 깨져보인다던지 혹은 블로그 화면이 하~얗게 백지장처럼 변해버릴 수 있기 때문입니다. 하지만 일단 티스토리를 써보기로 한 만큼, 한번쯤은 스킨편집에 도전해보아야 하지 않을까요?

티스토리의 스킨은 기본적으로 설치형 블로그 서비스였던 태터툴즈부터 이어져온 'SKIN MARKUP'을 가이드로 하여, HTML / CSS / 이미지(옵션)으로 이루어져있습니다. 언급한 HTML 및 CSS에 대한 지식이 있다면 정말 물고기가 물을 만난 듯 하시겠지만, 그렇지 못한 분들은 가능한 초기에는 디폴트로 제공하는 스킨을 이용하시는 것이 좋을 것 같습니다.

티스토리 스킨의 구성 (가이드보기)

• Index (index.xml) : Index라는 말이 가리키듯이 가장 기본이 되는 파일이라고 생각하시면 됩니다. 스킨의 이름, 저작자 부터 기본적으로 스킨의 폭이나 기본적인 화면출력 설정 내용들을 관할하는 파일입니다. 
• HTML (Skin.html) :  HTML은 기본적으로 스킨의 뼈대를 구성하는 요소입니다. 이 스킨의 전체적인 레이아웃은 어떻게 될지, 어떤 위치에 무엇이 있을지에 대한 전체적인 뼈대이자, 구조, 구성을 잡는 것이라 할 수 있습니다. 
  
• 치환자 : HTML을 길게 쓸 필요없이 치환자를 쓰시면 더욱 간편하게 구성이 가능합니다. 치환자는 [## 머시시 ##] 등으로 구현되어있습니다.
• CSS (style.css) : 파일의 이름에서도 알 수 있듯이 CSS란 스타일을 잡아주는 가이드 역할을 하는 요소라고 생각하시면 됩니다. 즉, 폰트 글꼴, 크기, 색상, 높낮이, 넓이 등등에 대하여 일괄적으로 스타일을 지정해주어, 별도로 HTML에서 모든 구성마다 이런 스타일을 지정해 줄 수고를 덜어준다고 생각할 수 있습니다. 다만, 사전 지식이 없다면 손대기는 어려워 약간의 전문적인 지식을 요구합니다. 
• WYSIWYG (wysiwyg.css) : 위지윅이라고 읽는 단어인데, 생각보다 어렵죠? What You See is What You Get. 이라는 문장의 줄임말로, 많은 분들이 이 단어를 글쓰기 에디터와 관련하여 많이 이야기하십니다. 글쓰기 모드가 위지윅인지 HTML 모드인지 이야기 할 때 종종 쓰입니다. 아무튼 이 CSS는 글쓰기 화면에서 제작한 스킨과 동일하게 보이도록 도와주는 CSS입니다. 있으면 동일하게, 없으면 기본 화면으로 보입니다.

WYSIWYG이 적용된 경우

• IMAGES : 단순히 정말 이미지입니다. ^^;; 스킨 제작시에 만일 이미지가 필요하다면 이미지를 업로드 하시고 이용하시면 됩니다. 스킨 제작시에 HTML/CSS 편집에서 파일 올리기에 가셔서 이미지를 올리시고 나서 이후에 HTML이나 CSS 편집때에는 이미지의 최종 경로가 아니라 background:url(./images/bgRss.gif) 등의 형태로 작성하시면 됩니다. 

이렇게 티스토리의 기본적인 스킨 구성과 가이드를 알아보고 나니, 저는 스킨 제작을 하는 데에 대해서는 이미 오래전에 포기한 상태입니다. 다만, 약간의 HTML이나 CSS 지식을 이용하여 이미지를 변경하거나, 광고를 삽입하거나 등의 작은 편집을 하여 사용하고 있습니다. 하지만 이런 작은 편집만으로도 '나만의 스킨' 같은 느낌을 줄 수 있습니다. 그럼 욕심을 버린 상태에서 스킨을 꾸미는 방법이 무엇이 있는지 살펴보겠습니다. ;) 

본격적으로 꾸미기 : 스킨꾸미기에는 어떤 기능들이 있을까요?

 

아마도 꾸미기를 하시려면 먼저 어디에서 무엇을 설정할 수 있는지 확인하는 것이 중요할 것 같습니다. 티스토리 스킨이라면 위 그림에서 표시한 [스킨]이라는 메뉴 안에서 안의 내용들을 모두 선택할 수 있습니다. 기본 스킨이라도 설정등을 통하여 사용자 커스터마이징 되는 요소들이 많으니, 초기 개설을 하신 이후에는 꼭 가보셔야 하는 메뉴일 것 같습니다. 

1. 고민하지 말고 제공 스킨을 선택하여 사용하세요! 

스킨의 메뉴에 보이시는 첫번째 메뉴인 '스킨 선택'에서는 직접 스킨을 제작하거나 다른 편집없이 티스토리 서비스를 통하여 제공하는 스킨을 그대로 사용할 수 있습니다. 최신순, 인기순으로 골라보거나 아래에 보시는 것처럼 넓게 사진을 올리고 싶으신 분들은 1단형을, 위젯이나 사이드바에 뭔가를 많이 설치하고 싶으신 분은 3단형으로 골라 사용하시면 됩니다. ;) 

2. 그냥 제공 스킨에는 만족하지 못한다면, 스킨위자드를 이용해보세요!

스킨위자드는 위에서 말씀드린 스타일을 결정하는 CSS 파일에 규칙을 적용하여, 해당 규칙을 위자드에서 변경할 수 있도록 제작이 되었다고 합니다. 그래서 스킨 제작자라면 CSS 조정을 통하여 스킨위자드 제공도 가능하도록 만들 수도 있다는 것이죠! 

옆에서 보시는 스킨위자드 기능을 사용하시려면 제공 스킨 아래에 보시면 버튼이 몇개 존재하는데, 썸네일 이미지를 누르시면 적용된 스킨의 미리보기를, 적용을 누르면 바로 해당 스킨으로 교체를, 그리고 스킨위자드를 누르시면 됩니다.  아래와 같이 위자드가 뜨고 배경 이미지나, 글자 색상들을 꾸밀 수 있습니다. 하지만 자칫 잘못 설정하거나 하시면 스킨 편집 하던 중 안드로메다로 순간 이동이 갈 수도 있으니 유의하셔야 합니다. 

++ 자세한 사용방법은 여기로 : http://guide.tistory.com/67

3. HTML/CSS를 직접 편집해보세요! 

먼저 말씀드리지만, HTML과 CSS 편집을 하시기 위해서는 기본적인 지식은 필요합니다. 자칫 잘못된 편집으로 하얀 화면이나 에러를 발생하거나, 혹은 속도 저하를 가져올 수도 있으니 유의하셔야 할 것 같습니다. 제 경우에는 크게 편집을 하는 경우는 없지만, 광고 스크립트를 설치한다던지, 아니면 간단하게 텍스트 등을 변경하기 위해 사용합니다. Ctrl + F 로 변경하고 싶은 텍스트를 찾아 그 단어만 바꾸어주면 쉽게 원하는 메뉴로 고칠 수 있지요. 제 블로그에 보이는 Recent Post 이런 표현을 '요즘 끄적인 글들' 이렇게 변경할 수도 있지요. 이 부분은 티스토리 블로거분들께서 노하우를 공개하시고 계시니 참고하시면 좋을 것 같습니다. (참, 이미지의 경우에는 동일한 사이즈와 동일 파일명으로 제작하신뒤 파일업로드에서 덮어씌우시면 쉽게 변경됩니다. 간혹 Cache가 있어 기존 파일이 보일 경우에는 살포시 Ctfl + F5를 눌러주세요!) 

++ 애드센스 광고 본문에 넣는 법 : http://taeric.tistory.com/76  

4. 화면 출력을 이용하여 세부적인 내용을 조절합니다. 

스킨을 대략 모두 꾸몄다라고 생각이 든다면, 그 다음은 화면 출력 메뉴를 한번 들려주시면 좋을 것 같습니다. 티스토리의 스킨들이 모두 조금씩 다른 설정과 구조로 되어있어서 상세한 내용들, 즉 화면에 출력되어 보여지는 모양에 대해서 설정이 가능합니다. 예를 들면 글자의 길이, 보여지는 리스트의 개수, 형태 등도 쉽게 설정을 통하여 결정할 수 있습니다. 

 TIP  만약 스킨을 꾸몄는데, 글쓰기 화면의 폭이 내 스킨과 다르다면?

그 중에 조금 어려운 설정이 있다면 바로 '본문 가로 크기' 라는 설정입니다. 이 가로 크기는 위에서 설명드린 Index 파일에서 정보가 오게 되어있습니다만, 간혹 Index 파일을 제외한 채 스킨이 제작되었거나, index가 아닌 HTML로 편집을 하여 스킨의 본문 폭을 늘였을 경우에는 글쓰기를 하는 동안 보여지는 화면의 폭이 기본 크기로 지정될 수 있습니다. 만약 1000px의 본문 크기의 스킨을 사용하는데, 글쓰기에는 여전히 폭이 좁게 나온다라고 싶은 경우, 화면 출력 설정 중에서 화면 크기를 1000으로 변경해주시면 글쓰기 화면의 폭이 함께 변경됩니다. ^^;; 즉, 한마디로 정리하면 관리자 글쓰기 에디터 본문 넓이 = 화면출력 설정의 '본문 가로 크기' 라고 보시면 됩니다. 

마무리하기

 

먼저 위 설명은 스킨을 제작하실 수 없는 분들을 위해 작성했기 때문에 높은 수준의 글은 아닙니다. 따라서 WYSIWYG를 만드는 법이라던지에 대해서는 언급하지 않았구요. 저 또한 새로 스킨을 제작한다거나, 전문 지식이 있는 것이 아니라 위에서 언급한 대로 화면 출력 설정하고, 약간 HTML 등을 편집하여 쓰는 정도입니다. 이 외에는 사이드바설정이나 카테고리 들도 설정하여 이용하시면 됩니다. 하지만 제일 좋은 건 처음부터 예쁜 그릇을 찾는 것이겠죠? 

첫술에 배부르기 보다는 먼저 기본적인 형태를 갖춘다음 블로그에 글도 써보고, 이런저런 것들도 해본 이후에 조금씩 방법을 찾아가며 시도해보는 것이 좋을 것 같습니다. 처음부터 너무 어렵다고, 헷갈린다고 생각하지 마시고 여유를 가지고 조금씩 고쳐나간다라고 생각하시면 좋을 것 같습니다. ^_^

P.S. 그 다음에는 그동안 눈여겨 보았던 티스토리의 스킨 제작자들의 블로그를 소개할까 하오니, 후속편도 기다려주십시오! 초기 정착시에 어려움을 겪으시는 분들이 많아 블로그에 TISTORY TIP 카테고리로 따로 운영을 시작했습니다. 이런저런 코멘트나 알면 좋을 내용들이 있다면 조금씩 알려드리도록 하겠습니다. 그럼 모두들 즐거운 블로깅!!