Vue.js, 실무에서 써보니… 예상과 달랐던 점들

Vue.js에 대한 이야기를 좀 해볼까 합니다. 요즘 프론트엔드 개발 씬에서 Vue.js를 사용하는 곳이 꽤 늘었죠. 특히 저희 팀에서도 몇 년 전부터 Vue.js를 메인으로 사용하고 있는데, 처음 도입할 때와 지금의 경험은 확실히 다릅니다.

Vue.js, 왜 쓰게 됐나

처음 Vue.js를 도입하기로 결정했을 때, 가장 큰 이유는 ‘쉬운 학습 곡선’과 ‘점진적 적용 가능성’이었습니다. 당시 저희 팀은 기존 레거시 시스템에 새로운 기능을 붙여야 하는 상황이었는데, jQuery로 덕지덕지 연명하던 코드베이스에 React나 Angular 같은 걸 덜컥 도입하기엔 부담이 컸죠. Vue.js는 기존 HTML에 Vue 컴포넌트를 덧붙이는 식으로 점진적으로 적용하기 좋다는 이야기를 많이 들었고, 공식 문서도 직관적이라 ‘금방 배울 수 있겠지’라는 기대감이 있었습니다. 대략 2주 정도의 기간 동안 프론트엔드 개발자 두 명이 Vue.js 기초를 익히고 간단한 토이 프로젝트를 만들어보는 것으로 충분할 거라고 예상했죠. 실제로 공식 튜토리얼이나 몇몇 온라인 강의를 따라 했을 때는 정말 ‘이 정도면 금방이네’ 싶었습니다.

실제 도입 후, 당황스러웠던 순간들

하지만 실제 서비스에 적용하려니 얘기가 달라졌습니다. 예상치 못했던 가장 큰 문제는 ‘상태 관리’였습니다. 간단한 컴포넌트 간 데이터 전달이야 prop으로 하면 되지만, 서비스 규모가 커지면서 여러 컴포넌트가 복잡하게 데이터를 공유해야 하는 상황이 발생했습니다. 처음에는 Vuex 같은 공식 상태 관리 라이브러리를 도입하려고 했는데, 이것조차도 처음엔 좀 생소하게 느껴졌습니다. 특히 초기 설정이나 모듈 분리 같은 부분에서 ‘이게 정말 최적의 구조일까?’ 하는 고민이 들더군요. 결국 Vuex를 적용하기까지 약 일주일 정도가 더 소요되었습니다. 처음 예상했던 2주 만에 모든 걸 끝내리라는 계획은 완전히 어긋났죠. 예상 vs 현실이었습니다.

또 하나, ‘라우팅’ 처리도 처음에는 간단할 줄 알았는데, 동적 라우팅이나 중첩 라우팅 같은 기능을 구현할 때 ‘Vue Router’ 설정이 생각보다 까다로웠습니다. 여러 페이지가 유기적으로 연결되고, 각 페이지마다 API 호출과 데이터 처리가 얽히는 상황에서는 코드 구조를 어떻게 잡아야 할지 한참을 고민해야 했습니다. 이런 복잡한 부분들은 Vue.js 공식 문서만으로는 완벽하게 해결되지 않는다는 것을 깨달았습니다. 결국 스택오버플로우나 커뮤니티 질문들을 샅샅이 뒤져야 했죠.

Vue.js, 이런 점은 정말 좋다

그럼에도 불구하고 Vue.js를 계속 사용하는 이유는 분명합니다. 일단 ‘컴포넌트 재사용성’은 정말 만족스럽습니다. 한 번 잘 만들어둔 컴포넌트는 다른 프로젝트나 다른 부분에 갖다 붙이기 매우 용이합니다. 예를 들어, 저희 팀에서는 날짜 선택 컴포넌트나 데이터 테이블 컴포넌트를 Vue.js로 만들어두었는데, 이걸 다른 프로젝트에서 재활용하면서 개발 시간을 엄청나게 단축할 수 있었습니다. 이 컴포넌트 하나를 만드는 데 약 3일 정도 걸렸지만, 이후 3개의 프로젝트에서 재활용되었으니 개당 약 1일의 개발 시간을 절약한 셈이죠. 이런 ‘반복 개발 방지’ 효과는 무시할 수 없습니다.

