'Skin story'에 해당되는 글 27

  1. 2009.07.17 설치형 텍스트큐브의 UI (8)
  2. 2008.08.25 텍스트큐브 스킨 매뉴얼 (4)
  3. 2008.04.23 플라이투 스킨을 예쁘게 보는 방법 - 맑은 고딕과 ClearType (23)
  4. 2008.04.13 본문 영역을 좀더 넓게 쓰려면? (18)
  5. 2008.04.09 플라이투 스킨! 티스토리에서 사용하기 (19)
  6. 2008.04.07 플라이투 스킨 배포합니다 (133)
  7. 2007.11.02 자유로운 스킨 시스템에서 스킨 위자드 구현이 어려운 이유 (2)
  8. 2007.10.14 스킨 배포합니다 - Plyfly_Blackline (45)
  9. 2007.04.13 블로그의 정렬 - 가운데 혹은 왼쪽 (8)
  10. 2007.03.26 예쁜 트리 가져가세요.. ^^ (4)
  11. 2007.03.19 스킨 만들고 포근한 양 한마리 키우세요 (17)
  12. 2007.03.12 이번에 태어난 스킨들입니다. (18)
  13. 2007.02.27 내가 쓰고 싶은 블로그 스킨 (8)
  14. 2006.11.13 웹 컬러 챠트 - 골라 쓰세요~~~ (8)
  15. 2006.11.06 기본 스킨 레이아웃 바꾸기 - 사이드바를 왼쪽으로 (12)
  16. 2006.11.02 무분별한 프린트 자제를 위한 인쇄 스타일!~~~ (8)
  17. 2006.11.02 내 블로그 예쁘게 프린트 하기 (3)
  18. 2006.10.24 스킨제작 매뉴얼 (3)
  19. 2006.09.11 티스토리 1단 기본테마스킨 3종세트 업데이트 (29)
  20. 2006.09.06 스킨을 만들어 봅시다 (10)
  21. 2006.09.06 구상한 스킨을 구조화
  22. 2006.09.06 만들고자 하는 스킨의 디자인 구상 (1)
  23. 2006.08.30 테마스킨 기본 버전(2단)이 티스토리에 업데이트되었습니다 (27)
  24. 2006.08.25 태터툴즈에 단축키가 있어요! (4)
  25. 2006.08.17 태터툴즈 스킨 공모전 (2)
  26. 2006.08.11 기본 테마스킨 tisNote 발표 (21)
  27. 2006.04.22 테스트 페이지

설치형 텍스트큐브의 UI

Skin story | 2009.07.17 13:15 | leezche
설치형 텍스트큐브의 UI는
불편하고, 예쁘지 않다.
기본적으로 grid가 엉망이다.
grid가 잘 맞춰져 있는 UI는 사용자로 하여금 피곤함을 덜어준다.
기본중의 기본이라고 할 수 있다.

css를 조금 손보려고 하였으나, 효율적이지 못했다.
이내 포기했다.
css만으로는 모든 상황을 커버할 수가 없다.

설치형 텍스트큐브는 오픈소스인데
디자이너가 참여하기엔 장벽이 너무 크다.

텍스트큐브의 UI를 개선하려는 디자이너가 단 한명이라도 있다면
지금보다는 편한 UI를 많은 사람들이 접할 수 있을것 같다.

관리자 화면도 블로그 화면처럼 치환자를 이용한 스킨 시스템이라면
그 단 한명의 디자이너가 더 나은 텍스트큐브를 만드는데 도움을 줄 수 있지 않을까?

텍스트큐브는 정말 좋은 블로그 툴 임에도 불구하고,
그 빛을 발하지 못하는 이유중에 하나가 UI인 것 같다.

하지만 지금 상황은 그 누구도 탓할 수가 없다.
사실 감사하다고 절을 해도 모자랄 판이다.

사실 나도 스킨을 만들어 배포하면서
내가 만든 스킨을 이렇게 해달라 저렇게 해 달라는 이야기가 나올때마다.
힘이  빠진다.
아마 시간이 남아돌아 텍스트큐브를 만드는 사람은 없을거다.

다들 텍스트큐브에 대해 생각도 많고, 하고 싶은것도 많을테지만,
그렇게 하지 못하는 이유를 너무 잘 알것 같다.

감사하며 그냥 써야겠다.
스킨이나 열심히 만들어야겠다.. :)
텍스트큐브의 전신 태터툴즈 시절부터 작성되어져 왔던 스킨 매뉴얼을 텍스트큐브의 최신버전에 맞춰 내용을 업데이트 하였습니다. 텍스트큐브 설치형 스킨제작에 조금이나마 도움이 되어 더욱 더 다양한 텍스트큐브를 볼 수 있었으면 하는 사용자의 한사람으로 노가다좀 했습니다. ^^

User image


User image


설명 및 스크린샷은 플라이투 스킨을 예로 만들어졌습니다.

티스토리 스킨 매뉴얼은 "티스토리 스킨가이드"를 이용하시면 됩니다.
텍스트큐브 버전업에 따라 업데이트된 내용을 제외한 거의 모든 내용이 동일합니다.

플라이투 스킨은 ClearType을 지원하는 맑은고딕체를 기본으로 사용하고 있습니다. 먼저 맑은고딕체(비스타(Vista), MS 오피스 2007의 한글 공식 글꼴이라고 하네요)를 다운로드 받아 C:\Windows\Fonts에 복사해둡니다. 이렇게 설치된 맑은고딕체를 부드럽고 깔끔하게 보려면 ClearType속성을 이용해야 합니다.

ClearType이란 텍스트에 포토샵으로 작업한것과 같은 효과를 주어 텍스트를 좀 더 고급스럽게 보이도록 Anti Aliasing을 적용시켜 주는 기능입니다. 참고로 굴림이나 돋움체는 ClearType을 지원하지 않습니다.

