"리액트, 뷰, 앵귤러…" 최고의 자바스크립트 프레임워크는?

소프트웨어 구축에서 가장 어려운 부분은 기술 스택 선택이다. 일을 시작하려면 툴이나 프레임워크를 선택해야 하지만, 한동안 일을 하며 다뤄보지 않고는 실제 기능이 어느 정도인지 알 길이 없다. 프로토타이핑은 이 딜레마에 별 도움이 되지 않는다. 그래서 과거에 사용했던 익숙한 기술을 고수하는 경향이 있지만 이 경우 중요한 혁신을 놓치는 등의 단점도 분명하다.
 
이번 기사에서는 현 시점의 주요 프론트엔드 자바스크립트 프레임워크를 대략적으로 살펴보고 비교한다. 먼저 전체적인 현황을 알아보고 새로운 프레임워크가 필요할 수도 있는 이유를 논의한 다음, 목록의 10가지 프레임워크를 세부적으로 살펴본다. 참고를 위해 다운로드할 수 있는 기능 비교표도 포함돼 있다.
 

개발자의 딜레마

프론트엔드 웹 개발 프레임워크 선택이 개발자에게 가장 어려운 의사 결정인 데는 다음의 두 가지 이유가 있다.

• 선택 가능한 뛰어난 프레임워크가 너무 많다.
• 이 분야는 혁신의 속도가 빠르다.

 
마치 위의 크기는 한정돼 있는데 맛있어 보이는 음식이 너무 많아 그냥 지나치기 어려운 축제에 와있는 것과 같다.
 

자바스크립트 프레임워크 인기 순위

이 분야의 전체적인 현황을 보자. 표 1은 가장 인기 있는 반응형 프레임워크 목록이다. 인기도 순위를 정하는 데 사용할 수 있는 지표는 많다. 이 기사에서는 현재 시점 기준으로 NPM의 주간 다운로드 지표를 사용했다. (링크를 클릭해서 각 프레임워크에 대해 더 자세히 알아보거나 NPM 다운로드 페이지를 방문할 수 있다.)
 

프레임워크	NPM 주간 다운로드
리액트	1,293만 6,453
뷰 / 뷰3	251만 3,494
앵귤러(CLI)	174만 9,234
프리액트	120만 1,728
릿	86만 5,826
스벨트	50만 2,888
알파인JS	19만 2,740
솔리드JS	11만 5,257
HTMZ	2만238
퀵	7,527

참고로 여기서는 순수 프론트엔드 프레임워크만 다룬다. 프로젝트 중에는 서버 측 렌더링과 같은 백엔드 기능을 추가하는 넥스트(Next), 스벨트킷(SvelteKit)과 같은 풀스택 프레임워크가 포함된 경우가 많다. 이와 같은 기능도 선택에 영향을 미칠 수 있다. 기사에서는 이러한 서버 측 프레임워크도 프론트엔드와 함께 고려할 것이다.
 
인기가 품질을 완벽하게 대변하는 지표는 아니지만, 그 프레임워크를 다루는 방법을 아는 개발자가 얼마나 많은지 가늠하는 데는 효과적이다. 대규모 프로젝트와 팀에서는 이것이 중요한 요소가 될 수 있다.
 

새 프레임워크가 필요할까?

사용할 자바스크립트 프론트엔드 프레임워크를 결정하기 위한 접근 방식은 많다. 기사에서는 각각의 주요 프레임워크를 살펴보겠지만, 프레임워크의 친숙도를 핵심 요소로 계속 염두에 둘 것을 권장한다.
 
여러분이나 여러분의 팀이 어떤 기술에 대해 뛰어난 역량을 갖고 있다면 그 기술이 아닌 다른 기술을 선택할 때는 그만큼 중요한 이유가 필요하다. 익숙한 기술이 프로젝트의 요구사항을 충족하지 못하는가? 사용 중인 프레임워크가 지원 중단 위기에 처해 있는가? 원하는 어떤 매력적인 기능을 제공하지 않는가? 아니라면 새 프레임워크 도입을 다시 생각해야 한다.
 
