Molayo

© 2026 Molayo

Dev.to헤드라인2026. 06. 03. 18:56

Astro로 Zimnovate 에이전시 사이트를 구축하고 Google PageSpeed에서 만점을 받았습니다. Astro를 배워야 하는 이유

요약

Astro 프레임워크를 사용하여 Zimnovate 에이전시 사이트를 구축하고 Google PageSpeed에서 만점을 받은 사례를 소개합니다. Astro의 핵심인 '아일랜드 아키텍처'를 통해 불필요한 JavaScript 전송을 최소화하고 성능과 SEO를 극대화하는 방법을 설명합니다.

핵심 포인트

  • Astro는 기본적으로 JavaScript를 전송하지 않는 아키텍처를 가짐
  • 아일랜드 아키텍처를 통해 정적 콘텐츠와 동적 컴포넌트를 분리
  • client:visible 등 지시어를 통한 정밀한 하이드레이션 제어 가능
  • 최적화된 성능으로 Google PageSpeed 및 SEO 지표 개선

솔직히 말씀드리면, 처음 Astro에 대해 들었을 때 저는 회의적이었습니다. 또 다른 JavaScript 프레임워크라고요? 저는 이미 React가 있었고, Next.js도 잘 작동하고 있었습니다. 왜 굳이 바꿔야 할까요?

그러다 실제로 사용해 보게 되었습니다. 짐바브웨 하라레에 기반을 둔 저의 AI 네이티브 디지털 제품 스튜디오인 Zimnovate의 웹사이트를 Astro로 구축하고, Google PageSpeed Insights를 통해 테스트해 보았는데, 제가 직접 만든 사이트에서 이전에 본 적 없는 점수를 받았습니다. 그 경험이 저의 모든 것을 바꾸어 놓았습니다.

Astro가 무엇인지, 왜 아키텍처(Architecture) 측면에서 다른지, 그리고 특히 성능(Performance)과 SEO(검색 엔진 최적화)를 중요하게 생각한다면 왜 Astro를 배울 가치가 있는지 말씀드리겠습니다.

Astro란 정확히 무엇인가?

Astro는 하나의 급진적인 아이디어를 중심으로 구축된 웹 프레임워크입니다: 바로 **기본적으로 JavaScript를 전혀 전송하지 않는다(ship zero JavaScript by default)**는 것입니다.

대부분의 현대적인 프레임워크(React, Vue, Svelte)는 컴포넌트(Component) 기반이며 클라이언트(Client)에서 페이지 전체를 하이드레이션(Hydrate)합니다. 페이지 내용이 대부분 정적 콘텐츠라 할지라도, 사용자의 브라우저는 이를 렌더링하기 위해 여전히 JavaScript를 다운로드하고 실행해야 합니다.

Astro는 이를 뒤집었습니다. Astro는 빌드 타임(Build time)에 컴포넌트를 순수 HTML로 렌더링합니다. JavaScript는 명시적으로 필요할 때만, 그리고 그것이 필요한 특정 컴포넌트에 대해서만 브라우저에서 실행됩니다.

이것은 단순한 설정 옵션이 아닙니다. 핵심 아키텍처(Architecture)입니다.

아키텍처: 아일랜드 (Islands)

Astro는 **아일랜드 아키텍처 (Islands Architecture)**라고 불리는 패턴을 사용합니다.

여러분의 페이지를 상호작용이 가능한 "아일랜드(islands)"들이 떠 있는 정적인 바다라고 생각해보세요. 바다(정적 콘텐츠, 헤딩, 텍스트, 이미지)는 일반 HTML로 전송됩니다. 아일랜드(드롭다운이 있는 네비게이션 바, 문의 양식, 실시간 카운터)만이 JavaScript로 하이드레이션(Hydrate)되는 유일한 부분입니다.

---
// 이것은 빌드 타임에만 실행되며 런타임 비용이 제로입니다
const services = await fetch('/api/services').then(r => r.json())
...

client:visible 지시어는 Astro에게 다음과 같이 명령합니다: "이 컴포넌트가 뷰포트(Viewport) 안으로 스크롤될 때만 이 컴포넌트의 JavaScript를 로드하세요." 이를 통해 필요한 곳에서는 완전한 상호작용성을 얻고, 필요 없는 곳에서는 오버헤드(Overhead)를 제로로 만들 수 있습니다.

다른 하이드레이션(Hydration) 지시어로는 다음과 같은 것들이 있습니다:

  • client:load — 페이지 로드 시 즉시 하이드레이션 (hydrate) 합니다.
  • client:idle — 브라우저가 유휴 상태(idle)일 때 하이드레이션 (hydrate) 합니다.
  • client:media — 특정 화면 크기에서만 하이드레이션 (hydrate) 합니다.

이러한 수준의 제어 기능은 다른 어떤 프레임워크도 기본적으로 제공하지 않는 것입니다.

Google PageSpeed가 실제로 측정하는 것

