[stepwise] 티스토리 스킨을 개발자처럼 꾸며보자! - 2편

안녕하세요! 오늘은 hELLO 스킨을 활용해 블로그를 꾸미기 전에,
이 스킨이 어떻게 구성되어 있는지 분석해보려고 합니다.
비개발자분들도 쉽게 따라오실 수 있도록 친근하게 설명드릴게요!

hELLO 스킨이란?

hELLO 스킨은 기존 티스토리의 구식 편집 기능을 쓰지 않고, JavaScript를 활용해 만들어진 스킨이에요.
티도리 프레임워크라는 특별한 틀을 기반으로 만들어졌답니다.
개발자 정상우님이 제작하셨는데, 관련 내용을 알고 싶다면 hELLO 스킨 개발기도 한번 읽어보세요! 👀

 

왜 VS Code를 사용하나요?

많은 비개발자분들이 사용하는 Windows OS에서 잘 작동하고,
무료라 접근하기 쉬운 프로그램이 바로 VS Code입니다! 💻

기존 티스토리에서 제공하는 스킨 편집 기능을 이용하면,
모든 소스코드를 하나하나 뜯어봐야 해서 실수라도 하면 블로그가 엉망이 될 수 있거든요. 😢

하지만 hELLO 스킨은 수정할 페이지가 파일별로 잘 정리되어 있어,
VS Code를 통해 손쉽게 수정하고, npm run preview 명령어로 미리보기까지 가능합니다! ✨

 

 

티도리 프레임워크란?

티도리 프레임워크는 티스토리 스킨 제작을 더 편리하게 도와주는 도구라고 생각하면 돼요!
기존 티스토리 편집 기능은 코드 테스트와 적용이 어려운 편이죠.
그래서 많은 사람들이 티스토리 기본 스킨을 그대로 사용하거나, 다른 사람들이 만들어둔 스킨을 가져다 쓰는 경우가 많아요.

티도리 프레임워크는 이런 불편함을 줄이고, 비개발자들도 쉽게 스킨을 커스텀할 수 있게 만들어졌답니다. 🙌

Pug와 JS가 뭐죠? 🤔

쉽게 이해할 수 있도록 간단히 설명드릴게요!

Pug 파일 (.pug)

웹 페이지의 **뼈대(구조)**를 만드는 언어입니다.
예를 들어, 우리가 보는 제목, 버튼, 텍스트 등의 위치를 정리해줍니다.

HTML vs Pug 예시

HTML

<div> <h1>Hello, World!</h1> <p>Welcome to my website</p> </div>

Pug

div h1 Hello, World! p Welcome to my website

Pug는 태그 대신 들여쓰기로 구조를 표현해 더 간결하고 깔끔하게 코드를 작성할 수 있어요! ✨

---

JS 파일 (.js)

웹 페이지에 생명을 불어넣는 역할을 합니다.
버튼 클릭, 페이지 이동, 팝업 메시지 같은 동작을 처리하죠!

예시

HTML: 버튼 만들기

<button id="myButton">Click Me</button>

JS: 버튼에 동작 추가

document.getElementById('myButton').addEventListener('click', () => { alert('Button clicked!'); });

Pug + JS = 정적인 페이지를 인터랙티브하고 동적인 웹사이트로 바꿔줍니다! 💡

 

hELLO 스킨 분석하기 🕵️‍♀️

hELLO 스킨 다운로드 링크: 여기 클릭

 

1. README.md 파일:
   기본 설정과 실행 방법이 적혀 있어요. 초보자라면 꼭 읽어보세요!
2. 주요 파일 구조
   • Pug 템플릿 (views/, assets/pug/): 화면의 뼈대와 디자인 정의
   • CSS 파일 (assets/css/): 스타일 설정
   • JS 파일 (assets/js/): 동작과 기능 구현
   • 설정 파일 (tailwind.config.js, postcss.config.js): 환경 설정

 

커스텀 시 수정해야 할 부분 ✍️

1. 스타일(Custom CSS)

• assets/css/app.css 또는 Tailwind 설정 파일을 수정해 색상, 글꼴, 간격 등을 변경할 수 있어요.

2. 템플릿(Custom Layouts)

• views/ 또는 assets/pug/ 디렉토리에서 Pug 파일을 수정해 헤더, 푸터, 사이드바 등을 바꿀수 있어요!
• 반복되는 코드를 최소화하고, 새로운 섹션도 추가 가능하답니다.

 

다음 시간에는?

다음 시간에는 views 디렉토리 안에 있는 Pug 파일들을 더 자세히 살펴볼 예정입니다.
어렵게 느껴지셨다면 걱정 마세요! 차근차근 설명드릴게요. 😊
블로그 꾸미기, 저와 함께 해봐요! 🚀