그리고 ‘반응성(Reactivity)’ 시스템은 여전히 매력적입니다. 데이터를 변경하면 UI가 알아서 업데이트되는 마법 같은 경험은 개발자의 피로도를 확실히 줄여줍니다. DOM 조작을 직접 신경 쓰지 않아도 된다는 점은 개발 생산성에 크게 기여합니다. 특히 실시간으로 데이터를 받아와 화면에 표시해야 하는 대시보드 같은 기능을 구현할 때, Vue.js의 반응성 덕분에 훨씬 수월하게 개발할 수 있었습니다.

현실적인 고민: 성능과 생태계

하지만 Vue.js가 만능은 아닙니다. 서비스 규모가 정말 커지고, 동시에 수백, 수천 개의 컴포넌트가 화면에 렌더링되어야 하는 극단적인 상황에서는 ‘성능 저하’가 느껴질 수 있습니다. 이런 경우, 컴포넌트 최적화나 코드 분할(Code Splitting), 가상 DOM(Virtual DOM) 활용법 등에 대한 깊은 이해가 필요합니다. 저희도 한때 특정 페이지 로딩 속도가 느려져서 애를 먹었던 경험이 있습니다. 그때 원인을 찾기까지 꽤 시간이 걸렸는데, 결국 불필요한 계산이 반복되는 곳을 찾아내고 최적화하는 데 거의 일주일을 쏟아부었습니다. 처음에는 ‘Vue.js니까 빠르겠지’라고 안일하게 생각했던 것이 실수였죠.

또 다른 부분은 ‘생태계’입니다. React나 Angular에 비해 Vue.js의 생태계가 상대적으로 작다고 느끼는 경우가 있습니다. 특히 특정 기능 구현을 위한 라이브러리를 찾을 때, 선택의 폭이 좁거나 유지보수가 잘 안 되는 라이브러리를 발견할 때도 있습니다. 물론 Vue.js 자체의 기능과 공식 라이브러리만으로도 대부분의 개발은 가능하지만, 좀 더 특수한 기능을 구현하고 싶을 때는 이런 부분이 아쉬울 수 있습니다.

그래서, Vue.js는 어떤 사람에게 맞을까?

Vue.js는 다음과 같은 분들에게 추천할 만합니다.

• 초보 프론트엔드 개발자: JavaScript 기초가 탄탄하다면 Vue.js는 비교적 쉽게 배울 수 있습니다. 공식 문서가 잘 되어 있고, 커뮤니티 자료도 풍부합니다.
• 점진적 도입을 원하는 팀: 기존 프로젝트에 SPA(Single Page Application) 기능을 조금씩 추가하고 싶을 때 Vue.js는 좋은 선택이 될 수 있습니다.
• 빠른 프로토타이핑이 필요한 경우: 아이디어를 빠르게 구현하고 검증해야 할 때 Vue.js의 생산성은 빛을 발합니다.

하지만 다음과 같은 경우에는 다른 프레임워크를 고려해 보는 것이 좋습니다.

• 극도로 복잡하고 방대한 규모의 애플리케이션: 애플리케이션이 엄청나게 커지고 수천 개의 컴포넌트를 동시에 다뤄야 한다면, React와 같이 더 성숙하고 최적화된 생태계를 가진 프레임워크가 더 나은 선택일 수 있습니다.
• 매우 특수한 기능 구현이 필요한 경우: 특정 분야에 특화된 라이브러리나 강력한 커뮤니티 지원이 필수적이라면, 생태계가 더 큰 프레임워크를 살펴보는 것이 좋습니다.

제가 Vue.js를 처음 접했을 때의 경험은 ‘생각보다 더 깊게 파고들어야 하는 부분이 있다’는 것이었습니다. 처음부터 완벽한 구조를 잡으려고 하기보다는, 일단 시작하고 부딪히면서 배우는 것도 나쁘지 않다고 생각합니다. 혹시 Vue.js 도입을 고민하고 있다면, 작은 규모의 프로젝트부터 시작해서 실제 경험을 쌓아보는 것을 권합니다. 당장 서비스를 만들지 않아도 좋습니다. GitHub에 있는 Vue.js 기반의 오픈 소스 프로젝트 코드를 분석해보는 것만으로도 큰 도움이 될 겁니다. 물론, 모든 프로젝트에 Vue.js가 정답은 아니라는 점, 항상 염두에 두시길 바랍니다.