메타 프레임워크: 프레임워크를 위한 프레임워크

웹 개발 이야기를 하다 보면 메타 프레임워크(meta-framework)라는 말을 한 번쯤 써 보셨거나 들어 보셨을 텐데요. 자주 쓰는 말인데도 막상 메타 프레임워크가 뭔지 설명하려고 하면 쉽지 않습니다.

이 글에서는 메타 프레임워크가 전통적인 프레임워크와 어떻게 다르며 왜 필요한지 알아보고, 지금 어떤 메타 프레임워크들이 쓰이고 있는지 살펴보겠습니다.

메타 프레임워크의 특징

전통적인 프레임워크라고 하면 보통 어떤 프로그래밍 언어를 함께 떠올리게 되는데요. 이런 프레임워크는 언어 자체가 제공하지 않는 기능을 보완하면서 언어와 함께 발전해 왔습니다.

예를 들어 Java에는 거의 안 쓰이는 분야가 없을 정도인 Spring이 있고, Ruby에는 웹 애플리케이션 개발에 특화된 Ruby on Rails가 있습니다. Python에는 비슷한 성격의 Django가, PHP에는 Laravel이 있죠.

하지만 거대한 오픈 소스 생태계를 자랑하는 JavaScript에서는 이렇게 언어를 대표하는 프레임워크를 떠올리기 어렵습니다. 대신 여러 라이브러리와 프레임워크를 조합해서 쓰는 경우가 많고, 이런 경향은 프론트엔드 쪽에서 특히 두드러집니다.

React, Vue, Angular, Svelte, Solid, Qwik 등 프론트엔드에는 정말 다양한 UI 프레임워크가 있는데요. 프레임워크를 위한 프레임워크라고도 불리는 메타 프레임워크는 이런 UI 프레임워크 위에서 웹 애플리케이션을 만드는 데 필요한 기본 토대를 제공합니다.

메타 프레임워크의 필요성

JavaScript로 웹 프로젝트를 할 때 같은 용도의 라이브러리가 너무 많아서 고르는 데 지친다는 분이 많은데요. 가장 기본인 패키지 매니저만 해도 npm, Yarn, pnpm, Bun이 있고, 번들러도 Webpack, Vite, Turbopack, Rspack 등으로 다양합니다. 테스트 하나만 하려 해도 Jest, Mocha, Vitest를 비롯한 수많은 도구가 있고, 이것들을 조합해서 써야 하는 경우도 많죠.

이 중에서 프로젝트에 맞는 것을 골라 서로 잘 동작하도록 설정하는 일은 높은 숙련도가 필요하고, 나중에 되돌리기도 쉽지 않은 결정입니다. 렌더링(rendering)을 맡는 UI 프레임워크를 고르는 건 시작일 뿐이고, 실제 애플리케이션을 만들려면 라우팅, 데이터 페칭(data fetching), 스타일링, 테스트, 배포까지 여전히 많은 선택과 설정이 필요합니다. 이 중 라우팅만 해도 프레임워크마다 방식이 꽤 다른데, 웹 프레임워크 라우팅 글에서 비교해 봤습니다.

메타 프레임워크는 기반이 되는 UI 프레임워크를 빼고 나머지 선택을 대신해 줍니다. 그래서 많은 메타 프레임워크가 스스로를 주관적(opinionated)이라고 소개하는데요. 주관이 없으면 이 모든 선택을 대신해 줄 수 없을 테니까요.

또한 메타 프레임워크는 UI 프레임워크의 모범 사례(best practice)로 여겨지는 관행을 구조로 강제하기 때문에, 자연스럽게 좋은 구조의 코드를 쓰게 됩니다. 많이 쓰이는 메타 프레임워크라면 새로 합류한 개발자의 학습 곡선(learning curve)도 낮춰 줍니다.

정리하면 메타 프레임워크는 개발 생산성을 높여 주는 웹 개발 도구입니다. 개발자는 비즈니스 로직에 집중할 수 있고, 그 대가로 자유도를 어느 정도 내려놓게 됩니다.

React 진영의 메타 프레임워크

React는 점유율이 압도적으로 높은 만큼 메타 프레임워크도 가장 많습니다.

가장 대표적인 건 역시 Next.js인데요. 초창기에는 주로 서버 사이드 렌더링(SSR)을 위해 쓰였지만, 지금은 정적 생성과 서버 컴포넌트(Server Components), 부분 사전 렌더링(Partial Prerendering)까지 아우르는 범용 웹 프레임워크가 되었습니다. 번들러도 자체 개발한 Turbopack을 쓰며, Next.js 16부터는 개발과 빌드 모두 Turbopack이 기본입니다.

한때 정적 사이트 생성 쪽은 GraphQL로 콘텐츠를 모으는 Gatsby가 잘나갔는데요. Next.js가 정적 생성을 지원하면서 경쟁에서 밀렸고, 2023년 Netlify에 인수된 뒤로는 개발 활동이 크게 줄었습니다.