ClearType을 적용하는 방법에 대하여 알아보겠습니다.

  1. 바탕화면에서 마우스 오른쪽 버튼을 클릭하여 "속성"을 선택한 후 "화면 배색"탭으로 이동하여 "효과"버튼을 클릭합니다
    디스플레이 등록정보 - 화면배색
  2. "화면 글꼴의 가장자리를 다음는데 다음 방법 사용"에서 ClearType을 선택합니다.
    효과

참고로 ClearType을 좀 더 정교하게 설정할 수 있는 ClearType Tuner라는 것도 있습니다.

플라이투 스킨은 사이드바 230pixel, 본문영역이 500pixel이고, 여기에 여백등을 고려하면 스킨의 전체 사이즈가 820pixel 입니다. 여기에서 본문 영역을 넓게 쓰고자할때 어떤 부분을 어떻게 수정하면 되는지 알아보도록 하겠습니다.

step 01. style.css 파일을 편집하겠습니다.
  1. "Layout"이라고 주석처리 되어 있는 곳으로 이동하면, container, content, sidebar 에 각각 width속성이 지정 되어 있습니다. 본문 영역을 200pixel 더 넓혀서 700pixel로 쓰고 싶다면, content의 width를 700px로 수정합니다. 이렇게 되면 스킨 전체 사이즈가 늘어 났기 때문에 container도 200pixel더해서 1020pixel로 수정해야 합니다.
  2. "Article Basic Style"라고 주석처리 되어 있는 부분으로 이동하면 article 레이어에도 width가 지정되어 있습니다. 역시 700px로 수정합니다.
    * article의 width부분을 삭제하셔도 무방합니다. 다만, overflow:hidden; 을 content 레이어로 옯겨주시면 됩니다.
  3. "Content Part" 라고 주석처리 되어 있는 부분으로 이동하면, writeForm 레이어에 textarea와 textField라는 클래스명을 가진 input폼의 가로 사이즈를 각각 200pixel 넓혀 주시면 됩니다. (* 방명록과 댓글이 writeForm이라는 동일한 클래스명을 사용하고 있기 때문에 한번만 수정해 주시면 두곳 모두 수정이 됩니다. )
step 02. index.xml 파일을 편집하겠습니다.
가장 아랫부분으로 이동하면 contentWidth를 지정하는 곳이 나옵니다. 이곳을 700으로 수정해 주어야 합니다. 이 부분이 스킨에 직접적인 영향을 미치는 것은 아닙니다. 다만 글을 작성할때 텍스트 입력폼의 사이즈를 이 수치로 반영하게 됩니다. 또한 본문에 이미지를 삽입할때도 이곳의 수치를 참고하여 이미지의 기본 가로 사이즈를 반영하게 됩니다.

요약하자면...

style.css의 Layout 에서
#container { width:820px;} → #container { width:1020px;}
#content { width:500px;} → #content { width:700px; overflow:hidden;}
style.css의 Article Basic Style 에서
.article { width:500px; overflow:hidden;} → .article { }
style.css의 Content Part 에서
#content .writeForm .textField { width:250px;} → #content .writeForm .textField { width:450px;}
#content .writeForm textarea { width:330px;} → #content .writeForm textarea { width:530px;}
index.xml에서
<contentWidth>500</contentWidth> →<contentWidth>700</contentWidth>

텍스트큐브가 진화(?)하면서 티스토리에서 사용하지 않는 치환자들이 많이 생겨 났습니다. 텍스트큐브용으로 만들어진 스킨에서 다음의 치환자들만 제거하면 티스토리에서도 사용할 수 있습니다.

<head> 영역안

