기존에 사용하던 단축 아이콘들은 뭔가 밋밋하고 오래된 느낌이었습니다. 특히 여러 블로그(이슈로그, KidStory, IT Story)를 운영하다 보니 각각의 개성을 살린 파비콘이 꼭 필요하다고 느꼈죠. 이왕 바꾸는 김에 '확장성이 좋은 SVG로 교체하자!'는 야심 찬 계획을 세웠습니다.
하지만 Blogger XML 테마에 SVG 파비콘을 적용하는 것이 생각처럼 간단치 않더군요. 일반적인 HTML 웹사이트와는 접근 방식이 조금 달라서 여러 번 시행착오를 겪어야 했습니다. 결국 Base64 인코딩이라는 방법을 통해 이 문제를 해결했는데, 오늘은 그 과정을 여러분과 공유하려 합니다.
새로운 단축 아이콘, 왜 SVG여야만 했나?
솔직히 파비콘이 웹사이트의 첫인상에 큰 영향을 미치지는 않습니다. 하지만 브라우저 탭에 작게 표시되는 그 아이콘 하나가 블로그의 정체성을 보여주는 중요한 요소라고 생각해요. J.Lab은 특히 여러 분야의 블로그를 운영하고 있어서 각 블로그의 주제를 명확히 보여줄 단축 아이콘이 절실했습니다.
그래서 과감하게 기존 이미지 파일을 버리고 SVG 포맷을 선택했습니다. SVG는 벡터 기반이라 어떤 크기로 확대해도 이미지가 깨지지 않고 선명하다는 장점이 있죠. 또한 파일 크기도 상대적으로 작아서 웹 성능에도 긍정적인 영향을 줍니다. 이런 이유로 이슈로그, KidStory, IT Story 블로그 각각의 아이덴티티에 맞는 SVG 단축 아이콘을 제작하기로 결정했어요.
이 과정에서 KidStory 블로그의 작성자명을 'KidMomJin'에서 'Jin.Mom'으로 변경하고, 이슈로그 블로그명도 '이슈로그'에서 'IssueLog'로 영문 전환하는 등 블로그 전반의 브랜딩 작업을 함께 진행했습니다. 작은 변경이지만 전체적인 통일감을 주는 데 큰 도움이 되었습니다. 이 모든 변화에 어울리는 새로운 파비콘이 필요했던 거죠.
Blogger XML 테마와 Base64 인코딩의 만남
자, 이제 SVG 파일을 준비했으니 Blogger XML 테마에 삽입하는 일만 남았습니다. 일반적인 HTML에서는 <link rel='icon' type='image/svg+xml' href='/path/to/favicon.svg'> 이런 식으로 간단하게 처리할 수 있죠. 저도 처음엔 이렇게 시도했습니다. 하지만 Blogger의 XML 테마에서는 이게 제대로 작동하지 않더군요.
테마 편집기에 들어가 <head> 섹션에 이 코드를 넣어봤더니, XML 파싱 에러가 나거나 아예 무시되는 현상이 발생했습니다. Blogger의 XML 파서는 일반적인 HTML 파서와는 다르게 SVG 태그나 특정 속성들을 허용하지 않는 경우가 많았습니다. CSS 파일에 background-image로 넣어볼까도 생각했지만, favicon은 link 태그로 처리하는 것이 일반적이라 다른 방법을 찾아야만 했죠.
며칠간 구글링과 삽질을 반복하다가 결국 한 가지 해법을 발견했습니다. 바로 SVG 이미지를 Base64로 인코딩하여 data:image/svg+xml;base64,... 형태로 사용하는 것이었습니다. 이 방법은 이미지를 직접 HTML/CSS 코드 안에 문자열 형태로 포함시키는 것이라 외부 파일 참조의 제약을 우회할 수 있습니다. J.Lab 블로그처럼 외부 서버를 직접 제어하기 어려운 환경에서 아주 유용한 꼼수죠.
실제 적용 과정과 깨알 팁
해결책을 찾았으니 이제 적용하는 일만 남았습니다. 먼저 제작한 SVG 파일을 Base64 인코딩 툴을 이용해 문자열로 변환했습니다. 온라인에 무료로 사용할 수 있는 Base64 인코더들이 많으니 적절한 것을 선택하면 됩니다. 변환된 문자열은 상상 이상으로 길어서 처음엔 당황했지만, 이게 맞더군요.
다음으로, Blogger 테마 편집기로 이동해서 <head> 섹션 안에 아래와 같은 link 태그를 삽입했습니다. 이 태그의 href 속성에 아까 인코딩한 Base64 문자열을 통째로 넣어주는 겁니다. 이때 type을 image/svg+xml로 명시하는 것이 중요합니다.
즉, <link rel='icon' type='image/svg+xml' href='data:image/svg+xml;base64,인코딩된-SVG-문자열-여기에-붙여넣기'/> 와 같은 형태가 됩니다. 저는 여기에 더해서 rel='shortcut icon'도 함께 사용했습니다. 구형 브라우저 호환성을 위한 것이죠.
이렇게 설정하고 저장한 뒤 블로그를 새로고침했더니, 드디어 제가 원했던 SVG 파비콘이 브라우저 탭에 선명하게 나타나는 것을 확인할 수 있었습니다. 이 감격이란! KidStory, IssueLog, IT Story 모든 블로그에 각각의 개성을 담은 새로운 파비콘이 적용된 것을 보니 뿌듯함이 밀려왔습니다.
적용 후 주의할 점은 브라우저 캐시 문제였습니다. 파비콘은 브라우저가 강력하게 캐시하는 요소 중 하나라, 변경 사항이 즉시 반영되지 않을 수 있습니다. Ctrl+F5(강제 새로고침)를 여러 번 시도하거나, 아예 시크릿 모드 또는 다른 브라우저에서 확인하는 것이 좋습니다. 만약 여러 개의 파비콘 태그가 있다면, 가장 마지막에 선언된 것이 우선순위를 갖는다는 점도 기억해두세요.
마무리하며: 삽질은 성장의 자양분
간단해 보였던 파비콘 교체 작업이 이렇게 길고 복잡한 여정이 될 줄은 몰랐습니다. 하지만 이 작은 단축 아이콘 하나를 완벽하게 적용하기 위해 고군분투하면서, Blogger XML 테마의 특성과 Base64 인코딩의 활용법에 대해 더 깊이 이해하게 되었습니다. 역시 삽질은 개발자의 성장을 위한 필수 코스인 것 같네요.
J.Lab은 앞으로도 블로그의 작은 디테일 하나하나까지 신경 쓰며 사용자 경험을 개선해나갈 계획입니다. 이번 경험을 바탕으로 다른 블로그 요소에도 SVG를 적극 활용하는 방안을 모색해야겠습니다. 다음번에는 또 어떤 재밌는(?) 문제와 마주할지 벌써부터 기대가 됩니다! 여러분도 혹시 Blogger 파비콘 SVG 문제로 고민하고 계셨다면, 이 방법이 도움이 되기를 바랍니다.
