38
똑똑한 인공지능 비서! ChatGPT가 쏘아 올린 거대 AI 전쟁
39

프론트엔드 프레임워크 트렌드

2023.04.05

프론트엔드 프레임워크 트렌드



프론트엔드 프레임워크 트렌드 이미지


프론트엔드란 무엇일까?

스마트폰과 PC 등으로 하루를 시작하는 우리는 애플리케이션을 통해 오늘의 날씨를 보거나, 자산 관리 혹은 물건을 사기도 합니다. 이렇게 일상에서 애플리케이션과 웹사이트를 이용하는 사람들은 해당 서비스의 “사용자”가 되고, 이런 사용자의 인터페이스와 경험을 프론트엔드 영역에서 기술적으로 구현하게 됩니다.
프론트엔드는 사용자와 직접 상호 작용하는 프로그램의 일부로써 앞서 말한 인터페이스뿐만 아니라 우리가 보는 디자인, 레이아웃, 그래픽, 애니메이션 등 시각적인 요소와 더불어 사용자가 보고 듣는 모든 요소들이 포함되어 있습니다. 종합적으로 프론트엔드 역할의 핵심은 사용자에게 직관적인 경험을 제공하는 것이라 볼 수 있는데, 그 자세한 역할은 다음과 같습니다.



사용자 경험 및 접근성 강화

잘 설계된 프론트엔드는 쉽고 직관적인 기능을 제공하며 원하는 작업을 수월하게 진행할 수 있게 도와줍니다. 아이콘이나 버튼의 크기, 색깔 등 사용자 경험과 행동 패턴을 잘 이해하여 작업하는 등 사용자 친화적인 프론트엔드를 구현한다면 더욱 유용한 서비스를 제공할 수 있을 것입니다.



프론트엔드 프레임워크 트렌드 이미지


예를 들어 흔히 볼 수 있는 애플리케이션의 이용약관을 동의하는 부분에서 텍스트가 아닌 오로지 체크박스만 클릭되게 만들고 그 크기마저 작다면 사용자는 더 세밀한 조작을 해야 하기 때문에 불편함을 느낄 수 있습니다. 이러한 상황에서 체크박스의 크기를 키우고 텍스트도 같이 클릭할 수 있도록 개발한다면 사용자에게 더 편한 경험을 제공할 수 있습니다. 나아가 스크린 리더를 고려해 개발을 한다면 시각장애인들도 서비스를 사용하는데 불편함이 없도록 작업할 수 있습니다.



프론트엔드 프레임워크 트렌드 이미지


성능 및 호환성 강화

프론트엔드는 웹 사이트의 성능에도 영향을 미칠 수 있습니다. 성능을 고려하지 않은 개발은 서비스 접속 시 로딩되는 시간이 길어져 사용자에게 크고 작은 불편을 줄 수 있어 프론트엔드 단계에서 성능 최적화에 대한 고려가 반드시 필요합니다. 또한 최신 웹 표준 기술에 대한 전반적인 지식과 프론트엔드 개발의 전문적인 지식을 확보하여 스마트폰, 태블릿, 데스크탑 등 다양한 기기와의 호환성을 강화해야 합니다.



프론트엔드 프레임워크 트렌드 이미지


브랜드 및 정체성 확립

각 서비스의 프론트엔드 영역은 사용자의 브랜드 인식에 직접적인 영향을 미칠 만큼 중요한 영역이므로 신중하게 설계하고 개발하여 브랜드의 가치와 개성을 잘 전달할 수 있도록 해야 합니다.




프론트엔드 프레임워크 트렌드 이미지

앱 같은 웹, SPA

