[HOW TO UI·UX] 프레임워크는 무엇이고, 왜 중요할까요?
일관성 유지부터 개발 효율성 증대 효과까지 있는 프레임워크
UI·UX 디자인이 궁금하다고요? 🤔 <디지털 인사이트>가 국내외 디자인 기업과 전문가들이 발행하는 자체 콘텐츠 가운데 실무 디자인에 도움이 될 좋은 글을 추려 읽기 좋게 정리했습니다. 원문을 참고하면 더 자세한 내용을 알 수 있어요.
<프론트엔드와 프레임워크 시리즈>
①프론트엔드는 왜 중요할까요?
이전 글에선 웹·앱 디자인 요소들을 설계하고 구현하는 영역인 프론트엔드의 중요성에 대해 이야기했습니다. 프론트엔드 영역에 대해 알아보았다면 이제 프론트엔드 영역에서 개발을 진행할 때 빠질 수 없는 ‘프레임워크’에 대해 이야기할 차례입니다.
프레임워크는 웹·앱 개발을 쉽고 간편하게 할 수 있도록 도와주는 도구입니다. 비유하자면 프레임워크는 입맛에 맞게 커스터마이징 할 수 있도록 준비된 밀키트의 재료들이라고 볼 수 있습니다. 프레임워크 없이 개발하는 것은 마치 요리사가 요리 재료를 직접 조달하러 현지까지 나가는 것과 같죠.
그렇다면 정확히 프레임워크란 무엇이고, 왜 중요하며, 대표적인 프레임워크는 무엇이 있을까요? 또 향후 프레임워크의 추세는 어떻게 흘러갈까요? 이번에는 디자인 전문기업 이모션글로벌이 프레임워크와 중요성에 대해 이야기합니다.
프레임워크란 무엇일까?
일반적으로 프레임워크는 소프트웨어·앱, 시스템, 또는 플랫폼을 개발하고 구성하기 위한 기본 구조 및 표준화된 접근 방식을 제공하는 ‘미리 정의된 규칙, 지침 및 구조의 집합’을 의미합니다.
일반적으로 프레임워크는 디자인 요소 일관성을 유지하고, 효율성을 향상시키며, 디자이너와 개발자 간의 공통 언어를 제공해 원활한 커뮤니케이션을 가능케 해주는데요. 평소에 라이브러리, 모듈 및 도구 모음라고 부르는 것들도 프레임워크에 포함됩니다.
또한 프레임워크는 개발자가 애플리케이션의 핵심 기능을 구현하는 데에 집중할 수 있도록 사용자 인증 처리, 데이터베이스 관리 및 코드 구성과 같은 일반적인 프로그래밍 작업에 대해 미리 정의된 솔루션도 제공해 줍니다.
그럼 자바스크립트 프레임워크는?
‘자바스크립트 프레임워크(JavaScript framework)’는 말 그대로 ‘자바스크립트’라는 프로그래밍 언어를 사용하며 웹·앱을 개발하기 위한 구조와 도구 세트를 제공하는 코드 라이브러리입니다. DOM(Document Object Model) 조작, 이벤트 처리, 서버에 대한 비동기 요청 등과 같은 기능을 제공함으로써 개발하는 과정을 단순화하는데 도움이 됩니다.
특히 자바스크립트 프레임워크는 앞서 말했던 단일 페이지 애플리케이션(SPA)을 개발하는데 사용되며, SPA를 위한 인기 있는 자바스크립트 프레임워크로는 리액트, 뷰, 앵귤러가 있습니다.
리액트(React)
‘리액트(React)’는 페이스북이 개발한 프론트엔드 자바스크립트 라이브러리로, 상호작용이 많은 사용자 인터페이스(UI)를 만들 때 생기는 어려움을 줄여줍니다. 특히 가상 돔(Virtual DOM)이라는 개념을 사용해 웹·앱의 퍼포먼스를 최적화하는 데에 특화된 라이브러리입니다.
뷰(Vue)
‘뷰(Vue)’는 구글에서 근무하던 개발자 에반 유(Evan You)가 개발한 자바스크립트 프레임워크로 학습과 사용이 매우 용이하도록 설계됐습니다. UI를 구축하기 위한 단순하고 직관적인 API를 제공하며, 중소규모의 애플리케이션을 구축하는 데 사용할 수 있습니다.
앵귤러(Angular)
‘앵귤러(Angular)’는 구글에서 개발 및 유지관리하고 있는 ‘타입스크립트(TypeScript)’로 작성된 자바스크립트 프레임워크로써 프로젝트 생성, 테스트, 빌드, 배포를 위한 모든 기능을 제공하며, 앵귤러 스타일에 맞추어 코딩을 해야 하기 때문에 코드의 유지 관리성이 높은 편입니다.
어떤 프레임워크를 써야 할까?
프로젝트의 성격에 따르기
서비스를 구축할 때 다양한 자바스크립트 프레임워크 중 어떤 프레임워크를 사용할지에 대한 고민을 하게 되는데, 프로젝트에 적합한 프레임워크를 선택하기 위해 프로젝트의 규모와 복잡성, 개발팀의 경험과 기술, 커뮤니티 지원 및 리소스의 가용성 같은 다양한 요소를 고려해야 합니다.
인지도 및 사용량을 고려하기
프로젝트의 특성에 따른 프레임워크 선택에 이어 각 프레임워크의 인지도 및 사용량을 고려해 선택하는 방법도 있습니다. Node.js 모듈 패키지 라이브러리인 NPM의 트렌드를 찾아볼 수 있는 ‘npm trends’ 사이트에 따르면 첫 번째 그래프에서 리액트는 여타 프레임워크들과 압도적인 차이로 사용량 면에서 1위를 차지했습니다.
또 두 번째 그래프에서 한 달 기준으로 리액트의 npm 다운로드 수를 보면 2번째로 다운로드 수가 많은 뷰와 비교해 거의 7배 가까이 차이 나는 압도적인 다운로드 수를 보이고 있습니다. 이를 통해 현재 리액트가 가장 인기 있는 프레임워크인 것은 확인할 수 있습니다.
리액트가 인기가 많다는 사실은 단순히 인지도 측면을 떠나, 다른 프레임워크 보다 많은 튜토리얼과 기사들, 그리고 프로그래밍 질의응답 커뮤니티 ‘스택 오버 플로우(Stack Overflow)’에서 더 많은 도움을 받을 수 있다는 것을 의미합니다.
물론 뷰와 앵글러 또한 훌륭한 프레임워크지만, 리액트를 사용한다면 방대한 커뮤니티와 그 안의 자료를 통해 개발 이슈 발생 시 더 빠르고 유연한 대응을 할 수 있다는 점에서 큰 차이를 보입니다. 또한 리액트의 수요가 많다는 것은 리액트가 실제 적용된 서비스의 비중이 높음을 의미하죠.
프레임워크 추세, 앞으로의 전망
끊임없이 변화하는 선호도
2022년 1월에 공개된 자바스크립트의 인기도와 현황을 알 수 있는 ‘자바스크립트 현황 2022’ 보고서에 따르면 리액트와 뷰, 앵귤러 등 기존 터줏대감 수준의 프레임워크들은 개발자의 관심에서 점차 멀어지고 있다고 표현했습니다.
다만 리액트 사용 경험이 있는 사용자들 중 82%는 계속 리액트를 사용하겠다고 답했으며, 같은 질문에 뷰는 42%, 앵귤러는 49%가 다시 사용하겠다 밝혔습니다. 또한 스벨트, 솔리드, 퀵 등의 새로운 프레임워크들의 주목도가 올라가고 있다는 사실도 알 수 있었습니다.
스벨트(Svelte)
사용량 면에선 리액트가 아직 가장 높은 점유율을 차지하고 있지만 이를 무서운 속도로 쫓아오고 있는 언어가 있습니다. 그것은 바로 앞서 말한 인기도가 상승하는 언어 중 하나인 스벨트입니다.
실제 npm trends 사이트에서도 2022년 기준 관심도 면에서 1위를 차지하였습니다. 스벨트는 최근 업계에 등장한 하나의 언어로 리액트와 뷰 등과 같은 기존 프레임워크의 언어를 보완하기 위한 목적으로 2016년에 출시되었습니다.
스벨트는 구문으로 작성된 코드를 매우 최적화된 바닐라 자바스크립트 코드로 변환하고, 필요한 코드의 양을 현저히 줄여주는 큰 메리트를 가지고 있습니다. 즉 스벨트는 전반적으로 성능과 응답성이 뛰어난 웹 애플리케이션을 구축하기 위한 강력한 도구라 할 수 있습니다.
아직은 시기상조인 스벨트?
상술한 내용을 모두 보셨다면 스벨트는 리액트나 뷰, 앵귤러보다 더 뛰어난 성능을 보여주는데, 사람들이 아직 이전의 프레임워크들을 놓지 못하고 있는 이유가 궁금해질 겁니다. 여러 이유가 있지만 첫 번째로, 작은 규모의 커뮤니티를 들 수 있습니다.
리액트의 경우 방대한 커뮤니티 규모와 수많은 양질의 무료 강좌가 있기 때문에 그만큼 개발자들의 관심을 불러일으키는 프레임워크입니다. 그에 비해 스벨트는 세상에 나온 지 얼마 안 된 언어이다 보니 커뮤니티 환경이 열악하고 강의의 수가 적습니다. 이러한 환경에선 사람들의 지속적인 관심을 이끌어낼 수 없습니다.
또 운영 주체가 기업이 아닌 점을 다른 하나의 이유로 들 수 있습니다. 리액트나 앵귤러는메타나 구글과 같은 거대한 기업에서 운영하고 있기 때문에 기술에 대한 지속적인 지원을 기대할 수 있습니다. 하지만 스벨트는 커뮤니티 단위에서 관리되고 있기 때문에 이에 대한 열정이 얼마나 지속될 수 있을지는 미지수입니다.
그럼에도 바뀌는 대세
큰 규모의 프로젝트에서 기존 프레임워크 대신 스벨트로 대체되려면 아직 갈 길이 멀었지만 그럼에도 불구하고 우리는 스벨트에 지속적인 관심을 둬야 합니다.
적은 용량, 매우 효율적인 코드 등 압도적으로 빠른 성능을 통해 기존의 프레임워크들의 점유율을 잠식할 잠재력을 가지고 있기 때문입니다. 이모션글로벌은 리액트, 뷰, 스벨트를 경험하며 비교해 본 결과 스벨트가 훨씬 빠른 속도를 보여 깜짝 놀라기도 했는데요.
실제 이모션글로벌은 뷰를 사용해 하나금융파트너 핑글APP, 이베스트투자증권MTS, 나이키 스페이스 등 다양한 프로젝트를 구축했으며, 자사 그룹웨어 및 홈페이지 관리자 등을 리액트를 통해 구축하고 있습니다.
이처럼 현재 리액트와 뷰를 주력으로 프론트엔드 개발을 진행하고 있으나, 빠르게 변하는 개발 트렌드에 대응하기 위해 동시에 스벨트와 같은 차세대 프레임워크를 활용한 개발 환경도 대비하고 있는 중이죠.
결론
지금까지 프론트엔드에 대한 개념과 주요 프레임워크에 대해 알아보았습니다. 프론트엔드 영역의 중요성이 부각되는 만큼 기술적인 측면에서도 발맞춰 잘 대응해야 할 시기입니다. 필자는 마크업과 약간의 동적인 기능에 머물러 있던 프론트엔드 영역에서의 이런 변화를 매우 긍정적으로 보고 있으며 사용자 인터페이스와 사용자 경험을 기술적으로 구현하는 것이 그 어느 때보다 중요해진 만큼 앞으로 더 발전된 기술을 활용한 개발을 기대하고 있습니다.
👉 원문 링크: 프론트엔드 프레임워크 트렌드
