생활코딩

Coding Everybody

코스 전체목록

닫기

텍스트큐브 & 티스토리 스킨

| 공개

스킨

스킨은 웹에플리케이션의 디자인을 의미합니다. 일부 에플리케이션들은 디자인적인 자유도를 제공하기 위해서 사용자가 직접 스킨을 변경 할 수 있는 사용자 정의 스킨을 제공하고 있습니다. 

텍스트 큐브 & 티스토리 스킨

텍스트 큐브와 티스토리는 블로그 시스템입니다. 티스토리는 현재 다음에서 서비스 되고 있는 서비스 입니다. 텍스트 큐브는 설치형 블로그로 자신의 서버에 직접 설치해서 운영하는 블로그입니다. 아래는 텍스트 큐브와 티스토리의 링크입니다.

  • http://tistory.com/
  • http://www.textcube.org/
  • http://opentutorials.org/course/62/880 (텍스트 큐브를 설치하는 방법)

티스토리는 오픈소스인 텍스트 큐브를 기반으로 만들어진 서비스이기 때문에 스킨의 문법이 거의 같습니다. 

수업의 효과

본 수업은 자신의 스킨을 만들기 위해서도 좋습니다만 블로그의 스킨에는 HTML, CSS, JavaScript가 모두 사용되기 때문에 이러한 기술에 대한 실습으로도 손색이 없습니다. 저(egoing)는 http://egoing.net 이라는 블로그를 운영하고 있는데요. 지속적으로 스킨을 변경하면서 저의 취향을 찾아가고 있습니다. 

수업의 생산자

본 수업은 전설적인 스킨 디자이너 leezche님이 만드신 수업입니다. 리체님은 현재 opentutorials.org의 메인 디자이너로 활동하고 계십니다. 동시에 생활 웹디자인 코스로 운영하고 계십니다. 자세한 내용은 아래 링크를 참조해주세요. 

http://opentutorials.org/course/752

수업의 머릿말

아래 내용은 리체님이 만드신 코스의 머리말을 가져온 것입니다. 

텍스트큐브 스킨 만드는 법

  1. 만들고자 하는 스킨의 디자인 구상
    블로그를 어떤 용도로 사용할 것인지 먼저 생각하고 적당한 모양을 종이에 그려봅니다. 포토샵 작업이 가능하다면 포토샵으로 한번 그려보는것도 좋은 방법입니다.
  2. 구상한 스킨을 구조화
    구상한 디자인을 적용하기 위해 구조화하여 skin.html 작성합니다.
  3. 해당영역에 원하는 치환자 붙여넣기
    텍스트큐브 스킨 치환자는 디자이너가 프로그램에 대한 지식없이 스킨을 만들기 쉽게 해주는 역할을 합니다. 디자이너는 단지 치환자의 규칙만 잘 따라주면 큰 어려움없이 자신이 원하는 디자인으로 블로그를 만들 수 있습니다.
  4. style.css를 이용해서 디자인 적용하기
    구상한대로 디자인을 적용하는 단계입니다. 한번 작성된 html을 수정하지 않고, style.css 파일의 수정만으로도 디자인이 가능합니다.
  • 문서 전체 공통 스타일 지정(body, input, a, ul, ol, li 등)
  • 전체 레이아웃 디자인 적용
  • 해당영역 공통 스타일 디자인 적용
  • 세부적인 디자인 적용

스킨 이야기!

텍스트큐브 스킨을 취미로 만드는 분이 많이 계십니다. 물론 xhtml이 아닌 기존에 테이블 태그를 이용하여 스킨을 만든다고 하더라도 문제 될것은 없습니다. 다만 흔히들 이야기하는 웹 접근성을 높이고, 확장성을 생각한다면 xhtml이 적당할것입니다. 무엇보다 CSS Zen Garden 을 보고 탄성을 질렀던 xhtml을 공부하는 디자이너분들에게는 좋은 학습도구가 될 수 있을 것입니다.

텍스트큐브 스킨 제작 메뉴얼은

2006년 plyfly.net의 leezche에 의해 작성되어 2008년 현재까지 개정되고 있습니다. 현재 티스토리에서는 "스킨제작가이드"라는 타이틀로 제공되고 있으며, 텍스트큐브에서도 "스킨 제작 메뉴얼"이 제공되고 있습니다. 두 가이드 모두 현재 보고 계신 메뉴얼을 근간으로 하고 있습니다.

댓글

댓글 본문
  1. 이제 티스토리 편집이 예전보다는 자유롭게 안되는거 같아요
  2. 머머
    맥도날드에서 에너지를 충전하고 2시에 책상 앞에 앉아 호기롭게 텍스트큐브 강좌를 폈으나 지금까지 이고잉닷넷 글 읽었다요. 냐하~
    덕분에 너무 근사한 새벽이었습니다. 이고잉님 감사합니다.
  3. visual00
    와 정말 궁금했던 건데 감사합니다.
graphittie 자세히 보기