메타 데이터 (삭제)
<meta http-equiv="Keywords" content="[##_meta_http_equiv_keywords_##]" />
RSS 활성화 (삭제)
<link rel="alternate" type="application/rss+xml" title="[##_title_##] : comments" href="[##_comment_rss_url_##]" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##] : trackbacks" href="[##_trackback_rss_url_##]" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##] : comments + trackbacks" href="[##_response_rss_url_##]" />
브라우저 타이틀 (수정)
<title>[##_title_##] <s_page_title> :: [##_page_post_title_##]</s_page_title></title>
수정 -->
<title>[##_title_##] :: [##_page_title_##]</title>

menu 영역

표지 (삭제)
<li id="menuCover"><a href="[##_blog_link_##]cover">Cover</a></li>

content 영역

표지 출력 부분 (삭제)
<s_cover> ... </s_cover>
검색결과 트랙백 리스트 (삭제)
<s_tblist> ... </s_tblist>
키워드 설명 출력 부분 (삭제)
<s_keylog_rep> ... </s_keylog_rep>
에러 페이지 출력 (삭제)
<s_page_error> ... </s_page_error>
방명록 - 오픈 아이디 사용 부분 (삭제)
<s_guest_input_form_openid_only> ... </s_guest_input_form_openid_only>
댓글 - 오픈 아이디 사용 부분 (삭제)
<s_rp_input_form_openid_only> ... </s_rp_input_form_openid_only>

sidebar 영역

저자 출력 부분 (삭제)
<s_sidebar_element><!-- 저자 모듈 --> <s_author_rep> ... </s_author_rep></s_sidebar_element>

footer 영역

표지 메뉴 부분 (삭제)
<a href="[##_blog_link_##]cover">Cover</a>
카피라잇 부분 (수정)
<a href="[##_blog_link_##]"> [##_blogger_##]</a>’s Blog is powered by
<a href="http://www.textcube.org" onclick="window.open(this.href); return false">[##_textcube_name_##] [##_textcube_version_##]</a>
수정 -->
<a href="[##_blog_link_##]"> [##_blogger_##]</a>'s Blog is powered by <a href="http://daum.net" onclick="window.open(this.href); return false">Daum</a>

수정이 힘드신 분들은 아래 파일을 다운로드 받아 교체해 주시면 되겠습니다.

잘못된 부분 있으면 신고 바랍니다. 신고는 아래 댓글로 부탁드립니다.

플라이투

플라이투

드디어! 드디어! 배포합니다.
너무 기다리게 한 것 같아 죄송합니다. ㅜ ㅜ;;
틈틈히 스킨 파일들 들여다봤는데... 볼때마다 걸리는것들이 있어서 매일 조금씩 소스를 수정했습니다. 나름대로 신중에 신중을 기하느라 그런것이니 너그럽게 이해해 주세요. ^^

"플라이투" 스킨은 IE7, IE6, FF2, FF3, Opera, Sapari 에서 테스트를 마쳤으며, 플러그인이나, 포스트 본문으로 인한 문제는 제외하고, 스킨 자체의 w3c validator를 통과하였습니다. (버뜨... 문제는 항상 생길 수 있다는거죠! 문제 생기면 신고 바랍니다. 바로 수정해서 업데이트 하겠습니다. _ _ ;; )

앞으로 이 스킨을 가지고 "텍스트큐브 스킨 만들기 강좌"를 진행해 해보려고 합니다.  skin.html 파일을 되도록이면 걷들지 않고, style.css 파일 위주로 진행하겠습니다.  skin.html 파일은 개선점이 나올때마다 그때그때 소폭 수정이 있을 수도 있겠습니다.

디자이너분들중 이제 막 웹표준을 접하는 분들이나, 관련 지식이 전혀 없는 분들도 따라올 수 있도록 진행해 보겠습니다. 제 능력이 어디까지인지는 모르겠으나 열심히 해 볼께요.. ^^;;

이 스킨은 "텍스트큐브 스킨 블로그"에도 배포되었습니다.



현재 이 스킨을 사용중인 곳을 아래 댓글이나 트랙백으로 알려주세요. 저에겐 힘이 됩니다. ^^;; 그리고 무엇보다 강좌를 진행하면서 스킨의 변화된 모습을 여러사람들과 공유해 보아요.

덧붙임... 04.17
검색폼에서 오류나는 문제 해결하였습니다. 제가 바보같은 실수를 했더군요. _ _;;
skin.html 파일의 <s_search></s_search>블럭안의 텍스트필드의 onkeypress 값으로 치환자가 들어가 있는데 언더바를 누락시키는 실수를.. _ _ ;;;;
[##search_onclick_submit##] --> [##_search_onclick_submit_##] 이렇게 수정해 주시면 됩니다. 스킨 다운로드 파일도 패치해 두었습니다. 수정이 어려우신분들은 다시 다운로드 받아 적용시켜 주세요.

텍스트큐브 기반의 스킨은 누구나 자유롭게 자신이 원하는 대로 스킨을 만들 수 있습니다. 고정 스킨형을 지향하고 있는 타 블로그 서비스와 비교하여 어떤게 가능한지 몇가지만 나열해 보겠습니다.

  1. 플래시를 이용한 여러가지 데코레이션이 가능합니다.
  2. 정형화 된 1단, 2단, 3단 이외의 다양한 레이아웃 구조가 가능합니다.
  3. 가로폭 사이즈를 원하는 대로 조절할 수 있습니다.

예제 스킨)
http://retro.tattertools.com/ko/bbs/view.php?id=skin&no=487
http://retro.tattertools.com/ko/bbs/view.php?id=skin&no=438
http://retro.tattertools.com/ko/bbs/view.php?id=skin&no=427

이것 외에도 세세한것까지 따지자면 수도 없이 많겠지요.
이렇게 할 수 있는게 많은데, 왜 타 블로그 서비스에서는 스킨의 자유도를 제한하는 것일까요?

스킨에 자유도를 주면 서비스 제공에 많은 어려움이 따르기 때문입니다.
극명한 예로 수많은 사람들이 만든 개성넘치는 스킨을 스킨위자드를 이용하여 배경이미지를 바꾼다고 가정해 보겠습니다.  배경이미지를 바꾸기 위해서는 여러가지 방법이 있겠지만, 스타일시트를 변경하는 것이 가장 빠르고 쉬운 방법이겠지요. 하지만 스킨 제작자들은 각종 태그를 이용하여, 각자의 개성에 맞게 클래스명을 사용합니다. 심지어는 테이블을 이용하여 레이아웃을 만들기도 하고, 인라인으로 html 문서안에 배경이미지를 넣기도 합니다. 모든 스킨을 하나하나 분석하지 않으면 스킨위자드를 이용하여 일괄적으로 배경이미지 하나 바꾸는것도 쉽지 않은 일입니다.

그리고 무엇보다 힘든 가로폭을 변경하는 일은 고정형 스킨 시스템에서도 거의 지원하지 않는 기능입니다. 그런데 자유형 스킨 시스템에서 가로폭 변경을 지원한다는것은 불가능을 가능케 했던 일입니다. 물론 100% 모든 스킨에서 완벽하게 지원되는것은 아니지만 말입니다.
특히 컨텐츠 부분이 아래 처럼 이미지화 되어 있는 경우는 거의 불가능한 일입니다. 가변을 고려하여 구조화된 스킨이라면 모르겠지만, 대부분의 스킨 제작자들이 그렇게 만들리는 만무합니다. 너무 귀찮은을 일이거든요.

사용자 삽입 이미지
사실 티스토리의 스킨위자드는 기술력도 기술력이지만 엄청난 노가다의 산물입니다.

보시는 바와 같이 스킨의 자유도라는 것에 "일장일단"이 있습니다. 사람들 개개인 마다의 개성을 존중하고, 원하는 레이아웃에 원하는 디자인을 자신의 블로그에 입힐 수 있게 하는 일은 정말 굉장한 일이라고 생각합니다. 이러한 것들을 통해서 응용할 수 있는것들이 너무나 많이 있으니까요.(예를 들면 이런거죠. http://itstyle.tistory.com)
하지만 그 이면에는 스킨 만들기의 어려움, 새로운 기능 추가의 어려움, 잘못만들어진 스킨으로 인한 블로그 사용의 어려움등 많은 단점들이 숨겨져 있습니다.
어떤걸 포기하고, 어떤걸 선택할지는 서비스 제공자의 몫이겠지요.

사용자 삽입 이미지

현재 쓰고 있는 스킨 배포합니다.
http://retro.tattertools.com/ko/bbs/view.php?id=skin&no=664

요청하신분이 계셔서.. 진작에 배포하려고 하였으나.. 귀차니즘이 발동하여 이제야 배포합니다. 텍스트큐브 최신버전에 맞춰서 업데이트 하고 싶었으나... 스스로 배포하는 부지런함이 어디냐 위안 삼고 있습니다.
사용하는데는 큰 문제 없을 것입니다.

많이 애용해 주세요^^

덧1:  IE6에서 사이드바 깨지는 문제와 FF에서 메뉴가 블로그 타이틀보다 위에 올라가 있는 현상을 수정하였습니다. 10월15일 13시 이전에 다운로드 받으신 분들은 다시 다운 받아 주세요

덧2: 사이드바에서 누락된 요소들 다시 살렸습니다.
태터툴즈 블로그 스킨을 사용하다보면 가운데로 정렬되어 있는 스킨을 왼쪽 정렬로 바꾸고 싶을때가 있습니다. 혹은 그 반대의 경우도 있을 수 있겠지요..

스킨의 정렬을 바꾸기 위해서는 구조를 살짝 들여다볼 필요가 있습니다.
제일 바깥쪽을 둘러싸고 있는 레이어의 클래스명을 찾아서 이 레이어의 정렬을 지정해 주면 블로그 전체의 정렬을 내 마음대로 할 수 있겠지요. ^^

예를 들어 tistory(태터툴즈 기본스킨)스킨의 skin.html 파일을 살펴보면...

<body>
<s_t3>
  <div id="container">
   .
   .
   .

코드가 이런식으로 시작하고 있습니다.
이제 제일 바깥쪽 레이어의 이름이 container 라는 것을 알아냈습니다.

container 레이어를 왼쪽으로 정렬시키기 위해서는... style.css 파일에서
#container {
이렇게 시작하는 부분을 찾습니다.
이 레이어의 속성중에 레이어 바깥쪽의 여백값을 설정해 주는 부분이 있습니다.

margin:0 auto;
바로 이 부분이지요..

이걸 해석해 보면... 블로그의 위와 아래 여백을 0으로 하고,
왼쪽과 오른쪽 여백을 적당히 배분해서 레이어를 가운데로 위치시킨다.... 모 이런뜻이 되겠습니다. ^^

왼쪽으로 정렬 시키려면
#container {
  margin:0 20px;
}

이런식으로 작성해 주면 됩니다.
왼쪽과 오른쪽 여백을 20px로 준 이유는 0으로 해버리면 너무 왼쪽으로 딱 붙어 버리기 때문입니다.  위와 아래에도 여백을 주고 싶다면

#container {
  margin:10px 20px;
}

이렇게 하면 되구요..
위, 아래, 왼쪽, 오른쪽 모두 다른 값을 주고 싶다면.

#container {
  margin:10px 0 20px 30px ;
}

각각의 값은
margin : 위 오른쪽, 아래, 왼쪽;
에 대응됩니다.


이바닥에서 아는 사람은 다~~~ 아는 상식이겠지만..
물어보는 분이 종종 계셔서... 포스팅합니다.
사실 '웹표준'따위는 전혀 신경쓰지 않고 코딩하는 웹디자이너들도 모르는 상식이랄까요.- -;;
레이아웃을 테이블로 만들게 되면 전혀 필요없는 팁이지요.. ^^

예쁜 트리 가져가세요.. ^^

Skin story | 2007.03.26 09:39 | leezche
사용자 삽입 이미지
슈나님이 트리를 만들어 주셨습니다. "스킨재료 자료실"에 마모루님 이후로 백만년만에 올라온 트리 스킨입니다. ㅋㅋㅋ 사실 활성화가 잘 안되서 걱정입니다. 바쁘다는 핑계로 신경을 많이 못쓰고 있어서 그런지... 슈나님의 앙증맞은 트리스킨 보니까 너무 기쁘네요.. 눈물이.. 흑..

트리스킨은 다운로드 받으시려면 클릭하세요.

이런 참여가 많이 이루어져 많은 사람들이 즐겁게 블로깅 할수 있었으면 좋겠습니당!~~ - o -  (물론 저도 노력중입니닷.^^)

아.. 그리고 요즘 스킨 공모전... 사실 공모전이라기 보다는 매달 이루어지는 소규모 이벤트가 더 맞는것 같습니다. 여기서 드리는 것은 상품이라는 의미보다는 디자인팀 내부에서 직접 정성껏 골라서 드리는 마음의 선물이랄까요. (이번달은 오야스키양이라지요.. ^^ 물론 핸드폰액정클리너와 뱃지도 함게 딸려갑니다)

정식적인 공모전이 아니라 지난번처럼 성대한(?) 상품은 못드리지만 스킨을 만들어 주시는 분들에 대한 마음의 선물이라고 생각해 주셨으면 합니다. 모든 분들에게 드리고 싶으나 사정상 그러진 못하고, 한분에게만 드립니다. 그것도 매~~달! ^^

모두들 가벼운 마음으로 쓰고 싶은 스킨! 만들어보고 싶은 스킨! 함께 쓰고 싶은 스킨을 부담없이 만들어 보셨으면 합니다.



우리모두 응모해 보아요!~~~
스킨디자이너 이벤트는 매달 이루어집니다.
그동안 내보내기 아까워 감춰두었던 스킨이나
멋진 스킨에 대한 아이디어가 있으신 분은
거침없이 응모해 주세요... ^^
이번에 제작한 스킨은 총 4종입니다.

낙서장-옐로우페이퍼

낙서장-옐로우페이퍼

낙서장-크라프트지

낙서장-크라프트지

그냥 일반적인~~ 아주 소소한 이야기들을 예쁘게 담아낼수 있는 스킨입니다. (제입으로 얘기 하려니... ㅋㅋ) 개인적인 일기장으로 사용하면 좋을것 같아 만들어 봤습니다. 아.. 그리구요 사실은 루이스님의 스킨에서 많은 영감을 얻었습니다. 노트형식이 너무나 포근하게 와 닿아설!~~~ ^^ 루이스님의 스킨을 다운받으시려면 이곳으로 가시면 됩니다~~

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


팀-뉴스페이퍼

팀-뉴스페이퍼

팀-스프링노트

팀-스프링노트

많은 분들이 팀블로그용 스킨을 찾는거 같아서 만들어 봤습니다. 팀블로그용 치환자를 모두 사용했습니다. 팀블로그용 스킨을 만드시려는 분들은 참고하셔도 될것 같습니다.


내가 쓰고 싶은 블로그 스킨

Skin story | 2007.02.27 23:47 | leezche
취미로 스킨을 만들때와 그것이 일이 되었을때 결과물에 차이가 있다는것을 얼마전에야 몸으로 느낄수 있었다. 말 안해도 알겠지만 취미로 만들때는 아무런 제약이 없다. 그냥 내가 만들고 싶은데로 만들면 되지만, 일이라고 생각하고 만들게 되면 이것저것 따지게 된다. 자꾸 틀을 무의식적으로 만들게 되고, 이건 되고, 저건 안되고.... 이런건 사람들이 불편해 할것 같고, 저런건 사람들이 필요로 할것 같고.... 이렇게 만들면 사람들이 수정하기 불편할것 같고.... 수백가지 틀을 만들어 내고, 그 속에서 디자인을 하려고 한다. (실제로 얼마전 만든 스킨은 거의 최악이였다. 이것 저것 생각하다가 꼬이고 꼬여서... 스스로 될대로 되란식으로 만든... ㅋㅋ 아직 공개는 안됐지만... )

그런데 그런식으로 만들면 과연 사람들이 정말로 좋아할까?
실제로는 정말 "내가 쓰고 싶은 블로그 스킨"을 다른 사람도 쓰고 싶어 할지도 모른다.

아무런 제약도 받지 않고, 태터툴즈만의 장점을 한껏 살려서 스킨을 만들어야겠다는 생각이 들었다. 포털의 어느 블로그도 따라하지 못하는 그런 엽기발랄한 스킨들!  -0-

배경색이나 글 제목의 컬러를 변경하기 위해서는 보통 hex코드를 사용하게 됩니다. hex 코드는 세가지 색상으로 구성되는데 흔히 알고 있는 (R)ed, (G)reen, (B)lue 가 이에 해당됩니다.
그래서 급할때 유용한 웹 컬러챠트를 구성해 보았습니다.

다음은 흔히 사용하는 색상 몇가지만 선별해 보았습니다.
Red series : #FF0000
#ff0000
#ff3300
#ff6600
#ff9900
#ffcc00
#ff33cc
#ff3399
#ff3366
#ff3333

Blue series : #0000FF
#0000ff
#0033ff
#0066ff
#0099ff
#00ccff
#6699cc
#336699
#003366

Green series : #00FF00
#00FF00
#99ff00
#cccc00
#99cc00
#66cc00
#99cc00
#669900
#336600
태터툴즈 기본스킨의 구조를 보면 아래와 같습니다.
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
이것을 바탕으로 css를 이용하여 컨텐츠 영역을 왼쪽에 사이드바를 오른쪽에 위치시켰습니다. 아래 그림과 같이 말이죠

위 그림과 같은 레이아웃을 만들기 위해 다음과 같이 css를 작성했습니다.

#container {        /* width : 760px */
   width:760px;
   padding:10px;
   margin:50px auto;
   background-color:#eee;
  }
     
#header    {        /* header width : 740px */
   padding:10px;
  }

#content   {        /* content width : 540px */
   float : left;
   width:540px;
   padding:10px;
  }   
 