최근 웹사이트를 이용할 때 다른 화면으로 이동 시 로딩되는 시간 없이 빠르고 부드럽게 화면이 전환되는 경험이 있을 것입니다. 그 원리가 모던 웹의 패러다임 중 하나인 SPA라는 웹 애플리케이션 구현 방식입니다.
SPA는 Single Page Application의 약자로 단일 페이지 애플리케이션을 뜻하며 현재 웹 개발의 트렌드라 할 수 있습니다. 단일 페이지 애플리케이션은 웹 개발에서 전체 페이지를 다시 로드할 필요 없이 단일 웹 페이지의 내용을 동적으로 업데이트하여 매끄럽고 원활한 사용자 경험을 제공하는 웹 응용 프로그램의 한 유형입니다. 쉽게 말해 전통적인 웹 애플리케이션의 방식은 매 요청 때마다 해당 페이지의 전체 요소를 불러오는 것이었던 반면 단일 페이지 애플리케이션은 한 번에 모든 소스를 불러온 상태로 요청된 페이지만 보여주는 방식입니다.

SPA를 사용하면 다음과 같은 이점이 있습니다.

  • 향상된 사용자 경험: SPA는 전체 페이지를 다시 로드 할 필요가 없으므로 더 빠르고 원활한 사용자 경험을 제공합니다.
  • 서버 부하 감소: 페이지의 일부만 동적으로 업데이트되므로 SPA는 서버의 부하를 줄여 페이지 로드 시간을 단축하고 확장성을 향상시킬 수 있습니다.
  • 더 나은 코드 구성: SPA는 모듈형 아키텍처를 사용하므로 개발자가 코드를 보다 효율적으로 구성하고 유지관리 및 업데이트를 더 쉽게 할 수 있습니다.
  • 향상된 모바일 호환성: SPA는 더 작은 화면 크기와 더 낮은 대역폭 연결에 최적화될 수 있기 때문에 기존 웹 애플리케이션보다 더 모바일 친화적입니다.

SPA는 React, Vue, Angular 등의 자바스크립트 프레임워크를 사용하여 구축되는 경우가 많은데 이러한 프레임워크는 복잡한 사용자 인터페이스를 구축하고 SPA의 특징인 동적 업데이트를 처리하기 위한 도구를 제공해 줍니다.




프론트엔드 프레임워크 트렌드 이미지

프레임워크란 무엇인가?

일반적으로 프레임워크는 소프트웨어 애플리케이션, 시스템, 또는 플랫폼을 개발하고 구성하기 위한 기본 구조 및 표준화된 접근 방식을 제공하는 ‘미리 정의된 규칙, 지침 및 구조의 집합’을 의미합니다. 이는 일반적으로 개발자가 더 빠르고 효율적이며 일관성 있게 개발할 수 있도록 하는 라이브러리, 모듈 및 도구 모음을 포함합니다. 또한 프레임워크는 개발자가 애플리케이션의 핵심 기능을 구현하는 데 집중할 수 있도록 사용자 인증 처리, 데이터베이스 관리 및 코드 구성과 같은 일반적인 프로그래밍 작업에 대해 미리 정의된 솔루션을 제공해 줍니다.



자바스크립트 프레임워크

자바스크립트 프레임워크(JavaScript framework)는 말 그대로 자바스크립트라는 프로그래밍 언어를 사용하며 웹 애플리케이션을 개발하기 위한 구조와 도구 세트를 제공하는 코드 라이브러리입니다. DOM(Document Object Model) 조작, 이벤트 처리, 서버에 대한 비동기 요청 등과 같은 기능을 제공함으로써 개발하는 과정을 단순화하는데 도움이 됩니다. 자바스크립트 프레임워크는 앞서 말한 단일 페이지 애플리케이션(SPA)을 개발하는데 사용되며, SPA를 위한 인기 있는 자바스크립트 프레임워크로는 React, Vue, Angular가 있으며 각 프레임워크별 특징과 차이점에 대해 알아보겠습니다.



프론트엔드 프레임워크 트렌드 이미지

리액트(React)

React는 페이스북이 개발한 프론트엔드 자바스크립트 라이브러리로, 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다.



프론트엔드 프레임워크 트렌드 이미지

뷰(Vue)

Vue는 구글에서 근무하던 개발자 에반 유(Evan You)가 개발한 자바스크립트 프레임워크로 학습과 사용이 매우 용이하도록 설계되었습니다. 사용자 인터페이스를 구축하기 위한 단순하고 직관적인 API를 제공하며 중소규모의 애플리케이션을 구축하는 데 사용할 수 있습니다.