제 점수를 보여드리기 전에, PageSpeed Insights가 무엇을 테스트하는지 빠르게 설명하겠습니다. 이는 Astro가 왜 뛰어난지를 이해하는 데 중요하기 때문입니다.

PageSpeed는 **코어 웹 바이탈 (Core Web Vitals)**을 사용합니다:

지표측정 내용좋은 점수
LCP (Largest Contentful Paint)주요 콘텐츠가 로드되는 속도< 2.5s
...

이러한 지표들은 Google 검색 순위에 직접적인 영향을 미칩니다. 느린 사이트는 단순히 사용자 경험이 나쁜 것에 그치지 않고, SEO(검색 엔진 최적화) 페널티로 이어집니다.

Zimnovate 사이트: Astro + Tailwind CSS + Supabase

저는 zimnovate.co.zw를 Astro 4.x와 Tailwind CSS를 사용하여 구축했으며, 블로그 콘텐츠를 위한 백엔드로 Supabase를 사용했습니다. 무거운 UI 라이브러리는 사용하지 않았습니다. 오직 Astro 컴포넌트, 깔끔한 레이아웃, 그리고 단순한 데이터 레이어만 사용했습니다.

이 사이트는 다음과 같이 구성되어 있습니다:

  • 스튜디오의 포지셔닝과 서비스를 담은 랜딩 페이지
  • 프로젝트/케이스 스터디 섹션
  • 빌드 타임(build time)에 가져와서 정적 HTML로 렌더링되는 Supabase 기반의 블로그
  • 문의(contact) 섹션

빌드 타임에 Supabase 데이터 가져오기

이 부분이 CMS 기반 사이트에서 Astro가 진정으로 빛을 발하는 지점입니다. 클라이언트에서 블로그 포스트를 가져오는 대신(느리고 SEO에 좋지 않음), Supabase 쿼리는 빌드 타임(build time)에 한 번 실행됩니다. 모든 블로그 포스트 페이지는 사용자에게 도달하기 전에 순수 HTML로 사전 렌더링(pre-rendered)됩니다.

---
// src/pages/blog/index.astro
import { createClient } from '@supabase/supabase-js'
...

그리고 동적 라우트(dynamic routes)를 사용하는 개별 포스트 페이지의 경우:

---
// src/pages/blog/[slug].astro
import { createClient } from '@supabase/supabase-js'
...

빌드 타임 (build time)에 Astro는 getStaticPaths를 호출하여 Supabase로부터 모든 포스트 슬러그 (slug)를 가져오고, 각 슬러그에 대해 완전히 정적인 HTML 페이지를 사전 렌더링 (pre-renders) 합니다. 사용자가 /blog/my-post를 방문하면 캐싱된 HTML 파일을 받게 됩니다. 데이터베이스 쿼리도, JavaScript도 필요 없으며 즉시 로드됩니다.

이는 동적인 CMS (Supabase)와 정적 사이트 (static site)의 성능이라는 두 마리 토끼를 모두 잡은 방식입니다.

점수 그 이상, Astro가 SEO에 좋은 이유

성능은 SEO (검색 엔진 최적화)의 한 부분입니다. 하지만 Astro는 다른 방식으로도 도움을 줍니다.

1. 기본적으로 제공되는 서버 사이드 렌더링 (Server-side rendering)

페이지가 로드될 때 콘텐츠가 이미 HTML에 포함되어 있습니다. 크롤러 (Crawlers)는 페이지를 렌더링하기 위해 JavaScript를 기다릴 필요 없이 즉시 읽을 수 있습니다. 이는 콘텐츠가 클라이언트 사이드 페칭 (client-side fetching)에 의존하는 경우가 많은 React SPA (Single Page Application)에 비해 엄청난 이점입니다. Supabase 콘텐츠가 빌드 타임에 사전 렌더링되므로, 모든 블로그 포스트는 배포되는 즉시 완전히 인덱싱 (indexable) 가능합니다.

2. 내장된 사이트맵 (sitemap) 지원

npx astro add sitemap

명령어 하나면 충분합니다. Astro는 설정된 라우트 (routes)를 기반으로 사이트맵을 자동으로 생성하며, 여기에는 Supabase에서 동적으로 생성된 모든 블로그 포스트 페이지가 포함됩니다.

3. 일급 시민(First-class)으로 취급되는 구조화된 메타데이터

---
const { title, description, image } = Astro.props
---
...

당신은 HTML을 직접 작성하고 있습니다. <head>에 들어가는 내용을 숨기는 추상화 계층 (abstraction layer)이 없습니다. 당신이 작성한 것이 곧 크롤러가 보는 것입니다.

4. 자동 정적 최적화 (Automatic static optimization)

Astro가 사전 렌더링할 수 있는 모든 페이지는 별도의 설정 없이도 사전 렌더링됩니다. Supabase 기반의 블로그 포스트도 예외는 아닙니다. 이들은 CDN 에지 (edge)에서 캐싱되어 전 세계 어디서나 즉시 로드되며, 크롤러는 첫 번째 요청에서 완성된 형태의 HTML을 읽게 됩니다.