#sidebar    {        /* sidebar width : 190px */
   float : right;
   width:190px;
  }

#footer    {
   clear:both;
   padding:10px;
  margin-top:10px;
  }

자 그럼 아래 그림과 같이 레이아웃을 바꾸려면 어떻게 하면 될까요?

아래와 같이 content 영역과 sidebar 영역의 float값을 서로 바꿔주면 됩니다. 단지 이렇게 skin.html 파일을 수정하지 않고, style.css 파일만 수정해 주는것 만으로도 레이아웃이 쉽게 변하게 됩니다.

#container {        /* width : 760px */
   width:760px;
   padding:10px;
   margin:50px auto;
   background-color:#eee;
  }   
 
#header    {        /* header width : 740px */
   padding:10px;
   background-color:#ccc;
  }

#content   {        /* content width : 540px */
   float : right;
   width:540px;
   padding:10px;
   background-color:#c1b3d7;
  }   
 
#sidebar    {        /* sidebar width : 190px */
   float : left;
   width:190px;
   background-color:#a589c1;
  }   

#footer    {
   clear:both;
   padding:10px;
   background-color:#ccc;
   margin-top:10px;    
  }


CK님무분별한 프린트는 자제합시다~~ 절대 찬성입니다. 하루치 신문을 발행하기 위해 베어지는 나무는 무려 7만5천 그루이며, 단 한번 사용하고 버리는 나무젓가락은 1년에 66억개나 되며, 직장인 한사람이 한해동안 사용하는 종이컵은 약 5백여개라고 합니다. 그리고 그것들이 땅속에서 썩는데는 20년이 걸린다고 합니다. 우리가 종이한장, 나무젓가락하나, 종이컵 하나를 쓸때마다 지구는 병들어가고 내 아들딸들이 고스란히 그 유산을 받게 되겠지요.
그래서 print를 위한 css가 필요하다는 겁니다.
어짜피 사람들은 인쇄해야할 문서가 있으면 인쇄하게 되어 있습니다. 이 페이지에는 필요없는 영역까지 인쇄를 해야 하기때문에 인쇄를 하지 않을테다... 라는 사람은 없을것입니다. 어짜피 인쇄할꺼라면 정말 필요한 부분만 인쇄를 하게 해 주는것이지요. 그렇게 되면 종이도 아끼고, 잉크도 아끼게 되고... 암튼 제 생각은 이렇습니다. 그리고 인쇄를 하는 여러분... A4 한면에 두페이지를 인쇄해 보세요. 종이도 아끼고, 보기도 편하답니다. ^^;;; 지구는 일회용이 아니라고 하지 않습니까. 우리의 작은 실천이 모여 큰일을 해내지 않을까요?

