스킨을 제작하다보면 치환자를 잘못쓰거나 닫는태그를 빼먹거나, 따옴표를 하나 빼먹거나 등등의 실수 때문에 한참을 고생한 기억이 있다. 아마 스킨을 만들어 본 사람이라면 다들 동감할것 같다. 실제로 블로그를 정상적으로 작동시키는 skin.html 파일은 그대로 놔두고, style.css 파일만 수정해서 디자인 한다면 아마 어이없는 실수로 인해서 아까운 시간을 버리진 않을것 같다는 생각을 했다.

그래서 스킨의 형태를 구분하고, 이렇게 구분된 형태를 테마별로 다른 응용스킨의 기본이 되는 스킨을 만들기로 했다. 형태로 구분짓자면 역시 1단, 2단, 3단의 형태가 있을것이다. 먼저 3단을 기본으로 다양한 디자인 적용이 가능하도록 구조화시키는 작업을 오랜시간 투입했다. 클래스이름이 직관적이어야 하고, 최대한 디자인적용이 가능하도록 고려해야했다. 종이에 그림을 그려가면서 여러가지 상황을 예측해보았으며, 이에 대응할 수 있도록 작업에 들어갔다.

이렇게 해서 3단 기본스킨 tisNote가 탄생되었고, 이를 응용한 응용버전까지 제작되었다. 특히 컬러셋의 변화 외에도, 레이아웃을 변경한 응용버전 tisNoteSpring을 만들때에는 /* 블로그 레이아웃 */이라고 주석처리된곳을 먼저 작성하여 레이아웃을 잡아준뒤에 나머지 세세한 부분을 조정하였다. 의외로 레이아웃이 쉽게 변경됨을 보고, 스스로 뿌듯해 했는데... 아마도 내가 만들어서 그렇겠지하며, 다른 사람들이 이걸보면 복잡해 하지 않을까 염려스런 마음도 앞섰다.


아마 100%자유로운 응용은 불가능할것이다. 수많은 경우의 수가 있는데 하나의 코드파일을가지고, 그 수많은 경우의수를 만족시킨다는것 자체가 불가능한 일일것이다. 다만 내 머릿속에서 나올수 있는건 다 한것 같다.

스킨만들다가 혹 잘못될까 겁을 먹고 있는 사람들에겐 tisNote의 style.css를 하나씩 수정해 나가는것도 하나의 방법일 수도 있을것 같다. 고수들에게는 전혀 매력없는 스킨이겠지만.. ^^

아자아자... 또 2단 기본테마스킨 만들러가잣!~~~

tistory 스킨업데이트 공지
태터툴즈 홈페이지에 다운로드 받으러 가기
기본 테마스킨 tisNote 응용방법 보러가기

