Astro 블로그를 깔끔하게 정리한 과정

들어가며

이전 글에서는 Astro, Tailwind CSS, MDX, Cloudflare Workers Static Assets를 이용해 chailmon.com 블로그를 구축하고 배포하는 과정을 정리했다.

배포가 끝났다고 바로 완성된 것은 아니었다.

실제로 운영 주소에서 확인해보니 몇 가지 정리할 부분이 보였다.

• 상단에 뜨는 AdSense 광고가 너무 강하게 노출됨
• 모바일에서 Header 메뉴가 좁아 보일 수 있음
• 메인 페이지 문구가 너무 수익화 중심으로 보임
• 글 카드 디자인이 중복되고 통일감이 부족함
• 테스트용 MDX 글과 테스트 문구가 남아 있음
• 카테고리 구조가 임시 상태로 남아 있음

이번 글에서는 블로그를 더 깔끔하게 보이도록 정리한 과정을 기록한다.

1. AdSense 상단 앵커 광고 끄기

처음 AdSense 자동 광고를 적용하니 페이지 상단에 큰 광고가 표시됐다.

광고 자체는 정상적으로 붙은 것이지만, 블로그 첫인상에는 좋지 않았다.

특히 글을 읽으러 들어온 방문자 입장에서는 제목보다 광고가 먼저 보이면 콘텐츠 신뢰도가 떨어져 보일 수 있다.

그래서 광고 전체를 끄지는 않고, 자동 광고는 유지하되 상단을 가리는 광고 형식만 줄이기로 했다.

설정 방향은 다음과 같이 잡았다.

자동 광고: ON
인페이지 광고: ON
앵커 광고: OFF
전면 광고: OFF
사이드 레일 광고: OFF
광고 수: 낮음 또는 중간 이하

초기 블로그에서는 광고 수익 최적화보다 글 읽는 경험이 더 중요하다고 판단했다.

2. Header 모바일 메뉴 정리

기존 Header는 데스크톱 기준으로는 괜찮았다.

Chailmon        Home Blog About Contact

하지만 모바일 화면에서는 메뉴가 좁은 공간에 몰려 보일 수 있었다.

그래서 데스크톱과 모바일 메뉴를 분리했다.

데스크톱에서는 기존처럼 가로 메뉴를 유지하고, 모바일에서는 햄버거 버튼을 누르면 메뉴가 펼쳐지도록 변경했다.

구현은 JavaScript 없이 HTML의 details와 summary를 사용했다.

데스크톱:
Chailmon        Home Blog Topics About Contact

모바일:
Chailmon        ☰

모바일에서 햄버거 버튼을 누르면 아래처럼 메뉴가 펼쳐진다.

Home
Blog
Topics
About
Contact

이렇게 하니 모바일 화면에서 Header가 훨씬 정리되어 보였다.

3. 메인 페이지 문구 수정

처음 메인 페이지에는 이런 문구를 사용했다.

개발자가 직접 키우는 수익형 블로그

틀린 말은 아니지만, 첫 화면에서 “수익형”이라는 표현이 너무 앞에 나오는 느낌이 있었다.

AdSense를 붙인 블로그라도 방문자에게 먼저 보여줘야 하는 것은 광고 목적이 아니라 콘텐츠의 방향성이라고 생각했다.

그래서 메인 문구를 다음처럼 바꿨다.

작게 만들고, 직접 운영하며, 배운 것을 기록합니다.

설명 문구도 함께 정리했다.

웹 개발, 블로그 운영, 생산성 도구, 수익화 실험을 직접 해보고 정리하는 개인 블로그입니다.
시행착오까지 함께 기록해서 나중에 다시 참고할 수 있는 글을 남기는 것이 목표입니다.

이렇게 바꾸니 블로그가 조금 더 개인 기록과 경험 공유에 가까워 보였다.

4. 글 카드 디자인 개선

메인 페이지의 최근 글 카드와 /blog 페이지의 글 목록 카드는 비슷한 구조였지만 코드가 중복되어 있었다.

또 디자인도 조금 더 정리할 필요가 있었다.

그래서 PostCard.astro 컴포넌트를 새로 만들었다.

카드 안에는 다음 정보를 통일해서 표시했다.

카테고리
작성일
제목
설명
태그
글 읽기 링크

카테고리는 작은 배지 형태로 보여주고, 제목과 설명의 간격을 정리했다.

또 글 읽기 → 링크를 카드 하단에 배치해서 사용자가 다음 행동을 쉽게 알 수 있게 했다.

이후 메인 페이지와 /blog 페이지 모두 같은 PostCard 컴포넌트를 사용하도록 바꿨다.

그 결과 디자인 일관성이 좋아지고, 나중에 카드 디자인을 바꾸고 싶을 때 한 파일만 수정하면 되게 되었다.

5. 테스트성 문구 제거

초기 개발 과정에서 만든 테스트 글이 있었다.

첫 번째 MDX 글
hello-mdx

이 글은 MDX와 Content Collection이 제대로 동작하는지 확인하기 위한 테스트용이었다.

실제 블로그 운영 단계에서는 이런 테스트 글이 남아 있으면 완성도가 낮아 보일 수 있다.