내 블로그에 올린 글을 프린트할 일이 생겼을때 잉크값도 아까운데 프린트 되지 않아도될 영역까지 프린트가 됩니다. 이를태면 사이드바, 댓글, 트랙백 등등이 붙을테죠.

이제는 내가 프린트하고 싶은 요소만 프린트 해보려고 합니다.
"타이틀, 카테고리, 글쓴 날짜, 본문 내용" 이렇게 네가지 요소만 프린트 하고자 한다면 어떻게 하면 될까요?

지금까지 이런식으로 screen에 대한 스타일만 지정했다면
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
더불어 print를 위한 스타일을 지정해 주면 됩니다
<link rel="stylesheet" media="print" type="text/css" href="print.css" />

그럼 print.css를 작성해 보겠습니다.
프린트하지 않을 영역은 모두 사라지게 합니다.
예를 들면
sidebar { display:none;}

이렇게 하면 사이드바 영역은 사라지게 됩니다.
이런식으로 프린트하지 않을 영역을 모두 display:none를 시켜줍니다.

다 되었다면 프린트 해 보세요.
불필요한 요소는 모두 사라지고 내가 원하는 것들만 프린트 됩니다.
제블로그의 http://plyfly.net/2629980 글을 "인쇄 미리보기"로 본 스크린샷입니다.



