vue와 함께 사용하기 좋은 프론트엔드 3대장

저는 최근에 최신의 기술을 이용한 SPA(Single Page Application) 웹 애플리케이션 개발을 위해 vue를 선택했습니다. 개발의 규모가 거대했다면 react를 고려했겠지만 쉽고 빠르게 개발을 진행하기 위해서 결단을 내렸습니다.

​

개발이야 최신 기술이던 아니던 사용자들은 결국 UI에 눈이 휘둥그레지기 마련입니다.

vue와 함께 사용해서 최소의 노력만으로 화려한 UI를 제공해주는 frontend ui framework 3종을 소개합니다.

​

​

1. Vuetify

Material Design을 필요로 하는 애플리케이션을 만들려고 한다면 이 녀석이 제격입니다.

다만 이 녀석이 제공하는 디자인을 수정하려고 하면 자유도가 제한적이기 때문에 나만의 개성 넘치는 디자인을 원하는 경우라면 좋은 선택이 아닐 수 있습니다.

​

SSR(서버사이드 렌더링), SPA(싱글페이지 어플리케이션), PWA(프로그레시브 웹 어플리케이션)와 단독 HTML 페이지를 지원합니다.

https://vuetifyjs.com/ko/

​

깔끔하게 기본적인 컴포넌트를 지원하고 문서화도 잘되어 있습니다.

​

​

2. BootstrapVue

너무나도 유명한 Bootstrap의 vue 호환판이며 Bootstrap에 익숙한 경우라면 사용을 추천합니다.

뷰와의 충돌을 막기 위해서 b-로 시작하는 디렉티브를 사용합니다.

저의 경우에는 초기에 반응형 웹을 위해 Bootstrap을 선호했었는데 최근에는 대부분의 UI 프레임워크들이 반응형 웹을 지원하기 때문에 조금은 메리트를 잃었습니다.

​

https://bootstrap-vue.js.org/

​

3. Quasar

vue와 함께 사용할 UI 프레임워크를 찾던 중 발견하게 된 퀘이사

외국 사람들이 좋다고 칭찬하는 댓글이 많길래 한번 찾아보고 사용중인데 매우 만족합니다.

https://quasar-framework.org/​

Quasar는 안드로이드의 Material Design 과 IOS의 테마를 둘 다 지원합니다.

아이폰 느낌의 웹 어플리케이션을 만든다면 Quasar가 좋은 선택입니다.

​

공식 홈페이지의 Components를 보시면 제공하는 컴포넌트의 종류가 매우 많습니다. 과할 정도!

아직 국내에는 자료도 별로 없는 프레임워크지만 한글화 문서만 잘 만들어지면 제 개인적인 생각으로는 vuetify보다 좋을 것 같습니다.

​

퀘이사도 SPA, SSR,PWA등을 지원합니다.

SPAs (Single Page App)

SSR (Server-side Rendered App) (+ optional PWA client takeover)

PWAs (Progressive Web App)

Mobile Apps (Android, iOS, …) through Apache Cordova

Multi-platform Desktop Apps (using Electron)

​

퀘이사의 유일한 단점은 한글화입니다.

​

vue로 웹 어플리케이션을 개발하고자 한다면 UI 코딩에 시간 뺏기지 마시고 위의 프레임워크들을 꼭 사용해보세요

개인적으로 추천드리면 영어가 약하다면 vuetify, 영어가 강하다면 quasar

전 영어가 약한데 번역기 믿고 quasar

​

​

감사합니다.