Shadcn 게섯거라 Volt가 간다

제목은 살짝 어그로이고 평소 Shadcn 라이브러리를 사용했던 개발자라면 Volt라는 다른 UI 라이브러리가 생겼나 하고 의아해했을 것이다. 사실 Volt는 Vue에서 사용되는 유명한 UI 라이브러리인 Primevue의 shadcn 버전이라고 생각하면 된다. Primevue도 기존의 다른 UI 라이브러리처럼 커스텀이 비교적 귀찮고 어려운 구조로 되어있었다. 게다가 내가 직접 프로젝트에 적용해서 사용하던 시절에는 SCSS에서 TailwindCSS로 전환이 이뤄지는 큰 업데이트가 진행되던 시기라서 개고생을 했던 기억이 난다.

 

개고생을 했던 기억과는 별개로 UI 컴포넌트들의 퀄리티는 꽤 좋은 편이다. 디자인은 취향 차이가 있겠지만 굉장히 다영한 요소들을 지원하고 디자인, 편의성, 기능 등을 고려하면 Shadcn보다 더 좋다고 생각한다. 대신 프레임워크는 Vue를 사용해야 한다.😅

 

사용은 직접해보지는 않았지만 Primevue 설치하고 기본적인 설정 이후에 사용하려는 컴포넌트를 개별적으로 설치하면 끝이다. 약간 특이한 게 컴포넌트가 루트에서 volt라는 폴더에 생성되는데 components/ui에 설치되는 Shadcn과 다르게 존재감 과시를 더 하는 거 같다.😆

import Button from '@/volt/Button.vue';
import SecondaryButton from '@/volt/SecondaryButton.vue';
import ContrastButton from '@/volt/ContrastButton.vue';
import DangerButton from '@/volt/DangerButton.vue';

 

약간 우려되는게 위와 같이 버튼을 형태 별로 따로 설치하고 임포트를 해야 하는데 추후에 많은 컴포넌트를 사용하면 폴더 구조가 지저분해지고 구분이 어려울 거 같다. 사용자가 직접 구조를 관리하면 되겠지만, 경험상 UI 라이브러리를 가져다쓰면서 커스터마이즈를 과감하게 하면 골치 아파지는 문제가 자주 발생하는 거 같다.

 

요즘 국내에서도 프론트 개발자 JD를 봐도 NextJS로 작업하는 비중이 압도적이라 자연스럽게 사이드 프로젝트를 해도 NextJS로 하고 있지만 만약 기회가 생긴다면 다시 사용해보고 싶은 UI 라이브러리다.

 

https://volt.primevue.org/