[티스토리 스킨 제작] Chat GPT와 티스토리 스킨 제작 + 적용하기

 

티스토리를 아주 예전에 하다가 잊어버리고 살았다.

최근에 다시 블로그를 만들게 되었는데, 스킨 적용하는 법부터 까먹었다...

 

만들어진 스킨을 적용해보니 내 마음에 살짝 안 들어서 내가(Chat GPT랑)  제작해보기로 하였다.

일단 이번 글에서는 티스토리 스킨을 만들고 적용하는 방법까지 작성하고, 나중에는 내가 만든 스킨도 공유해볼 생각이다.

 

전체 제작 및 적용 과정은 다음과 같다.

예제스킨 다운로드 → GPT와 제작 → 세세한 부분 수정 → 스킨 적용

 

1. 예제 스킨 다운로드

먼저 티스토리 스킨 메뉴에서 기본으로 제공되는 예제 스킨을 다운로드한다.

https://www.tistory.com/skin

스킨 - 티스토리

 

티스토리 스킨 페이지에 들어가면 여러 가지 스킨이 있다.

그중 원하는 스킨을 선택한 후 '내 스토리에 적용하기'를 선택한다.

 

 

나는 odyssey 스킨을 이용하였다.

 

스킨을 내 블로그에 적용한 후, 블로그 관리 페이지로 이동한다.

 

스킨 관리 화면에서 현재 적용된 스킨을 다운로드한다.

다운로드한 파일은 압축 파일 형태로 되어 있기 때문에 압축을 해제한다.

압축을 풀면 여러 파일이 나오는데, 그중에서 가장 중요한 파일은 보통 아래 두 가지다.

• skin.html
• style.css

skin.html은 블로그의 구조를 담당하는 파일이고,
style.css는 블로그의 디자인을 담당하는 파일이라고 생각하면 된다.

 

이 두 파일을 ChatGPT에게 주고 수정해달라고 요청하면 된다.

 

2. Chat GPT와 제작

GPT한테 스킨을 제작해달라고 하거나 디자인을 바꿔달라거나 그러면 못생기게 만들어주기 때문에

디자인을 정확히 할 필요가있다.

 

그러기 위해 getdesign.md가 필요하다.

https://getdesign.md/

getdesign.md — DESIGN.md collection for AI coding agents

 

이 사이트에는 다양한 웹사이트의 디자인 시스템이 정리되어 있다.

원하는 느낌의 디자인을 고른 후 DESIGN.md를 클릭한다.

 

어떤 색을 쓰고, 어떤 여백을 쓰고, 어떤 버튼 스타일을 쓰고, 어떤 분위기의 디자인을 가지고 있는지를 정리해둔 문서라고 보면 된다.

 

그리고 해당 내용을 복사한다.

 

그다음 ChatGPT에게 아래 자료를 함께 전달한다.

• skin.html
• style.css
• 복사한 DESIGN.md 내용

티스토리 스킨을 수정하고 싶은데, 내가 준 DESIGN.md를 참고해서 모던하고 깔끔하게 디자인해줘.
글씨체는 나눔스퀘어를 사용해줘.
마우스 커서를 따라다니는 CSS나 JS도 추가해줘.
선택 가능한 요소들은 hover 시 위로 살짝 올라가거나 자연스러운 모션이 생기게 해줘.

라는 식으로 수정해달라고 한다. 

 

나는 추가로 아래 내용도 부탁하였다.

• 글씨체 변경
• 마우스 포인터 효과 추가
• 버튼 hover 인터랙션 추가
• 카드 그림자 추가
• 프로필 영역 정렬
• 구독하기 버튼 스타일 수정

이렇게 말해도 디자인이 구리게 나오는 경우가 많다. 

그럴때는 디자인 md를 사용해서 디자인해달라고 잡도리를 하면 정신을 차린다.

내가 준 DESIGN.md의 색상, 여백, 카드 스타일, 버튼 스타일을 더 정확히 반영해서 다시 수정해줘.
기존 디자인 느낌이 너무 일반적이니까 DESIGN.md 기준으로 다시 정리해줘.

 

참고로 한번 틀어진 디자인을 구석구석 GPT로 수정한다면 점점 이상해지고 복잡해지기 때문에 

어느정도 만든다면 자신이 요청한 내용들을 한번 정리해서 새로운 대화로 다시 한번에 요청하면 어느정도 깔끔하고 원하는 디자인으로 만들 수 있다.

 

예를 들어 처음에는 버튼만 수정하고 싶었는데, 계속 수정하다 보면 어느 순간 CSS가 너무 길어지고, 어디가 어디에 적용되는지 알기 어려워진다.