댓글을 달아 주세요

  1. BlogIcon Daisy 2006.08.11 11:56

    너무 매력있는 스킨이에요.^^* 기본에 충실하면 응용이 쉬워져서 너무 좋아요.
    2단 도 만드시는군욧!!!!!!!!!!!
    기다릴꺼에요~~~ ^___^*

  2. BlogIcon 한재연 2006.08.11 12:33

    정말 너무 훌륭한 스킨입니다!
    다음 스킨도 아주 기대됩니다.

  3. BlogIcon 한재연 2006.08.11 12:40

    정말 .... 그동안 질문에 답변을 해주셔서 감사합니다!!
    하나, 아니 둘만 더 여쭤볼게요.

    1. 링크를 걸 때 저 위처럼 아래에 밑줄이 쳐지게 하려면 어떻게 하나요?
    2. 위에서처럼 또 새창으로 링크 열기는 어떻게 하나요?

    ..................답변 기다릴게요!!

    • BlogIcon 리체 2006.08.17 12:11

      답변이 너무 늦었네요.. 흑..
      1. a:hover{border-bottom:1px dotted #ccc;}
      이런식으로 스타일을 지정하시면 됩니다.
      2. 그건.. 움.. 플러그인을 사용했습니다. 태터툴즈의 플러그인 쪽으로 가셔서 '새창'이라고 검색하시면 해당 플러그인이 있는데 이걸 다운받아서 자신의 블로그 디렉토리의 'plugins'디렉토리 안에 넣으시고, 관리자에서 이를 사용중으로 바꾸시면 됩니다~~~ http://manual.tistory.com/683 요길 참고해 주세요

  4. BlogIcon highits 2006.08.12 17:16

    그런데요, 옆으로 스크롤 안 생시게 하려면 어떻게 해야 되죠?

  5. BlogIcon 김태경 2006.08.13 01:17

    고생 많으셨습니다. 옆에서 그리고 지우고를 반복하시는 모습을 어깨너머로 봤지만 이렇게 고심하시는 줄은 몰랐습니다. 대박조짐이 보이니 좋으시죠? :) 괴물은 재밌게 보셨는지 모르겠습니다.

  6. H 2006.08.14 06:32

    저는 1단 스킨을 몹시 기대하며 기다리고 있답니다. 아자아자 화이팅!

  7. BlogIcon 하늘소망 2006.08.14 16:42

    스킨 업데이트 오늘 확인했네요.. 바로 적용 했답니다. ^^
    스킨 만드시느라 수고 많으셨겠어요...

    신혼생활 행복하게 잘 하고 계시죠? ㅎㅎ
    행복하세요.

  8. BlogIcon 초록 2006.08.15 22:06

    스킨 참 예쁘네요 :D
    좋은 스킨 공개해주셔서 감사합니다!

    잘 쓰겠습니다 ^^

  9. BlogIcon casapark 2006.08.16 18:18

    안녕하세요.
    예전에 만드신 스킨(클래식용)을 사용했는데
    제가 계정을 날렸다가 다시 db복구를 했습니다.
    근데 스킨을 백업시키지 않아서 복구에 에러가 있습니다.
    예전 스킨 만드신건 어디서 받을수 없을까요?
    db백업시 스킨도 백업해야 한다는걸 몰랐는데....
    테터툴즈 스킨게시판에는 예전 스킨이 하나 뿐이라서
    제가 쓰던 스킨을 구할수가 없네요.

    • BlogIcon 리체 2006.08.17 12:08

      제가 예전에 만든스킨이 여러종류인데 ...
      그중에서 어떤 스킨을 사용하셨는지 정확하게 말씀해 주시면.. 도움이 될것 같습니다. ㅡ ㅡ;

  10. BlogIcon [수빈엄마] 2006.08.18 11:11

    좋은 스킨 올려주셔서 감사드립니다.
    저의 경우 이 스킨을 설치하고 댓글 창을 열면 왼쪽의 메뉴가 밑으로 내려가 버리는데요... 어떻게 해결방법이 없을까요? - http://hjk.tistory.com/
    오늘 하루도 행복하시길 바랍니다.

    • BlogIcon leezche 2006.08.23 10:25

      이러한 증상의 근본적인 원인을 찾지는 못했습니다.
      테스트 과정에서 문제 없음을 확인하고 내보낸건데 정작 다른 환경에서는 문제가 생기는것 같습니다.
      해결 방법은 style.css 의 .content .entry .comment 에서 가로 사이즈를 10px 정도 줄여 보세요.

    • BlogIcon Rainyvale 2006.11.12 21:33

      어... 저랑 똑같은 문제를... 저도 비슷한 문제를 상담하러 왔는데...
      저는 티스토리에서 "기본테마스킨응용 - tisNoteGreen ver.1.00"을 쓰고 있는데요, 파팍에서는 제대로 되는데 익플에서는 왼쪽컬럼이 맨아래로 밀리네요. 항상 그런건 아니지만 대략 90%이상의 경우에 그래요. 왜 그럴까요?
      바쁘시겠지만 부탁드립니다. http:://rainyvale.tistory.com

  11. BlogIcon Rainyvale 2006.08.23 17:39

    네. 그렇게 하니까 되네요. 왜 그런지는 저도 갸우뚱.... ^^ 어떻게 이런 해결책을 찾아내시는지 궁금궁금... 고맙습니다.~~~.

  12. BlogIcon 엘레인 2006.10.22 22:21

    안녕하세요.
    티스토리에 있는 tisNote를 받아서 쓰는데, 스킨 댓글다는곳에 '비밀번호' 옆에 있는 영문이 '(homepage) ' 로 되어있네요.

    스킨은 정말 잘 쓰고 있습니다.

    • BlogIcon leezche 2006.10.23 10:17

      정확하게 "비밀번호 (password)" 이렇게 되어 있습니다. ^^;;; 다시한번 확인 부탁 드립니다.

  13. 2007.08.17 15:30

    안녕하세요. 티스토리에서 님의 tisnotespring를 잘 사용했습니다.
    다른게 아니라 이번에 도메인을 구입하면서 정말 머리아픈 문제가 생겨서 이렇게 도움을 청하게 되었습니다.

    그동안의 모든 글들이 님의 tisNoteSpring(위의 그림두개중 오른쪽것)에 맞추어 사용되어져서 이번 도메인에도 같은 스킨을 사용하려고 합니다. 그런데 테터툴즈 최신버전을 설치하고 나니, 스킨의 사이드바 등을 설정할 수 없게 되어 있더군요.

    다른 스킨들중, 이전버전의 것들도 마찬가지 현상을 보이고 있습니다.

    님의 스킨을 그대로 사용하려면, 어떤 조치를 취해야 할까요?

    .. 그리고 어려운 부탁 한가지 더 있습니다.

    본문이 500px로 고정되어 있는데, 막상 안에 들어가는 그래프, 표 등은 500으로 할 경우 한쪽끝이 잘리는 현상이 있었습니다.

    본문 사이즈를 550px로 수정할수도 있을까요? 아.. 어려운 부탁드려 죄송합니다.

    ......................

    현재 이전의 스킨을 쓰기위해 테터툴즈 이전버전을 구해 설치해볼까도 생각중입니다. 이렇게 해서 해결이 된다면 좋겠지만, 여전히 본문 사이즈의 문제가 남습니다.

    시간이 부족하다면, 본문사이즈 문제만이라도 도와주시면 정말 감사하겠습니다.

  14. BlogIcon 김주영 2007.12.20 14:12

    안녕하세요? 오래된 글에 댓글다네요.
    이번에 스킨을 좀 바꾸려다가
    leezche님이 만드신 tisNote(사용자 수정/업로드) ver.1.00로 정했는데
    제가 몇가지는 수정했는데 잘 모르는 부분이 있어서요.
    상단에 홈/위치로그/태그 이런거 뜨는 부분에 붉은 바탕 어디서 색을 바꿀수 있는건가요?
    그리고 오른쪽 사이드 바 배경색 바꾸는 것도 좀..;;
    기본적으로 html은 할줄 압니다.
    답변 주시면 감사하겠어요~

  15. BlogIcon 김태용 2008.01.05 15:37

    안녕하세요!
    제가 스킨을 leezche님이 만드신 tisNoteGreen(사용자 수정/업로드) ver.1.00(사용자 수정/업로드) 을 사용하고 있는데요
    제가 참고로 네이버블로그에서 이번에 티스토리로 백업해서 넘어왔는데요
    메인은 잘나오는데...
    카테고리나 기타 다른곳으로 들어가면 사이드바가 하단으로 내려가 있는데요
    이것은 왜 그러나요?
    좋은 전수 부탁드립니다.
    그럼 즐거운 주말 보내세요

  16. BlogIcon leezche 2008.01.07 21:15

    죄송합니다. 블로그뿐 아니라 이메일로 오는 질문들이 제가 감당할 수 없을 정도로 많이 일일이 답해 드리지 못하고 있습니다. 질문은 질문게시판을 이용해 주세요 ㅜㅜ;;

비밀글 (Serect)
댓글 달기 (Submit)