다른 한편으로 개발자 경험, 성능 또는 커뮤니티 지원 측면에서 프로젝트에 특정 이득을 제공하는 새 프레임워크에 대해 열린 마음을 갖는 것도 좋다.
 
자바스크립트와 특히 프론트엔드 프레임워크에서 흥미로운 점은 서로 주고받는 풍부한 상호작용과 영향이다. 어느 하나를 배우면 창조적인 인사이트를 얻게 되는 경우가 많다. 즉, 새 프레임워크를 탐색하는 것은 절대 헛된 일이 아니다.
 

선택지 탐색

이 분야를 전반적으로 살펴봤으니 이제 각각의 주요 프론트엔드 자바스크립트 프레임워크를 고려해 보자. 여기서는 간략히만 설명한다. 인포월드 및 다른 사이트의 소개 기사 링크를 첨부했으니, 방문해서 관심 있는 프레임워크에 대해 더 자세히 알아볼 수 있다.

리액트
일단 가장 인기 있는 프론트엔드 자바스크립트 프레임워크인 리액트가 있다. 리액트는 반응형 프레임워크의 대표 주자이며, 어떤 면에서는 다른 모든 프레임워크의 비교 기준이다. 리액트의 관리 주체는 페이스북(메타)이고 처음 만들어진 시점은 2013년이다.
 
표 1의 주간 다운로드 횟수에서 볼 수 있듯이 리액트는 매우 인기 있다. 이 인기에 힘입어 프론트엔드 프레임워크의 기본으로 통한다. 더 자세한 조사 없이 바로 프레임워크를 선택해야 한다면 리액트를 선택하면 된다.
 
나온 지 오래됐지만 메타는 리액트를 최신 상태로 유지하는 데 적극적이다. Facebook.com에도 여전히 리액트가 프레임워크로 사용된다.
 
리액트에 대한 가장 큰 비판은 무거움이다. 특히 리액트의 부가적인 기능 대부분이 불필요한 작업에서는 상당히 거추장스러울 수 있다. 여기서 살펴볼 다른 프레임워크 중 일부는 리액트보다 더 가벼울 뿐만 아니라 다양한 접근 방식을 제공한다.

뷰
뷰는 두 번째로 인기 있는 반응형 프레임워크다. 뷰 역시 성숙한 기술이고 충실하게 지원된다. 리액트와 비교하면 뷰는 더 가볍고 성능 테스트에서도 더 빠른 결과를 보인다.
 
뷰는 배우기 쉬운 것으로 정평이 나 있으며 이 부분이 가장 매력적인 점이기도 하다. 문서화가 아주 잘 되어 있고 애호가들이 모인 커뮤니티도 친화적이다. 뷰가 개발자 경험(DX)을 중시하는 점을 높이 사는 개발자도 있다. 여러분과 여러분의 팀이 만족스럽게 뷰를 사용 중이라면 뷰 프레임워크 도입은 용이함과 만족도에서 장기적으로 큰 혜택이 될 수 있다.
 
또한 3대 프레임워크(리액트, 뷰, 앵귤러) 중에서 뷰가 가장 풀뿌리 프레임워크 특성이 강하다는 점도 짚고 넘어갈 만한 매력적인 특징이다.

앵귤러
이 목록의 모든 프레임워크 중에서 앵귤러는 단연 최고의 원스톱 개발 환경을 제공한다. 애초부터 하나의 응집된 패키지에 모든 것을 담는 완전한 솔루션으로 설계됐다.
 
과거에는 접근하고 마스터하기가 어렵다는 평을 받았고 약간의 오버 엔지니어링 문제도 있었다. 실제 사용 환경에서 불거진 것이 아닌 설계에서부터 비롯된 이러한 특성으로 인해 추천 목록에서 다른 프레임워크에 비해 뒤로 밀려나기 쉬웠다.
 
그러나 최근 들어 상황이 바뀌었다. 앵귤러 개발자들은 프레임워크를 간소화하고 개발자 환경을 개선하고 효과적인 서버 측 렌더링 엔진을 도입하는 데 상당한 공을 들였다. 앵귤러의 문서와 지원 웹사이트의 전체적인 느낌 역시 개선됐다.
 
