스킨
스킨은 웹에플리케이션의 디자인을 의미합니다. 일부 에플리케이션들은 디자인적인 자유도를 제공하기 위해서 사용자가 직접 스킨을 변경 할 수 있는 사용자 정의 스킨을 제공하고 있습니다.
텍스트 큐브 & 티스토리 스킨
텍스트 큐브와 티스토리는 블로그 시스템입니다. 티스토리는 현재 다음에서 서비스 되고 있는 서비스 입니다. 텍스트 큐브는 설치형 블로그로 자신의 서버에 직접 설치해서 운영하는 블로그입니다. 아래는 텍스트 큐브와 티스토리의 링크입니다.
- 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
수업의 머릿말
아래 내용은 리체님이 만드신 코스의 머리말을 가져온 것입니다.
텍스트큐브 스킨 만드는 법
- 만들고자 하는 스킨의 디자인 구상
블로그를 어떤 용도로 사용할 것인지 먼저 생각하고 적당한 모양을 종이에 그려봅니다. 포토샵 작업이 가능하다면 포토샵으로 한번 그려보는것도 좋은 방법입니다. - 구상한 스킨을 구조화
구상한 디자인을 적용하기 위해 구조화하여 skin.html 작성합니다. - 해당영역에 원하는 치환자 붙여넣기
텍스트큐브 스킨 치환자는 디자이너가 프로그램에 대한 지식없이 스킨을 만들기 쉽게 해주는 역할을 합니다. 디자이너는 단지 치환자의 규칙만 잘 따라주면 큰 어려움없이 자신이 원하는 디자인으로 블로그를 만들 수 있습니다. - style.css를 이용해서 디자인 적용하기
구상한대로 디자인을 적용하는 단계입니다. 한번 작성된 html을 수정하지 않고, style.css 파일의 수정만으로도 디자인이 가능합니다.
- 문서 전체 공통 스타일 지정(body, input, a, ul, ol, li 등)
- 전체 레이아웃 디자인 적용
- 해당영역 공통 스타일 디자인 적용
- 세부적인 디자인 적용
스킨 이야기!
텍스트큐브 스킨을 취미로 만드는 분이 많이 계십니다. 물론 xhtml이 아닌 기존에 테이블 태그를 이용하여 스킨을 만든다고 하더라도 문제 될것은 없습니다. 다만 흔히들 이야기하는 웹 접근성을 높이고, 확장성을 생각한다면 xhtml이 적당할것입니다. 무엇보다 CSS Zen Garden 을 보고 탄성을 질렀던 xhtml을 공부하는 디자이너분들에게는 좋은 학습도구가 될 수 있을 것입니다.
텍스트큐브 스킨 제작 메뉴얼은
2006년 plyfly.net의 leezche에 의해 작성되어 2008년 현재까지 개정되고 있습니다. 현재 티스토리에서는 "스킨제작가이드"라는 타이틀로 제공되고 있으며, 텍스트큐브에서도 "스킨 제작 메뉴얼"이 제공되고 있습니다. 두 가이드 모두 현재 보고 계신 메뉴얼을 근간으로 하고 있습니다.
