왜 아스트로인가?
업데이트: Link
원본 출처 : https://docs.astro.build/en/concepts/why-astro/
Why Astro?
Astro는 빠른 콘텐츠 중심 웹 사이트 구축을 위한 올인원 웹 프레임워크입니다.
다른 웹 프레임워크 대신 Astro를 선택해야 하는 이유는 무엇인가요? 다음은 5가지 핵심 디자인 원칙을 통해 Astro를 개발한 이유, 해결하고자 하는 문제, Astro가 프로젝트 또는 팀에 가장 적합한 선택인 이유를 설명하는 데 도움이 됩니다.
Astro is…
- Content-focused: Astro는 콘텐츠가 풍부한 웹사이트를 위해 설계되었습니다.
- Server-first: 웹사이트는 서버에서 HTML을 렌더링할 때 더 빠르게 실행됩니다.
- Fast by default: Astro에서 느린 웹사이트를 구축하는 것은 불가능합니다.
- Easy to use: 전문가가 아니어도 Astro로 무언가를 만들 수 있습니다.
- Fully-featured, but flexible: 100개 이상의 Astro 통합 기능 중에서 선택할 수 있습니다.
Content-focused
Astro는 콘텐츠가 풍부한 웹사이트 구축을 위해 설계되었습니다. 여기에는 대부분의 마케팅 사이트, 게시 사이트, 문서 사이트, 블로그, 포트폴리오 및 일부 전자상거래 사이트가 포함됩니다.
이와 대조적으로, 대부분의 최신 웹 프레임워크는 웹 애플리케이션을 구축하기 위해 설계되었습니다. 이러한 프레임워크는 로그인한 관리자 대시보드, 받은 편지함, 소셜 네트워크, 할 일 목록, 심지어 Figma 및 Ping과 같은 네이티브와 유사한 애플리케이션 등 브라우저에서 보다 복잡한 애플리케이션과 같은 환경을 구축하는 데 가장 적합합니다.
이것이 바로 Astro에 대해 이해해야 할 가장 중요한 차이점 중 하나입니다. 콘텐츠에 집중하는 Astro의 고유한 특성 덕분에 다른 애플리케이션 중심의 웹 프레임워크에서는 구현하기 어려운 타의 추종을 불허하는 성능 기능을 제공할 수 있습니다.
프로젝트가 두 번째 “애플리케이션” 진영에 속한다면 Astro가 프로젝트에 적합하지 않을 수 있습니다… 그래도 괜찮습니다! Next.js에서 애플리케이션에 초점을 맞춘 Astro의 대안을 확인해 보세요.
Server-first
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의 MPA 아키텍처가 특별한 이유에 대해 자세히 알아보세요.
Fast by default
좋은 성능은 항상 중요하지만 콘텐츠 중심 웹사이트의 경우 특히 더 중요합니다. 성능 저하로 인해 참여도, 전환율, 수익이 감소한다는 것은 이미 잘 알려진 사실입니다. 예를 들어
- 100ms 더 빨라짐 → 전환율 1% 증가 (모비파이, 연간 +$380,000 수익)
- 50% 더 빨라짐 → 12% 더 많은 매출 (오토애니씽)
- 20 % 더 빨라짐 → 10 % 더 많은 전환 (가구 마을)
- 40% 더 빨라짐 → 15% 더 많은 가입 (Pinterest)
- 850ms 더 빨라짐 → 7% 더 많은 전환 (COOK)
- 1초 느려짐 → 사용자 10% 감소 (BBC)
많은 웹 프레임워크에서 개발 중에는 멋지게 보이는 웹사이트를 구축하지만 배포 후에는 매우 느리게 로드되는 경우가 많습니다. 사용자의 휴대폰이나 저성능 기기는 개발자의 노트북 속도와 거의 일치하지 않기 때문에 자바스크립트가 그 원인인 경우가 많습니다.
Astro의 마법은 위에서 설명한 두 가지 가치, 즉 콘텐츠 중심과 서버 우선 MPA 아키텍처를 결합하여 절충점을 찾고 다른 프레임워크가 제공할 수 없는 기능을 제공하는 방식에 있습니다. 그 결과 모든 웹 사이트에서 즉시 사용할 수 있는 놀라운 웹 성능을 제공합니다. 우리의 목표 Astro를 사용하면 느린 웹사이트를 구축하는 것이 거의 불가능합니다.
Astro 웹사이트는 가장 널리 사용되는 React 웹 프레임워크로 구축된 동일한 사이트보다 90% 적은 자바스크립트로 40% 더 빠르게 로드할 수 있습니다. 하지만 저희의 말만 믿지 마세요. 라이언 카르니아토(Solid.js와 Marko의 제작자)가 말문이 막힐 정도로 극찬하는 Astro의 성능을 직접 확인해 보세요.
Easy to use
아스트로의 목표는 모든 웹 개발자가 접근할 수 있도록 하는 것입니다. 아스트로는 기술 수준이나 과거 웹 개발 경험에 관계없이 친숙하고 쉽게 접근할 수 있도록 설계되었습니다.
이미 알고 있는 UI 컴포넌트 언어를 사용할 수 있도록 하는 것부터 시작했습니다. React, Preact, Svelte, Vue, Solid, Lit 및 기타 여러 언어를 모두 지원하여 Astro 프로젝트에서 새로운 UI 컴포넌트를 만들 수 있습니다.
또한 Astro에 훌륭한 컴포넌트 언어가 내장되어 있는지 확인하고 싶었습니다. 이를 위해 자체 ‘.astro’ UI 언어를 만들었습니다. 이 언어는 HTML의 영향을 많이 받았습니다. 유효한 HTML 스니펫은 이미 유효한 Astro 컴포넌트입니다! 하지만 JSX 표현식(React)과 CSS 범위 지정(Svelte 및 Vue)과 같은 다른 컴포넌트 언어에서 차용한 몇 가지 인기 있는 기능도 기본적으로 결합했습니다. 또한 HTML에 가깝기 때문에 점진적 개선 및 일반적인 접근성 패턴을 오버헤드 없이 쉽게 사용할 수 있습니다.
Astro는 다른 UI 프레임워크 및 언어보다 덜 복잡하도록 설계되었습니다. 그 큰 이유 중 하나는 Astro가 브라우저가 아닌 서버에서 렌더링하도록 설계되었기 때문입니다. 즉, 후크(React), 스테이일 클로저(역시 React), 레퍼런스(Vue), 옵저버블(Svelte), atoms, selectors, reactions 또는 derivations에 대해 걱정할 필요가 없다는 뜻입니다. 서버에는 반응성이 없으므로 이러한 모든 복잡성이 사라집니다.
우리가 가장 좋아하는 말 중 하나가 있습니다: “복잡성에 옵트인하라.” 특히 처음 온보딩할 때 개발자 경험에서 “필요한 복잡성”을 최대한 제거하도록 Astro를 설계했습니다. Astro에서 HTML과 CSS만으로 “Hello World” 예제 웹사이트를 구축할 수 있습니다. 그런 다음 더 강력한 것을 구축해야 할 때 새로운 기능과 API를 점진적으로 추가할 수 있습니다.
Fully-featured, but flexible
Astro는 웹사이트 구축에 필요한 모든 것을 갖춘 올인원 웹 프레임워크입니다. Astro에는 컴포넌트 구문, 파일 기반 라우팅, 자산 처리, 빌드 프로세스, 번들링, 최적화, 데이터 가져오기 등이 포함되어 있습니다. Astro의 핵심 기능 세트를 벗어나지 않고도 멋진 웹사이트를 구축할 수 있습니다.
더 많은 제어가 필요하다면 React, Svelte, Vue, Tailwind CSS, MDX, 이미지 최적화 등과 같은 100+ 통합 기능으로 Astro를 확장할 수도 있습니다. 자주 사용하는 CMS 연결 또는 자주 사용하는 호스트에 배포 명령 한 번으로 가능합니다.
Astro는 UI에 구애받지 않으므로 자체 UI 프레임워크(BYOF)를 가져올 수 있습니다. 반응, 프리액트, 솔리드, 스벨트, 뷰, 라이트는 모두 Astro에서 공식적으로 지원됩니다. 동일한 페이지에서 서로 다른 프레임워크를 믹스 앤 매치할 수도 있으므로 향후 마이그레이션이 더 쉬워지고 단일 프레임워크에 프로젝트가 종속되는 것을 방지할 수 있습니다.
댓글남기기