프론트엔드 프레임워크 트렌드 이미지

앵귤러(Angular)

Angular는 구글에서 개발 및 유지관리하고 있는 TypeScript로 작성된 자바스크립트 프레임워크로써 프로젝트 생성, 테스트, 빌드, 배포를 위한 모든 기능을 제공하며, Angular스타일에 맞추어 코딩을 해야 하기 때문에 코드의 유지 관리성이 높은 편입니다.



어떤 프레임워크를 써야 할까?

프로젝트에 따른 프레임워크 사용

서비스를 구축할 때 다양한 자바스크립트 프레임워크 중 어떤 프레임워크를 사용할지에 대한 고민을 하게 되는데, 프로젝트에 적합한 프레임워크를 선택하기 위해 프로젝트의 규모와 복잡성, 개발팀의 경험과 기술, 커뮤니티 지원 및 리소스의 가용성 같은 다양한 요소를 고려해야 합니다.



프론트엔드 프레임워크 트렌드 이미지


인지도 및 사용량

프로젝트의 특성에 따른 프레임워크 선택에 이어 각 프레임워크의 인지도 및 사용량에 대해 알아보겠습니다.



프론트엔드 프레임워크 트렌드 이미지

프론트엔드 프레임워크 트렌드 이미지


NPM(Node.js 모듈 패키지 라이브러리)의 트렌드를 찾아볼 수 있는 “npm trends” 사이트에 따르면 첫 번째 그래프에서 React는 여타 프레임워크들과 압도적인 차이로 사용량 면에서 1위를 차지했습니다. 또 두 번째 그래프에서 한 달 기준으로 React의 npm 다운로드 수를 보면 2번째로 다운로드 수가 많은 Vue와 비교해 거의 7배 가까이 차이 나는 압도적인 다운로드 수를 보이고 있습니다. 이를 통해 우리는 React가 가장 인기 있는 프레임워크인 것은 부정할 수 없습니다.

React의 인기가 많다는 사실은 단순히 인지도 측면을 떠나 다른 프레임워크 보다 많은 튜토리얼과 기사들, 그리고 Stack Overflow(프로그래밍 질의응답 사이트)에서 더 많은 질의응답이 존재한다는 것을 의미합니다. 물론 Vue와 Angular또한 훌륭한 프레임워크지만, React를 사용한다면 방대한 커뮤니티와 그 안의 자료를 통해 개발 이슈 발생 시 더 빠르고 유연한 대응을 할 수 있다는 점에서 큰 차이를 보입니다.
또한 React의 수요가 많다는 것은 React가 실제 적용된 서비스의 비중이 높음을 의미합니다.



프레임워크 추세, 앞으로의 전망



프론트엔드 프레임워크 트렌드 이미지


끊임없이 변화하는 선호도

올해 1월에 공개된 자바스크립트의 인기도와 현황을 알 수 있는 ‘자바스크립트 현황 2022’ 보고서에 따르면 React와 Vue, Angular등 기존 터줏대감 수준의 프레임워크들은 개발자의 관심에서 점차 멀어지고 있다고 표현했습니다. 다만 React 사용 경험이 있는 사용자들 중 82%는 아직 React를 사용하겠다 하였으며, 같은 질문에 Vue는 42%, Angular는 49%가 다시 사용하겠다 밝혔습니다. 반면 스벨트(Svelte), 솔리드(Solid), 퀵(Qwik) 등의 프레임워크들은 인기도가 올라가고 있다고 밝혔습니다.



프론트엔드 프레임워크 트렌드 이미지


스벨트(Svelte)

