프론트엔드
버즈빌 프론트엔드 변천사
두줄요약
버즈빌이 AngularJS부터 Next.js까지 프론트엔드 아키텍처를 어떻게 바꿔왔는지 정리한 글입니다. 각 전환의 선택 이유와 운영상의 효과, 남은 과제까지 함께 공유했습니다.
구조와 흐름
- AngularJS 어드민 통합과 Vue 전환을 통해 중복 코드 제거와 개발 속도 개선
- Django 기반 연동에서 BFF 도입으로 프론트엔드 친화적 API 조합과 공통 로직 처리
- WebView, 모노레포, Server-Driven UI, Next.js, Hybrid SDK로 배포 유연성·운영 효율·성능 개선
선택 이유
- Vue는 낮은 러닝커브와 템플릿 기반 경험의 연속성 때문에 선택
- Turborepo는 적은 FE 인력 환경에서 생산성과 zero configuration을 중시해 선택
- Next.js는 SSR, API Routes, 파일 기반 라우팅으로 성능과 구조 단순화에 유리
트레이드오프
- BFF와 Server-Driven UI, Hybrid SDK는 편의성과 유연성 대신 서비스 계층·설계 복잡도 증가
- WebView 전환은 배포 지연 문제를 줄였지만 초기 연동 시행착오와 브릿지 관리 부담 존재
- Vue와 React 공존은 과도기 해결책이지만 신규 인력 학습 부담과 기술 스택 분열 문제 동반
성능/운영 포인트
- 코드베이스 절반 축소, 개발 속도 향상, 통합 어드민으로 일관된 UX 확보
- 모노레포로 10개 이상 프로젝트를 공통 컴포넌트와 유틸리티 중심으로 효율 관리
- Server-Driven UI와 Next.js SSR로 배포 없이 실험·커스터마이징, 초기 로딩과 체감 성능 개선