프레임워크 불가지론 (Framework Agnostic) — 아는 것을 그대로 가져오세요

Astro의 가장 과소평가된 기능 중 하나는 React, Vue, Svelte, Solid, 심지어 순수 웹 컴포넌트 (web components)까지 모두 동일한 프로젝트에서 사용할 수 있다는 점입니다.

---
import ReactComponent from './ReactComponent.jsx'
import VueWidget from './VueWidget.vue'
...

React에서 Astro를 배우기 시작한다면, 모든 것을 버릴 필요는 없습니다. 점진적으로 마이그레이션(migrate)할 수 있고, 이미 알고 있는 기술을 사용하면서 성능 계층(performance layer)은 Astro가 처리하도록 맡길 수 있습니다.

언제 Astro를 사용해야 할까요?

Astro는 다음과 같은 경우에 매우 적합합니다:

  • 에이전시 및 기업 웹사이트 - 제가 직접 사용한 용도와 정확히 일치합니다.
  • 마케팅 및 랜딩 페이지 - 정적(static)이며 빠르고, SEO(검색 엔진 최적화)가 매우 중요합니다.
  • CMS 기반 블로그 — Supabase, Sanity 또는 기타 헤드리스 CMS(headless CMS)와 결합하여 사용할 수 있습니다.
  • 포트폴리오 및 개인 사이트 - 첫인상이 중요한 곳들입니다.
  • 문서화 사이트 (Documentation sites) - 콘텐츠 비중이 높고 대부분 정적인 사이트입니다.

Astro는 다음과 같은 경우에 적합한 도구가 아닙니다:

  • 고도로 상호작용하는 앱 (대시보드, 실시간 도구) - Next.js나 SvelteKit이 더 적합합니다.
  • 여러 경로(routes)에 걸쳐 복잡한 클라이언트 상태(client state)가 필요한 앱 - React와 상태 관리자(state manager)를 사용하는 것이 더 합리적입니다.

하지만 콘텐츠 중심의 공개용 사이트라면? Astro는 제가 사용해 본 도구 중 최고입니다.

시작하기 (생각보다 훨씬 간단합니다)

npm create astro@latest my-site
cd my-site
npm install @supabase/supabase-js
...

CLI(명령줄 인터페이스)가 설정, 스타터 템플릿, TypeScript 옵션, 그리고 Tailwind 추가 여부를 단계별로 안내합니다. 2분도 채 되지 않아 로컬에서 실행할 수 있습니다.

그다음 단계는 다음과 같습니다:

  1. src/pages/index.astro를 편집합니다. 이것이 여러분의 홈페이지입니다.
  2. .env 파일에 Supabase 인증 정보를 추가합니다.
  3. 프론트매터(frontmatter)에서 데이터를 가져옵니다 (이는 브라우저가 아닌 빌드 타임(build time)에 실행됩니다).
  4. npm run build를 실행하고 Vercel 또는 Netlify에 배포합니다.

마치며

웹은 비대해졌습니다. 우리는 텍스트 한 단락을 렌더링하기 위해 애플리케이션 런타임(application runtime) 전체를 배포하기 시작했습니다. Astro는 하나의 방향 수정입니다. 성능을 사후 고려 사항이 아닌, 아키텍처 수준에서 진지하게 다루는 프레임워크입니다.

Supabase와 Astro의 조합은 제가 다른 곳에서는 찾지 못했던 최적의 지점(sweet spot)을 제공합니다. 콘텐츠 관리(Content Management)를 위한 적절한 관계형 데이터베이스(Relational Database)를 갖추면서도, 완전히 정적 사이트(Static Site)의 성능 프로필을 유지합니다. Supabase에 데이터를 쓰고 재빌드(Rebuild)를 트리거하면, 모든 페이지는 엣지(Edge)에서 사전 렌더링된 HTML(Pre-rendered HTML)로 제공됩니다. 클라이언트 측 데이터 페칭(Client-side data fetching)도 없고, 하이드레이션 페널티(Hydration penalty)도 없습니다. 크롤러(Crawler)가 기다려야 할 것도 전혀 없습니다.

저에게 Astro로 zimnovate.co.zw를 구축하는 것은 단순한 프로젝트 그 이상이었습니다. 그것은 제가 사용자에게 전달하는 결과물에 대해 생각하는 방식을 바꾸어 놓았습니다. 자바스크립트(JavaScript)의 모든 킬로바이트(Kilobyte)에는 비용이 따릅니다. Astro는 꼭 필요한 경우가 아니라면 그 비용을 지불하지 않도록 매우 쉽게 만들어 줍니다.

Vincent Mugondora — 짐바브웨 하라레에 본사를 둔 AI 네이티브 디지털 제품 스튜디오 Zimnovate의 소프트웨어 엔지니어이자 설립자. 아프리카에 최적화된 소프트웨어 제품을 구축하고 있습니다.

Astro + Supabase 설정에 대해 궁금한 점이 있으신가요? 댓글로 남겨주세요.

AI 자동 생성 콘텐츠

본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.

원문 바로가기
0

댓글

0