Chromebook에서 Astro 블로그 구축 및 한글화 최적화 가이드

Chromebook 환경에서 정적 사이트 생성기인 Astro와 Astro Paper 테마를 활용해 블로그를 구축했습니다. 특히 한글 환경에서 불편했던 폰트와 줄바꿈 문제를 해결하고 수익화를 위한 애드센스까지 연동한 과정을 기록으로 남깁니다.

1. 환경 구축 및 설치

Chromebook의 리눅스 환경에서 pnpm을 사용하여 Astro 프로젝트를 생성했습니다.

# pnpm 설치 및 프로젝트 생성
npm install -g pnpm
pnpm create astro@latest --template satnaing/astro-paper

2. 한글 폰트(Noto Sans KR) 최적화

기본 테마의 영문 폰트를 대신해 가독성이 좋은 Noto Sans KR을 적용했습니다. astrojs/fontsource 기능을 활용해 폰트가 늦게 뜨는 현상을 방지했습니다.

• Layout 설정: Layout.astro에 Noto Sans KR 폰트 컴포넌트 추가
• Tailwind v4 설정: src/styles/base.css의 --font-app 변수에 var(--font-noto-sans-kr)를 최우선 순위로 지정

3. 마크다운(MDX) 줄바꿈 및 링크 최적화

마크다운 작성 시 엔터키를 한 번만 쳐도 줄바꿈이 되도록 설정하고, 외부 링크는 자동으로 새 창에서 열리도록 플러그인을 추가했습니다.

• remark-breaks: 일반적인 글쓰기처럼 엔터 한 번으로 줄바꿈(\n) 적용
• rehype-external-links: 외부 도메인 링크에 target="_blank" 속성 자동 부여

// astro.config.ts 설정 예시
markdown: {
  remarkPlugins: [remarkBreaks],
  rehypePlugins: [[rehypeExternalLinks, { target: "_blank" }]],
}

4. 구글 애드센스(AdSense) 연동

수익화를 위해 포스트 본문 내부에 광고를 삽입할 수 있는 전용 컴포넌트를 제작했습니다.

<AdsenseInArticle />

src/components/AdsenseInArticle.astro 컴포넌트를 만들어 MDX 본문 어디서든 원하는 위치에 광고를 배치할 수 있도록 구성했습니다.

5. 도메인 및 SEO 설정

기존 go.devbj.com에서 루트 도메인인 devbj.com으로 통합하며 검색 엔진 최적화(SEO)를 강화했습니다.

• Slug 활용: 포스트 주소를 숫자로 관리하여 짧고 깔끔한 URL 유지
• Sitemap 제출: Astro가 생성한 사이트맵을 구글 서치 콘솔에 등록하여 빠른 색인 유도

이제 모든 준비가 끝났습니다. 앞으로 이 공간에 임베디드 엔지니어로서의 경험과 다양한 아이디어를 차곡차곡 쌓아갈 예정입니다!