path
Jin's Lab
코드로 실험하고 기록하는 개발 일지 · J.Lab

Jin's Lab

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

BloggerTemplateEditing

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

J.Lab ·
목차

    안녕하세요, 개발 여정을 기록하는 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 AdSense 1 AdSense Bot Detection 1 AI Automation 1 AI Image Generation 1 ai-automation 2 AI-Prompting 1 AIBlogAutomation 1 AICodeLog 1 AIContentGeneration 1 AIImageGeneration 1 AIWritingErrors 1 API Automation 2 API Retry Design 1 api-automation 1 API-Deprecation 1 api-error 1 api-fallback 1 api-retry-strategy 1 api-troubleshooting 1 APIDebugging 1 APIError 1 APIErrorHandling 1 APIIntegration 1 APITokenRenewal 1 AppsScript 1 appsScriptAutomation 1 AutomatedBlogging 1 automation 1 Automation 2 AutomationTroubleshooting 1 Backoff Algorithm 1 Base64Encoding 1 BatchProcessing 1 blog-automation 1 blog-customization 1 blog-migration 3 Blog-Sorting 1 blog-strategy 1 blog-theme-customization 1 blog-workflow 1 blogautomation 1 BlogAutomation 2 Blogger 4 Blogger API 2 Blogger Automation 1 Blogger SEO 1 blogger-api 3 blogger-automation 1 blogger-error-400 1 blogger-labels 1 blogger-seo 1 blogger-tips 1 Blogger-Tips 1 BloggerAPI 3 BloggerBypath 1 BloggerCustomization 2 BloggerFavicon 1 BloggerTemplate 1 BloggerTemplateEditing 1 BloggerTheme 1 BloggerThemeCustomization 1 BloggerXMLStructure 1 Blogging-Automation 1 BloggingTools 1 BlogQuality 1 BlogSpot 1 BWidgetBIncludable 1 CardClickHandler 1 CDATA 1 clamping-text 1 Code Integration 1 codelog 1 CodeLog 1 codeRefactoring 1 contentsequencing 1 cost-reduction 1 CSSOverlay 1 data-parsing 1 DatabaseDesign 1 DataRecovery 1 DateInjection 1 Debugging 2 dev-journey 1 DeveloperJourney 2 DevJourney 1 display-none-seo 1 dom-manipulation 1 dynamic-menu 1 Error-Handling 1 ErrorHandling 1 Execution Timeout 1 ExecutionLimit 1 exponential-backoff 1 FactChecking 1 FaviconEmbedding 1 Feed-API 1 filesystem 1 Flat Illustration 1 FluxModel 1 FreeAIImage 1 FrontEndDev 1 FrontendTips 1 GAS Blogger API 1 gas-automation 1 gas-optimization 1 gas-trigger 1 GASTimeout 1 gasTriggerManagement 1 GCP Project Linkage 1 Gemini 1 Gemini API 1 gemini-api 1 GeminiAPI 1 GeminiPrompt 1 GeminiPromptEngineering 1 GmailRestrictions 1 Google Apps Script 7 Google Discover 1 google-apps-script 3 Google-Apps-Script 1 google-blogger 1 googleAppsScript 1 GoogleAppsScript 6 googlesapps-script 1 hero-image 1 HTMLWidgetBlogger 1 http-429 1 HuggingFace 1 HuggingFaceAPI 1 ico-generator 1 Image Optimization 1 image-automation 1 image-optimization 1 In-App Browser 1 invalid-argument 1 javascript 3 JavaScript 2 javascript-automation 1 javascript-toc 1 jlab-codelog 1 JLabDevLog 1 json-schema 1 label-length-limit 1 linux 1 meta-description 1 Negative Prompt 1 notion-api 1 notion-database 1 notion-gas-integration 1 NotionAPI 1 NotionAutomation 1 notionintegration 1 NotionIntegration 1 OAuth Scope 1 pagination 1 payload-validation 1 permalink-management 1 PersonaDesign 1 pil-image-processing 1 Pinterest 1 Pollinations 1 Pollinations Flux 1 pollinations-api 1 PollinationsAI 1 PositionAbsolute 1 Prompt Design 1 Prompt Engineering 1 prompt-engineering 1 Prompt-Engineering 1 PromptEngineering 1 publishorder 1 python-favicon 1 queue-stuck 1 RandomDelay 1 rate-limiting 1 Refactoring 1 rfc3339 2 Robots Meta Tag 1 RSS Feed 1 scriptNotFound 1 Search Engine Optimization 2 Search-Engine-Optimization 1 SEO Tips 1 seo-optimization 4 SEO-Optimization 1 seriesmanagement 1 SidebarLinks 1 SNSMarketing 1 SVGIcon 1 table-of-contents 1 TechJournal 1 Template 1 ThreadsAPI 1 tistory-migration 1 transparent-favicon 1 triggerCleanup 1 Troubleshooting 1 unzip 1 URL Slug 1 vanilla-js 1 Web Development 1 Web Publishing 2 Web Security 1 web-development 1 Web-Development 1 web-development-tips 1 web-performance 1 web-scraping 1 WebAccessibility 1 WebDevelopment 3 WebDevelopmentTips 1 WebDevJourney 1 windows 1 WorkflowAutomation 1 XMLParser 1 XMLSpecialCharacters 1 XMLTheme 1 zip 1
    인기 글
    GAS에서 Blogger API 403 오류 완전 정복 — appsscript.json 스코프와 GCP 프로젝트 연결
    GAS에서 Blogger API 403 오류 완전 정복 — appsscript.json 스코프와 GCP 프로젝트 연결
    Google Apps Script 실행 시간 6분 제한 — Gmail 계정 함정과 랜덤 딜레이 설계
    Google Apps Script 실행 시간 6분 제한 — Gmail 계정 함정과 랜덤 딜레이 설계
    Blogger 테마 XML 직접 뜯어봤더니 알게 된 것들
    Blogger 테마 XML 직접 뜯어봤더니 알게 된 것들
    다른 블로그
    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