클로드 코드로 티스토리 스킨 만들기 — 구글 애드센스 EEAT 정책까지 챙기는 법

티스토리 기본 스킨이 너무 획일적이라는 생각, 한 번쯤 해보셨죠? 저도 그 생각에 클로드 코드(Claude Code)를 열었다가, 스킨은 그럭저럭 만들었는데 구글 애드센스 심사에서 탈락하는 경험을 했어요. EEAT 정책이라는 걸 그때 처음 제대로 알게 됐거든요. 이 글은 그 삽질의 기록입니다.

티스토리 스킨, 왜 직접 만들게 됐냐면요

블로그를 운영하다 보면 어느 순간 기본 스킨이 답답하게 느껴져요. 폰트도 바꾸고 싶고, 컬러도 내 취향대로 잡고 싶고. 근데 막상 Tistory 스킨 마켓에서 맘에 드는 걸 찾기가 은근히 어렵잖아요. 비슷비슷한 디자인들 사이에서 "그냥 내가 만들면 되지 않나?" 싶었어요.

마침 클로드 코드(Claude Code)를 쓰기 시작했던 참이라 "어차피 코드를 대신 짜줄 텐데 한번 해보자" 했는데... 막상 해보니 생각보다 알아야 할 게 많더라고요. 그리고 정작 스킨을 다 만들고 나서도 구글 애드센스 심사에서 한 번 떨어졌어요. 이유가 스킨 디자인이 아니라 콘텐츠 신뢰도 관련 정책 문제였거든요. 그 얘기도 같이 담아볼게요.

STEP 1. 티스토리 스킨 구조 먼저 파악하기

클로드 코드에게 "티스토리 스킨 만들어줘"라고 바로 던지기 전에, 구조를 먼저 알고 있어야 대화가 됩니다. 티스토리 스킨은 최소 3개 파일로 구성돼요.

파일	역할	핵심 포인트
skin.html	전체 레이아웃 + 치환자	티스토리 데이터를 가져오는 사용
style.css	디자인·스타일링	반응형 미디어쿼리 필수
index.xml	스킨 메타정보	스킨 이름, 버전, 옵션값 정의

여기서 처음 저를 당황하게 만든 건 치환자(Substitution Variable)였어요. 티스토리는 동적 데이터(블로그 제목, 글 목록, 댓글 등)를 HTML에 직접 쓸 수 없고, 대신 머니플로우 랩스 같은 형식의 치환자를 써야 해요. 티스토리가 이 부분을 실제 데이터로 교체해주는 방식이거든요.

자주 쓰는 주요 치환자 모음

머니플로우 랩스 — 블로그 제목
매일 시장을 공부하고 정보를 기록합니다. 유용한 정보의 나눔을 통해 함께 자산을 키워가는 공간입니다. — 블로그 설명
머니플로우 랩스 — 블로거 이름
https://insight-moneyflow.tistory.com/rss — RSS URL
— 대표글 목록 (그룹 치환자)

전체 치환자 목록은 티스토리 공식 스킨 가이드에서 확인할 수 있어요.

STEP 2. 클로드 코드 프롬프트 전략

처음에 저는 "깔끔한 티스토리 스킨 전체 만들어줘"라고 한 번에 던졌어요. 결과물이 나오긴 했는데, 치환자를 엉뚱하게 쓰거나 빠뜨리는 경우가 있었고, 전체 파일이 너무 커서 수정하기도 쉽지 않았어요. 단계별로 나눠서 요청하는 게 훨씬 낫습니다.

제가 실제로 효과 있었던 프롬프트 흐름을 공유할게요.

// 1단계: 구조 설계 먼저
티스토리 스킨을 만들 거야. 지금 당장 코드 말고,
skin.html / style.css / index.xml 세 파일의 구조와
각 파일에 들어갈 주요 섹션을 먼저 설명해줘.
반응형 레이아웃(모바일·PC), 헤더, 글 목록, 글 본문, 사이드바,
푸터가 포함되어야 해.

// 2단계: skin.html 본격 작성
위 구조를 바탕으로 skin.html을 작성해줘.
티스토리 공식 치환자(머니플로우 랩스, 매일 시장을 공부하고 정보를 기록합니다. 유용한 정보의 나눔을 통해 함께 자산을 키워가는 공간입니다. 등)를
정확히 사용해줘. 치환자 출처는
https://tistory.github.io/document-tistory-skin/ 이야.
디자인 색상 기준: 메인 #3A7BD5, 배경 #ffffff, 텍스트 #2d2d2d

// 3단계: style.css 작성
skin.html에 맞는 style.css를 작성해줘.
모바일 기준(768px 이하) 미디어쿼리 포함.
가독성 좋은 폰트 스택: 'Noto Sans KR', sans-serif

