블로그를 새로 시작하려는데 "글을 읽은 사람이 결국 어디로 가야 하나"부터 정하지 않으면, 예쁜 스킨을 골라도 방문자는 글만 읽고 떠납니다. 이온디 티스토리(eond.tistory.com)를 다시 열면서 스킨을 직접 만들었고, Claude Code 와 이틀(커밋 23건) 동안 기획부터 실제 적용까지 한 과정을 정리했습니다.
1. 스킨보다 먼저 정한 것 — 블로그의 목적
시작은 구글 시트였습니다. 모든 프로젝트를 관리하는 시트(70개가 넘는 프로젝트, 작업 이력·커밋까지 기록)를 AI 에게 읽혀 "이 사람이 뭘 만들었는지"를 정리하게 하고, 거기서 카테고리와 첫 글 후보를 뽑았습니다.
중간에 방향이 한 번 바뀌었습니다. 처음 기획은 "1인 개발자의 제작 일지"였는데, 블로그의 최종 목적지는 eond.com(제작 의뢰·마켓)이라는 걸 분명히 하자 모든 판단 기준이 "읽은 사람이 eond.com 으로 한 번 더 클릭하는가"로 바뀌었습니다. 애드센스도 켜지 않기로 했습니다. 방문자를 광고로 내보내는 건 목적과 반대이기 때문입니다.
2. 전환 스킨 Maker — 글 끝에서 본 사이트로
기존에 만들어 둔 스킨 5종(개발 블로그·수익형·업체·범용·피드형)으로는 이 목적을 채울 수 없어서 여섯 번째 스킨 Maker 를 만들었습니다. 본문은 정보로 완결시키고, 유도는 정해진 자리에서만 합니다.
| 자리 | 하는 일 |
|---|---|
| 홈 바로가기 카드 4칸 | 제작 의뢰 · 마켓 · 전자책 · 포트폴리오로 바로 연결 |
| 글 끝 전환 박스 | 카테고리마다 문구와 버튼이 바뀜 (홈페이지 제작 → 의뢰, 마켓 상품 → 상품 페이지, AI 개발 → 프롬프트) |
| 사이드바 문의 카드 · 모바일 하단 버튼 | 글을 읽는 동안 늘 한 번에 닿는 곳 |
| UTM 자동 부착 | eond.com 링크에 카테고리·위치(box·side·bar·header…)를 붙여 어느 글의 어느 자리가 일했는지 측정 |
설정 값은 스킨 옵션 105개로 열어 두고, 내 블로그 값은 "프리셋"으로 index.xml 기본값에 굳혔습니다. 스킨을 등록하고 적용만 누르면 메뉴·버튼·문구가 한 번에 세팅됩니다.
3. 디자인 — 직접 만든 디자인 규칙을 그대로
디자인은 따로 정리해 둔 개인 디자인 라이브러리(suui)의 규칙을 따랐습니다. 회색 바탕(#F6F6F6) 위에 흰 카드, 포인트 색은 하나, 그림자는 흰 도형에만, 표는 가로선만. 화면 구성은 1단으로 만들었다가 실제로 비교해 보고 포털형 피드(2단·슬라이드·순위·카드) 구성으로 바꿨습니다.
포인트 색은 스킨 설정의 "컬러"에서 블루·오렌지·그린·바이올렛 중 고르면 바로 바뀝니다. 색마다 스킨을 따로 만들지 않고 옵션 하나로 해결했습니다.
4. 로컬과 실제 티스토리가 달랐던 이유
로컬 데모와 실제 블로그가 조금 다르게 보였는데, 원인을 하나씩 확인해 보니 대부분 스킨이 아니라 블로그 설정과 데이터였습니다.
- 홈 화면 설정에서 커버를 켜지 않으면 "전체 글" 목록만 나온다
- 링크를 비운 버튼은 숨는다 (데모는 샘플 링크로 채워 둔다)
- 티스토리가 스킨 CSS 외에 CSS 8개를 더 넣어 본문 여백이 조금 달라진다
- 스킨 옵션 "로고 이미지"는 이미지 한 장이라 다크 모드에서 바뀌지 않는다 — SVG 로 올려도 같다
로고는 결국 CSS 마스크로 풀었습니다. 마크 모양 PNG 한 장을 글자색으로 칠하게 하면 라이트에서는 검정, 다크에서는 흰색으로 자동으로 바뀝니다.
.site-logo::before {
background: var(--text); /* 라이트=검정, 다크=흰색 */
mask: url("./images/eond-mark.png") no-repeat left center / contain;
}하나는 진짜 버그였습니다. body 클래스에 띄어쓰기가 빠져 피드형 목록 스타일이 전 스킨에서 적용되지 않았는데, 로컬 데모도 같은 템플릿이라 "데모와 같다"로는 잡히지 않았습니다. 실제 HTML 의 클래스를 직접 읽어서 찾았습니다.
5. 올리는 법과 다음 할 일
티스토리 스킨 등록에서는 파일을 평평하게 한 폴더에 두고 전체 선택해 올리면, 기본 파일이 아닌 것(script.js·이미지)은 티스토리가 알아서 images 폴더로 옮깁니다. 그래서 빌드 결과 폴더를 그대로 업로드 폴더로 쓰게 바꿨습니다.
다음은 카테고리 정리와 첫 글입니다. 아임웹 사이트 백업, 제로보드4에서 라이믹스로 이전하기처럼 검색으로 찾아오는 주제부터 쓰고, 글 끝의 전환 박스가 실제로 의뢰를 만드는지 UTM 으로 확인할 계획입니다.
이런 분께
- 블로그를 본 사이트(쇼핑몰·서비스·포트폴리오)로 가는 입구로 쓰고 싶은 1인 사업자
- 티스토리 스킨을 AI 와 함께 직접 만들어 보려는 분
완성된 블로그: https://eond.tistory.com/
홈페이지 제작 의뢰·이온디 마켓: https://eond.com/