path
Jin's Lab
코드로 실험하고 기록하는 개발 일지 · J.Lab
커리어 성장 자기 계발 방향성 탐색

Jin's Lab

코드로 실험하고 기록하는 개발 일지. 커리어와 삶의 방향을 탐색하며 기록하는 공간입니다

BloggerTemplateEditing

Blogger 테마 XML 직접 뜯어봤더니 알게 된 것들

J.Lab · 2026-06-22

안녕하세요, 개발 여정을 기록하는 1인 블로거 J.Lab입니다. 현재, 제 블로그는 저만의 개성을 듬뿍 담은 공간으로 만들기 위해 늘 분주합니다. 오늘은 블로거 테마 커스터마이징에 도전하면서 겪었던 눈물 없이는 들을 수 없는(?) 삽질기를 풀어볼까 합니다.

단순하게 CSS 좀 고치는 줄 알았던 블로거 테마 편집이 생각보다 만만치 않더군요. 결국 XML 코드를 직접 뜯어보면서 블로거의 민낯을 마주하게 되었고, 그 과정에서 정말 많은 것을 배웠습니다. 저처럼 블로거 테마 커스터마이징에 어려움을 겪는 분들께 이 경험이 작은 도움이 되기를 바랍니다.

블로거 테마 XML 구조의 실체: b:section > b:widget > b:includable

처음에는 간단히 HTML 위젯을 추가해서 원하는 대로 레이아웃을 바꾸려 했습니다. 그런데 웬걸, 아무리 <div> 태그를 넣어도 제가 원하는 위치에 나타나지 않는 겁니다. 답답한 마음에 블로거 테마 편집 화면을 열고 XML 코드를 들여다보기 시작했습니다.

블로거 테마의 XML 구조는 우리가 흔히 생각하는 웹 페이지의 HTML 구조와는 사뭇 달랐습니다. b:section 안에 b:widget이 있고, 그 안에 다시 b:includable이 들어가는 형식으로만 동작한다는 사실을 깨달았죠. <section> 안에 일반적인 bare div를 그냥 집어넣으면, 블로그 렌더링 과정에서 싸그리 무시되어버리는 황당한 경험을 했습니다.

'아, 블로거는 철저히 자신만의 규칙 안에서만 움직이는구나!' 하고 무릎을 탁 쳤습니다. 이 독특한 blogger xml 구조를 이해하는 것이 블로거 테마 편집의 첫걸음이었습니다.

블로거 테마의 복잡한 XML 구조를 나타내는 아이소메트릭 일러스트레이션

고집 센 type=HTML 위젯, Piggyback 전략으로 뚫다!

가장 큰 난관은 바로 type=HTML 위젯이었습니다.

저는 특정 b:includable 안에서 제가 원하는 HTML 코드를 넣어서 기능을 구현하고 싶었는데, 이 녀석이 제 말을 듣지 않는 겁니다. type=HTML 위젯은 custom includable을 완전히 무시하고, 위젯 설정값에 직접 입력된 HTML만 렌더링하는 고집불통이었습니다.

'이러면 내가 원하는 동적인 요소나 특정 위치에 코드를 삽입하는 게 불가능하잖아?' 하는 절망감에 빠졌죠. 몇 시간을 씨름하다가 문득 기발한 생각이 떠올랐습니다. 'PopularPosts' 위젯처럼 이미 존재하는 위젯의 b:includable 안에 제가 원하는 다른 블로그 링크 HTML을 'piggyback(무임승차)' 방식으로 끼워 넣는 것이었습니다.

PopularPosts 위젯은 이미 페이지에 렌더링되고 있었으니, 그 템플릿 코드 안에 제 HTML을 슬쩍 넣는 거죠. 물론, 원치 않는 곳에 나타날 수도 있지만, CSS로 제어하거나 아주 교묘하게 숨기면 되겠다 싶었습니다.

이 방법은 결국 통했고, 제가 원하던 기능을 특정 위치에 삽입하는 데 성공했습니다. 블로거 테마 커스터마이징의 묘미를 제대로 느낀 순간이었습니다.

HTML 위젯 문제를 해결하기 위해 다른 위젯에 코드를 '무임승차'시키는 아이디어를 표현한 일러스트

XML 특수문자 처리: &와 '의 중요성

기껏 원하는 코드를 끼워 넣었다 싶었는데, 또 다른 복병이 기다리고 있었습니다. 바로 XML 특수문자 처리입니다. HTML 코드 안에 <나> 같은 문자가 들어가면 XML 파서가 이를 태그로 인식해서 오류를 뿜어내는 겁니다. 예를 들어, &는 &amp;로, '는 &#39;로 바꿔줘야 제대로 렌더링이 되더군요.