// 4단계: index.xml 마무리
index.xml 파일도 작성해줘.
스킨 이름: MyBlog, 버전: 1.0.0
기본 옵션(최근글 5개, 최근댓글 5개) 포함

⚠️ 주의: 클로드 코드가 치환자를 임의로 만들거나 오래된 형식을 쓰는 경우가 있어요. 생성된 코드에서 [##_ 로 시작하는 치환자들이 공식 문서에 실제로 있는지 꼭 대조 확인하세요. 없는 치환자를 쓰면 그대로 문자열로 출력돼버려요.

STEP 3. 스킨 적용 방법

파일이 준비됐으면 티스토리 관리자에서 직접 적용할 수 있어요. 절차는 어렵지 않아요.

순서	단계	설명
1	꾸미기 → 스킨 편집	관리자 패널 좌측 메뉴
2	HTML 탭	skin.html 내용 붙여넣기, 저장
3	CSS 탭	style.css 내용 붙여넣기, 저장
4	파일업로드 탭	images/ 폴더 파일들 업로드 (폰트, 아이콘 등)
5	미리보기 확인	PC/모바일 양쪽 체크

💡 팁: index.xml은 스킨 패키지(.zip)를 만들어서 올릴 때 사용하는 파일이에요. 직접 편집 방식(HTML 탭 + CSS 탭)으로 올릴 때는 index.xml이 없어도 적용은 됩니다. 다만 스킨 배포를 생각한다면 같이 만들어두는 게 좋아요.

STEP 4. 구글 애드센스 탈락 — EEAT 때문이었어요

솔직히 여기서 좀 충격받았어요. 스킨을 공들여 만들고, 글도 꾸준히 올렸는데 애드센스 심사에서 "콘텐츠 부적합"으로 거절을 받았거든요. 디자인 문제인 줄 알았는데 알고 보니 구글이 요구하는 EEAT 정책을 전혀 반영하지 않았던 게 문제였어요.

EEAT는 Expertise(전문성), Experience(경험), Authoritativeness(권위성), Trustworthiness(신뢰성)의 약자예요. 구글이 "이 사이트 믿을 만한가?"를 판단하는 기준인데, 단순히 글을 잘 쓰는 것만으로는 부족해요. 블로그 운영자가 누구인지, 어떤 원칙으로 글을 쓰는지, 독자 정보는 어떻게 다루는지를 명시해줘야 합니다.

제가 처음에 없어서 문제가 됐던 페이지들이에요.

페이지	왜 필요한가	들어가야 할 내용
운영자 소개	EEAT의 'Experience' + 'Authoritativeness'	닉네임/이름, 블로그 운영 목적, 주요 관심 분야, 간단한 이력
편집원칙	EEAT의 'Trustworthiness'	글 작성 기준, 사실 확인 방법, 수정·삭제 정책, 광고 표기 방침
개인정보처리방침	애드센스 필수 요건 (법적 의무)	수집하는 데이터 종류, 쿠키 사용 여부, 제3자 제공 여부, 연락처
면책조항	투자·금융 블로그에 특히 중요	"이 글은 투자 권유가 아니며, 모든 투자 판단은 독자 본인 책임"

❌ 제가 했던 실수: 처음에 위 페이지들을 티스토리 일반 글로만 올려놓고, 스킨 푸터나 메뉴에 링크를 연결하지 않았어요. 구글 심사봇이 페이지를 찾지 못한 거예요. 반드시 헤더 또는 푸터 내비게이션에 링크를 연결해야 합니다.

✅ 해결 방법: 티스토리 페이지 기능(관리 → 페이지)으로 각 페이지를 만들고, skin.html 푸터 영역에 해당 URL로 가는 <a> 태그를 직접 넣었어요. 치환자가 아니라 고정 URL로요.

STEP 5. 클로드 코드에게 EEAT 페이지까지 부탁하기

EEAT 관련 페이지 내용도 클로드 코드한테 초안을 맡겼어요. 이건 효과가 꽤 좋았어요. 특히 개인정보처리방침이나 면책조항처럼 법적인 문서 형식이 있는 것들은 직접 쓰기가 막막한데, 초안을 잡아주니 거기서 실제 정보만 채워 넣으면 되더라고요.

// 개인정보처리방침 초안 요청
티스토리 블로그의 개인정보처리방침 페이지를 작성해줘.
블로그 이름: insight-moneyflow.tistory.com
수집 정보: 방문 통계(Google Analytics), 광고 쿠키(Google AdSense)
제3자 제공: 없음. 문의 이메일: [내 이메일]
한국어로, 알기 쉽게 작성해줘.

// 편집원칙 초안 요청
개인 금융·AI 블로그의 편집원칙 페이지를 작성해줘.
핵심 원칙: 직접 경험 기반 작성, 수치는 출처 명기,
투자 정보는 권유가 아닌 참고용임을 명시,
오류 발견 시 즉시 수정.
편한 말투로, 독자에게 설명하는 형식으로.

이렇게 초안을 받아서 실제 내 블로그 정보(이름, 이메일 등)로 채워 넣고 티스토리 페이지로 발행했어요. 그리고 나서 애드센스에 재신청했더니 통과됐습니다. 처음 탈락하고 나서 한 달쯤 지났을 때였어요.

📌 애드센스 심사 통과를 위한 EEAT 체크리스트

✔ 운영자 소개 페이지 — 블로그 주인이 누구인지 밝혀야 함
✔ 편집원칙 페이지 — 글을 어떤 기준으로 쓰는지 명시
✔ 개인정보처리방침 페이지 — 구글 애드센스 정책상 필수
✔ 면책조항 — 투자·금융 블로그라면 특히 중요
✔ 위 4개 페이지를 헤더 또는 푸터 메뉴에서 접근 가능하게 연결
✔ 연락 가능한 이메일 또는 문의 방법 명시

스킨 제작 시 자주 겪는 문제들

클로드 코드로 스킨을 만들면서 반복적으로 마주쳤던 문제들을 정리해봤어요.

문제 1. 치환자가 그대로 문자열로 보임
→ 클로드 코드가 공식 문서에 없는 치환자를 만들어냈을 때 발생. 티스토리 공식 GitHub 문서와 대조 확인 필수.

문제 2. 모바일에서 레이아웃 깨짐
→ CSS에서 미디어쿼리(@media (max-width: 768px))를 추가하도록 명시적으로 요청해야 해요. 안 그러면 PC 기준으로만 만들더라고요.

문제 3. 댓글·방명록 섹션 누락
→ 처음 요청 시 "댓글, 방명록 섹션 포함"을 명시하지 않으면 생략되는 경우가 있어요. 치환자 그룹이 복잡해서 클로드가 회피하는 경향이 있음.

문제 4. 광고 단위 위치 문제
→ 애드센스 광고 코드는 skin.html의 글 본문 영역 안에 직접 넣기보다, 콘텐츠 전후로 배치하는 게 정책상 안전해요. 콘텐츠와 광고가 구분되도록 스타일링도 함께 요청하세요.

클로드 코드 스킨 작업 시 도움이 된 팁들

몇 가지 작은 팁들인데, 실제로 작업 시간을 꽤 줄여줬어요.

① 기존 스킨을 참고 자료로 주기 — 마음에 드는 오픈소스 티스토리 스킨을 GitHub에서 찾아서 "이 구조를 참고해서 내 스킨을 만들어줘"라고 하면 치환자 오류가 훨씬 줄어요.

② 한 번에 전부 수정 요청하지 않기 — "헤더만 수정해줘", "푸터만 고쳐줘"처럼 파트별로 나눠서 작업하면 실수가 적어요. 전체를 한 번에 재생성 요청하면 이전에 잘 작동하던 부분도 바뀌는 경우가 생겨요.

③ 변경 사항을 티스토리 미리보기에서 바로 확인 — 스킨 편집 화면 우측 하단에 "미리보기" 버튼이 있어요. 코드 붙여넣고 저장 전에 미리보기로 먼저 확인하는 습관이 좋아요.

④ CSS 변수 활용 요청 — 클로드 코드에게 색상이나 폰트를 CSS 변수(:root { --main-color: #3A7BD5; })로 관리하도록 요청하면 나중에 색상 테마 변경이 훨씬 쉬워요.

관련해서, 저는 Ollama + Continue.dev로 로컬 AI 환경도 구축해봤는데, 그 경험은 블로그 AI 자동화팁 카테고리에서 확인해보실 수 있어요.

정리하자면

클로드 코드로 티스토리 스킨을 만드는 건 충분히 가능한 일이에요. 치환자 구조만 제대로 이해하고, 단계별로 요청을 나누면 꽤 완성도 있는 결과물이 나와요.

다만 스킨을 잘 만드는 것만큼 중요한 게, 구글이 신뢰할 수 있는 블로그를 만드는 것이에요. 운영자 소개, 편집원칙, 개인정보처리방침, 면책조항 — 이 4개 페이지가 없으면 디자인이 아무리 예뻐도 애드센스 통과가 쉽지 않아요. 저는 그걸 탈락하고 나서야 알게 됐거든요.

한 번 도전해볼 만합니다.