왜 Astro인가?

Astro는 블로그, 마케팅, 이커머스 등 콘텐츠 중심 웹사이트를 구축하기 위한 웹 프레임워크입니다. Astro는 JavaScript 오버헤드와 복잡성을 줄이기 위해 새로운 프런트엔드 아키텍처를 개척한 프레임워크로 가장 잘 알려져 있습니다. 빠른 로딩 속도와 뛰어난 SEO를 갖춘 웹사이트가 필요하다면 Astro가 해답입니다.

특징

Astro는 올인원 웹 프레임워크입니다. 여기에는 웹사이트 제작에 필요한 모든 것이 기본적으로 포함되어 있습니다. 또한 프로젝트를 특정 사용 사례와 필요에 맞게 사용자 정의할 수 있도록 수백 가지의 다양한 통합 및 API 훅을 제공합니다.

주요 특징은 다음과 같습니다.

아일랜드: 콘텐츠 중심 웹사이트에 최적화된 컴포넌트 기반 웹 아키텍처
UI 독립적: React, Preact, Svelte, Vue, Solid, HTMX, 웹 컴포넌트 등 지원
서버 우선: 비용이 많이 드는 렌더링 작업을 방문자의 장치에서 제거
기본적으로 JavaScript 최소화: 사이트 속도를 저하시키는 클라이언트 측 JavaScript 최소화
콘텐츠 컬렉션: Markdown 콘텐츠를 구성하고, 검증하며, TypeScript 타입 안정성을 제공
사용자 정의 가능: Tailwind, MDX 및 수백 가지 통합 기능 선택 가능

디자인 원칙

Astro를 만든 이유, 해결하고자 하는 문제, 그리고 Astro가 프로젝트 또는 팀에 최고의 선택이 될 수 있는 이유를 설명하는 다섯 가지 핵심 디자인 원칙은 다음과 같습니다.

Astro는…

콘텐츠 중심: Astro는 콘텐츠를 돋보이도록 설계되었습니다.
서버 우선: 웹사이트는 서버에서 HTML을 렌더링할 때 더 빠르게 실행됩니다.
기본적으로 빠름: Astro에서 느린 웹사이트를 만드는 것은 불가능해야 합니다.
사용하기 쉬움: Astro로 무언가를 만들기 위해 전문가가 될 필요는 없습니다.
개발자 중심: 성공에 필요한 리소스를 갖추어야 합니다.

콘텐츠 중심

Astro는 콘텐츠가 풍부한 웹사이트를 구축하기 위해 설계되었습니다. 마케팅 사이트, 게시 사이트, 문서 사이트, 블로그, 포트폴리오, 랜딩 페이지, 커뮤니티 사이트, 이커머스 사이트 등이 이에 포함됩니다. 콘텐츠를 보여주려면 독자에게 빠르게 도달해야 합니다.

반대로, 대부분의 최신 웹 프레임워크는 웹 애플리케이션을 구축하기 위해 설계되었습니다. 이러한 프레임워크는 로그인된 관리자 대시보드, 받은 편지함, 소셜 네트워크, 할 일 목록, 심지어 네이티브와 유사한 애플리케이션 (Figma 및 Ping 등)과 같이 브라우저에서 더 복잡한 애플리케이션과 같은 경험을 구축하는 데 탁월합니다. 그러나 이러한 복잡성으로 인해 콘텐츠를 제공할 때 뛰어난 성능을 제공하는 데 어려움을 겪을 수 있습니다.

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 (Time to Interactive)와 같은 중요한 지표에 부정적인 영향을 미칩니다. 이는 초기 로딩 성능이 중요한 콘텐츠 중심 웹사이트에는 적합하지 않습니다.

Astro의 서버 우선 접근 방식을 사용하면 필요한 경우에만 클라이언트 측 렌더링을 선택할 수 있습니다. 클라이언트에서 실행되는 UI 프레임워크 컴포넌트를 추가할 수 있습니다. 또한 특정 페이지 전환 및 애니메이션을 세밀하게 제어하기 위해 Astro의 뷰 전환 라우터를 활용할 수 있습니다. Astro의 서버 우선 렌더링 (사전 렌더링 또는 온디맨드 렌더링)은 향상 및 확장 가능한 고성능 기본값을 제공합니다.

기본적으로 빠름

좋은 성능은 항상 중요하지만, 특히 콘텐츠 표시에 따라 성공 여부가 결정되는 웹사이트의 경우 매우 중요합니다. 성능이 좋지 않으면 참여도, 전환율 및 수익이 감소한다는 사실이 잘 입증되어 있습니다. 예를 들어:

100ms 빨라질 때마다 전환율 1% 증가 (Mobify, 연간 수익 +$380,000 증가)
50% 빨라질 때마다 매출 12% 증가 (AutoAnything)
20% 빨라질 때마다 전환율 10% 증가 (Furniture Village)
40% 빨라질 때마다 가입률 15% 증가 (Pinterest)
850ms 빨라질 때마다 전환율 7% 증가 (COOK)
1초 느려질 때마다 사용자 10% 감소 (BBC)

