구글 블로그 테마 설치부터 클로드 최적화까지: 제트테마 직접 고친 과정
※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
제트테마(JetTheme)는 구글 블로그(Blogger)에서 쓸 수 있는 무료 테마예요. HTML을 몰라도 XML 파일 하나로 설치할 수 있고, 저는 설치한 뒤에 클로드에게 코드를 보여 주면서 조금씩 고쳐 왔어요. 이 글은 그 과정에서 직접 겪은 문제들을 순서대로 적은 기록이에요.
저는 HTML을 거의 몰라요. 구글 블로그로 애드센스를 준비하다가 테마가 속도와 광고 수익에 영향을 줄 수 있다는 걸 알게 됐고, 그래서 테마를 직접 설치해서 고쳐 보기로 했어요.
핵심 요약
- 설치는 XML 파일을 올리면 끝나요. 올리기 전에 지금 쓰는 테마부터 백업해 두세요.
- 클로드에게 수정을 맡길 때는 블로그에 실제로 적용돼 있는 테마 파일을 줘야 해요.
- 원본 점수는 아주 좋았지만, 수정하고 글과 광고가 늘면 점수는 달라질 수 있어요. 저도 모바일이 99점에서 79점까지 내려왔어요.
- 제가 겪은 문제는 뉴스레터 연결, 수정본 미반영, 사이드바 숨김, 다크모드 글자색, 썸네일 잘림이었어요.
제트테마는 어떤 테마인가요?
제트테마는 구글 블로그 전용 테마예요. 공식 저장소(GitHub의 jettheme/core)에서 JetTheme 2.9 버전 파일을 받을 수 있어요. 공식 사이트(jettheme.com)에는 무료 버전에서도 저작권 표기를 바꿀 수 있다고 안내돼 있어요(2026년 10월 확인). 그래도 푸터의 출처 표기는 저는 그대로 뒀어요.
제가 이 테마를 고른 가장 큰 이유는 속도였어요. 제트테마 원본만 올린 상태에서 2026년 8월 29일에 PageSpeed Insights로 쟀더니 모바일 성능 99점, 데스크톱 100점이 나왔어요. 접근성은 96점, 권장사항과 검색엔진 최적화는 100점이었어요.
다만 이 점수는 원본 그대로일 때의 이야기예요. 글과 이미지를 올리고, 광고 코드와 기능을 더하고, 테마를 고치면 점수는 달라질 수 있어요. 제 경우가 정확히 그랬고, 아래 '수정하면 속도 점수는 어떻게 달라지나요?'에 날짜별로 적어 뒀어요.
제트테마는 어떻게 설치하나요?
- 현재 테마 백업. Blogger [테마] 화면에서 [백업]을 눌러 지금 테마를 파일로 저장해 두세요. 나중에 문제가 생기면 이 파일로 되돌릴 수 있어요.
- 테마 파일 받기. 공식 저장소 github.com/jettheme/core에서 jettheme-v2.xml을 내려받아요. 저는 jettheme-v2.xml을 받았어요.
- 복원 메뉴 열기. [테마] 화면에서 [맞춤설정] 버튼 옆 화살표(▼)를 눌러 [복원]을 선택해요.
- 파일 올리기. [업로드]를 눌러 내려받은 XML 파일을 고르면 적용돼요.
클로드에게는 어떻게 부탁했나요?
테마 XML 파일을 클로드 대화에 첨부하고, 궁금한 걸 그대로 물었어요. 처음에는 이 테마로 글을 쓸 때 조심할 점이 있는지, 썸네일과 본문 이미지는 어떤 크기로 올려야 하는지 물었어요. 그다음에는 색상과 폰트, 카드 모양을 다른 블로그 디자인처럼 바꿔 달라고 했고요.
이미지 얘기를 하나 더 하면, 용량이 너무 크면 로딩에 문제가 없는지, 16:9 이미지가 정사각형 썸네일로 나오면 왜곡이나 잘림이 없는지, 잘리면 썸네일 문구까지 잘리는 건 아닌지 걱정되는 대로 물었어요. 그 질문 덕분에 "왜곡은 없고 잘림은 있다"는 답과, 글자를 가운데 안전 영역에 두라는 계산을 받을 수 있었어요.
💡 제가 쓴 프롬프트와 비슷한 예시 첨부한 파일은 지금 제 블로그에 적용 중인 구글 블로그 테마예요. 코드는 잘 몰라서, 바꿀 부분과 이유를 쉬운 말로 설명해 주고 고친 전체 파일을 다시 만들어 줘.
제 경험으로는 두 가지가 중요했어요. 지금 적용 중인 테마를 백업해서 올리는 것, 그리고 고친 이유를 같이 설명해 달라고 하는 것이에요. 이유를 알아야 나중에 문제가 생겼을 때 어디를 볼지 감이 와요.
직접 겪은 문제 6가지
| 문제 | 원인 | 해결 |
|---|---|---|
| 뉴스레터를 켰는데 구독자가 내 목록에 안 보임 | 테마에 다른 사람의 follow.it 발행 ID가 들어 있었어요. 그대로 쓰면 구독 신청이 테마 제작자 쪽으로 들어가요. | follow.it에 가입해서 내 구독 폼 주소를 받고, 폼 주소 한 줄만 바꿨어요. |
| 클로드가 준 수정본을 붙여넣었는데 달라진 게 없음 | 블로그에 적용된 테마 파일을 올려 확인해 보니 수정한 내용이 반영돼 있지 않았어요. 색상값이 예전 그대로였어요. | 지금 적용 중인 테마 파일을 새로 받아 올리고, 그 위에서 수정해서 다시 적용했어요. |
| PC에서 오른쪽 위젯이 안 보임 | 창 폭이 1100px 이하면 숨기도록 코드가 짜여 있었어요. | 기준을 991px로 맞췄어요. |
| 다크모드에서 글자가 안 보임 | 다크모드 스타일이 기기 설정을 기준으로 작동하는데, 이 테마는 화면의 달 모양 버튼으로 전환해요. | 버튼 방식(html.dark-mode)에 맞춰 색을 다시 지정했어요. |
| 정사각형 썸네일에서 글자가 잘림 | 16:9 이미지를 정사각형 틀에 넣으면 좌우가 잘려요. | 핵심 글자를 이미지 가운데 약 56% 안에 두었어요. |
| 무료로 공유된 다른 테마 파일을 적용하려 함 | 클로드가 파일 안의 문구를 근거로 유료 판매 테마의 무단 배포본으로 판단했고, 코드를 옮기는 일은 돕기 어렵다고 안내했어요. | 공식 저장소에서 받은 파일만 쓰기로 했어요. |
가장 오래 걸린 건 뉴스레터였어요. 구독 폼이 다른 사람 계정으로 연결돼 있다는 걸 8월 23일에 알았고, follow.it에서 받은 새 방식의 폼 주소로 바꾼 건 9월 23일이었어요.
💡 꿀팁 뉴스레터를 쓸 생각이라면 설치하자마자 폼 주소가 내 것인지부터 확인해 보세요. 한 줄만 바꾸면 되는데, 모르고 지나가면 구독자를 놓쳐요.
이미지 크기와 용량은 어떻게 맞췄나요?
이 테마는 이미지를 틀에 맞춰 잘라서(object-fit: cover) 보여 줘요. 그래서 클로드에게 물어서 아래 기준으로 정했어요. 구글이 정한 규격이 아니라 제가 클로드와 정한 기준이에요.
| 구분 | 크기 | 용량 | 형식 |
|---|---|---|---|
| 대표 썸네일 | 1200×675px (16:9) | 150KB 이하 | WebP |
| 본문 이미지 | 가로 1200~1600px | 200KB 이하 | WebP (글자가 많은 캡처는 PNG) |
| 공유 미리보기 | 1200×630px | 가볍게 | JPG 또는 PNG |
수정하면 속도 점수는 어떻게 달라지나요?
원본일 때는 점수가 아주 좋았는데, 운영하면서 모바일 점수가 80점 안팎까지 내려왔어요. 날짜별로 직접 잰 값을 적어 둘게요.
| 측정일 | 상태 | 모바일 | 데스크톱 |
|---|---|---|---|
| 8월 29일 | 제트테마 원본 | 99점 | 100점 |
| 10월 6일 | 글·이미지·광고 코드를 더하고 수정한 뒤 (LCP 6.3초) | 73점 | 93점 |
| 10월 8일 | 첫 화면 이미지 등을 고친 뒤 (LCP 3.0초) | 81점 | 98점 |
| 10월 12일 | 현재 (LCP 5.1초) | 79점 | 96점 |
점수가 내려간 이유를 하나로 말하기는 어려워요. 테마 코드를 고친 것뿐 아니라 글과 이미지가 늘고 애드센스 코드가 들어간 영향도 같이 있어서, 각각이 몇 점을 깎았는지는 따로 재지 못했어요. 제가 확인한 건 두 가지예요. 하나는 첫 화면의 큰 이미지가 지연 로딩이라 늦게 뜨던 것, 다른 하나는 모바일에서 사용하지 않는 자바스크립트가 149KiB 정도 있는데 거의 전부 애드센스 스크립트였다는 거예요.
처음에는 고칠 곳을 잘못 짚어서 점수가 거의 오르지 않았어요. 고쳐 달라고 한 부분이 실제로 첫 화면 이미지를 그리는 곳이 아니었거든요. 보고서의 'LCP 분석'에서 가장 큰 요소가 어떤 코드인지 먼저 확인하고 나서야 제대로 고칠 수 있었어요. 모바일 점수는 같은 페이지도 잴 때마다 몇 점씩 달라질 수 있어서, 숫자 하나보다 여러 번의 흐름을 보는 편이 낫더라고요.
💡 꿀팁 테마를 고치거나 광고·위젯을 더할 때마다 PageSpeed Insights로 점수를 재서 날짜와 함께 적어 두세요. 어떤 수정 뒤에 점수가 내려갔는지 알 수 있고, 백업 파일과 비교해 되돌릴지 판단하기도 쉬워요.
모바일 80점은 아직 목표라서 계속 손보고 있어요. 결과가 바뀌면 이 글에 다시 적을게요.
최근에 추가 수정: 다크모드 로고
로고를 라이트 모드와 다크 모드에서 다르게 보이게 하고 싶었어요. 테마 코드에 이미지를 두 개 넣고, 다크모드일 때만 다크 로고가 보이도록 CSS 7줄을 더했어요. 코드를 모르는 저는 AI에게 부탁해서 적용했고, 라이트와 다크, 데스크톱과 모바일 화면을 직접 눌러 보며 확인했어요.
제가 쓰는 작업 환경
저는 블로그 글쓰기, 테마 수정, 올라마로 돌리는 로컬 LLM 실험을 모두 맥미니 M4 Pro(메모리 24GB)에서 해요. 다만 제트테마를 설치하고 고치는 정도라면 이렇게 높은 사양은 필요 없어요. 로컬 LLM이나 자동화까지 함께 해 보고 싶을 때 참고만 하세요.
- Apple 맥 미니 M4 Pro 12코어 CPU, 16코어 GPU, 메모리 24GB (쿠팡 파트너스 링크): 제가 쓰는 것과 같은 M4 Pro 24GB 모델이에요. 링크의 상품은 SSD 1TB 구성이고, 2026년 10월 12일에 확인한 가격은 3,150,270원이에요. 가격과 재고는 수시로 바뀌어요.
- Apple 2026 맥미니 M5 Pro 15코어 CPU, 16코어 GPU, 메모리 24GB (쿠팡 파트너스 링크): 더 새로 나온 모델이에요. SSD 512GB 구성이고, 같은 날 확인한 가격은 2,990,000원이에요. 이 모델은 제가 직접 써 보지는 않았어요.
코드를 이해하고 직접 고쳐 보고 싶다면 HTML과 CSS 기초를 먼저 익혀 두는 것도 도움이 돼요. 제가 읽어 본 책은 아니고, 이 글의 주제와 맞아서 하나만 소개해요.
- Do it! HTML + CSS 웹 표준의 정석 개정 3판 (쿠팡 파트너스 링크): HTML과 CSS를 처음 배우는 분을 위한 입문서예요. 상품 소개를 보면 이번 개정판에는 AI 코딩 도구로 HTML과 CSS 코드를 작성해 보는 부록이 들어 있어요.
클로드를 처음 써 본다면
클로드 Max 구독자는 친구에게 무료 체험 이용권(게스트 패스)을 보낼 수 있어요. 공식 도움말에 따르면 받는 사람은 유료 구독 이력이 없는 새 이용자여야 하고, 결제 정보를 입력해야 해요. 체험 7일이 지나면 Pro 요금제로 자동 전환되니, 체험만 해 보려면 그 전에 해지해야 해요. 이용권 수와 조건은 바뀔 수 있어요.
제 설정 화면에는 "친구가 마음에 들어 구독하면 US$10의 사용 크레딧을 받게 된다"고 나와요. 이 크레딧은 이용권을 보낸 제가 받는 혜택이에요. 아래 링크로 가입해서 구독하시면 제가 크레딧을 받을 수 있다는 점을 밝혀 둘게요.
제가 가진 이용권은 3장뿐이고 선착순이라, 이미 소진됐다면 링크가 작동하지 않을 수 있어요. 이용권이 다 쓰이면 이 항목은 지울게요.
- 클로드 무료 1주일 체험 링크 (게스트 패스) (추천 링크, 구독 시 운영자가 사용 크레딧을 받아요)
자주 묻는 질문
Q. 제트테마는 무료인가요?
공식 사이트 기준으로 무료 버전(Blog)이 있어요. 별도의 유료 버전도 있으니 어떤 파일을 받는지는 확인해 보세요.
Q. HTML을 몰라도 설치할 수 있나요?
설치는 XML 파일을 올리는(복원) 것만으로 돼요. 수정은 클로드 같은 AI에게 코드를 보여 주면서 이유를 물어보며 조금씩 진행할 수 있어요.
Q. 수정하기 전에 꼭 해야 할 일이 있나요?
[테마] 화면의 [백업]으로 현재 테마를 저장해 두는 거예요. 문제가 생기면 복원으로 되돌릴 수 있어요.
마무리
제트테마는 HTML을 몰라도 설치할 수 있고, 클로드와 함께 고치면 속도와 디자인을 조금씩 다듬을 수 있었어요. 다만 백업, 실제 적용 중인 파일 확인, 뉴스레터 폼 주소 확인은 처음부터 챙기셨으면 해요.