사용량 면에선 React가 아직 가장 높은 점유율을 차지하고 있지만 이를 무서운 속도로 쫓아오고 있는 언어가 있습니다. 그것은 바로 앞서 말한 인기도가 상승하는 언어 중 하나인 스벨트(Svelte)이며, 실제로 npm trends 사이트에서도 2022년 기준 관심도 면에서 1위를 차지하였습니다. Svelte는 최근 업계에 등장한 하나의 언어로 React와 Vue 등과 같은 기존 프레임워크의 언어를 보완하기 위한 목적으로 2016년에 출시되었습니다.
Svelte는 구문으로 작성된 코드를 매우 최적화된 바닐라 자바스크립트 코드로 변환하고, 필요한 코드의 양을 현저히 줄여주는 큰 메리트를 가지고 있습니다. 즉 Svelte는 전반적으로 성능과 응답성이 뛰어난 웹 애플리케이션을 구축하기 위한 강력한 도구라 할 수 있습니다.



프론트엔드 프레임워크 트렌드 이미지


아직은 시기상조?

이렇듯 Svelte는 React나 Vue, Angular 보다 더 뛰어난 성능을 보여주는데, 사람들이 아직 이전의 프레임워크들을 놓지 못하고 있는 이유가 궁금할 것입니다. 그 이유는 첫 번째로, 작은 규모의 커뮤니티를 들 수 있습니다. React의 경우 방대한 커뮤니티 규모와 수많은 양질의 무료 강좌가 있기 때문에 그만큼 개발자들의 관심을 불러일으키는 프레임워크입니다. 그에 비해 Svelte는 나온 지 얼마 안 된 언어이다 보니 커뮤니티 환경이 열악하고 강의의 수가 적기 때문에, 이러한 환경에서는 사람들의 지속적인 관심을 이끌어낼 수 없습니다. 또 운영 주체가 기업이 아닌 점을 다른 하나의 이유로 들 수 있습니다. React나 Angular는 페이스북이나 구글과 같은 거대한 기업에서 운영하고 있기 때문에 기술에 대한 지속적인 지원을 기대할 수 있습니다. 하지만 Svelte는 커뮤니티 단위에서 관리되고 있기 때문에 이에 대한 열정이 얼마나 지속될 수 있을지는 미지수입니다.



그럼에도 바뀌는 대세

큰 규모의 프로젝트에서 기존 프레임워크 대신 Svelte로 대체되려면 아직 갈 길이 멀었지만 그럼에도 불구하고 우리는 Svelte에 지속적인 관심을 두어야 합니다. 적은 용량, 매우 효율적인 코드 등 압도적으로 빠른 성능을 통해 기존의 프레임워크들의 점유율을 잠식할 잠재력을 가지고 있기 때문입니다. 실제로 필자는 React, Vue, Svelte를 경험하며 비교해 본 결과 Svelte가 훨씬 빠른 속도를 보여 깜짝 놀라기도 했습니다.



프론트엔드 프레임워크 트렌드 이미지


이모션글로벌은 Vue.js를 사용해 하나금융파트너 핑글APP, 이베스트투자증권MTS, 나이키 스페이스 등 다양한 프로젝트를 구축해 왔으며 자사 그룹웨어 및 홈페이지 관리자 등을 React를 통해 구축하고 있습니다. 현재 React와 Vue를 주력으로 프론트엔드 개발을 진행하고 있으나 빠르게 변하는 개발 트렌드에 대응하기 위해 Svelte와 같은 차세대 프레임워크를 활용한 개발 환경도 잘 대비하고 있습니다.



결론

지금까지 프론트엔드에 대한 개념과 주요 프레임워크에 대해 알아보았습니다. 프론트엔드 영역의 중요성이 부각되는 만큼 기술적인 측면에서도 발맞춰 잘 대응해야 할 시기입니다. 필자는 마크업과 약간의 동적인 기능에 머물러 있던 프론트엔드 영역에서의 이런 변화를 매우 긍정적으로 보고 있으며 사용자 인터페이스와 사용자 경험을 기술적으로 구현하는 것이 그 어느 때보다 중요해진 만큼 앞으로 더 발전된 기술을 활용한 개발을 기대하고 있습니다.




출처


이미지 출처


이모션글로벌 사이트 배너

조혜진Developer
CT1본부e·motion
39
38