Vue.js로 웹페이지 리빌드하기 - (1) 라이브러리 선정

현재, 토이 프로젝트랍시고 하나 만들어둔 조잡한 사이트가 하나 있습니다.

012345

mustache와 jquery, bootstrap로 만든 간단한 페이지

 

가볍게 만든 페이지고, 기본적으로는 동작 확인과 간단한 사용을 전제로 만들었기에,

디자인은 하나도 신경쓰지않은 것이 확 보이는 페이지입니다.

저는 웹 디자이너가 아닌데다, 디자인 센스도 없는지라 이런 결과물이 나왔는데 .. 

이번에, Vue.js를 공부하면서 그래도 어느정도 구색은 갖출 수 있어야하지 않겠나? 라는 생각에

조금 더 공부해보기로 했습니다. 

 

 

Vue.js에서 디자인을 할 때는 여러 선택지가 있었습니다.

지금까지 하던 대로, Bootstrap 5를 사용하는 방법. 

https://bootstrap-vue.org/

BootstrapVue

 

vuetify

https://vuetifyjs.com/en/

Vuetify — A Material Design Framework for Vue.js

 

Buefy

https://buefy.org/#/

Buefy: lightweight UI components for Vue.js based on Bulma

 

Keen UI

https://josephuspaye.github.io/Keen-UI/#/ui-textbox

JosephusPaye/Keen-UI

 

이 외에도 여러 사이트가 있지만, 사이트를 하나하나 열어보면서 공식 홈페이지의 정보량을 보고

몇가지 사이트를 픽업해보았습니다.

 

(참고한 곳 - 다나와 블로그)

https://danawalab.github.io/common/2020/02/15/Common-vuejs-uiComponentLibarary.html

2020년 Vue.js UI 컴포넌트 라이브러리 종류

 

 

부트스트랩이야 웹 개발을 하는 사람이라면 누구든 들어봤을, 정말 양산형의 익숙한 디자인의 그것인데..

이번에도 결국 익숙함에 부트스트랩을 잡았지만, (직장 생활 중에도 부트스트랩으로 디자인했음)

이번에는 이왕 어플 디자인을 갈아엎고, 제대로 배치하려고 하니..

이직 시 면접자리에서 이런거 만들었습니다. 하고 보여주며, 면접관 분들이 첫인상 만큼은 호오~ 할 수 있는 녀석을 만들고자 조금 더 노력해보기로 했습니다.

 

그래서, 부트스트랩은 탈락. 

 

vuetify는 템플릿도 존재하고, 각 기능 설명이 충실하고

buefy는 템플릿은 없으나, 설명 자체는 충실하게 되어있네요.

KeenUI는 추천페이지에도 써져있었지만, 하나의 라이브러리로 구성되기보단 import 시킨 후

따로 등록시켜 사용하는 느낌이라 부트스트랩에 가까운 감각이었습니다. 템플릿은 없습니다만.. 

(부트스트랩에 가깝긴하네요)

 

 

그리고 여기서 제가 원하는 걸 정리해보자면,

- 구데기같이 만들어놓은 사이트를 깔끔하게 보이게 하고 싶다.

- 원활하게 하이브리드앱으로서 돌아가게 하고 싶다.

였기에, 템플릿을 사용 할 수 있는 것을 고르기로 했습니다.

 

최종적으로 vuetify 낙찰.

 

 

 

이제는 github 뿐만아니라, 블로그에도 내가 뭘 하고 무슨 문제에 봉착해서 어떻게 해결 했는지를 좀 써보려고 합니다.

전문인 백엔드 & Springboot에 관한 문제는 개인적으로 정리한 문서가 있습니다만,

일단은 한번에 올린 후, 또 같은 문제가 발생하면 제대로 된 포스팅을 하는 방향으로 결정했습니다.

이런걸 개인적으로 해결해서 남기는 것보다, 정리해서 남에게 설명하는 듯이 올리는 것이 내 것으로 만들기 좋다. 라는 팁을 얻었는데.. 알고는 있었지만, 이렇게 하기까지 꽤 오랜 시간이 흘렀네요.

 

여튼, 당분간은 프론트 공부 겸 개인 프로젝트 메인 화면 개발합니다.