리액트/뷰와 비교할 때 앵귤러의 큰 차이점 중 하나는 더 뚜렷한 주관이다. 사용하는 개발자의 스타일에 따라 장점이 될 수도, 단점이 될 수도 있다. 앵귤러에는 대부분의 요소에 대해 잘 정립된 길이 있지만, 애플리케이션을 맞춤 구성하거나 틀에서 벗어나 사고하기는 더 어려울 수 있다.

프리액트
이름이 암시하듯이 프리액트는 리액트의 영향을 받은 프론트엔드 프레임워크다. 완전한 복사판은 아니다. 비슷하지만, 더 작은 API를 사용하는 간소화된 버전을 지향한다. 주된 차이점은 프리액트는 자체 이벤팅 시스템을 구현하지 않는다는 점이다. 대신 브라우저의 내장 이벤트 리스너를 사용한다.
 
프리액트는 리액트에서 군살을 뺀 버전이라고 할 수 있다. 빌드 시간이 더 빠르고 번들 크기가 더 작은 대신 일부 기능이 빠졌다. 부가적인 계층을 넣어서 거의 완전한 리액트 호환성을 달성할 수 있다. 이 호환성 계층을 사용하면 리액트 생태계의 많은 구성요소가 프리액트에서도 작동한다.
 
주로 리액트와 리액트의 견고한 생태계 영역 내에 머물면서 더 작은 API를 마스터하고자 한다면 프리액트가 좋은 선택이 될 수 있다.

릿
릿의 대표적인 특징은 웹 구성요소, 표준 API를 기반으로 사용한다는 점이다. 따라서 API와 번들 크기가 매우 작고, 내장 웹 구성요소를 구동하는 데만 전념한다. 또한 릿은 미니멀리스트 원칙을 고수하므로 최대한의 유연성을 제공한다. 릿에는 정해진 방식이 거의 없다.
 
생태계 규모는 더 대형 프레임워크에 비해 작긴 해도 여전히 상당히 큰 편이다.

스벨트
스벨트의 특징은 컴파일러를 사용한다는 점이다. 컴파일러는 스벨트의 구문을 받아 작고 성능이 뛰어난 자바스크립트 번들로 변환한다. 이를 통해 사전 최적화, 그리고 룬(Runes)와 같은 흥미로운 구문 요소를 사용한 실험이 가능하다.
 
소형 프레임워크 중에서 독립적인 실험에 개방적이라는 점은 뷰와 가장 가깝다. 오픈소스 애호가들 사이에서 인기가 있고 커뮤니티도 활발하다. 문서도 잘 구축돼 있다.

알파인JS
이 기사에서 소개하는 모든 프레임워크 중에서 알파인JS는 가장 실용주의적이다. 컴팩트한 반응형 라이브러리를 제공하며 그 이상은 하지 않는다. 알파인 여정에서 딱 필요한 만큼의 반응성만 제공한다. 알파인의 모든 기능은 매우 쉽게 이해할 수 있지만 작으면서도 상당히 강력하다.
 
알파인과 HTMX 간에는 흥미로운 유사성이 있다. 둘 다 현대 프론트엔드 기능의 기본을 제공하면서 복잡성을 없애는 데 주력하며, 둘 다 기능을 제공하기 위해 특화된 HTML 속성을 선택한다.

솔리드JS
솔리드JS는 반응성에 대한 흥미로운 접근 방식을 택한다. 반응형 프리미티브인 시그널(Signals)을 출발점으로(Knockout.js의 영향을 받음) 삼아 빌드한다. 솔리드는 이 목록의 다른 프레임워크와 비교할 때 젊은 세대에 속하지만, 많은 기대를 모으면서 도입되고 있다. 커뮤니티 활동도 활발하다.
 
시그널은 솔리드에 유연한 기반을 제공한다. 프레임워크와 사용자 코드 모두 동일한 기능에 액세스해서 기능을 계층화할 수 있다. 시그널은 리액티브X(ReactiveX)와 비슷하지만 더 단순하다. 또한 솔리드는 리액트 템플릿 언어인 JSX를 채택한다. 성능 테스트에서도 우수한 성능을 보인다.

