TISTORY 메뉴

검색

가이드 본문

티스토리에 대해서 알려드립니다.

스킨 가이드

  1. 1. 준비단계
  2. 2. 디자인 구상
  3. 3. 스킨구조
  4. 4. 치환자
  5. 5. 스타일
  6. 6. 마무리
1. 준비단계
스킨제작 가이드란?

내가 직접 만든 '블로그 스킨'으로 나를 표현해보세요! 스킨제작 가이드는 내가 원하는 스킨을 만들기 위해
구상하고 구조화하도록 지원합니다. 원하는 블로그 분위기나 운영 목적에 딱 맞는 블로그 스킨 만들기에
도전해 보세요! 스킨을 만들기 위해서는 약간의 HTML 및 CSS에 대한 지식이 필요합니다.

1. 디자인 구상하기
먼저 제작을 시작하기 전에 블로그를 어떻게 운영하실지, 어떤 모습이 좋을 지 생각해 보세요!
연습장 종이에 그림으로 그려보거나, 포토샵 등의 프로그램을 이용하여 그려보셔도 좋습니다.
2. 스킨 구조 만들기
구상한 디자인을 적용하기 위하여 어떻게 구조화할 것인지 결정합니다.
스킨의 구조에 따라 스킨을 구조화하고 본격적으로 HTML을 작업을 시작하시면 됩니다.
3. 치환자 활용하기
스킨 치환자는 총체적인 시스템 이해의 어려움과, 반복되는 내용을 HTML로 매번 작성해야 하는 번거로움을
최소화하기 위하여 반복되거나 표준이 필요한 내용을 정리한 규칙입니다.
4. 디자인 적용하기
한 번 작성된 HTML은 처음부터 수정하지 않아도 CSS 수정만으로도 새로운 디자인이 가능합니다.
- 문서 전체 공통 스타일 (body, input, a, ul, il, li 등)
- 전체 레이아웃 디자인
- 해당 영역 공통 스타일 디자인
- 디테일 디자인
5. 스킨위자드 적용하기
티스토리에서 공식적으로 배포한 스킨에만 적용된 스킨위자드가 스킨을 제작자가 만든 스킨에서도 사용이
가능하도록 스킨위자드 CSS 가이드를 제작하였습니다. 내가 만든 스킨에도 스킨위자드를 적용시켜 보세요!
TIP! 티스토리 스킨 내 방식대로 만들었었는데, 꼭 가이드를 따라야 하나요?

물론 가이드에 따라 XHTML이 아닌 기존에 테이블 태그를 이용하여 스킨을 만든다고 하더라도 문제는 되지 않습니다. 단, 웹 접근성이나 예측하지 못한 오류 발생을 고려하신다면 가이드에 따라 제작해 주시면 좋을 것 같습니다. 무엇보다 CSS Zen Garden을 보고 탄성을 질렸던 XHTML을 공부하는 디자이너 분들에게는 좋은 학습 도구가 될 수 있을 것입니다.