많은 웹 프레임워크에서 개발 중에는 멋져 보이는 웹사이트를 쉽게 만들 수 있지만, 배포 후에는 로딩 속도가 매우 느려지는 경우가 많습니다. JavaScript는 종종 문제의 원인으로 지목되는데, 많은 휴대폰과 저사양 기기는 개발자의 노트북 속도에 미치지 못하는 경우가 많기 때문입니다.

Astro의 핵심은 위에서 설명한 두 가지 가치, 즉 콘텐츠 중심과 서버 우선 아키텍처를 결합하여 다른 프레임워크에서는 불가능한 절충안을 만들고 기능을 제공하는 방식에 있습니다. 그 결과 모든 웹사이트에서 즉시 놀라운 웹 성능을 얻을 수 있습니다. 우리의 목표는 Astro로 느린 웹사이트를 만드는 것이 거의 불가능하도록 하는 것입니다.

Astro 웹사이트는 가장 인기 있는 React 웹 프레임워크로 만든 동일한 사이트보다 JavaScript를 90% 적게 사용하여 40% 더 빠르게 로드할 수 있습니다. 하지만 저희의 말을 믿지는 마세요. Astro의 성능이 Ryan Carniato (Solid.js 및 Marko 제작자)를 말문 막히게 만드는 것을 보세요.

사용하기 쉬움

Astro의 목표는 모든 웹 개발자가 접근할 수 있도록 하는 것입니다. Astro는 웹 개발 기술 수준이나 과거 경험에 관계없이 친숙하고 접근하기 쉽도록 설계되었습니다.

.astro UI 언어는 HTML의 상위 집합입니다. 유효한 HTML은 유효한 Astro 템플릿 구문입니다! 따라서 HTML을 작성할 수 있다면 Astro 컴포넌트를 작성할 수 있습니다! 또한 기본적으로 JSX 표현식 (React)과 CSS 범위 지정 (Svelte 및 Vue)과 같은 다른 컴포넌트 언어에서 빌려온 몇 가지 유용한 기능도 결합되어 있습니다. HTML과 이렇게 유사하기 때문에 오버헤드 없이 점진적 향상 및 일반적인 접근성 패턴을 더 쉽게 사용할 수 있습니다.

또한 이미 알고 있는 가장 좋아하는 UI 컴포넌트 언어를 사용할 수 있고, 이미 가지고 있는 컴포넌트도 재사용할 수 있습니다. 웹 컴포넌트를 포함한 React, Preact, Svelte, Vue, Solid 등은 모두 Astro 프로젝트에서 UI 컴포넌트 작성을 위해 지원됩니다.

Astro는 다른 UI 프레임워크 및 언어보다 덜 복잡하도록 설계되었습니다. 큰 이유 중 하나는 Astro가 브라우저가 아닌 서버에서 렌더링하도록 설계되었기 때문입니다. 즉, 훅 (React), 오래된 클로저 (React), refs (Vue), observables (Svelte), atoms, selectors, reactions 또는 derivations에 대해 걱정할 필요가 없습니다. 서버에는 반응성이 없으므로 이러한 모든 복잡성이 사라집니다.

우리가 가장 좋아하는 말 중 하나는 복잡성을 선택적으로 추가하는 것입니다. Astro는 개발자 경험, 특히 처음 시작할 때 가능한 한 많은 “필수 복잡성”을 제거하도록 설계되었습니다. HTML과 CSS만으로 Astro에서 “Hello World” 예제 웹사이트를 만들 수 있습니다. 그런 다음 더 강력한 기능을 구축해야 할 때 필요에 따라 새로운 기능과 API를 점진적으로 추가할 수 있습니다.

개발자 중심

우리는 Astro가 사람들이 즐겨 사용하는 프로젝트가 될 때만 성공적인 프로젝트라고 굳게 믿습니다. Astro는 개발하는 동안 여러분을 지원하는 데 필요한 모든 것을 갖추고 있습니다.

Astro는 터미널을 여는 순간부터 훌륭한 CLI 경험, 구문 강조를 위한 공식 VS Code 확장, TypeScript 및 Intellisense, 그리고 수백 명의 커뮤니티 기여자가 적극적으로 관리하고 14개 언어로 제공되는 문서와 같은 개발자 도구에 투자합니다.

Discord의 환영하고 존중하며 포용적인 커뮤니티는 지원, 동기 부여 및 격려를 제공할 준비가 되어 있습니다. #support 스레드를 열어 프로젝트에 대한 도움을 받으세요. 전용 #showcase 채널을 방문하여 Astro 사이트, 블로그 게시물, 비디오, 진행 중인 작업까지 안전한 피드백과 건설적인 비판을 공유하세요. 주간 커뮤니티 콜인 “Talking and Doc’ing” 및 API/버그 배쉬와 같은 정기적인 라이브 이벤트에 참여하세요.

오픈 소스 프로젝트로서 우리는 모든 경험 수준의 커뮤니티 구성원의 모든 유형과 규모의 기여를 환영합니다. Astro의 미래를 만들어갈 로드맵 논의에 참여해 주세요. 핵심 코드베이스, 컴파일러, 문서, 언어 도구, 웹사이트 등 다양한 프로젝트에 수정 사항과 기능을 기여해 주시길 바랍니다.

기여하기 커뮤니티 후원하기