정적 HTML을 기본으로 출력

Astro는 기본적으로 정적 HTML을 생성합니다. 방문자가 페이지를 열 때 서버에서 매번 렌더링하지 않아도 되므로 GitHub Pages 같은 정적 호스팅과 잘 맞습니다.

필요한 경우에만 JavaScript를 붙일 수 있어 글 읽기 중심 사이트에서 불필요한 스크립트를 줄이기 쉽습니다.

컴포넌트로 반복 구조 관리

헤더, 푸터, 글 카드, SEO 메타 태그 같은 반복 구조를 컴포넌트로 관리하면 페이지가 늘어나도 유지보수가 쉽습니다.

순수 HTML 파일을 여러 개 직접 관리하면 작은 문구 수정도 모든 파일을 열어야 하지만, Astro에서는 공통 레이아웃을 한 번만 고치면 됩니다.

블로그보다 정보 사이트에 가깝게 구성하기

Astro를 쓰더라도 사이트를 단순 일기형 블로그로만 만들 필요는 없습니다. 글 목록, 카테고리, 가이드형 상세 페이지, 정책 페이지를 함께 구성하면 정보 사이트에 가까운 구조를 만들 수 있습니다.

애드센스 심사를 고려한다면 첫 화면부터 사이트 주제와 주요 글이 명확히 보이도록 만드는 것이 좋습니다.

Astro로 글과 정책 페이지를 함께 관리한 방식

이 사이트는 글 데이터를 TypeScript 파일에 두고, Astro 동적 라우트가 각 글 상세 페이지를 정적 HTML로 생성합니다. 그래서 Cloudflare Pages에서는 `npm run build` 후 `dist` 폴더만 배포하면 됩니다.

반복되는 헤더, 푸터, SEO 메타 태그, AdSense 확인 코드, 구조화 데이터는 공통 레이아웃에서 관리합니다. 페이지가 늘어나도 기본 신뢰 신호를 빠뜨릴 가능성이 줄어듭니다.

준비할 스크린샷

스크린샷 추가 예정

Astro 프로젝트 구조, `src/pages`, `src/layouts`, `src/data` 폴더를 보여주는 화면은 정적 사이트가 어떻게 생성되는지 설명하는 데 유용합니다.

실전 점검표

  • 정적 HTML 생성이 가능한 구조인지 확인한다.
  • 공통 SEO 태그를 레이아웃에서 관리한다.
  • 글 상세 페이지가 빌드 시 모두 생성되는지 확인한다.
  • 배포 서비스의 출력 폴더를 `dist`로 설정한다.

흔한 실수

  • 빌드 명령은 맞지만 출력 폴더를 잘못 지정하는 것.
  • 공통 레이아웃이 아닌 개별 페이지에 중요한 메타 태그를 흩어놓는 것.
  • 동적 서버 기능이 필요한 요구사항을 정적 사이트에 억지로 넣는 것.

자주 묻는 질문

Astro는 블로그에만 쓰나요?

아닙니다. 문서 사이트, 정보 사이트, 랜딩 페이지, 콘텐츠 허브처럼 정적 HTML이 중요한 사이트에 잘 맞습니다.

WordPress보다 Astro가 항상 좋은가요?

아닙니다. 관리자 화면과 댓글, 회원 기능이 중요하면 WordPress가 편할 수 있습니다. 빠른 정적 콘텐츠와 코드 기반 관리가 중요하면 Astro가 적합합니다.

AdSense 코드도 Astro에 넣을 수 있나요?

가능합니다. 공통 레이아웃의 head 영역에 넣으면 모든 정적 페이지에 같은 확인 코드가 포함됩니다.

관련 글

참고한 공식 문서