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

최근에 웹 개발에 대해서 얘기할 때 메타 프레임워크(Meta Framework)라는 용어를 한 번쯤 써보셨거나 적어도 들어보셨을텐데요. 하지만 자주 쓰이는 용어임에도 불구하고 막상 메타 프레임워크가 뭔지 설명해보려고 하면 쉽지 않은 것 같죠?

이번 글에서는 요즘 유행하는 메타 프레임워크가 전통적인 프레임워크와 어떻게 다르며 왜 필요한지에 대해서 알아보았습니다. 그리고 현재 시장에 어떤 메타 프레임워크가 주목받고 있는지도 간단히 살펴보겠습니다.

메타 프레임워크의 특징

우리가 기존에 프레임워크를 생각할 때는 보통 어떤 프로그래밍 언어를 떠올리기 되는데요. 이렇게 전통적인 프레임워크는 프로그래밍 언어 수준에서 제공되지 않는 기능들을 보완하는 형태로 언어와 함께 발전해왔습니다.

예를 들어서, Java에는 Spring이라는 거의 안 쓰이는 분야가 없을 정도인 절대적인 프레임워크가 있으며, Ruby에는 Ruby on Rails라는 웹 애플리케이션 개발에 특화된 유명한 프레임워크가 있습니다. Python에도 Django라는 비슷한 성격의 프레임워크가 있으며, PHP에는 Laravel이라는 프레임워크가 있죠.

하지만 어마어마한 오픈 소스 생태계를 자랑하는 자바스크립트에서는 이렇게 언어를 대표할 만한 프레임워크를 떠올리기 힘듭니다. 대신 자바스크립트에서는 여러가지 라이브러리와 프레임워크를 조합해서 쓰는 경우가 많으며 특히 이러한 경향은 프론트엔드 웹 개발 쪽에서 더 두드러지게 나타나죠.

React, Angular, Vue.js, Svelte, Solid.js, Qwik, Alpine.js 등 프론트엔드 쪽에는 정말로 다양한 UI 프레임워크가 있는데요. 프레임워크를 위한 프레임워크라고도 불리는 메타 프레임워크는 주로 이러한 UI 프레임워크를 사용해서 효과적으로 웹 애플리케이션 개발을 할 수 있도록 기본 토대를 제공하는 성격을 띠게 됩니다.

메타 프레임워크의 필요성

자바스크립트로 웹 프로젝트를 할 때 동일한 용도로 쓰이는 비슷한 라이브러리가 너무 많아서 선택하시는데 피로감을 토로하시는 분이 많은데요.

정말 기본 중 기본인 패키지 매니저만 해도 npm, Yarn, pnpm 등이 있으며, 번들링(bundling) 도구도 Webpack, Parcel, Vite, Turbopack 등 다양합니다. 테스트 하나만 하려고 해도 Jest, Mocha, Jasmine, Chai, Expect, Sinon, Testdouble…에 최근에 등장한 Vitest까지 수도 없이 많은 프레임워크와 라이브러리가 있는데, 게다가 예네들을 조합해서 써야하는 경우도 많죠.

이렇게 많은 프레임워크나 라이브러리 중에서 자신의 프로젝트에 적합한 녀석들을 골라서 서로 잘 작동하도록 설정해주는 작업은 기술적으로 높은 숙련도를 필요하며 추후에 번복하기 쉽지 않은 중요한 의사 결정입니다. 즉, 랜더링(rendering)을 결정하는 UI 프레임워크를 선택하는 것은 중요하지만 단지 시작일 뿐입니다. 실제 웹 애플리케이션을 개발하는데는 랜더링 뿐만 아니라 라우팅, 데이터 패칭(fetching), 스타일링, 테스팅, 배포 등이 필요하면 이를 위한 여전히 많은 선택과 설정이 필요합니다.

메타 프레임워크는 이러한 어려운 결정이나 복잡한 설정을 피할 수 있도록 기반이 되는 UI 프레임워크(ex. React, Vue.js, Svelte)를 빼놓고 다른 모든 프레임워크와 라이브러리를 모조리 선택해줍니다. 그래서 많은 메타 프레임워크는 자기가 주관적(opinionated)이라고 얘기합니다. 주관적이지 않으면 이러한 모든 선택을 대신 해줄 수가 없을테니까요.

메타 프레임워크는 또한 기반 UI 프레임워크를 사용할 때 모범 사례(Best Practice)로 여겨지는 표준이나 관행들을 강제하기 때문에 자연스럽게 좋은 구조의 코드를 작성할 가능성이 커집니다. 그리고 해당 메타 프레임워크가 이미 많이 사용되고 있다면 개발 팀에 새롭게 참여하는 개발자의 학습 곡선(Learning Curve)도 낮춰줄 수 있습니다.