아주 사소해 보이는 부분이지만, 이 때문에 몇 번이나 '저장 실패' 메시지를 보고 좌절해야 했습니다. 블로거 XML 구조를 직접 편집할 때는 정말 한 글자 한 글자 조심스럽게 다뤄야 한다는 것을 뼈저리게 느꼈습니다. 덕분에 XML과 HTML의 차이에 대해서도 깊이 이해하게 된 계기가 되었습니다.

XML 특수문자인 &amp;와 &#39;를 정확하게 처리하는 코딩 장면을 표현한 일러스트

마치며: 삽질은 성장의 자양분

이번 블로거 테마 커스터마이징 여정은 마치 미로를 헤매는 것 같았습니다. 하지만 좌절하지 않고 끈기 있게 파고든 덕분에 블로거 테마의 XML 구조, b:widget, b:includable의 동작 방식, 그리고 고집 센 위젯들을 다루는 요령까지 깊이 있게 이해할 수 있었습니다.

특히 블로거 테마 편집 과정에서 겪었던 시행착오들은 단순한 기술 습득을 넘어 문제 해결 능력을 키우는 데 큰 도움이 되었습니다.

앞으로도 제 블로그를 더욱 매력적인 공간으로 만들기 위해 다양한 시도를 멈추지 않을 겁니다. 다음번에는 또 어떤 삽질과 깨달음을 여러분께 전해드릴지 기대해주세요! 블로거 테마 편집에 도전하는 모든 분들, 파이팅입니다!

BloggerTemplateEditing BloggerThemeCustomization BloggerXMLStructure BWidgetBIncludable WebDevJourney XMLSpecialCharacters
← 이전 글
최근 게시물
다음 글 →
이전 게시물
소개
path
J.Lab

커리어와 삶의 방향을 탐색하며
기록하는 공간입니다

카테고리
403 Forbidden Error 1 AIContentGeneration 1 AIImageGeneration 1 API Automation 1 api-troubleshooting 1 AppsScript 1 AutomationTroubleshooting 1 BlogAutomation 2 BloggerAPI 1 BloggerCustomization 1 BloggerTemplateEditing 1 BloggerThemeCustomization 1 BloggerXMLStructure 1 BloggingTools 1 BWidgetBIncludable 1 CardClickHandler 1 CodeLog 1 CSSOverlay 1 DatabaseDesign 1 DeveloperJourney 2 ExecutionLimit 1 FluxModel 1 FreeAIImage 1 FrontEndDev 1 GAS Blogger API 1 gas-automation 1 GASTimeout 1 GCP Project Linkage 1 GeminiAPI 1 GmailRestrictions 1 Google Apps Script 1 google-apps-script 1 GoogleAppsScript 2 HuggingFace 1 HuggingFaceAPI 1 jlab-codelog 1 JLabDevLog 1 notion-api 1 notion-database 1 NotionAutomation 1 NotionIntegration 1 OAuth Scope 1 pagination 1 PollinationsAI 1 PositionAbsolute 1 RandomDelay 1 TechJournal 1 WebAccessibility 1 WebDevJourney 1 WorkflowAutomation 1 XMLSpecialCharacters 1
인기 글
부업 블로그 자동 발행 시스템 처음부터 만든 후기
부업 블로그 자동 발행 시스템 처음부터 만든 후기
Blogger 테마 XML 직접 뜯어봤더니 알게 된 것들
Blogger 테마 XML 직접 뜯어봤더니 알게 된 것들
블로그 이미지 자동화 삽질기 — HuggingFace로 시작해 Pollinations로 갈아탄 이야기
블로그 이미지 자동화 삽질기 — HuggingFace로 시작해 Pollinations로 갈아탄 이야기
Google Apps Script 실행 시간 6분 제한 — Gmail 계정 함정과 랜덤 딜레이 설계
Google Apps Script 실행 시간 6분 제한 — Gmail 계정 함정과 랜덤 딜레이 설계
Notion API page_size 함정 — 우선순위 항목이 조회에서 빠지는 이유와 해결법
Notion API page_size 함정 — 우선순위 항목이 조회에서 빠지는 이유와 해결법
GAS에서 Blogger API 403 오류 완전 정복 — appsscript.json 스코프와 GCP 프로젝트 연결
GAS에서 Blogger API 403 오류 완전 정복 — appsscript.json 스코프와 GCP 프로젝트 연결
Notion 자동화 시간 범위 설계 — select 옵션 방식의 함정과 트리거 분리 전략
Notion 자동화 시간 범위 설계 — select 옵션 방식의 함정과 트리거 분리 전략
다른 블로그
IssueLog
IssueLog
issuelog.jinbytes.com
KidStory
KidStory
kidstory.jinbytes.com
IT Story
IT Story
jinbytes.com
© Jin's Lab · J.Lab · All Rights Reserved
jinbytes.com · Powered by Blogger