요즘 내 블로그에 글을 쓸 때 인공지능인 Gemini의 도움을 적극적으로 받고 있다. 글 내용을 분석해서 본문에 어울리는 검색 엔진 최적화용 키워드들을 뽑아주는데, 이를 Blogger의 라벨로 등록하여 활용하고 있었다. 하지만 이 과정에서 생각지도 못한 황당한 UI 문제가 발생했다.

Gemini가 추천해 준 SEO 키워드가 라벨의 첫 번째 순서로 붙으면서, 블로그 메인 화면과 개별 포스트 상단에 내가 지정한 카테고리명이 아니라 생뚱맞은 SEO 키워드가 떡하니 노출되기 시작한 것이다. 원인을 파악해 보니 기존 Blogger 템플릿의 설계 한계 때문이었다.

순서에 의존했던 기존 b:loop 라벨 구조의 한계

기존에 사용하던 스킨 템플릿은 글에 등록된 여러 라벨 중에서 가장 첫 번째에 위치한 라벨을 카테고리명으로 인식하도록 코딩되어 있었다. 즉, b:loop에서 index='li' 속성을 부여한 뒤 index가 0인 첫 번째 라벨만 화면에 보여주는 순서 의존 방식을 취하고 있었던 것이다.

이러한 방식은 카테고리 역할을 하는 라벨을 항상 가장 먼저 입력해야만 정상 작동하는 치명적인 단점이 있다. 하지만 AI가 뽑아준 SEO 키워드가 첫 칸을 차지해 버리자 템플릿 조건이 꼬이면서 카테고리가 엉망이 되는 대참사가 일어났다. 결국 라벨 순서에 기대지 않고, 지정한 카테고리명만 골라내는 견고한 필터링이 필요하다는 결론에 도달했다.

템플릿 조건 변경을 통한 이름 매칭 방식 도입

이 문제를 해결하기 위해 템플릿 코드를 열고 순서 의존 방식을 완전히 걷어냈다. 대신 내가 카테고리로 분류하여 사용하는 실제 라벨 이름(예: DevJourney, EasyIT 등)을 직접 매칭하여 검증하는 템플릿 조건을 도입하기로 했다.

b:loop 라벨 내부에서 개별 라벨 객체를 순회할 때, data:lbl.name 값을 검사하여 내가 지정한 카테고리 이름과 일치하는 경우에만 화면에 렌더링되도록 코드를 전면 수정했다. 예를 들어 data:lbl.name이 'DevJourney'이거나 'EasyIT'인 경우에만 참(True)이 되어 카테고리 영역에 표시하는 방식이다. 이렇게 하니 SEO 키워드가 첫 번째 순서로 들어가더라도 카테고리 영역에는 오직 진짜 카테고리만 정확하게 나타났다.

포스트 헤더와 글 목록 카드 두 곳 모두에 일괄 적용

한 곳만 수정해서는 해결될 일이 아니었다. 내 블로그 템플릿은 개별 글 페이지의 상단에 해당하는 포스트 헤더 영역과, 메인 페이지에서 글들을 요약해서 보여주는 글 목록 카드 영역 두 군데에서 각각 카테고리를 독립적으로 추출하고 있었다.

따라서 두 영역의 소스코드를 모두 찾아서 동일한 이름 매칭 로직으로 변경해 주어야 했다. 포스트 헤더 템플릿 부분과 인덱스 페이지의 카드 위젯 템플릿 부분을 차례로 수정하며 b:loop 조건문을 꼼꼼하게 변경했다. 다행히 두 곳 모두 동일한 데이터를 바라보고 있어서 한 번 로직을 정립하고 나니 이식 작업은 수월하게 끝났다.

라벨 순서 문제 해결 후 찾아온 깔끔한 UI

작업을 마치고 나니 이제 글에 어떤 SEO 라벨이 어떤 순서로 추가되든 상관없이, 내가 원하는 진짜 카테고리명만 상단과 카드 뉴스 영역에 명확하게 노출된다. 인공지능이 추천한 다양한 라벨들을 순서 고민 없이 마음껏 등록할 수 있게 되어 블로그 관리 스트레스가 크게 줄어들었다.

이번 삽질을 통해 템플릿을 개발할 때는 흐름이나 순서에 의존하는 편의주의적 코딩보다는, 데이터의 명확한 이름이나 속성을 직접 매칭하는 조건식이 훨씬 유지보수에 안전하다는 점을 다시금 뼈저리게 느꼈다. 혹시 나와 유사하게 Blogger 라벨 카테고리 표시 오류로 골머리를 앓고 있다면, 순서 index 방식 대신 이름 매칭 방식으로 전환해 보길 강력히 권한다.