*잠깐, 위시켓은 2022년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다. 현재 10만 이상의 개발업체, 개발 프리랜서들이 활동 중이며 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 예상기간, 포트폴리오 등을 한 번에 비교해 보세요📝

이번 글에서는 2022년 가장 인기 있는 ‘웹 프런트엔드’ 웹개발 프레임워크 4가지의 장단점을 소개하도록 하겠습니다. 특히 웹개발 전문성을 높이고 싶지만 어떤 툴을 배워야 할지 결정하지 못한 주니어 개발자와, 새로운 프로젝트의 기술 스택을 선택하지 않은 스타트업 분들께 특히 도움이 될 것입니다.

프레임워크가 필요한 이유



프레임워크는 프로그래밍 언어의 성능을 확장하는 일종의 구조물입니다. 반복 작업을 대체할 수 있게 바로 사용할 수 있는 코드 라이브러리에 연결되어 있는 자동화 도구이죠. 프레임워크에는 웹 사이트 사용자의 경험을 개선하고 개발자의 작업을 용이하게 하는 두 가지 큰 장점이 있습니다.

1. 프레임워크가 웹사이트 사용자의 경험을 향상하는 방법

• 구글의 조사에 따르면 웹 페이지 로딩에 3초 이상 걸리는 경우 사용자가 이탈할 확률이 높아지는데, 프레임워크를 사용하면 페이지 로딩 속도를 향상시킬 수 있습니다. 기업으로서는 사용자가 이탈한다는 것은 잠재 고객을 놓치게 되는 것이기 때문에 로딩의 속도를 높이는 것은 상당히 중요한 일입니다.
• 웹 사이트의 디자인은 브랜드 이미지의 핵심 요소입니다. 웹사이트가 브랜드의 가치를 잘 전달할수록 사용자가 페이지에 오래 머무르고, 신규 고객으로 전환될 가능성이 높아집니다. 완벽한 디자인의 인터렉티브 한 웹사이트를 구축해야 한다면 프레임워크를 필수로 사용해야 합니다. 프레임워크를 사용하면 쉽게 디자인 요소를 만들 수 있고, 고객에게 긍정적인 첫인상을 남길 수 있습니다.
• 프런트엔드 프레임워크는 웹 사이트의 탐색을 최적화하는 데 도움이 됩니다. 최적화를 통해 사용자 경험을 높이고 웹 사이트의 신뢰성과 매력도를 높일 수 있습니다.
• 프레임워크들은 지속적으로 버전업 되기 때문에 이전 버전에서 발견된 버그와 보안 취약점의 자동 업데이트를 도모할 수 있습니다. 잘 관리되는 프레임워크를 적용하면 웹 사이트와 방문자 데이터의 보안을 강화할 수 있습니다.



2. 프레임워크가 개발자의 작업 능률을 높이는 이유

• 코드 재사용성: 프레임워크를 사용하면 자주 사용하는 코드를 코드 블록, 모듈, 스니펫과 디자인 요소를 만들어서 여러 번 재사용할 수 있습니다.
• 필요한 코드 양 감소: 프레임워크가 라이브러리들과 상호작용하기 때문에 더 적은 줄의 코드로 더 효율적인 코드를 짤 수 있습니다.
• 코드의 중복을 방지하고 테스트를 용이하게 합니다.
• 크로스 브라우저 호환성: 프레임워크는 모든 브라우저에서 동일하게 보이는 웹사이트를 만드는 데 도움이 됩니다.
• 인터랙티브 한 웹사이트 개발: 프레임워크는 브라우저 컴포넌트와 상호작용하는 템플릿을 쉽게 개발하는 데 도움이 됩니다.
• 새로운 기능이나 컴포넌트 개발을 용이하게 만듭니다.
• 프로젝트에서 즉시 사용할 수 있는 기반을 만들 수 있습니다. 즉, 프레임워크를 사용하면 새로운 프로젝트를 시작할 때마다 새로 웹 아키텍처를 설계할 필요가 없습니다.

Javascript는 10년 연속으로 개발자들 사이에서 가장 인기 있는 프로그래밍 언어로 선정되었을 만큼 ‘웹개발’에 많이 사용되고 있습니다. 그렇기 때문에 이 글에서는 Javascript 기반의 프레임워크에 대해 소개하겠습니다.



‘웹개발’에 가장 적합한 프런트엔드 프레임워크