스킨제작 매뉴얼

Skin story | 2006.10.24 17:13 | leezche
얼마전 "스킨을 만들어 봅시다"라는 제목으로 포스팅을 한적이 있는데...
한달 반이 넘게... 진도를 못내고 있었지요... 다 이유가 있었습니다. 제대로 만들다 보니까...
처음엔 그냥 블로그에 올릴 생각으로 설렁설렁 만들었는데 태터툴즈에 정말 필요할것 같아 제대로 만들어보자 결심을 했더랬지요. 게다가 이번에 태터툴즈 1.1 릴리즈가 얼마 남지 않아. 기본스킨 수정하면서 매뉴얼까지 만들었습니다. 솔직히 매뉴얼을 만들면서 정말 많은 버그들을 잡은것 같습니다. 그리고 공부도 많이 되었구요.. ^^;;; 아.. 정말 웹표준 공부하는 사람들에겐 태터툴즈 스킨 한번 만들어보라고 추천해주고 싶습니다. 흐흐

태터툴즈 스킨제작 레퍼런스
http://www.tattertools.com/ko/SkinManual/

여러분도 스킨 제작에 도전해 보세요!
매뉴얼은 계속해서 업데이트 됩니다

짤방 이미지


덧붙여서...
스킨을 제작하여 배포하는 분이라면 꼭 한번은 체크해봐야할 체크 리스트입니다. 스킨을 일단 배포하게 되면 여러사람이 사용하게 되므로 신중할 필요가 있겠지요. ^^;;



덧붙임 : 10월 25일 오후 6시
아.. 빠진게 있습니다. 태터툴즈 1.1버전 기준으로 작성된거라서...
현 스킨과 틀린부분이 많이 있을것입니다. 하지만 사용하는데는 크게 문제가 없을것 같습니다. 1.1RC버전은 다운로드 받아서 사용하시는 분들은 한번쯤 봐두시면 좋을것 같습니다.
티스토리 기본 테마스킨 1단형이 업데이트 되었습니다. 컨텐츠 집중형으로 블로그의 기본적인 사항들을 제외하고 사이드바의 내용들이 모두 아래로 내려갔습니다. 1단 기본형인 tisDiary, 이를 응용한 검은색 배경의 tisDiaryBlack와 종이 느낌을 살린 tisDiaryBurn이 업데이트 되었습니다.

"관리자 화면 > 스킨선택"에서 업데이트 된 스킨을 선택 하실 수 있습니다. 지난주에 올렸어야 했는데.. 지난주 릴레이 회의로 인하여 조금 늦어 졌습니다. - -;;;


즐거운 블로깅 라이뿌를 위하여~~

스킨을 만들어 봅시다

Skin story | 2006.09.06 14:02 | leezche
지금까지 많은(?) 태터툴즈 스킨을 만들어 왔습니다. 물론 저뿐만이 아니라 여러 다양한 분들이 스킨을 만들어 주셨죠!. 그래서 앞으로 더 많은 분들이 스킨만드는데 불편함을 조금이나마 덜어주고자~ 또 제 나름대로 정리해둘 필요가 있을것 같아서 포스팅합니다.

태터툴즈 스킨 만드는 법
  1. 만들고자 하는 스킨의 디자인 구상
    포토샵 작업이 가능하다면 포토샵으로 한번 그려보는것도 좋은 방법입니다.
  2. 구상한 스킨을 구조화 - skin.html 작성
    주의)닫는 태그에 주석처리해 줄것! 코드가 길어지면 자칫 헛갈릴 수 있습니다.
  3. 해당영역에 원하는 치환자 붙여넣기 - skin.html 작성
  4. style.css를 이용해서 디자인 하기 - style.css 작성
    • 문서 전체 공통 스타일 (body, input, a, ul, ol, li 등)
    • 전체 레이아웃 디자인
    • 해당영역 공통 스타일 디자인
    • 디테일 디자인