그래서 테스트 글 파일을 삭제했다.

rm -f src/content/blog/hello-mdx.mdx

그리고 소스에 테스트 주소가 남아 있는지도 확인했다.

grep -R "첫 번째 MDX 글\|hello-mdx\|테스트 글" src public templates

테스트용 주소나 문구가 실제 글 안에 남아 있으면 실제 글 주소로 바꿨다.

이 작업을 통해 /blog 목록에는 실제 공개 글만 남게 되었다.

6. 실제 카테고리 구조 정리

초기에는 카테고리를 임시로 개발이라고만 넣어두었다.

하지만 앞으로 블로그를 계속 운영하려면 카테고리 기준이 필요했다.

그래서 블로그의 주제를 세 가지로 정리했다.

만들기
운영하기
써보고 남기기

각 카테고리의 의미는 다음과 같다.

만들기
→ Astro, Cloudflare, GitHub, 자동화, 개인 프로젝트 제작 과정

운영하기
→ 블로그 운영, SEO, AdSense, 콘텐츠 구조, 배포 관리 경험

써보고 남기기
→ 생산성 도구, 개발 도구, 서비스, 제품 리뷰

카테고리 정보는 src/lib/categories.ts 파일로 분리했다.

export const categories = [
  {
    slug: "making",
    label: "만들기",
    description: "Astro, Cloudflare, GitHub, 자동화, 개인 프로젝트 제작 과정을 기록합니다.",
  },
  {
    slug: "operating",
    label: "운영하기",
    description: "블로그 운영, SEO, AdSense, 콘텐츠 구조, 배포 관리 경험을 정리합니다.",
  },
  {
    slug: "reviewing",
    label: "써보고 남기기",
    description: "생산성 도구, 개발 도구, 서비스, 제품을 직접 써보고 기록합니다.",
  },
] as const;

그리고 Content Collection 설정에서 카테고리를 세 가지 중 하나만 사용할 수 있게 제한했다.

category: z.enum(["만들기", "운영하기", "써보고 남기기"]),

이렇게 하면 나중에 글을 쓸 때 카테고리 오타를 줄일 수 있다.

7. 카테고리 페이지 추가

카테고리 구조를 만든 뒤에는 실제 페이지도 추가했다.

/categories
/categories/making
/categories/operating
/categories/reviewing

/categories 페이지에서는 전체 카테고리를 보여주고, 각 카테고리 페이지에서는 해당 카테고리의 글만 보여주도록 했다.

또 Header에 Topics 메뉴를 추가해서 방문자가 카테고리 페이지로 쉽게 이동할 수 있게 했다.

메인 페이지 하단의 주제 카드도 각각 카테고리 페이지로 연결했다.

만들기 → /categories/making
운영하기 → /categories/operating
써보고 남기기 → /categories/reviewing

이제 블로그가 단순히 글 목록만 있는 구조에서, 주제별로 탐색할 수 있는 구조가 되었다.

정리 후 블로그 구조

정리 후 현재 블로그는 다음 구조가 되었다.

/
→ 메인 페이지

/blog
→ 전체 글 목록

/blog/astro-adsense-blog-build-guide
→ Astro 블로그 구축 과정 글

/blog/cleaning-up-astro-blog
→ 블로그 정리 과정 글

/categories
→ 카테고리 목록

/categories/making
→ 만들기 글 목록

/categories/operating
→ 운영하기 글 목록

/categories/reviewing
→ 써보고 남기기 글 목록

/about
→ 블로그 소개

/contact
→ 문의 페이지

/privacy-policy
→ 개인정보처리방침

이번 정리에서 배운 점

이번 정리 작업을 하면서 느낀 점은 세 가지다.

첫째, 블로그는 배포 후에도 다듬을 부분이 계속 보인다.

처음에는 기술적으로 동작하는 것이 중요하지만, 실제 운영 주소에서 보면 광고 위치, 모바일 메뉴, 문구, 카드 디자인 같은 디테일이 더 잘 보인다.

둘째, 테스트용 글과 문구는 빨리 제거하는 것이 좋다.

개발 중에는 테스트 글이 필요하지만, 실제 공개 블로그에 남아 있으면 사이트 완성도가 낮아 보인다.

셋째, 카테고리 구조는 초기에 잡아두는 것이 좋다.

글이 많아진 뒤에 카테고리를 바꾸려면 더 번거롭다. 처음부터 큰 방향을 세 가지 정도로 나누면 이후 글을 쌓기가 훨씬 편하다.

마무리

이번 작업으로 chailmon.com 블로그는 처음 배포된 상태보다 훨씬 깔끔해졌다.

특히 다음 부분이 좋아졌다.

상단 광고 부담 감소
모바일 메뉴 개선
메인 문구 정리
글 카드 디자인 통일
테스트 글 제거
카테고리 구조 추가

이제 남은 핵심은 글을 꾸준히 쌓는 것이다.

처음부터 완벽한 블로그를 만들려고 하기보다, 실제로 운영하면서 불편한 부분을 하나씩 고치는 방식이 더 현실적이다.

앞으로도 블로그를 운영하면서 바꾼 내용은 이렇게 기록으로 남겨둘 예정이다.