Astro 블로그에 카테고리 필터 넣는 법

Astro 블로그에 카테고리 필터를 넣는 방법을 정리했다. 글이 요리·유튜브·음악·미국 생활처럼 성격이 갈릴 때, 블로그를 여러 개로 쪼개지 않고 하나에 담되 카테고리로 분류하고 필터 탭으로 골라 보게 만드는 방식이다.

왜 블로그 하나 + 카테고리인가

블로그를 주제별로 쪼개면 각 블로그의 글 수가 흩어진다. 대신 하나에 다 쌓고 분류하면, 글이 한곳에 모여서 방문자가 이 글 저 글 돌아다니기 좋고(체류·내부 순환에 유리), 애드센스용 글 수 축적에도 낫다. 그래서 글이 몇 개 없는 지금 미리 서랍부터 짜뒀다.

어떻게 넣나

카테고리 정의 — 여섯 개(실험·요리·유튜브·음악·AI 아트·미국 생활)를 정하고, 라벨·이모지를 한 곳(categories.js)에, enum을 콘텐츠 스키마(content.config.ts)에 둔다. 새 카테고리는 이 두 파일만 고치면 된다
글에 카테고리 지정 — 각 글 frontmatter에 category: youtube 식으로 한 줄
필터 탭 — 블로그 목록에 탭을 달되, 글이 있는 카테고리만 자동 노출한다(빈 서랍은 손님한테 안 보여주는 게 예의). /blog?cat=cooking 형태 링크도 되게
카테고리 칩 — 글 페이지마다 자기 카테고리 칩을 붙여 어느 서랍 글인지 보이게

핵심은 글이 쌓이기 전에 서랍을 먼저 짜두는 것. 나중에 몰아서 분류하면 일이 커진다.

그 외 이틀간 붙은 것들 (소소하게)

카테고리 말고도 이틀 사이 여럿 손봤다. 목록만:

홈에 유튜브 채널 카드 2개 — 배치를 갈아엎어 RPG 상태창을 컴팩트하게 줄이고, 그 자리에 Sylvamoor·얼씨구 트로트 카드를 넣었다. “coming soon” 빈 카드는 🎰 트로트 자판기 카드로 교체
자판기 A/S(한자 몬스터) — 자판기 가사에 한자·영어가 섞여 나오는 문제. 모델이 한자 문화권 언어를 섞는 버릇이라 “한국어로 써”론 못 막는다. 3중 방어로 해결: ① 프롬프트에 “순수 한글만” 명시 ② 섞이면 자동 재생성 ③ 그래도 남으면 이물질 문자만 세척. 덤으로 후렴 8줄 중 후킹 문구로 시작하는 줄은 최대 3줄로 제한
이메일 우체통 — About 연락처에 이메일 추가. 실제 주소를 공개하기 싫어서 Cloudflare Email Routing으로 contact@sonnyplot.com 별칭을 만들어 내 메일함으로 포워딩(클릭 몇 번, 0원, 실주소 비공개)
삽질(mailto 몬스터) — 이메일 버튼이 mailto: 링크였는데, 이 사이트를 맥 바탕화면(Plash)으로 쓰면 메일 앱을 못 열어 “unsupported URL” 에러가 났다. 그래서 버튼을 주소 클립보드 복사 + “Copied ✓” 방식으로 바꿨다. 요즘은 웹메일이 많아 이게 모두에게 낫다 — 버그가 UX를 개선한 케이스

결과

✅ 블로그 카테고리 6종 + 필터 탭 (글 있는 것만 노출)
✅ 홈 유튜브 카드 2개, 자판기 3중 필터, contact@sonnyplot.com 우체통
⌨️ 내가 친 코드: 여전히 0줄

실험은 만드는 순간보다 만든 다음이 길다. 서랍을 미리 짜둬야 글이 쌓일 자리가 생기고, 버튼 하나도 내 환경에서 직접 눌러봐야 몬스터가 튀어나온다.