뒷 이야기!
태터툴즈 클래식때부터 나름 취미생활로 스킨을 만들기 시작했었습니다.
물론 그때는 xhtml에대해 전혀 모르던 때였고, 태터툴즈에서 연락이 와서 본격적으로 접하게 되었죠. CSS Zen Garden 을 보고 탄성을 지르던 때거 엊그제 같습니다. 하지만 하나의 html 파일을 가지고 css를 이용해서 어떠한 디자인도 커버한다라는 사실에 혼자만의 딜레마에 빠져들기 시작 했습니다. 솔직히 아직도 잘 모르겠습니다. 이런것들을 블로그 사용자 혹은 스킨제작자에게 강요해야 하는지... (물론 강요한적은 없지만..) 그래서 좀 유연해 지기로 하고, skin.html 을 수정하는 것에 대해 겁을 내지 않기로 했습니다. 강요하지도 않고... 암튼 딜레마에서 조금 벗어난 느낌입니다. ^^;; 그래서 스킨제작의 rule이 필요할것 같아서 정리하고 있습니다..


10월25일 덧붙임
스킨 메뉴얼이 자리를 옮겨 제대로 제작되었습니다. 참고하세요
http://plyfly.net/2630010

구상한 스킨을 구조화

Skin story | 2006.09.06 13:57 | leezche
이제 어떤식으로 스킨을 만들것인지가 결정 되었습니다.
그레이톤의 심플한 2단 스킨! 하하~~(멋적음 _ _;;)

이제 skin.html을 작성해 보려고 합니다.
일단 디자인한 스킨이 어떠한 구조로 이루어 졌는지에 대해 작성해 보도록 하겠습니다.
앞서 결정된 디자인을 잘 뜯어 보면, 크게 header, content, sideinfo, footer영역으로 이루어져 있습니다.  header에서 블로그 제목, 블로그 메뉴 또는 블로그 설명, 구독하기 버튼등이 들어갈 수 있겠죠. content에는 검색 리스트, 검색 댓글 리스트, 위치로그, 태그, 방명록, 공지사항, 보호글, 글, 페이징 하는 부분이 들어가게 됩니다. sideinfo에는 블로그 컨텐츠 관련된 여러 정보들이 올것입니다. 카테고리나, 최근글 리스트, 공지사항 등등이 포함됩니다.  footer에는 기타 전체 블로그 메뉴와 카피라잇 부분이 들어 갈수 있겠죠.

꼭 그렇게 해야 하나요? header 영역에 블로그이미지를 넣고 싶다규~
어떤 영역에 어떤 내용을 넣을것인가는 스킨을 제작하는 분들의 몫입니다. header 영역에 블로그 이미지를 넣을수도 있고, sideinfo영역에 단순히 카테고리와 최근글 리스트와 달력만 보이게 할 수도 있고, 검색을 header 영역에 넣을 수도 있습니다. 그만큼 자유도가 보장된다는 의미겠죠.. ^^

그럼 미리 디자인 해 놓은 내용을 바탕으로 대략의 구조화에 들어가 보겠습니다.
------|  skin.html  structured |------------------------------------
<div class="container">
  <div class="header"></div>  <!-- header close -->
  <div class="content"></div>  <!-- content close -->
  <div class="sideinfo"></div> <!-- sideinfo close -->
  <div class="footer"></div> <!-- footer close -->
</div> <!-- container close -->
Tip :
닫는 </div>태그에 주석을 달아 놓습니다. 코드가 길어지면 헛갈릴수 있습니다.

container는 왜 넣었나요? 필요없는 레이어 아닌가요?
container 는 블로그의 레이아웃 디자인을 위한 레이어라고 할 수 있습니다. content 영역을 스프링이 달린 노트형식으로 만들고 싶다고 한다면 <div class="contentWrap"> 이런식으로 레이어를 추가해 두면 됩니다.

header는 꼭 header라고 써야 하나요? heaven이라고 쓰고 싶어요
클래스명을 지을때 상당히 많은 고민을 하게 됩니다. sideinfo 라고 할지 sidebar라고 할지... guest라고 할지 guestbook 라고 할지... 작명을 할때는 직관적이고 명확한 의미의 이름이 좋습니다. guest보다는 조금 길지만 guestbook라는 이름이 더 좋습니다. 그리고 두개의 단어를 사용하게 될경우 단어의 경계를 위해 두번째단어 앞자리를 대문자로 작성합니다. 예를 들어 최근 댓글 같은 경우는 recentComment 라고 씁니다. 이건 그냥 저만의 rule입니다. recent_comment 라고 써도 누가 뭐랄사람 없습니다. ^^;;;

sideinfo는 보통 sidebar라고 하지 않나요? 헛갈려요
기존 sidebar를 sideinfo라고 변경한 이유는 sidebar가 꼭 bar의 형태가 아니라서 그렇습니다. 1단스킨의 경우 sidebar의 영역이 bar의 형태가 아닌 맨 아래 무더기로 위치하게 됩니다. 그래서 나름대로 sideinfo라고 이름을 변경하게 되었습니다. 이건 어디까지나 저만의 rule라고 할 수 있는데 나름대로 정당하다고 생각합니다. ^^;;; (너무 주관적인가? 여러분은 어때요?)

작명의 rule에 어떤 강제사항이 있는것은 아니지만 다른 사람이 봤을때 직관적으로 알아볼수 있는 이름이라면 주석조차도 필요치 않을수 있습니다. 그리고 본인이 작성한 코드를 한두달 시간이 흐른 후에 보더라도 특별한 어려움없이 수정할 수 있을것입니다. 그만큼 작명은 중요하다고 할수 있죠

위의 대략적인 구조화를 좀더 detail 하게 작성해 보겠습니다.
------|  skin.html detail structured |------------------------------------

structureView.html

Detail Structure View




structure.html

이 파일을 다운받아서 활용해 보세요.



