(이미지 출처: Design Sphere[각주:1])

(처음)
안녕하세요, 까만거북이입니다.

우선 이 글은 제 개인 블로그인 '까만거북이의 생각과 경험 기록장'의 스킨을 교체하면서 수정한 기록을 남기기 위해 작성한 글입니다.
더불어 티스토리를 사용하시는 다른 블로거분들께도 스킨을 수정하고 도움이 되기를 바라는 마음에 정성을 들여 글을 작성해봅니다. 

(본론)
티스토리 기본 스킨, 'Photo Essay'
포토에세이는 티스토리에서 얼마 전(2012년 1월 26일)에 오픈한 스킨입니다.

티스토리에서 알려드립니다    (1월) 새로운 스킨 1종 오픈
http://notice.tistory.com/1994 


티스토리 기본 스킨, 'Photo Essay' 설명 페이지.


아래는 설명 페이지에 있는 설명을 긁어온 것입니다.
웹표준을 준수한 XHTML 기반의 Tistory 기본 스킨입니다. 시맨틱한 웹을 유지하기 위해 디자인 부분을 style.css 파일에 독립시켜 적용하였으며 자유롭게 디자인을 수정하실 수 있습니다. 블로그 이미지 사이즈 180px, 컨텐츠의 가로 사이즈 500px에 최적화되어 있습니다.
웹표준을 준수하였기 때문에 '인터넷 익스플로러', '크롬', '파이어폭스' 등 대부분의 웹브라우져에서 정상적으로 출력됩니다.
시맨틱한 웹이라는 것은 디자인에 일관성을 주기 위해 CSS 파일에 스타일대로 디자인을 구성했다는 이야기이고, 덕분에 HTML과 CSS를 알고 있다면, 디자인 편집에 많은 효과를 줄 수 있습니다.
블로그 이미지는 오른쪽 사이드바에서 블로그 설명 부분에 붙이는 이미지를 의미하고, 가로 사이트 180픽셀에 맞게 만들어졌다는 설명입니다.
콘텐츠란 본문 내용을 의미하고, 역시 500픽셀에 맞춰져 있으므로 이미지를 같이 올린다면, 리사이즈를 생각해봐야 합니다. 


스킨위자드 이용.
스킨위자드는 티스토리 블로그에서 블로그 디자인을 보다 쉽게 편집할 수 있도록 하는 기능인데, 아쉽게도 이 기능이 스킨에 따라 완벽하지는 않습니다.
스킨 적용 후, 스킨위자드를 들어가는 방법은 블로그 관리자 메뉴에서 [스킨] 페이지에 들어가서 [스킨위자드]를 클릭하면 됩니다.
아래 이미지를 참고하세요.

티스토리 블로그 '스킨위자드' 들어가는 방법


티스토리 스킨위자드 옵션 화면


먼저, [배경]에서 [이미지 사용] 체크 해제 후, 배경 색상을 제가 가장 좋아하고, 안정적이라고 생각하는 색인 검은색으로 교체하였습니다.


아쉽게도 이 스킨에서 [타이틀] 부분은 스킨 위자드에서 적용이 되지 않습니다.
기존에 초록색으로 'PHOTO ESSAY'라고 쓰여 있는 부분인데, 아래에서 이 부분을 바꾸는 방법에 대해 다시 다뤄보겠습니다.

다음 [게시글] 부분에서 [제목 글자색]과 [게시글 글자색]을 역시 검은색으로 교체합니다.
기존의 색상의 RGB 코드는 각각 #538B98, #898989 입니다.


HTML/CSS 분석으로 타이틀 바꾸기
블로그 관리자 페이지에서 [HTML/CSS 편집]으로 들어갑니다.
그러면, 창이 두개 나타나는데, 위의 것이 HTML 편집, 아래 것이 CSS 편집입니다.

'skin.html' 파일의 body 부분을 참고하면, 블로그 타이틀 부분이 div id로 "container", "header"으로 구성되어 있고, 'h1'으로 스타일이 묶여 있는 것을 확인할 수 있습니다.
 

skin.html의 body 부분 캡쳐.


<body>

<s_t3>

<div id="container">

<div id="header">