React는 지난 몇 년 동안 클라이언트 사이드 개발에 있어 가장 인기 있는 프레임워크로 꼽혔습니다. Vue와 Angular 역시 높은 인기를 유지하고 있죠.

설문 결과에서 가장 오래된 웹개발 프레임워크(실제로는 라이브러리)인 jQuery는 무려 16년 전에 만들어졌습니다. 또, 반대로 가장 최신 프레임워크는 5년 전에 만들어진 Svelte입니다. 이 외로도 해당 설문 조사에는 소개된 프레임워크가 많기 때문에 프런트엔드 개발자나 프로젝트를 준비 중인 담당자가 기술의 인기 동향을 참고하기에 적합합니다.

React 프레임워크

2013년에 Facebook에서 만든 React.js 리액트는 ‘웹개발’에 가장 적합한 프레임워크입니다. 또한, 학습하기 매우 쉬운 장점을 바탕으로 개발자 사이에서 5년 연속으로 가장 인기 있는 프레임워크로 선정되었습니다.

React의 장점	React의 단점
개발자 사이에서 프레임워크의 인기가 늘어나고 있으며, React 개발자에 대한 수요도 높아지고 있기 때문에 전망이 좋습니다.	React를 사용하면 아주 빠른 속도로 개발이 이뤄지기 때문에 개발자들이 업데이트를 설명하는 문서를 만들지 않는 편입니다.
React는 MIT 라이센스 하에 다운로드 가능한 오픈소스 프레임워크입니다. MIT 라이센스들은 코드 사용에 있어 최소한의 제한만 두기 때문에 자유도가 높습니다.	React는 단일 페이지 애플리케이션(SPA, single-page applications) 개발에는 적합하지만, 대규모 애플리케이션 구축에는 이상적이지 않을 수 있습니다.
React는 웹 페이지 로딩 시간을 줄이고 웹 사이트의 사용자 경험을 향상하기 때문에 SEO 친화적인 프레임워크라고 할 수 있습니다.
React는 디자이너와 개발자 모두의 업무를 간소화합니다. 재사용 가능한 컴포넌트를 만들어서 부품을 조립하듯이 UI를 구현할 수 있습니다.
레거시 상태를 유지하면서 응용프로그램을 업데이트할 수 있습니다.

*React로 만든 MWDN 프로젝트: NTG(finance)

Angular 프레임워크



Angular 앵귤러는 2009년에 MIT 라이센스 하에 구글이 출시했습니다. Angular는 Typescript를 사용하며 다양한 모듈도 제공합니다. Angular는 React와 달리 주니어 개발자들이 선호하는 프레임워크는 아닙니다. 설문 대상의 52.27%가 선호(loved), 47.73%는 비선호(dreaded) 하며, 미래에 본인의 커리어에 이 프레임워크를 사용하겠다고 응답한 개발자는 7% 밖에 안됩니다.

▶ Angular를 사용해야 하는 이유

Angular의 주요 기능은 반복적인 작업을 자동화해서 개발 속도를 향상하는 겁니다. Angular는 복잡한 인프라에서 작동하는 대규모 프로젝트에 적합한 솔루션입니다. 또, 프로그래시브 웹 애플리케이션(PWA, progressive web application)나 동적 콘텐츠가 포함된 애플리케이션을 구축하는데 적합합니다.

유튜브, 구글 클라우드, eBay, 에어비엔비 등의 서비스가 Angular를 기반으로 개발되었습니다.

물론 Angular로 작고 간단한 애플리케이션이나 웹 사이트를 구축할 수도 있습니다. 하지만 들어가는 리소스 대비 가성비가 좋지 않기 때문에 엔터프라이즈급 솔루션에 Angular를 사용하는 게 좋습니다.

