Blogger 사이드바 커스터마이징? 만만치 않네!

안녕하세요, J.Lab입니다! 요즘 블로그를 운영하면서 문득 다른 IT 블로거분들과 좀 더 긴밀하게 교류하고 싶다는 생각이 들었어요. 그래서 제 블로그 사이드바에 '다른 블로그 바로가기' 섹션을 추가해서, 제가 즐겨 찾는 이웃 블로그들을 소개하고 싶었죠.

간단하게 링크 몇 개 넣으면 되겠지 싶었는데, 역시 세상은 만만치 않았습니다. 제가 사용하는 블로거(Blogger) 플랫폼의 사이드바 커스터마이징이 생각보다 훨씬 까다롭더라고요. 그 삽질기를 지금부터 솔직하게 공유해 봅니다.

첫 번째 시도: HTML 위젯의 'XML 오류' 배신

가장 먼저 떠오른 건 역시 'HTML/JavaScript 위젯'이었어요. 간단하게 링크 몇 개 넣으면 될 거라고 생각했죠. 평소 다른 웹사이트 만들 때처럼 <div> 안에 <a> 태그로 링크를 넣고, 스타일 좀 주면 끝날 일이라고 생각했습니다.

그런데 막상 코드를 넣고 저장하려니 계속 오류가 나는 거예요. "XML 형식이 올바르지 않습니다" 같은 낯선 메시지를 보면서 한참을 헤매야 했습니다. 알고 보니 블로거는 위젯 코드를 XML 형태로 관리하고 있었고, 일반적인 HTML 태그들을 b:widget이라는 특정 XML 구조 밖에서는 제대로 렌더링 하지 않는 문제가 있더군요.

blogger 위젯 추가라는 키워드로 검색하며 여러 글을 찾아봤지만, 대부분 간단한 텍스트나 광고 코드 추가 정도만 다루고 있었어요. 복잡한 HTML 커스터마이징은 어려워 보였죠. 결국 HTML 위젯을 직접 쓰는 건 포기해야 했습니다.

'피기백' 작전 개시: 기존 위젯에 몰래 끼워 넣기

직접 HTML 위젯을 쓸 수 없으니, 다른 방법을 찾아야 했습니다. 사이드바에 사이드바 링크를 넣는다는 건 결국 HTML 요소를 추가하는 것인데, 이미 작동하는 위젯에 몰래 끼워 넣으면 어떨까 하는 생각이 스쳤어요.

제 눈에 들어온 건 바로 '인기 게시물(PopularPosts)' 위젯이었습니다. 이 위젯은 이미 잘 동작하고 있었고, 코드 구조를 살펴보니 b:includable이라는 섹션이 있더군요. 이 b:includable 태그의 끝 부분에 제가 원하는 '다른 블로그 섹션' HTML 코드를 슬쩍 추가해 보기로 했습니다. 이른바 '피기백(piggyback)' 방식이었죠. blogger html 위젯의 한계를 이렇게 우회하는 겁니다.

디자인 통일과 파비콘 삽입: 디테일까지 놓치지 않는다

단순히 링크만 추가하면 너무 밋밋하잖아요? 저는 기존 블로그의 인기글(jp-recent-item)과 디자인을 통일하고 싶었어요. 그래서 인기글 목록의 UI 클래스를 그대로 재활용해서 제 다른 블로그 링크들도 같은 스타일로 보이게 만들었죠. 이렇게 하니 전체 사이드바 디자인이 훨씬 깔끔하고 통일감 있게 느껴졌습니다.

여기에 각 블로그의 파비콘(favicon)까지 넣어주면 금상첨화겠다 싶었어요. 처음에는 <img src="url"> 방식으로 외부 파비콘을 가져오려 했는데, 보안 문제나 로딩 속도, 혹은 파비콘이 자주 바뀌는 경우 문제가 생길까 봐 걱정됐습니다. 그래서 SVG나 PNG 파비콘 이미지를 base64로 인코딩해서 src 속성에 직접 삽입하는 방법을 택했습니다. 이렇게 하니 외부 의존성 없이 안정적으로 아이콘을 표시할 수 있었죠.

삽질 끝, 깔끔한 사이드바 완성!

이렇게 몇 시간을 끙끙대며 코드를 수정하고, 미리 보기로 확인하고, 또 수정하는 과정을 반복했습니다. 때로는 오타 하나 때문에 전체 레이아웃이 깨지기도 하고, 파비콘 인코딩이 잘못되어 이미지가 안 나오기도 했죠. 하지만 끈기 있게 하나씩 해결해 나간 끝에, 마침내 깔끔하고 통일감 있는 '다른 블로그 바로가기' 섹션을 제 블로거 사이드바에 추가할 수 있었습니다.

이제는 제 블로그를 방문하는 분들이 손쉽게 다른 좋은 블로그들도 찾아볼 수 있게 되었네요. 블로거 사이드바 추가하기, 쉽지 않았지만 그만큼 뿌듯합니다. 이 과정에서 겪었던 시행착오와 해결 과정들이 모두 소중한 경험으로 남았어요.

마무리하며: 또 다른 삽질을 기대하며!

이번 블로거 사이드바 커스터마이징 작업은 단순히 기능을 하나 넣는 것을 넘어, 블로거 플랫폼의 깊숙한 부분까지 이해하는 계기가 되었습니다. 때로는 정석적인 방법이 통하지 않을 때, 기존 구조를 활용하는 '꼼수'도 유용하다는 것을 다시 한번 깨달았어요.

앞으로도 이렇게 삽질하며 얻은 경험들을 J.Lab의 개발 일지에 꾸준히 기록해 나갈 생각입니다. 혹시 비슷한 문제로 고민하는 분들께 제 경험이 작은 도움이 되었으면 좋겠네요. 다음번에는 또 어떤 흥미로운 커스터마이징에 도전해 볼까요? 기대해 주세요!