정리해보자면 메타 프레임워크는 다양한 측면에서 개발 생산성을 극대화시킬 수 있는 효율적인 웹 개발 도구라고 볼 수 있겠습니다. 메타 프레임워크를 사용하면 개발자들은 비즈니스 로직을 작성하는데만 집중할 수 있으며 그에 대한 댓가로 자유도를 어느 정도 희생하게 됩니다.

React 진영의 메타 프레임워크

2022년 Sate of JS에 따르면 무려 80%가 넘는 설문 참여자가 React를 사용한다고 답변하였는데요. React의 시장 점유율이 압도적으로 높은 만큼 메타 프레임워크 수도 많습니다.

React의 가장 대표적인 메타 프레임워크은 뭐니뭐니 해도 벌써 버전 13인 Next.js일 텐데요. 초창기에는 SSR(Server-Side Rendering) 즉, 서버 측에서 웹페이지를 랜더링하기 위해서 주로 사용되었으나 지속적인 기능 업데이트를 통해 범용 웹 개발 프레임워크로 거듭나고 있습니다.

Next.js가 SSR 쪽을 주름 잡았다면 SSG(Static Site Generator) 즉, 정적으로 사이트 생성하는 쪽은 GraphQL을 사용하는 Gatsby가 잘 나갔는데요. 최근에는 Next.js도 SSG를 지원하면서 Gastby가 경쟁에서 밀리는 분위기인 것 같습니다.

뿐만 아니라 Remix라는 처음에는 유료였으나 최근에 무료화되어 좋은 반응을 얻고 있는 메타 프레임워크도 있습니다.

SSR(Server-side rendering)과 SSG(Static Site Generator)에 대해서는 관련 포스팅에서 자세히 다루고 있으니 참고 바랍니다.

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

React를 따라 잡아야하는 입장에 있는 다른 UI 프레임워크는 아예 처음부터 전략적으로 메타 프레임워크를 함께 미는 경우가 많은데요.

예를 들어, 한 때 React를 자리를 넘보던 Vue.js에는 Nuxt.js라는 탄탄한 메타 프레임워크가 있고요. React의 대항마로 급부상하고 있는 Svelte는 SvelteKit라는 준수한 메타 프레임워크를 보유하고 있습니다.

그 밖에도 React와 유사한 JSX 기반의 개발자 경험을 제공하면서 Svelte처럼 컴파일러를 사용하여 훨씬 우수한 성능을 보여주는 Solid와 Qwik은 각각 SolidStart와 Qwik City라는 메타 프레임크를 가지고 있습니다.

이런 추세라면 이제 메타 프레임워크 없이는 새로운 UI 프레임워크를 출시하기도 어려울 정도라고 할 수 있겠죠? 메타 프레임워크 춘추전국시대라고 해도 과언이 아닐 정도로 많은 메타 프레임워크가 출시되고 있습니다.

중립 메타 프레임워크

이렇게 범람하는 메타 프레임워크 중에서도 소위 Islands Architecture라고 불리는 독특한 설계로 눈에 띄는 Astro라는 메타 프레임워크가 있습니다. Astro는 특정 UI 프레임워크만 지원하는 여타 메타 프레임워크에 다르게 React, Vue.js, Svelte, Solid, Preact, Lit 등 거의 모든 UI 프레임워크와 사용이 가능합니다.

Astro에 대해서는 그 밖에도 흥미로운 부분이 많아서 추후 기회가 되면 별도의 포스팅으로 다루어보겠습니다.

메타 프레임워크 전쟁

오랜 기간동안 UI 프레임워크의 최강자로 우뚝 서 있는 React는 메타 프레임워크를 통해서 기존 사용자의 이탈을 최소화하려는 반면에, 다른 UI 프레임워크들은 메타 프레임워크를 앞세워 React의 자리를 위협하려고 하는 구도가 재미있지 않나요?

이렇게 메타 프레임워크 간에 경쟁이 치열해지면서 대형 자본의 투자를 받는 사례가 늘고 있습니다. 예를 들어, 기존에 Next.js를 보유하고 있던 Vercel이라는 회사가 Svelte를 추가로 인수하였고, Gatsby는 Vercel의 경쟁 업체인 Netlify가 최근에 인수하였습니다. 뿐만 아니라 Shopify는 Remix를 인수하면서 경쟁이 더 가속화되고 있는 분위기입니다.

마치면서

지금까지 메타 프레임워크가 무엇이고 기존의 프레임워크와 어떻게 다르며 왜 필요한지에 대해서 알아보았습니다. 그리고 현재 시장에 UI 프레임워크 별로 어떤 메타 프레임워크가 나와있는지에 간단히 살펴보았습니다.

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

본 포스팅이 메타 프레임워크에 대한 여러분의 이해도를 높이시는데 작은 도움이 되길바라며 그럼 이만 줄이겠습니다.