Angular의 장점	Angular의 단점
개발 문서가 상세하게 잘 작성되어 있습니다.	SEO에 적합하지 않습니다. Google에서 만든 프레임워크임에도 불구하고 검색엔진-크롤러 친화적이지 않고, 서비스의 서치 엔진 순위를 떨어트립니다.
Angular 기반의 프런트엔드는 써드파티들과의 호환이 용이하기 때문에 기능 구현에 유리합니다.	글로벌한 커뮤니티와 잘 정리된 문서들이 있음에도 학습하기 어렵습니다.
Angular는 ‘사전 컴파일’ 접근법을 따르기 때문에 로딩 시간을 대폭 단축합니다. 즉, 개발 중에 HTML과 Typescript를 Javascript로 컴파일하고, 프런트엔드는 브라우저가 애플리케이션을 로드하기 전에 모든 코드의 컴파일을 끝냅니다.
Angular로 만들어진 요소(element)는 다른 프레임워크 기반의 프로젝트에 쉽게 삽입할 수 있습니다.
내장된 테스트 도구(Angular CLI, Karma, Jasmine)가 있기 때문에 테스트 절차를 단순화할 수 있습니다.
다양한 모듈과 코드 분할 기능 덕분에 유지 관리하기 쉽습니다.

*Angular를 기반으로 구축된 MWDN 프로젝트: SMUPP(메신저), iRoofing(지붕 공사 업체)

Vue.js 프레임워크



2014년에 공식 공개한 Vue 뷰는 개발자가 선호하는 프레임워크 3위를 차지했고, 현업에서도 높은 인기를 자랑하고 있습니다. Vue 기반의 대표적인 웹 사이트는 Xiaomi와 Alibaba가 있습니다.

Vue가 Angular(Google)과 React(Facebook)와 다르게 테크 자이언트 기업이 출시한 것이 아님에도 이 정도로 많은 사랑을 받는 것은 프레임워크의 단순함과 효율성 덕분입니다. Vue를 사용하면 단일 페이지 애플리케이션(SPA) 프런트엔드를 굉장히 편안하게 개발할 수 있습니다.

Vue.js의 장점	Vue.js의 단점
매우 간단한 프레임워크 HTML, CSS, JavaScript에 대한 기초적인 지식만 있으면 개발할 수 있습니다.	언어 장벽 대부분의 Vue 사용자가 중국인이기 때문에 대부분의 문서와 플러그인이 중국어로 작성되어 있습니다.
믿기 어려울 정도로 작은 크기 18kb 크기의 압축파일 사이즈의 작은 프레임워크이기 때문에 Vue 기반의 웹사이트는 빠르게 다운로드되며 SEO 친화적입니다. 또, 파일 크기가 작음에도 불구하고 효과적인 애플리케이션과 웹사이트를 개발하게 도움을 줍니다.	적은 수의 플러그인 React나 Angular에 비해 제공되는 플러그인, 컴포넌트, 라이브러리가 적기 때문에 추가 기능을 만드는 것이 어느 정도 제한적입니다.
기개발된 애플리케이션에 쉽게 Vue 기반 컴포넌트를 추가할 수 있습니다.	엔터프라이즈급에는 부적합할 수 있음 프로젝트가 확장 가능(scalable) 해야 한다면 탄탄한 커뮤니티를 가지고 있는 다른 안정적인 프레임워크를 선택하는 것이 좋습니다.

▶Vue 사용이 적합한 경우

Vue를 사용하면 나쁘지 않은 UI/UX로 개발할 수 있기 때문에 프로토타이핑과 단일 페이지 애플리케이션(SPA) 개발에 적합합니다.

또한, 기존 애플리케이션에 몇 가지 기능을 추가해야 하는 경우에 Vue가 적합할 수 있습니다.

Svelte 프레임워크

Svelte 스벨트는 2016년 11월에 출시된 오픈소스 컴파일러, 프레임워크이자 라이브러리입니다. Svelte의 첫 버전의 기반 언어는 Javascript였다가 2019년에 배포된 세 번째 버전에서는 Typescript로 바뀌었습니다. Svelte는 Github에서 6만 2천 개의 별을 받았고, 개발자가 가장 사랑하는 프레임워크 2위를 차지할 정도로 상당히 인기 있는 개발 도구입니다.(Stact Overflow의 2022년 서베이에서 무려 75.28%의 개발자들이 Svelte를 선호했습니다.) 산업계에서도 Svelte를 활발히 사용하고 있습니다. IBM, The New York Times 그리고 Philips의 웹사이트가 Svelte를 기반으로 만들어졌습니다.

