Vuetify 사용기

고뇌

프론트엔드 개발을 할 때면 늘상 자신없는게 있는데, 바로 어떻게 하면 예쁘게 만들 수 있을까 하는 문제다. 내가 보기에 나는 디자인에 대한 본능적 감각이 시원찮고, 그렇다고 각잡고 앉아 디자인을 배우자니 개발만으로도 머리가 벅차다. 다행히 Bootstrap 이래로 가져다 쓰기만 해도 괜찮은 결과물이 나오는 UI Component library(혹은 framework)가 많이 나왔다. 나는 주로 Bootstrap을 애용하는 편인데, 예쁘기도 하지만 무엇보다도 익숙하기 때문이다. 하지만 왜인지 지겹기도(?) 하고, 예전에 AngularJS 시절에 몇 번 만들어본 Material Design의 반응이 좋았던게 생각나 이걸로 만들어보기로 했다.

선택

awesome-vue의 여기를 보면 Material Design을 구현한 프레임워크들이 몇 있다. 장단점을 간단히 비교해보았다. 결론적으로 이 포스팅의 제목처럼 vuetify가 최종 선택이다.

1. vue-material

장점

1. AngularJS Material의 Vue.js 버전이라 기존의 그것에 익숙하다면 쓰기 편하다.
2. 공식 문서가 깔끔하다.

단점

1. 갖출 것은 다 갖췄지만 컴포넌트 수가 vuetify보다 적다.
2. github의 star가 vuetify의 절반 수준.

2. vuetify

장점

1. 컴포넌트가 많다.
2. Vue CLI 3로 쉽게 시작할 수 있다.
3. github에 star가 많다. 12000개 이상
4. 타 프레임워크에 비하여 비교적 생태계가 풍부하다.

단점

1. 기능이 너무 많아서 그런지 공식 문서가 난잡하다.
2. 개발하다보면 tag와 attribute가 난잡해진다.
3. Vue CLI 3로 시작하지 않으면 원인불명 해결불가의 오류가 발생할 때가 많다.

3. muse-ui

장단점

• vue-material과 장단점이 대동소이하여 생략.

사용 소감

1. 좋다. 앞으로도 계속 쓸 예정.
2. vuetify는 Bootstrap보다 사용하기 어렵다. component가 훨씬 많고, attribute도 훨씬 많기 때문이 아닌가 싶다.
3. 결과물에 대한 반응이 좋다. 어느새 사람들이 Material Design에 더 익숙해진 나머지 Bootstrap보다 선호하게 된 것이 아닌가 싶다.
4. html tag와 attribute가 장황해진다. 이건 내가 잘 못 써서 그런가 싶기도 하다.
5. 공식 문서가 상세하고 잘 되어있는 것 같은데, 막상 써보니 좀 난잡하다.
6. github star가 많은 element-ui도 써봤는데(소감), vuetify가 더 낫다.
7. Vue.js의 중국인 파워에 놀람.