스킨만들기 2008.03.08 13:43

스킨 만들기 강좌를 처음부터 다시 시작하겠습니다 -_-; 이전 강좌의 예제로 준비했던 스킨이 너무 맘에 안들어서요. 좀 더 강좌를 하기 쉽도록 스킨을 다시 만들었습니다. 지금 이 블로그에 적용된 스킨으로 강좌를 시작할 거에요. 정말 단순하게 생겼죠? 만들기도 쉽습니다 ^^

지금부터 강좌는 이런 식으로 진행할게요.
1. 완성된 모습을 보여줍니다.
2. 필요한 치환자에 대해 설명합니다.
3. 여러분이 직접 어떻게 만들지 생각해보세요.
4. 제가 어떻게 했는지 보여드립니다.
프로그래밍 책의 연습문제처럼 진행한다고 생각하시면 됩니다.

오늘은 첫번째니까 디자인부터 해봅시다 ~_~

준비물 :
그래픽 툴 ( 포토샵 같은...)
톡톡 튀는 아이디어

먼저 머릿속에서 스킨을 구상합니다. 스킨을 구상할 때는 몇 가지를 고려해야 합니다. 가장 중요한 건 포스트의 가독성이에요. 기본적으로 블로그는 정보 전달을 목적으로 합니다. 포스트가 확~ 눈에 들어와야 좋은 스킨이라 할 수 있겠죠.

아래 그림은 제가 이 스킨을 구상하면서 그린 레이아웃입니다. 미리 포스트나 사이드바의 가로 길이 등을 생각해가면서 디자인을 해야해요.

사용자 삽입 이미지

그림 1-1 "레이아웃"

하지만 미리 그린 그림은 어디까지나 예상도이지 너무 여기에 얽매여서는 안됩니다. 위 그림에는 실제로 사이드바나 포스트 영역에 표시될 글씨를 써넣지 않은 상태이지요. 실제로는 저기에 빽빽하게 글자가 들어가게 될거고 그러면 처음 생각과는 다르게 보기 싫어질 수도 있습니다. 그럴때는 적절하게 수정해가면서 해야겠지요. 꼼꼼하신 분들은 미리 그것까지 고려해서 건물의 설계도처럼 정확하게 그림을 그려두시고 그대로 만드시는 것도 좋습니다. (전 귀찮아서...)

다음으로 티스토리 스킨의 파일 구성을 알아보겠습니다.
티스토리 블로그의 스킨은

skin.html
style.css
index.xml
preview.gif

4개의 파일로 이루어져있습니다.
이 이외에 이미지 등이 추가 될 경우 images 폴더로 업로드 됩니다.

skin.html은 스킨의 뼈대가 되는 html 코드가 있는 파일이고, style.css 에는 이 뼈대에 살을 붙여 꾸며주는 css 코드가 있습니다. index.xml 파일에는 스킨에 관한 정보와 기본 환경설정 정보가 들어있습니다. preview는 스킨 미리보기 이미지인데 배포용 스킨이 아니라면 반드시 필요하지는 않습니다.
음... 스킨도 바뀌고..
다시 시작하셨군요...
좋은정보 감사합니다.