Tistory 테마 변경하기

주변에서 티스토리 운영하는 개발자 친구가 VSC(VS Code)형태로 티스토리 테마를 적용한 것을 보고 나도... 나도! 하다가 구상해봤다.

작업

테마 선정

VSC
VS(Visual Studio)
IntelliJ IDEA
Photoshop / Illustrator

어쩌다 포토샵/일러스트레이터를 선택하게 되었는지는 모르겠지만... 어찌저찌 하다보니 4번 중 일러스트레이터를 선택하였다.

기초 작업

티스토리는 HTML과 CSS(+ 이미지 파일)만 사용 가능하므로 정적페이지 만든다는 느낌으로 만들어야 한다.

그러면 블로그 게시글이나 이런건 어떻게 가져오냐? 티스토리 API가 있는거냐 하면 그건 아니고 티스토리 내 치환자라는 것이 있어 해당 기능을 이용하여 작성이 가능하다.

물론 난 치환자가 뭐가 있는지 모르니 GPT한테 기본 치환자를 학습시키고 테마를 GPT를 이용하여 작성 할 예정이다.

그래서 기존 테마 코드를 복사하여 .html, .css파일로 만들고 GPT에게 전달 후 내가 만들고자 하는 테마인 Illustrator 화면 캡쳐 사진(Illustrator로 작업 하는 친구를 통해 얻음)를 입력 후 해당 이미지에 맞춰서 html과 css를 작성요청하였다.

전체 구역 구분

처음에 전체 코드를 작성해달라고 하니 엉뚱하게 우측 패널에 색상이 상단이고 레이어가 하단인 형식이 아니라 색상이 하단 레이어가 상단이면서 기존 게시글 보기 이름 그대로 사용 + 색상 선택이 아니라 방문자 수 등 이상한 것을 보여주는 형식이였지만 구역은 확실히 나누어져서 그대로 두고 추가 작업을 통해 틀을 잡았다.

추가 작업은 좌/우 각 패널에 어떤 것이 들어갈 예정이며, 홈 화면에서 글 목록이 뜨는 점이 Illustrator느낌이 안나서 해당 부분 우선적으로 공백+위치 확인할 수 있는 문구로 구분하여 토대를 완성하였다.

그림 1

레이어 편집

우측 하단에 레이어 형태로 작성해달라 하니 최신글, 작성 글(카테고리), 태그, 아카이브로 작성은 잘 해주었지만 작성 글 내부에는 치환자로 불러온 목록을 사용하여 나타내다 보니 하위 영역에 대해서 모양이 일치 하지 않았다.

그래서 script 태그를 이용하여 어느정도 js 사용이 가능하기 때문에 해당 부분에 대해 js를 이용하여 모양을 일치 시키는 작업을 진행하였다.

그림 2

추가로 레이어 숨김/표시 처리기능도 추가를 진행하였는데 처음에는 그림2와 같이 작성한 내용이 남아서 그런지 치환자로 작성된 작성 글 하위 레이어만 숨겨저서 다시 요청하니 작성 글 하위 레이어만 제외하고 나머지가 가 동작하기 시작했다.

해당 내용 수정하기 위해 이것 저것 하다가

그림 3

이 문장을 보고 알게 된 것이 GPT는 기존 요청 레이어 작성 프롬프트 때문에 작성된 글 눌렀을 때 하위매뉴도 같이 안숨겨지는 것으로 인식하고 있었고 내가 원한건 하위 메뉴에서도 각 하위매뉴를 숨기고 싶었던 거라 새 채팅으 만들고 다시 시키는 것이 빠르게 수정이 가능하다 판단하여 지금까지 작업한 내용을 저장 후 파일로 다시 전달하여 해당 부분 수정하였다.

색상 편집

처음에는 색상필드라는 용어를 몰라 이것저것 요청할 때마다 이상한거 만들어줬다.

그래서 GPT한테 해당 부분 캡쳐 해서 물어보니 알려주더라..

그냥 내가 원하는대로 최근 색상, RGB, Hex, 색상필드 만들고 그거에 반영하면 게시글 백그라운드 반영되게 해달라 하니 잘 해준다.

추후 작업 예정

우측 패널에 추가로 하나 더 만들어서 글꼴 선택도 할 수 있게 할 예정
좌측패널 선택 시 글쓰기, 관리, 내 다른 링크들(깃블로그, 링크드인, github 등)
메인 화면에 사용할 게시물
뭘 더 추가해애 Illustrator느낌 날 지 고민하기

후기

재미있었다 출근 해야 하는데 새벽 2시 42분까지 작업하는 미친짓을 한거 빼면... ㅎㅎ....

:wq!

Illustrator 테마 만들기1