평소에는 커스텀하기 편해서 UI를 직접 만드는 편이라 Vuetify를 쓰지 않았는데, 교육생들이 많이 사용해서 알려 주려면 직접 경험해 봐야겠다는 생각으로 사용해 봤습니다.

---

Vue 2 + TypeScript 환경에 Vuetify를 추가하는 방법은 아래 글에 정리했습니다. Vue2 + Vuetify(2) + TypeScript

---

Vuetify는 구글의 Material Design을 Vue.js에서 사용할 수 있게 만든 UI 프레임워크입니다. 다양한 컴포넌트를 제공해 원하는 화면을 빠르게 만들 수 있습니다.

$ vue add vuetify

Vue 3라면 목록 맨 아래의 **Vuetify 3**를 선택해 설치합니다.

위 명령어로 간단히 설치할 수 있고, 설치가 끝나면 위와 같은 화면이 나옵니다.

이 환경을 바탕으로 간단한 TodoList를 만들어 볼 예정입니다.