그래서 어느 정도 방향이 잡혔다면 지금까지 요청한 내용을 한 번 정리해서 새로운 대화에서 다시 요청하는 것도 좋다.

예를 들면 이렇게 다시 요청한다.

지금까지 수정한 내용을 정리하면 다음과 같아.

1. 나눔스퀘어 폰트 사용
2. DESIGN.md 기반의 모던하고 깔끔한 디자인
3. 카드형 레이아웃
4. hover 시 살짝 올라가는 인터랙션
5. 커스텀 마우스 커서
6. 프로필 가운데 정렬
7. 구독하기, 글쓰기, 관리 버튼 스타일 통일

이 조건을 기준으로 skin.html과 style.css를 다시 깔끔하게 정리해줘.

이렇게 한 번 정리해서 요청하면, 코드가 훨씬 깔끔해지고 원하는 방향에 가까워진다.

 

GPT가 수정해준 파일을 받은 후 다시 블로그 관리 페이지로 돌아간다.

 

블로그 관리 페이지에서 편집으로 들어간다.

 

html 편집을 선택한다.

 

 

HTML 탭에는 수정된 skin.html 내용을 복사해서 붙여넣고,
CSS 탭에는 수정된 style.css 내용을 복사해서 붙여넣는다.

그다음 적용 버튼을 누른다.

그러면 블로그에 수정된 스킨이 적용된다.

 

3. 세세한 부분 수정

스킨을 적용한 후에는 왼쪽 미리보기 화면이나 실제 블로그 화면을 확인한다.

그리고 마음에 안 드는 부분을 하나씩 ChatGPT에게 수정해달라고 요청하면 된다.

예를 들면 이런 식이다.

구독하기 버튼 색상을 변경해줘.
프로필을 가운데 정렬해줘.
카드에 그림자를 조금 더 연하게 넣어줘.
hover했을 때 버튼이 살짝 올라오게 해줘.
검색창 부분만 그림자를 제거해줘.

 

이렇게 구체적으로 말할수록 원하는 결과가 잘 나온다.

“예쁘게 해줘”보다는
“구독하기 버튼의 배경색을 연한 보라색으로 바꾸고, hover하면 살짝 위로 올라가게 해줘”처럼 말하는 것이 좋다.

 

또한 원하는 특정 부분이 있다면 개발자 도구를 사용하면 편하다.

 

먼저 티스토리 스킨 편집 화면에서 적용 버튼을 클릭한다.

그다음 내 블로그를 새 페이지로 연다.

 

블로그 화면에서 F12 키를 누르면 개발자 도구가 열린다.

개발자 도구 왼쪽 위에 보면 마우스 커서처럼 생긴 아이콘이 있다.

 

 

이 버튼을 클릭하면 화면에서 원하는 요소를 직접 선택할 수 있다.

예를 들어 구독하기 버튼을 수정하고 싶다면,
개발자 도구의 선택 버튼을 누른 후 블로그 화면에서 구독하기 버튼을 클릭한다.

그러면 개발자 도구에 해당 버튼의 HTML 구조와 CSS 스타일이 나온다.

여기서 클래스명을 확인할 수 있다.

 

그러면 ChatGPT에게 이렇게 요청하면 된다.

.subscribe-btn 클래스를 가진 구독하기 버튼을 수정하고 싶어.
버튼을 더 길게 만들고, 배경색은 연한 보라색으로 바꾸고, hover하면 살짝 위로 올라가게 해줘.

 

이렇게 클래스명을 같이 알려주면 ChatGPT가 훨씬 정확하게 수정해준다.

물론 CSS를 어느 정도 할 수 있다면, CSS 탭에서 해당 클래스를 직접 찾아서 수정해도 된다.

 

스킨을 수정하면서 블로그에 들어갈 이미지들도 같이 만들었다.

나는 아래 이미지들을 제작하였다.

• 블로그 배너
• 프로필 이미지
• 블로그 로고
• 프로필 배경 이미지
• 타이틀 헤더 이미지

이미지를 만들 때에도 그냥 “배너 만들어줘”라고 하면 원하는 느낌이 안 나올 수 있다.

내 블로그가 어떤 내용을 다루는지, 어떤 분위기를 원하는지 자세히 설명하는 것이 좋다.

역시 이미지도 잡도리가 필요하다.

4. 스킨 적용

모든 수정이 끝났다면 마지막으로 적용 버튼을 클릭하여 스킨을 최종 적용한다.

적용 후에는 실제 블로그에 들어가서 화면을 확인한다.

 

오랜만에 티스토리를 다시 시작하려니 스킨 적용하는 법부터 까먹었지만

생각보다 어렵지 않게 수정할 수 있었다.

 

빠른 시일 내에 내가 만든 스킨도 공유해보도록 해야겠다.