01

티도리 프레임워크

티스토리 스킨 제작 프레임워크

티도리 프레임워크는 티스토리 스킨을 제작하기 위한 전용 프레임워크입니다. 티스토리 스킨을 개발하기 위해 프레임워크까지 배워야 할까요? 우리가 기본적으로 티스토리 스킨을 개발할 때는 개발단계, 테스트 단계, 스킨적용 및 배포 단계의 3단계를 거치게됩니다. 프레임워크는 각 단계에서 발생하는 여러가지 불편사항을 해결하기 위해 개발됩니다. 단계별로 발생하는 문제와 프레임워크에서의 해결 방법을 알아보겠습니다.

개발 단계

개발 단계에서는 skin.html, style.css 파일을 작성하는 것이 가장 중요한 일입니다.

  1. 다양한 기능을 제공하는 확장 HTML, CSS 템플릿 엔진은 수동으로 컴파일해서 사용해야 하며, skin.html, style.css 에 티스토리 스킨에서 사용할 모든 기능(Header, Content, Sidebar, Footer 등)을 모두 몰아넣어 작성해야합니다.

    템플릿 - 템플릿과 코드 분할

  2. SPA(Single Page Application) 프레임워크npm 사용에 제약이 많습니다.

    프레임워크 - 뷰 & 리액트

  3. 템플릿과 컴포넌트를 따로 분리하여 필요할 때 재활용하거나 다른 사람이 작성한 코드를 포함시키기 어렵습니다.

    패키지 - 템플릿과 컴포넌트 재활용

테스트 단계

테스트 단계에서는 작성된 skin.html, style.css 파일을 스킨편집에 복사 붙여넣기 하거나 테스트 블로그를 통해 스킨의 모습을 미리 확인해보는 것을 말하며 이 과정은 스킨을 최종 배포하기 바로 전까지 반복됩니다.

  1. 적용된 스킨의 모습을 확인하려면 스킨편집에 들어가서 코드를 복사 붙여넣기 하고, 정적 리소스 파일(.js, .png 등)을 업로드 해야합니다. 소스코드에 변경사항이 있을 경우에는 파일을 다시 업로드 해야합니다.

    시작하기 - 개발 서버와 프리뷰 서버

스킨적용 및 배포 단계

스킨적용 및 배포 단계에서는 티스토리 스킨을 자신의 블로그에 적용시키거나 스킨 저장소에 저장하는 단계입니다. 블로그에 글을 써서 유저에게 배포하는 단계는 제외됩니다.

  1. 스킨을 적용하려면 스킨편집에 직접 들어가서 코드를 복사 붙여넣기하고 파일을 업로드해야하거나 스킨저장소에 수동으로 업로드해야 합니다.

    빌드 및 배포 - 자동화