<h1><a href="[##_blog_link_##]">[##_title_##]</a></h1>

<strong class="screen_out">블로그 메뉴</strong>

<div class="list_blogmenu">

[##_blog_menu_##]

</div>

</div>

<!-- header close -->


그러면 각 div id와 h1이 CSS에서 어떻게 정의되었는지 확인합니다.
'style.css'에서 '#header' 부분을 찾아보면, 아래와 같이 정의되어 있습니다.
블라블라 쓰여 있는데, 결정적으로 가로 408픽셀, 세로 45픽셀로 배경 이미지의 url이 title.png 파일로 지정되어 있는 것을 알 수 있습니다.
 

style.css의 Header 부분 캡쳐 이미지.

 

/* ***** Header ***** */

/* title */

#header h1 {}

#header h1 a {display:block;width:408px;height:45px;margin:0 auto;font:0/0 arial;background:url(images/title.png) left top no-repeat;text-indent:-9999em;}

* html #header h1 a {background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://i1.daumcdn.net/cfs.tistory/blog/skin/tis_photoEssay/images/title.png', sizingMethod='crop');}

#header h1 a:hover {text-decoration:none;}


그러면 블로그 관리자에서 [HTML/CSS] - [파일업로드] 페이지로 가서 'title.png'를 찾아보면, 타이틀 이미지를 확인할 수 있습니다.
이 이미지만 자신의 블로그에 걸맞게 바꾸어주면 되겠네요.

티스토리 블로그 관리자 - 파일업로드 페이지 캡쳐 이미지.


title.png 원래 이미지 백업용.



새로운 title.png 파일로 이미지 대치.
새로운 title.png 이미지를 만들어 보도록 합니다.
저의 경우, 맥북 에어에서 '스키치(skitch)'를 이용해서 간단한 이미지를 만들어보았습니다.

새롭게 올릴 title.png 이미지 파일.


이렇게 이미지를 새로 만들었으면, 다시 [파일업로드] 페이지에서 기존의 title.png 파일을 아래 [삭제] 버튼으로 삭제합니다.
그 후에 [+추가] 버튼으로 새로운 이미지를 업로드합니다.
삭제하지 않고, 업로드하게 되면, 티스토리에서는 파일을 대체하지 않고, 기존의 파일을 유지하겠금 시스템이 구성되어 있는 것 같습니다.
따라서 기존의 파일을 삭제하고, 다시 업로드하는 과정을 거치도록 하세요.


(마무리)
오늘은 이 쯤에서 마무리하도록 하겠습니다.
코드를 조금 수정하면, 스킨위자드에서 작동되면서 이미지가 아닌 텍스트로 타이틀을 수정할 수 있을 것 같은데, 지금은 이 정도만 해도 만족스러워서 다음으로 미뤄보도록 하겠습니다.
때가 되면, 다시 만져보고, 또 포스팅하도록 하겠습니다.

더불어 저는 html과 css를 조금 알고 이렇게라도 수정하고 있는데, 티스토리 쪽에서 기본 스킨을 이런 방식으로 만드는 것은 정말 이해되지 않습니다.
스킨위자드라는 기능도 네이버 블로그에 비하면, 디자인 수정이라는 부분에서 한참이나 뒤떨어져 있습니다.
그런데 내놓은 '기본 스킨'이라는 스킨들이 하나 같이 스킨위자드가 정상적으로 작동되지 않는다는 것은 웹에 대한 이해가 부족한 블로거분들에게는 그저 '주는 스킨이나 넙죽넙죽 받아 먹는' 정도의 방법 외에는 방법이 없습니다.
뿐만 아니라 티스토리의 강점은 자유로운 블로그 디자인 수정인데, 몇 픽셀에 최적화되어 있다라는 제한 역시 이해되지 않는 부분입니다.
그렇게 되면, '화면 설정' 탭에서 블로거가 자유롭게 건드릴 수 있는 부분이 몇이나 있을까요.

결국 이렇게 되면, 궁극적으로 많은 티스토리 블로그가 기본 스킨 때문에 개성을 잃게 됩니다.
그리고 사용자들은 점점 티스토리를 어려워하게 됩니다.
티스토리는 이런 부분에 주목하고 있는 것인지 의문이네요.

엄밀히 말해서 티스토리에 집중하고 있지 않은 다음에게 쓴소리를 하고 싶지만, 그건 나중으로 미루고, 티스토리에게 쓴소리를 하고 싶네요.
갖고 있는 장점을 살리되, 사용자들로 하여금 그 장점에 더 다가설 수 있게 만들자.

여러모로 아쉬운 티스토리입니다.
고맙습니다. 좋은 하루 되세요.


포스팅 끝.
2012년 1월 30일 월요일.



  1. Design Sphere - 윈도우 비스타 XP용 티스토리 아이콘 (Tistory icon for Windows Vista XP) http://design.funny4u.com/4 [본문으로]
Posted by 까만거북이

댓글을 달아 주세요

  1. Favicon of http://2222222.tistory.com BlogIcon 앞집꼬마 2012.01.31 21:02 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 포스팅 덕분에 잘 교체하였습니다. 감사합니다.
    가운데로 되어있는 타이틀의 위치를 왼쪽이나 오른쪽으로 옮기는 법도 혹시
    가르쳐 주실 수 있을지요 ^^;

    • Favicon of http://blackturtle2.net BlogIcon 까만거북이 2012.02.04 14:31 신고  댓글주소  수정/삭제

      @설원랑님//
      미천한 제 실력으로 코드를 뜯어보았는데, 해결하지 못했네요.
      죄송합니다..
      조금 더 뜯어보다가 해결책이 생기면, 알려드릴게요. :)

  2. Favicon of http://2222222.tistory.com BlogIcon 앞집꼬마 2012.02.04 22:17 신고  댓글주소  수정/삭제  댓글쓰기

    아이구.. 이 포스팅도 감사할 따름입니다.
    굳이 더 민폐끼치고 싶진 않네요 ㅠ,ㅜ 지금도 만족하고 있습니다.
    알아봐주신점 감사드려요.

  3. Favicon of http://splendidlife.tistory.com BlogIcon Rheesy 2012.03.16 02:03 신고  댓글주소  수정/삭제  댓글쓰기

    타이틀 바꾸는 법을 찾고 찾았는데 티스토리 안에서는 방법이 없는거였군요...포토샵은 써본적도 없는 저는 그냥 주어진 대로 써야겠네요 ㅠㅠ
    자세한 설명 감사합니다~! 못 바꾸는 이유라도 알게되니 속은 편하네요 ㅋㅋ ㅠㅠ

    • Favicon of http://blackturtle2.net BlogIcon 까만거북이 2012.03.17 14:13 신고  댓글주소  수정/삭제

      @Rheesy님//
      그림판을 이용해서라도 타이틀은 바꿀 수 있을 것 같아요.
      거창하게 만들 필요 없이 필요한만큼만 조율해주면 될 것 같네요.
      댓글 고맙습니다. :)

  4. Favicon of http://zero-gravity.tistory.com BlogIcon 무중력고기 2012.03.16 17:03 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다!!! 이 방법을 찾고 있었어요 ㅠㅠ

  5. Favicon of http://blackturtle2.net BlogIcon 까만거북이 2012.03.27 20:48 신고  댓글주소  수정/삭제  댓글쓰기

    -스팸 댓글로 판단되어 블로거가 댓글을 삭제하였습니다.-

  6. 2012.08.07 17:54  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Favicon of http://blackturtle2.net BlogIcon 까만거북이 2012.08.07 19:45 신고  댓글주소  수정/삭제

      @비밀댓글님//
      티스토리를 할 때, 나모 웹에디터와 같은 에디터가 꼭 필요한 것은 아닙니다. 티스토리도 네이버 블로그와 같이 주어진 환경 안에서 많은 것들이 가능합니다.
      단지 개방되어 있기 때문에 그 자유도가 주어지는 것일 뿐이지요. 기본으로 주어지는 스킨과 함께 티스토리를 시작해보시길 권해드립니다.
      하지만 스킨을 제작하는 것은 조금 난이도가 있는 작업입니다. 꼭 에디터가 필요한 일은 아니지만, 에디터가 있으면 큰 도움이 되지요. 에디터보다는 기본적으로 HTML/CSS/Javascript를 익혀보시길 권해드립니다. 또한 에디터에는 '나모 웹에디터'와 '드림위버(Dreamweaver)', '마이크로소프트 프론트페이지(Microsoft Frontpage)' 등이 있습니다. :)

  7. Favicon of http://sssuby.tistory.com BlogIcon 서비킴 2012.08.12 17:40 신고  댓글주소  수정/삭제  댓글쓰기

    글 잘 읽었습니다. title.png 파일을 삭제후 제가원하는 제목을 'title.png'로 명명한후 저장을 눌렀는데 그대로 포토에세이로 되어있네요 ? 왜그런거죠?ㅠㅠ

    • Favicon of http://blackturtle2.net BlogIcon 까만거북이 2012.08.14 01:11 신고  댓글주소  수정/삭제

      @서비킴님//
      바뀐 title.png 파일을 서버에서 인식하지 못하는 경우 그럴 수 있습니다.
      삭제하신 후, [저장] 버튼을 누른 후에 다시 파일을 바꾼 후, 다시 저장을 눌러보세요.

  8. Favicon of http://atwedu.tistory.com BlogIcon 소원파파 2013.03.15 00:47 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 덕분에 저도 잘 바꿨습니다.

  9. Favicon of http://mydentee.tistory.com BlogIcon mydentee 2013.03.26 14:58 신고  댓글주소  수정/삭제  댓글쓰기

    많은 도움이 되었습니다! 좋은 포스팅 감사합니다! ^^

  10. Favicon of http://vaucheria.tistory.com BlogIcon ghtthe 2017.01.15 18:08 신고  댓글주소  수정/삭제  댓글쓰기

    저 그스킨 제목 변경 못하고 쓰고 있었는데 이렇게 알려주셔서 정말 감사합니다.