참고 : (1) 티스토리 반응형 스킨을 왜 만들어야 하는가?

(2) 이번 반응형 스킨에 쓰인 기법들

(3) 기본 블로그 레이아웃 짜기

(4) 반응형 블로그 레이아웃 짜기

(5) 블로그 레이아웃 추가사항




이제 레이아웃에 대한 대략적인 이야기는 끝났으니 본격적으로 스킨을 만들 차례입니다.


티스토리의 스킨 제작가이드를 참고하면 도움이 아주 많이 됩니다.



이미 만들어놓은 구성요소 안쪽에 티스토리 치환자들이 들어갈 공간을 만들어주면 됩니다.


아무것도 없는 상태에서 스킨의 모양을 만드는게 어렵다고 느껴진다면 티스토리의 도움말과 예제를 참고하는 것이 도움이 됩니다. 




정말 모르겠다면 사용 예시를 복사+붙여넣기 하면서 만들어 보세요. 그렇게 해도 괜찮은게, 웬만해선 html 부분은 사용 예시에서 크게 벗어날 일이 거의 없답니다. 스킨마다 전부 다른 디자인을 하고 있는 것은 사실 html 보다는 css의 영향이 큽니다.



다만 티스토리에는 <s_list>, <s_local>과 같은, 웹표준에서는 볼 수 없었던 생소한 태그들을 많이 볼 텐데, 티스토리 동작에 반드시 필요한 태그들입니다. 없으면 티스토리가 정상적으로 동작하지 않습니다.(이건 경험담이라 확실함...;;;)


그런데 사실 인간이 기계가 아닌 이상 한번쯤은 실수로 잘못 쓰거나 빼먹기 마련이고, 그렇게 되면 문제를 발견하기가 상당히 어려워집니다. 왜냐하면 일반적인 웹 코딩 작업에서 웹표준 태그를 어긴 것은 validator라는 것으로 검출이 가능하지만, 티스토리에 특화된 태그들은 그렇게 찾아낼 수 없기 때문입니다. 또한, 티스토리에 특화된 태그들 때문에 일반적인 validator로 웹표준 태그를 측정하면 주루루룩 오류메시지가 남발되어 웹표준에 맞게 스킨을 설계했는지 확인하는 것도 쉽지 않답니다.


결론적으로 말해서 아직까지 티스토리 스킨의 버그를 검출해주는 자동화 툴이 아직 없기 때문에... 잘못 입력했을 때 오류를 찾아내는 것이 쉽지 않습니다.


결국은 눈으로 확인할 수밖에 없는데, 이 때 도움이 될 만한 방법은, 이미 만들어져서 잘 동작하는 티스토리 스킨의 html 코드와 비교해 보면서 빠진 부분이 무엇인지 체크해 보는 겁니다.


이 때 비교에 사용할 스킨은 자신이 만들 스킨과 비슷한 구조인 것이 좋습니다. 만약 내가 만들 스킨은 sidebar가 있는데 비교할 스킨이 <프라치노 공간>처럼 sidebar가 아예 없다면...? sidebar 부분에서 오류가 생겼을 때 오류를 비교분석하면서 찾아낼 수 없어서 상당히 곤란해질 것입니다.


일반적으로 반응형 스킨들은 티스토리의 태생적인 한계 때문에 추가적인 javascript/jquery 코드를 많이 쓰는 편이기 때문에 반응형 스킨이 아닌 일반 티스토리 스킨과 자신이 만들 스킨을 오류검사시 비교해 보는 것도 좋습니다. 더구나나 반응형 스킨은 티스토리 스킨 중에서도 차지하는 비율이 적기 때문에 자신이 만들 스킨과 비슷한 구조의 반응형 스킨을 찾기가 어려우실 겁니다. javascript나 jqeury 부분은 스킨 모양이 다 잡히고 나서 나중에 넣어도 되거든요......





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 달빛천사7 2015.02.26 09:21 신고  댓글주소  수정/삭제  댓글쓰기

    월급날이 얼마남지 않았군여 부모님이 좋아하시겠어염 첫월급 타시면 선물도 해주세욤 ㅋㅋ

  2. 롤랑존 2015.02.26 11:34 신고  댓글주소  수정/삭제  댓글쓰기

    맞는 말씀입니다. 일단 뼈대를 튼튼하게! ^^ 그나저나 취업 성공하셨군요? 축하합니다.

  3. 레오 ™ 2015.02.26 17:09 신고  댓글주소  수정/삭제  댓글쓰기

    취직 축하드림니다
    월급 받으면 ..절때 ! 쓰지 말고 꽁꽁싸매 숨겨 놓으세요 !
    뇐네의 체험적 충고입니다 ㅎㅎ ..

  4. NELLYCW 2015.03.04 18:28 신고  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다.

티스토리 툴바