빌드잇의 웹 개발팀은 다양한 프로젝트들을 진행하여 매년 성공적인 결과들을 도출해내고 있습니다. 이는 다양한 프레임워크 및 라이브러리들을 활용하여, 개발 생산성 및 유지보수의 효율성을 극대화 할 수 있었기 때문입니다. 특히, FE 개발파트에서는 Vue.js 프레임워크를 주축으로 하여 업무를 진행하고 있습니다. 본 포스팅에서는 빌드잇 웹 개발팀이 JavaScript 진영의 다양한 Front-end 프레임워크 및 라이브러리 중 Vue.js를 채택한 배경과 그 이유에 대해 공유하려 합니다.
채택 배경
코드관리 및 유지보수
웹 개발팀은 다양한 프로젝트를 진행해오면서 프로젝트의 규모가 크거나, 기능의 복잡도가 높은 페이지가 많이 포함될 수록 코드의 양이 많아져 관리에 어려움이 발생하였습니다. 또한 요구사항의 추가 및 변동 사항이 발생할 경우, 이를 대응하는 것도 쉽지 않은 일이었습니다. 위와 같은 사항을 개선하기 위해서, 효율적인 코드 관리 및 유지보수가 용이하도록 라이브러리 및 프레임워크의 중요성이 더욱더 대두되었습니다.
대용량 정보 시각화
IoT 모니터링 시스템과 같은 대용량 정보를 체계적으로 시각화하는 웹 어플리케이션 프로젝트의 경우, 대용량 정보를 한 화면에 표시해야 하는 경우 브라우저에 많은 요소들이 렌더링됩니다. 해당 데이터를 갱신하기 위해 DOM에 직접 접근하는 방식은 성능 상 문제를 일으킬 확률이 높으며, 수많은 DOM을 핸들링 하는 것도 매우 어려운 작업이 되었습니다.
SPA 수요 증가
웹 브라우저 엔진 성능이 발전하고, OS 환경 및 디바이스에 구애받지 않는 등 여러 장점으로, 과거 전통적인 데스크탑 애플리케이션들이 Web 애플리케이션으로 전환되는 추세입니다. 또한 사용자의 인터넷 이용률이 PC에서 모바일 중심으로 움직이면서, 웹 서비스는 네이티브(Native) 애플리케이션과 같이 좀더 자연스럽고, 사용자들을 만족시킬 수 있는 UX를 제공할 필요성이 대두되었습니다.
웹 어플리케이션의 디자인 패턴 중 하나인 SPA(Single Page Application)는 하나의 페이지에서 동작합니다. 정적파일을 한번에 또는 청크(Chunk) 단위로 나누어 모두 다운로드 받고, 이후 사용자와의 상호작용에 의해 필요한 부분만 서버로부터 받아 화면을 갱신하는 형태입니다. 불필요한 화면 갱신 및 서버 요청이 감소하므로, 사용자 친화적인 UX를 제공할 수 있습니다.
크로스 플랫폼 지원
당시 빌드잇에서는 자사 제품인 BuildThing beacon을 관리할 수 있는 관리자 애플리케이션을 기획 중에 있었습니다. Window, Mac OS, iOS 및 Android와 같이 각 플랫폼 별로 애플리케이션을 개발하는데는 개발자 리소스가 한정되었고 번거로운 일이었습니다. 때문에, 다양한 플랫폼에서 동작할 수 있도록 크로스 플랫폼을 지원하는 프레임워크의 검토가 필요하였습니다. 크로스 플랫폼 대응을 위한 하이브리드 앱 개발은 다양한 프레임워크 상에서 표준 웹 기술을 사용하여 한 번의 개발로 여러 OS에서 효율적으로 수행할 수 있는 하나의 애플리케이션을 만들 수 있게 합니다.
하이브리드 앱 프레임워크 예시
(왼쪽부터: Framework 7, Onsen UI, Ionic, Quasar, PhoneGap)
React 진영에서 활발히 사용되는 React Native 나 .net 기반의 Xamarin 역시, 크로스 플랫폼을 지원하는 훌륭한 프레임워크입니다. 그러나 애플리케이션의 형태가 웹 기반이 아닌 실제 네이티브 애플리케이션에 형태를 띄므로, 위 하이브리드 앱 개발 프레임워크의 예시에는 포함시키지 않았습니다.
Vue.js 채택 이유
JavaScript 생태계에는 자리잡은 주요 프레임워크 및 라이브러리로는 Angular, React.js, Vue.js 등이 존재합니다. 앞서 설명했던 배경과 함께, 빌드잇 Web 개발팀이 Vue.js를 채택한 이유는 크게 아래와 같습니다.
- 작고 가벼운 크기
- 상세한 공식 문서 및 낮은 러닝커브
- 싱글 파일 컴포넌트
- Virtual DOM 지원
- 양방향 바인딩(2-way-bindings) 지원
- 크로스 플랫폼 프레임워크
작고 가벼운 크기
Vue.js의 코어 라이브러리의 프로덕션 버전은 약 30kb gzipped으로 굉장히 가볍고 빠릅니다. 이러한 장점은 Vue가 강조하는 ‘프로그레시브(Progressive) 프레임워크’로써 다른 단일형 프레임워크와는 달리 점진적으로 다른 라이브러리나 기존의 프로젝트와의 통합을 용이하게 합니다.
Vue 코어 라이브러리와 함께 지원 라이브러리와 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리를 사용하면 규모가 큰 프로젝트로 스케일링업을 수월하게 진행할 수 있습니다. 라우터에는 공식적으로 지원하는 vue-router-library가 있으며, 상태관리를 위한 라이브러리로 Vuex가 존재합니다. 또한 Vue.js가 제공하는 강력한 툴링 기능인 Vue-CLI는 라우팅, Vuex, Linting, CSS 전처리 등 새로운 프로젝트 생성을 손쉽게 할 수 있도록 합니다.
상세한 공식 문서 및 낮은 러닝커브
새로운 라이브러리 및 프레임워크를 실무에 도입하기 위해서는 개발자에게 어느 정도의 학습 시간이 필요합니다. Vue.js는 상세한 문서와 가이드를 제공하는 공식 웹 사이트가 존재하며, 무엇보다 한국어 번역 페이지를 제공하고 있습니다. 또한 HTML, JavaScript 및 CSS로 이루어진 웹 표준 기술에 익숙하다면 기본 가이드만으로도 작고 단순한 애플리케이션을 개발할 수 있을 정도로 러닝커브가 낮습니다. 이러한 장점은 시간과의 싸움이 중요한 스타트업에서 매우 큰 매력이 아닐 수 없습니다.
싱글 파일 컴포넌트
많은 코드들을 포함한 대규모 프로젝트에 진행 시, 코드의 재사용성과 유지보수의 효율성을 높이기 위해 UI 및 기능들을 작은 단위로 쪼개어 관리할 수 있습니다. 다양한 프레임워크들이 이미 컴포넌트 기반의 개발 방식을 지니고 있습니다.
<template>
<div id="app">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
title: 'Hello Buildit'
}
}
}
</script>
<style lang="scss">
h1 {
text-align: center;
}
</style>
Vue.js에서 제공하는 싱글 파일 컴포넌트(Single File Component)는 위 코드 예시와 같이, 확장자가 vue인 하나의 파일에 템플릿(HTML), 로직(JavaScript), 스타일(CSS) 코드로 구성되어 있습니다. 아래는 Vue.js 공식문서의 싱글 파일 컴포넌트 소개의 한 내용입니다.
주목해야 할 중요한 점은 관심사 분리가 파일 타입 분리와 같지 않다는 것입니다. 현대적인 UI 개발에서 코드베이스를 서로 얽혀있는 세 개의 거대한 레이어로 나누는 대신, 느슨하게 결합 된 컴포넌트로 나누고 구성하는 것이 더 중요합니다. 컴포넌트 내부에서 템플릿, 로직 및 스타일이 본질적으로 결합되어 배치되면 컴포넌트의 응집력과 유지 보수성이 향상됩니다.
상기 문서의 내용을 보면, 관심사의 분리 개념을 벗어난 것이 아닌, 기존의 구조와 표현 및 동작이 각기 다른 파일로 나뉘는 방식을 하나의 파일에 느슨하게 결합된 것임을 알 수 있습니다. 어떠한 뷰의 레이아웃을 각 파트들이 트리 형태로 구성되듯이, 싱글 파일 컴포넌트를 활용하면 이에 대응되는 컴포넌트를 트리 구조로 구성하여 개발할 수 있습니다.
이미지 출처 - Vue.js 공식 홈페이지
Virtual DOM 지원
Vue.js 2.0 에는 Virtual DOM 이 추가되었습니다. 주요 JavaScript 라이브러리 중 하나인 React.js의 특징 중 하나이며, Vue.js 역시 웹 페이지의 매우 빠른 변경을 위해 지원하고 있습니다. DOM(Document Object Model)은 HTML 내에 표시되는 요소들을 구조화 객체 모델로 표현하는 모델입니다. HTML 요소들로 구성되어 있으며, 트리와 유사한 구조로 형성되고 이를 탐색 및 수정할 수 있는 API 를 제공합니다.
일반적인 DOM의 가장 큰 문제점은 브라우저 내에 수많은 요소들이 렌더링된 경우, 특정 DOM을 변경하기위해 조작하는데 많은 비용이 든다는 것입니다. 하나의 DOM을 변경하는 것이 아닌, 한번의 상태 변경으로 화면 내의 여러 부분을 변경하는 경우 성능 이슈가 발생할 수 있습니다.
Virtual DOM은 HTML DOM의 추상화 개념이며 DOM의 복사본을 메모리 내에 저장하여 사용합니다. 즉, 실제 DOM에 접근하여 변경사항을 반영하는 것이 아닌 메모리에 Virtual DOM을 생성하여 JavaScript 객체를 변경하기에 화면 전체를 다시 렌더링하지 않으며, 비용이 훨씬 저렴합니다.
양방향 데이터 바인딩 지원
Vue.js에서는 단방향 데이터 흐름 뿐만 아니라, Angular의 장점 중 하나인 양방향 바인딩까지도 지원합니다. 단방향 또는 양방향 데이터 바인딩의 간략한 의미는 아래와 같습니다.
- 단방향 데이터 바인딩 : 상위 컴포넌트에서 하위 컴포넌트 방향으로 데이터를 전달하는 구조
- 양방향 데이터 바인딩 : 화면에 표시되는 정보와 모델의 데이터가 동기화되어, 어느 한쪽이 변경되면 다른 한쪽도 동기화되어 변경되는 구조
Vue.js에서는 v-model 이라는 디렉티브를 사용하여 양방향 데이터 바인딩을 제공하고 있습니다.
아래의 간단한 입력 필드 예제에서 화면에서 발생한 입력에 의해 프레임워크의 모델 값이 변경되는 로직을 편리하고 간단히 사용할 수 있음을 확인할 수 있습니다.
크로스 플랫폼 프레임워크
앞서 공유한 채택 배경에서 알 수 있듯이, 빌드잇에서는 크로스 플랫폼 대응을 위한 하이브리드 애플리케이션 개발 도구가 필요하였습니다. 빌드잇에서 주목한 프레임워크는 Vue.js로 구동되는 동일한 코드베이스를 사용하는 Quasar Framework 입니다. Quasar 프레임워크는 아래와 같이 크로스 플랫폼을 지원할 수 있습니다.
- SPA(단일 페이지 앱)
- SSR(서버 사이드 렌더링 앱)
- PWA(프로그레시브 웹 앱)
- Cordova를 활용한 모바일 앱(Android, iOS)
- Electron을 활용한 데스크탑 앱(Window, MacOS)
데스크탑 웹 사이트, 데스크탑 앱 또는 모바일 앱 등 다양한 플랫폼에 대응 가능한 앱을 Vue.js를 기반으로 한 하나의 소스로 개발 가능하다는 큰 장점이 있습니다. 프레임워크에서 Vue-CLI를 랩핑한 Quasar-CLI를 자체적으로 제공하여, 개발 환경 설정부터 각 플랫폼 별 빌드까지 손쉽게 가능하도록 합니다.
Front-end 프레임워크 답게 기본적으로 Slider, Spinner, Tooltip, Dialog 등 60여개의 Vue 기반의 UI 컴포넌트를 제공하고 있기에 별도의 라이브러리를 찾는 노력을 줄일 수 있습니다. 또한 컴포넌트의 스타일 및 로직들을 커스터마이징 및 확장할 수 있게하여 빠른 개발을 가능하게 합니다. 실제로 빌드잇의 비콘 관리자 애플리케이션인 BuildThing Beacon은 Quasar 프레임워크를 활용하여 모바일 앱 및 데스크탑 앱으로 개발되었으며, 현재 각 진영의 스토어에 업로드 되어 있습니다.
