최근 내 블로그의 레이아웃을 깔끔하게 정리하고 싶다는 생각이 들었다. 특히 글이 하나도 없는 카테고리가 좌측 메뉴에 덩그러니 노출되어 있는 모습이 영 마음에 들지 않았다. 글이 없는 빈 카테고리는 자동으로 숨겨지고, 새로운 글을 작성하면 동적으로 다시 노출되도록 만들고 싶었다.
이 간단해 보이는 기능을 구현하기 위해 구글 Blogger(블로거)의 기본 기능을 활용하여 자바스크립트로 제어하는 방법을 고민하기 시작했다. 이 과정에서 겪었던 묘한 버그와 깔끔하게 해결한 삽질기를 공유해 보려고 한다.
Blogger Label 위젯의 특성과 첫 구상
Blogger 카테고리 숨김 기능을 깔끔하게 구현하기 위해 먼저 레이아웃에 기본 'Label(라벨) 위젯'을 추가했다. 이 라벨 위젯은 각 카테고리명과 포스트 수 데이터를 담고 있기 때문에 아주 훌륭한 데이터 원천이 된다. 다만 이 위젯이 직접 화면에 노출되면 지저분하므로, CSS의 display: none; 속성을 주어 화면에서 숨겨두었다.
내 계획은 단순했다. 숨겨진 Label 위젯 내부의 HTML 구조에서 각 카테고리의 이름(data-name)과 포스트 수(data-count)를 JS로 읽어와 객체로 매핑하는 것이었다. 이렇게 수집한 포스트 수를 기반으로, 좌측 네비게이션 메뉴의 링크들을 하나씩 검사하여 동적 메뉴를 완성하려고 했다.
실제 화면에 노출되는 메뉴 중 포스트 수가 0인 카테고리는 CSS 클래스를 조작해 숨기면 될 일이었다. 구조상 완벽해 보였고 곧바로 자바스크립트 코드를 작성하기 시작했다.
뜻밖의 난관: 사라진 데이터와 Undefined의 비밀
처음 작성한 자바스크립트 코드에서는 각 카테고리의 포스트 수가 0일 때 해당 카테고리 메뉴를 숨기도록 조건문을 작성했다. 구체적으로는 counts[lbl] === 0과 같은 방식으로 조건을 걸어 0개인 항목을 필터링하고자 했다. 하지만 코드를 적용해 보니 글이 0개인 카테고리들이 여전히 버젓이 화면에 남아있었다.
개발자 도구를 열고 콘솔을 찍어보며 디버깅을 시작한 끝에 황당하면서도 중요한 사실을 발견했다. Blogger의 Label 위젯은 포스트 수가 0인 라벨에 대해서는 '0'이라는 데이터를 보내주는 것이 아니라, 아예 HTML 상에 데이터를 렌더링하지 않았다. 즉, 데이터 자체가 완전히 누락되어 undefined 상태로 잡히고 있었다.
이것이 바로 내가 마주한 첫 번째 장벽이었다. 당연히 0을 반환할 줄 알았던 내 예상과 달리 데이터 자체가 존재하지 않았기에 내 조건문은 완전히 무용지물이 되었던 것이다.
버그 해결: 0 대신 존재 여부를 체크하다
Blogger Label 위젯이 포스트 수 0인 데이터를 아예 주지 않는다는 특징을 파악한 뒤, 해결책은 생각보다 명확해졌다. 기존의 counts[lbl] === 0이라는 엄격한 비교 조건 대신, 데이터가 존재하지 않는 모든 상황을 아우를 수 있는 논리 조건이 필요했다.
코드의 판별 조건을 !counts[lbl]로 과감히 변경했다. 이렇게 수정하면 해당 카테고리에 대한 포스트 수 데이터가 undefined로 들어오든, 혹은 만에 하나 진짜 0으로 들어오든 상관없이 모두 참(true)으로 평가되어 안전하게 숨김 처리가 동작한다.
조건을 수정한 코드를 적용하자마자 빈 카테고리들이 마법처럼 화면에서 사라졌다. 반대로 테스트용 포스트를 하나 작성해 보니, 해당 카테고리가 자동으로 좌측 메뉴에 다시 모습을 드러냈다. 동적 메뉴가 드디어 완벽하게 의도대로 작동하기 시작한 순간이었다.
동적 카테고리 제어로 깔끔해진 블로그 레이아웃
이번 작업을 통해 Blogger 시스템이 데이터를 다루는 독특한 방식을 깊이 이해할 수 있었다. 데이터가 없다고 해서 무조건 0을 기대하기보다, 시스템이 아예 값을 전달하지 않는 예외 상황까지 항상 고려해야 한다는 점을 다시금 깨달았다.
이제 글이 없는 카테고리를 굳이 수동으로 숨기거나 편집할 필요가 없어졌다. 오직 글이 존재하는 살아있는 카테고리만 깔끔하게 보여주는 세련된 블로그 환경을 완성하게 되어 매우 뿌듯하다. 나와 유사하게 티스토리나 Blogger 등에서 동적 카테고리 제어로 고민하는 분들에게 이 경험이 작은 도움이 되기를 바란다.