왜 Astro인가?
Astro는 콘텐츠 중심의 빠른 웹사이트를 구축하기 위한 올인원 웹 프레임워크입니다.
다른 웹 프레임워크 대신 Astro를 선택해야 하는 이유는 무엇일까요? 다음은 Astro를 만든 이유, Astro가 해결하고자 하는 문제, Astro가 여러분의 프로젝트나 팀에 가장 적합한 이유를 설명하는 5가지 핵심 설계 원칙입니다.
Astro는…
- 콘텐츠 중심: Astro는 콘텐츠가 풍부한 웹사이트를 위해 설계되었습니다.
- 서버 우선: 웹사이트는 서버에서 HTML을 렌더링할 때 더 빠르게 실행됩니다.
- 뛰어난 성능: Astro로 느린 웹사이트를 구축하는 것은 불가능합니다.
- 뛰어난 사용성: Astro로 무언가를 구축하기 위해 전문가가 될 필요는 없습니다.
- 풍부한 기능과 유연성: 선택할 수 있는 100개 이상의 Astro 통합을 제공합니다.
콘텐츠 중심
Astro는 콘텐츠가 풍부한 웹사이트를 구축하기 위해 설계되었습니다. 여기에는 대부분의 마케팅 사이트, 출판 사이트, 문서 사이트, 블로그, 포트폴리오, 일부 전자상거래 사이트가 포함됩니다.
이와 대조적으로 대부분의 최신 웹 프레임워크는 웹 애플리케이션을 구축하기 위해 설계되었습니다. 이러한 프레임워크는 로그인 관리자 대시보드, 받은 편지함, 소셜 네트워크, 할 일 목록, 심지어 Figma나 Ping과 같은 네이티브 애플리케이션 등 브라우저에서 더 복잡하고 애플리케이션과 같은 경험을 구축하는 데 가장 적합합니다.
이것은 Astro에 대해 이해해야 할 가장 중요한 차이점 중 하나입니다. 콘텐츠에 집중하는 Astro의 독특한 특성 덕분에 Astro는 절충안을 찾아 애플리케이션을 위한 웹 프레임워크가 구현할 수 없는 압도적인 성능을 제공합니다.
서버 우선
Astro는 가능한 한 클라이언트 측 렌더링보다 서버 측 렌더링을 활용합니다. 이는 기존 서버 측 프레임워크(PHP, WordPress, Laravel, Ruby on Rails 등)에서 수십 년간 사용해 온 것과 동일한 접근 방식입니다. 하지만 별도의 서버 측 언어를 배울 필요는 없습니다. Astro를 사용하면 모든 것이 HTML, CSS, JavaScript(또는 원하는 경우 TypeScript)일 뿐입니다.
이 접근 방식은 Next.js, SvelteKit, Nuxt, Remix 등과 같은 다른 최신 JavaScript 웹 프레임워크와 대조됩니다. 이러한 프레임워크에는 전체 웹 사이트의 클라이언트 측 렌더링이 필요하며 주로 성능 문제를 해결하기 위해 서버 측 렌더링이 포함됩니다. Astro의 다중 페이지 앱(MPA) 접근 방식과 달리 이 접근 방식은 단일 페이지 앱(SPA) 이라고 불립니다.
SPA 모델에는 장점이 있지만, 추가적인 복잡성과 성능 저하를 초래합니다. 이러한 절충안은 TTI(상호작용 시간)와 같은 중요한 지표를 포함하여 페이지의 성능을 저하시킵니다. 이는 첫 번째 로드 성능이 필요한 콘텐츠 중심 웹사이트에는 적합하지 않습니다.
기본적으로 뛰어난 성능
좋은 성능은 항상 중요하지만 콘텐츠 중심 웹사이트에는 특히 중요합니다. 성능이 좋지 않으면 참여도, 전환수, 수익이 감소한다는 사실은 잘 알려져 있습니다. 예를 들어:
- 100ms씩 속도 향상 → 전환수 1% 증가 (Mobify, 연간 +$380,000 수익)
- 50% 속도 향상 → 판매량 12% 증가 (AutoAnything)
- 20% 속도 향상 → 전환수 10% 증가 (Furniture Village)
- 40% 속도 향상 → 가입 15% 증가 (Pinterest)
- 850ms 속도 향상 → 전환수 7% 증가 (COOK)
- 1초씩 속도 감소 → 사용자 10% 감소 (BBC)
많은 웹 프레임워크에서는 개발 중 멋진 웹 사이트를 쉽게 구축할 수 있지만 배포 후에는 로드 속도가 매우 느려집니다. 사용자의 휴대폰과 저전력 장치가 개발자의 노트북 속도와 거의 일치하지 않기 때문에 JavaScript가 원인인 경우가 많습니다.
Astro의 마법은 위에서 설명한 두 가지 가치(서버 우선 MPA 아키텍처와 콘텐츠 중심)를 결합하여 다른 프레임워크가 할 수 없는 기능을 제공하고 절충하는 방법에 있습니다. 그 결과, 모든 웹사이트에서 즉시 사용 가능한 놀라운 웹 성능을 얻을 수 있습니다. 우리의 목표는 Astro로 느린 웹사이트를 구축하는 것을 거의 불가능하게 만드는 것입니다.
Astro 웹사이트는 가장 인기 있는 React 웹 프레임워크로 구축된 동일한 사이트보다 90% 적은 JavaScript로 40% 더 빠르게 로드할 수 있습니다. 하지만 우리의 말을 그대로 받아들이지는 마십시오. Ryan Carniato(Solid.js 및 Marko의 창시자)가 Astro의 성능을 보고 놀라는 모습을 지켜보십시오.
뛰어난 사용성
Astro의 목표는 모든 웹 개발자가 접근할 수 있게 만드는 것입니다. Astro는 기술 수준이나 과거 웹 개발 경험에 관계없이 친숙하고 접근하기 쉽게 설계되었습니다.
여러분이 이미 알고 있으며 선호하는 UI 컴포넌트 언어를 지원하는 것부터 시작했습니다. Astro 프로젝트에서 새로운 UI 컴포넌트를 생성할 때 React, Preact, Svelte, Vue, Solid, Lit 및 기타 여러 가지를 모두 사용할 수 있습니다.
또한 Astro에 훌륭한 컴포넌트 언어를 내장하고 싶었습니다. 이를 위해 우리는 HTML의 영향을 많이 받은 자체 .astro UI 언어를 만들었습니다. 유효한 HTML 조각은 이미 유효한 Astro 컴포넌트입니다! 그러나 JSX 표현식(React) 및 기본 CSS 범위 지정(Svelte 및 Vue)과 같이 우리가 선호하는 다른 컴포넌트의 일부 기능을 결합하였습니다. HTML에 가깝기 때문에 오버헤드 없이 점진적인 향상과 일반적인 접근성 패턴을 더 쉽게 사용할 수 있습니다.
Astro는 다른 UI 프레임워크 및 언어보다 덜 복잡하게 설계되었습니다. 그 이유 중 하나는 Astro가 브라우저가 아닌 서버에서 렌더링되도록 설계되었기 때문입니다. 즉, hooks (React), stale closures (또한 React), refs (Vue), observables (Svelte), atoms, selectors, reactions, derivations에 대해 걱정할 필요가 없습니다. 서버에는 반응성이 없으므로 모든 복잡성이 사라집니다.
우리가 가장 좋아하는 말 중 하나는 복잡성에 대한 선택입니다. 특히 처음으로 온보딩할 때 개발자 경험에서 ‘필요한 복잡성’을 최대한 제거하도록 Astro를 설계했습니다. Astro에서 HTML과 CSS만으로 “Hello World” 예시 웹사이트를 구축할 수 있습니다. 그런 다음 더 강력한 것을 구축해야 할 때 점진적으로 새로운 기능과 API를 사용할 수 있습니다.
풍부한 기능과 유연성
Astro는 웹 사이트를 구축하는 데 필요한 모든 기능을 갖춘 올인원 웹 프레임워크입니다. Astro에는 컴포넌트 구문, 파일 기반 라우팅, 자산 처리, 빌드 프로세스, 번들링, 최적화, 데이터 가져오기 등 다양한 기능이 포함되어 있습니다. Astro의 핵심 기능 세트를 벗어나지 않고도 훌륭한 웹사이트를 구축할 수 있습니다.
더 많은 제어가 필요한 경우 React, Svelte, Vue, Tailwind CSS, MDX 등과 같은 100개 이상의 통합으로 Astro를 확장할 수 있습니다. 단 하나의 명령으로 즐겨 사용하는 CMS를 연결 (EN)하거나 즐겨 사용하는 호스트에 배포 (EN)하세요.
Astro는 UI에 구애받지 않습니다. 즉, BYOF(Bring Your Own UI Framework, 원하는 UI 프레임워크 가져오기) 가 가능합니다. React, Preact, Solid, Svelte, Vue, Lit는 모두 Astro에서 공식적으로 지원됩니다. 동일한 페이지에서 다양한 프레임워크를 혼합하고 일치시킬 수도 있으므로 향후 마이그레이션이 더 쉬워지고 프로젝트가 단일 프레임워크에 종속되는 것을 방지할 수 있습니다.
Learn