왜 Astro인가?

Astro는 블로그, 마케팅, 전자상거래 등 콘텐츠 중심 웹사이트를 구축하기 위한 웹 프레임워크입니다. Astro는 JavaScript 오버헤드와 복잡성을 줄이기 위해 새로운 프런트엔드 아키텍처를 개척한 프레임워크로 가장 잘 알려져 있습니다. 빠르게 로드되고 뛰어난 SEO를 갖춘 웹사이트가 필요하다면 Astro가 당신을 위한 것입니다.

특징

Astro는 올인원 웹 프레임워크입니다. 여기에는 웹사이트를 만드는 데 필요한 모든 것이 내장되어 있습니다. 또한 정확한 사용 사례와 요구 사항에 맞게 프로젝트를 맞춤설정하는 데 사용할 수 있는 수백 가지의 통합 및 API 후크를 제공합니다.

일부 주요 내용은 다음과 같습니다

아일랜드: 콘텐츠 중심 웹사이트에 최적화된 컴포넌트 기반 웹 아키텍처입니다.
UI에 구애받지 않음: React, Preact, Svelte, Vue, Solid, Lit, HTMX, 웹 컴포넌트 등을 지원합니다.
서버 우선: 방문자의 장치에서 값비싼 렌더링을 제거합니다.
기본적으로 Zero JS: 사이트의 속도를 느리게 만드는 클라이언트 측 JavaScript가 적습니다.
콘텐츠 컬렉션: Markdown 콘텐츠에 대한 TypeScript 타입 안전성을 구성, 검증 및 제공합니다.
사용자 정의 가능: Tailwind, MDX 등 수백 가지 통합을 제공합니다.

설계 원칙

다음은 Astro를 구축한 이유, Astro가 해결해야 할 문제, Astro가 여러분의 프로젝트나 팀에 가장 적합한 선택이 될 수 있는 이유를 설명하는 데 도움이 되는 5가지 핵심 설계 원칙입니다.

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 모델에는 장점이 있습니다. 그러나 이는 추가적인 복잡성과 성능 저하를 초래합니다. 이러한 절충안은 페이지 성능 - Time to Interactive (TTI)과 같은 중요한 지표에 해를 끼치며, 이는 첫 번째 로드 성능이 필수적인 콘텐츠 중심 웹사이트에는 별로 의미가 없습니다.

Astro의 서버 우선 접근 방식을 사용하면 꼭 필요한 경우에만 클라이언트 측 렌더링을 선택할 수 있습니다. 클라이언트에서 실행되는 UI 프레임워크 컴포넌트를 추가하도록 선택할 수 있습니다. 선택한 페이지 전환 및 애니메이션을 보다 세밀하게 제어하려면 Astro의 view transitions router를 활용할 수 있습니다. 사전 렌더링되거나 주문형인 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 웹 프레임워크로 구축된 동일한 사이트보다 90% 적은 JavaScript로 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, Lit 및 웹 컴포넌트를 포함한 기타 컴포넌트는 Astro 프로젝트에서 UI 컴포넌트를 작성하는 데 모두 지원됩니다.

Astro는 다른 UI 프레임워크 및 언어보다 덜 복잡하도록 설계되었습니다. 그 이유 중 하나는 Astro가 브라우저가 아닌 서버에서 렌더링되도록 설계되었기 때문입니다. 즉, 후크(React), stale closures (또한 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 스레드를 여세요. 안전한 피드백과 건설적인 비판을 위해 Astro 사이트, 블로그 게시물, 비디오는 물론 진행 중인 작업까지 공유하려면 전용 #showcase 채널을 방문하세요. 주간 커뮤니티 통화, “Talking and Doc’ing”, API/bug bashes 등 정기적인 라이브 이벤트에 참여하세요.

오픈 소스 프로젝트로서 우리는 모든 경험 수준의 커뮤니티 구성원의 모든 유형과 규모의 기여를 환영합니다. Astro의 미래를 형성하기 위한 로드맵 토론에 여러분을 초대합니다. 핵심 코드베이스, 컴파일러, 문서, 언어 도구, 웹 사이트 및 기타 프로젝트에 수정 사항과 기능을 제공하길 바랍니다.