Svelte의 장점	Svelte의 단점
기능적인 주요 이점은 애플리케이션 로딩 시간을 대폭 단축할 수 있는 것입니다. React나 Angular와 달리 Svelte는 가상 DOM(Document Object Model)을 사용하지 않고 외부 라이브러리나 프레임워크를 쓰지 않는 순수 JavaScript에서 코드를 컴파일합니다.	Svelte는 최근에 개발된 기술이고, 기부금으로 운영되고 있습니다. 따라서 입문자에 대한 지원이 부족할 수 있습니다.
Svelte는 매우 단순하기 때문에 배우기 쉽고 조작도 간단합니다.	다른 프레임워크보다 적은 플러그인과 호환되기 때문에 기능 개발에 제한이 있을 수 있습니다.
Svelte의 일부인 SvelteKit이 코드를 분할하기 때문에 애플리케이션 로딩 속도를 향상합니다.

▶Svelte 사용이 적합한 경우

속도를 제외하면 React 또는 Vue보다 뒤떨어지는 것이 사실이기 때문에 빠른 로딩 속도가 최우선 목표인 경우 Svelte를 선택하면 좋습니다.

jQuery

jQuery 제이쿼리는 엄밀히 말하면 프레임워크는 아니지만 가장 인기 있는 프런트엔드 라이브러리 중 하나이기 때문에 소개하겠습니다.

일각에서는 jQuery의 인기가 떨어지고 있다는 이야기가 나옵니다. jQuery의 특장점이던 기술들이 HTML5나 CSS3에서 구현할 수 있게 되었고, 고성능 프레임워크들이 등장하고 있기 때문이죠. 그러나 아직까지 가장 많이 사용되는 웹개발 기술 TOP 3 안에 들고 있고, 전 세계 모든 웹사이트의 77% 이상이 jQuery를 사용하고 있습니다.

jQuery는 2006년에 만들어진 이래 DOM 이동(traverse), DOM 요소, AJAX를 통한 HTTP의 request 처리와 애니메이션 처리 등에서 필수로 사용되는 도구로 자리해왔습니다. 현재도 여러 기능을 제공하고 있지만 현대적이고 사용하기 쉬운 기술들도 유사한 기술을 제공하기 때문에, 다소 구시대적인 기술이 되었다고 할 수 있습니다.

jQuery의 장점	jQuery의 단점
광범위한 사용자 커뮤니티와 잘 작성된 문서들이 있습니다.	항상 DOM 요소를 조작하기 때문에 웹페이지(특히 대규모 애플리케이션)의 속도를 저하시킵니다.
다른 라이브러리나 프레임워크는 비교되지 않을 정도로 굉장히 많은 플러그인과 호환됩니다.	웹사이트에서 jQuery의 일부 기능만 사용한 경우라도 86kb 크기의 전체 라이브러리를 다운로드해야 하기 때문에 로딩 속도와 UX에 영향을 줄 수 있습니다.
최신 기술들은 현대의 브라우저 대상으로만 크로스 브라우징 개발을 지원하는데, jQuery를 사용하면 오래된 것들을 포함한 모든 브라우저에서 동일한 UI를 유지할 수 있습니다.
쉽게 배울 수 있습니다.
최신 프런트 엔드 기술 중 가장 안정적인 라이브러리/프레임 워크입니다.

▶jQuery 사용이 적합한 경우

jQuery는 다재다능합니다. 아주 간단한 랜딩 페이지에서부터 대규모의 이커머스 ‘웹개발’에 이르기까지 모든 종류의 애플리케이션 구축에 유용합니다. 프로토타입이나 인터랙티브한 애니메이션을 만드는 데에도 사용할 수 있습니다.

또, 몇 년 전에 작성된 코드에는 jQuery가 포함되어 있을 가능성이 높기 때문에 레거시 코드를 유지 보수하는 데에도 필요할 수 있습니다.



정리

지금까지, 2022년을 비롯해 인기 있고 널리 쓰이는 웹개발 프레임워크 4가지를 살펴보았습니다. 페이스북에서 개발한 React, 구글이 출시한 Angular, 빠른 속도로 확산 중인 Vue, 굴지의 jQuery까지, 각각의 프레임워크/라이브러리는 매력적인 장점과 단점을 갖추고 있습니다. 공부 차원이든, 비즈니스 차원이든 목적에 맞는 프레임워크를 찾아내어, 웹 프런트엔드 특성을 이해하는 데 도움이 되길 바라며 글을 마치도록 하겠습니다.



국내 1위 IT아웃소싱 플랫폼 위시켓으 프로젝트를 등록해 보세요.

6만 여건의 데이터를 바탕으로 프로젝트 견적을 상담해 드립니다.