좀더 자세한 스킨의 구조입니다.
structureView.html 은 스킨의 구조를 보기편하게 View 버전으로 만들어 봤습니다. sturcture.html은 실제 다운받아서 활용할 수 있도록 코드화 되어 있는 파일입니다.



다음엔... "해당영역에 원하는 치환자 붙여넣기" 에 대해 알아보도록 하겠습니다.






10월25일 덧붙임
스킨 메뉴얼이 자리를 옮겨 제대로 제작되었습니다. 참고하세요
http://plyfly.net/2630010

일단 지금보고 있는 블로그의 디자인을 비슷하게 따라 해보려고 합니다. 제 블로그는 계속해서 변화하고 있어서 언제 어떤 모습을 하게 될지 모르겠습니다. 그래서 왼쪽처럼 캡쳐를 받아 놓았습니다.

아주 평범한 블로그 스킨입니다. 색도 많이 들어가 있지 않고, 전형적인 2단 스킨이며, 이미지도 최대한 자제하였습니다. 텍스트가 많거나 정보를 제공하는 블로그일 수록 차분한 느낌을 줘야 할것 같아 왼쪽 이미지처럼 디자인 해 봤습니다.

블로그 스킨을 디자인하는 나름대로의 rule에 대해 말해 보자면...

사진이나 카툰등 작품 전시의 의미가 강한 블로그는 작품에 집중할 수 있게 주변 요소들을 작품과 되도록이면 먼곳에 위치하는것이 좋겠죠. 이를테면 1단형 스킨이 되겠죠. 사이드바의 내용들을 모두 하단으로 이동시키고, 상단에는 블로그 제목과 검색, 메뉴등 최소한의 편의를 위한 요소를 배치시킵니다. 그리고 컨텐츠 영역은 사진이나 이미지에만 집중할수 있도록 깔끔하게 처리를 해 줍니다. ^^;;;

커뮤니케이션이 자주 일어나는 블로그의 경우는 최근댓글과 최근트랙백등 사이드바의 아이템들이 아주 중요한 요소일 수 있습니다. 중요한 모든 요소들을 최대한 화면 상단에 위치시키기 위해서 3단형 스킨을 채택하는게 좋은 방법일 수 있겠죠!

일기장이나 메모의 용도로 사용되는 블로그는 적은 내용의 글을 쓰더라도 꽉차 보이는 미니다이어리 형식의 스킨을 사용하게 되면 사진 한장과 "ㅋㅋㅋ"의 내용만 올라가더라도 휑하니 비어보이는 불상사는 없겠죠?
.
.
.

덧 : 사실 이러한 형식이 뭐 그리 중요하겠습니까. 자신의 블로그를 얼마나 개성있게 꾸며서 알차게 사용하느냐 하는건 어디까지나 블로그 운영자의 몫이겠죠.


'스킨을 만들어 봅시다' 목록 보기 →





10월25일 덧붙임
스킨 메뉴얼이 자리를 옮겨 제대로 제작되었습니다. 참고하세요
http://plyfly.net/2630010

기존 테마스킨 3단을 2단으로 변형 하였습니다. 3단과 비교하여 디자인에는 변화가 없습니다. skin.html 파일도 오른쪽 사이드바를 왼쪽으로 이동시킨것 외에는 3단과 거의 변화가 없습니다.

기본 스킨을 응용해서 tisPaperDarkblue와 tisPaperViolet 두가지가 제작 되었습니다. 2단스킨은 이번에 새로 입사하신 한기훈님이 제작해 주셨습니다.

이것 외에도 트리스킨 두가지도 업데이트 되었습니다. dot_gray, dot_purple 두가지 버전입니다. 트리스킨은 "관리자 > 스킨관리 > 스킨에 맞춘 출력 설정"에서 확인 하실 수 있습니다.

tisPaperDarkblue

tisPaperViolet



dot_gray

dot_purple

공통 단축키
  • Q 블로그/관리자 화면 전환
  • R 리더 보기
  • A 이전 페이지
  • S 다음 페이지
리더 단축키
  • A,H 이전 포스트
  • S,L 다음 포스트
  • D 현재 포스트 새창으로 열기
  • F 안읽은 글만 보기
  • G 별표한 글만 보기
  • T 모든 피드 업데이트
  • W 현재 포스트 별표/별표 해제
  • J 아래로 스크롤
  • K 위로 스크롤


지금 자신의 블로그 화면을 띄워놓고, 키보드의 "Q"를 눌러 보세요
* 티스토리에서는 리더를 제공하고 있지 않습니다.


태터툴즈 스킨 공모전

Skin story | 2006.08.17 12:21 | leezche


태터툴즈에서 스킨 공모전을 갖습니다.
자세한 내용은 http://event.tattertools.com/

상품이 정말 푸짐한데요? 아... 난 PSP갖고 싶다.. 히히..
회사만 아니면 정말 100% 도전했을텐데..

곧 발표될 1.1버전에서는 정말 많은 변화가 있습니다.
요즘 2단 기본 테마스킨 작업이 잠시 홀딩되고, 관리자 화면 개선에 투입되어 있는데
이참에 1.1에대해 속속들이 보고 있습죠.. ㅋㅋ
근데 정말 body id를 사용해서 카테고리마다 변화를 줄 수도 있고, 사이드바가 모두 플러그인으로 빠져서 사용하고 싶지 않은 사이드바 컨텐츠는 관리자에서 한번의 버튼 클릭으로 사용하지 않을 수도 있습니다. 선택의 폭이 좀더 쉽게 그리고 다양해진거겠죠.. ^^;;; 암튼 태터앤프렌즈 여러분들 대~~단하십니다...

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

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

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


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

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

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

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

테스트 페이지

Skin story/Skin Tip | 2006.04.22 17:15 | leezche
웹표준을 위한 테스트 페이지 입니다
스킨에 대한 유효성 검사시에 이 포스트를 이용할것!