HTMX
HTMX는 웹 프론트엔드 구축에 대한 완전히 다른 접근 방식이다. 복잡성을 최대한 제거하고, REST를 원래의 목적에 맞게 사용하고, AJAX, DOM 상호작용과 같은 현대적 요구사항을 처리하기 위해 몇 가지 기본 개선 사항이 포함된 단순 명료한 HTML을 사용한다.
 
HTMX는 작은 패키지로 많은 기능을 제공한다. 특히 정교한 반응성 또는 서버 측 렌더링 형태로 많은 부가적 기능이 필요하지 않은 경우 고려할 만한 옵션이다. HTMX는 이제 관심을 끌기 시작한 새로운 아이디어지만 배우고 이해하기도 매우 쉽다. 경험이 얼마나 많은 개발자든, 다른 것은 제쳐 두고 아이디어만으로도 HTMX 프로젝트를 살펴볼 가치가 있다.


퀵
퀵은 이 목록의 다른 프레임워크와 마찬가지로 반응형 프레임워크지만 내부 구현은 매우 독특하다. 애초부터 성능을 염두에 두고 개발됐다. 애플리케이션을 이벤팅, 구성요소와 같은 경계를 따라 개별적인 요소로 분해하고, 이러한 경계에서 적극적으로 지연 로드(lazy-load)한다. 이런 모든 특성이 더 빠른 렌더링으로 이어진다.
 

프레임워크 하이라이트

이제 선택 가능한 옵션에 대해 감을 잡았으니, 좀 더 구체적인 수준으로 의사 결정의 범위를 좁혀보자. 표 2에도 프레임워크가 나열되어 있는데, 이번에는 각 프레임워크의 간결한 요약과 학습 편의성을 첨부했다. (필자의 개인적 의견이며, 매우 간략한 요약임을 염두에 둘 것)
 

 

기능 비교

이제 의사 결정을 위한 개요를 파악했다. 다음으로, 각 프레임워크의 필수 기능을 더 집중적으로 살펴보자. 다음 표는 특정 기능이 필요할 때 도움이 될 것이다. 표 이미지를 클릭해서 크게 보거나, 필자의 깃허브 리포지토리에서 PDF를 다운로드할 수 있다.
 

타우리(Tauri)와 같은 크로스 플랫폼 프레임워크는 표 3의 많은 프레임워크를 위한 네이티브 버전을 생성할 수 있다.
 

선택하기

지금까지 주요 프론트엔드 자바스크립트 프레임워크과 각 프레임워크가 제공하는 기능에 대해 많은 정보를 습득했다. 하지만 내 팀 또는 프로젝트에 적합한 프레임워크를 결정하려면 어떻게 해야 할까?
 
이 중에서는 실험적 성격이 강한 프레임워크도 일부 있지만 모두 전문적인 수준의 툴이다. 리액트, 뷰, 앵귤러는 탄탄한 역사와 추진력을 갖고 있으므로 어느 것이든 안전한 선택이다. 또한 이 세 가지 프레임워크 사용에 익숙한 개발자가 많다는 것도 장점이다. 이는 팀 크기가 커지면 중요한 요소가 된다.
 
상대적으로 작고 새로운 프레임워크는 리소스 또는 열정이 약화되면 뒤처질 위험이 있다. 그러나 혁신, 성능, 개발자 경험 등의 측면에서는 앞서 나가는 경우가 많다. 이것이 새로운 프론트엔드 프레임워크가 많은 이유다!
 
필자가 그린필드 프로젝트를 위한 프로젝트를 선택해야 한다면 필요한 필수 기능을 가진 프레임워크를 추린 다음 "느낌"이 가장 좋은 것으로 선택할 것 같다. 프레임워크 사용의 편리함은 시간이 지날수록 중요한 영향을 미친다. 또한 개인적으로는 친밀한 분위기의 커뮤니티를 중시한다.
editor@itworld.co.kr