Remix도 빼놓을 수 없는데요. 웹 표준을 중시하는 설계로 주목받다가, 2024년에 React Router와 합쳐졌습니다. 그래서 지금은 React Router v7의 프레임워크 모드가 Remix의 뒤를 잇고 있습니다. 익숙한 라우터 라이브러리가 그대로 메타 프레임워크가 된 셈이라, 기존 React Router 사용자라면 가장 자연스럽게 옮겨 갈 수 있는 선택지입니다.

최근 가장 눈에 띄는 신예는 TanStack Start입니다. TanStack Query와 TanStack Table로 잘 알려진 TanStack 팀이 만든 풀스택 프레임워크로, 2026년 10월 1.0이 정식 출시됐습니다. TanStack Router를 기반으로 경로와 검색 파라미터, 데이터 로딩까지 타입으로 안전하게 다룰 수 있다는 점이 가장 큰 특징인데요. Vite 위에서 동작하고 특정 호스팅 플랫폼에 묶이지 않아서, Next.js가 Vercel에 너무 맞춰져 있다고 느끼는 개발자들에게 대안으로 떠올랐습니다. 이름은 React 진영에 넣었지만 Solid도 지원합니다.

서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)은 SPA, SSG, SSR 비교 글에서 자세히 다루고 있습니다.

다른 진영의 메타 프레임워크

React를 따라잡아야 하는 다른 UI 프레임워크들은 처음부터 메타 프레임워크를 함께 내놓는 경우가 많은데요.

Vue에는 Nuxt라는 탄탄한 메타 프레임워크가 있고, Svelte에는 SvelteKit이 있습니다. 둘 다 각 진영에서 사실상 표준으로 쓰입니다.

그 밖에도 JSX 기반의 개발자 경험을 제공하면서 세밀한 반응성으로 성능을 끌어올린 Solid와 Qwik에는 각각 SolidStart와 Qwik City라는 메타 프레임워크가 있습니다.

이제는 메타 프레임워크 없이 새 UI 프레임워크를 내놓기가 어려울 정도입니다. 그야말로 메타 프레임워크 춘추전국시대라고 해도 과언이 아니죠.

중립 메타 프레임워크

이렇게 많은 메타 프레임워크 중에서도 아일랜드 아키텍처(islands architecture)라는 독특한 설계로 눈에 띄는 Astro가 있습니다. 특정 UI 프레임워크만 지원하는 다른 메타 프레임워크와 달리, Astro는 React, Vue, Svelte, Solid, Preact 등 거의 모든 UI 프레임워크를 한 프로젝트에서 함께 쓸 수 있습니다. 페이지는 기본적으로 JavaScript 없는 HTML로 만들고 상호작용이 필요한 부분만 골라 하이드레이션(hydration)하는 방식이라, 블로그나 문서처럼 콘텐츠가 중심인 사이트에서 특히 많이 쓰입니다.

요즘의 흐름: Vite와 플랫폼

최근 메타 프레임워크들을 보면 두 가지 흐름이 눈에 띕니다.

우선 Vite가 사실상 공통 기반이 되었습니다. Nuxt, SvelteKit, Astro, SolidStart, React Router, TanStack Start가 모두 Vite 위에서 동작하는데요. 개발 서버와 플러그인 생태계를 공유하니, 메타 프레임워크끼리의 차이는 점점 라우팅과 데이터 로딩, 렌더링 전략 쪽으로 좁혀지고 있습니다. 자체 번들러를 고집하는 Next.js가 오히려 예외에 가깝습니다.

또 하나는 메타 프레임워크와 호스팅 플랫폼의 관계입니다. 메타 프레임워크 간 경쟁이 치열해지면서 클라우드 회사들의 투자도 늘었는데요. Next.js를 만든 Vercel은 2021년에 Svelte를 만든 Rich Harris를 영입했고, Vercel의 경쟁사인 Netlify는 Gatsby를 인수했습니다. Shopify는 2022년에 Remix를 인수했죠.

반대로 특정 플랫폼에 묶이지 않으려는 움직임도 있습니다. TanStack Start나 React Router처럼 어디에나 배포할 수 있는 메타 프레임워크가 인기를 얻고 있고, Cloudflare는 Next.js API를 Vite로 다시 구현한 Vinext를 내놓기도 했습니다. 어떤 메타 프레임워크를 고르느냐가 곧 어디에 배포하느냐와 연결되는 만큼, 이제는 배포 플랫폼까지 함께 고려해서 고르는 게 좋습니다.

마치며

지금까지 메타 프레임워크가 무엇이고 전통적인 프레임워크와 어떻게 다르며 왜 필요한지 알아보았습니다. 그리고 UI 프레임워크별로 어떤 메타 프레임워크가 있고, 요즘 어떤 흐름으로 바뀌고 있는지도 살펴보았습니다.

개인적으로 이렇게 많은 메타 프레임워크가 쏟아져 나오는 건 개발자로서 반길 만한 일이라고 생각합니다. 경쟁에서 살아남으려면 결국 더 좋은 개발자 경험을 제공하려고 노력할 수밖에 없을 테니까요.

다양한 프레임워크에 대한 개발자들의 생각이 궁금하다면 State of JS 설문 결과를 참고해 보세요.