Vue.js 리드·아키텍트 시스템 설계 면접

Module Federation은 런타임 번들 공유로 중복을 줄이고 Vue 인스턴스를 공유할 수 있어 가장 효율적이지만 Webpack 5 의존성과 버전 관리 복잡도가 높습니다. iframe은 완벽한 격리를 제공하지만 성능 오버헤드와 통신 비용이 크고, Web Components는 표준 기반으로 프레임워크 독립적이나 Vue의 반응성 시스템과 통합이 어렵습니다. Vue 생태계에서는 Single-SPA + Module Federation 조합을 추천하며, 먼저 경계 컨텍스트를 식별하고 신규 기능부터 독립 앱으로 개발하면서 레거시는 Shell 앱에 유지하는 Strangler Fig 패턴으로 점진적 전환을 진행합니다. 공통 디자인 시스템은 별도 패키지로 분리하고, 전역 상태는 Custom Events나 공유 Pinia 스토어로 관리하되 최소화하는 것이 핵심입니다.

도메인별로 독립적인 Pinia 스토어를 구성하되, 스토어 간 직접 참조 대신 Composition API를 활용한 Composable 레이어를 두어 의존성을 역전시킵니다. 서버 상태는 VueQuery나 Pinia Colada를 사용해 캐싱, 리페칭, 백그라운드 업데이트를 자동화하고, 클라이언트 전용 UI 상태만 Pinia에서 관리합니다. 낙관적 업데이트는 mutation 전 로컬 상태를 즉시 변경하고 rollback 함수를 준비하며, 캐시 무효화는 mutation 성공 시 관련 쿼리 키를 invalidate하는 방식으로 구현합니다. 도메인 간 통신이 필요한 경우 Event Bus 대신 mitt 라이브러리나 Custom Events를 사용하되, 가능한 한 props와 emit으로 명시적 의존성을 유지합니다. 복잡한 비즈니스 로직은 스토어가 아닌 도메인 서비스 레이어로 분리하여 테스트 가능성을 높입니다.

SSR은 최신 데이터를 보장하지만 서버 부하가 크고 TTFB가 길며, SSG는 빌드 타임에 생성되어 CDN 캐싱으로 성능은 최고지만 동적 데이터 반영이 어렵습니다. ISR은 둘의 중간으로 주기적 재생성이 가능하나 Nuxt 3에서는 아직 실험적이며, Partial Hydration은 상호작용이 필요한 부분만 hydrate해 TTI를 개선하지만 구현 복잡도가 높습니다. 전자상거래에서는 상품 리스트와 상세 페이지는 ISR로 5분마다 재생성하고, 장바구니와 마이페이지는 CSR로 처리하며, 랜딩 페이지는 SSG로 빌드하는 하이브리드 전략이 효과적입니다. Nuxt의 routeRules를 활용해 경로별 렌더링 모드를 설정하고, Redis 같은 캐싱 레이어를 SSR 앞단에 두어 동일 요청의 중복 렌더링을 방지합니다. 또한 Suspense와 lazy loading을 결합해 above-the-fold 컨텐츠만 우선 렌더링하는 전략도 병행합니다.

대시보드처럼 여러 리소스를 조합하는 경우 GraphQL이 over-fetching을 방지하고 단일 요청으로 필요한 데이터만 가져올 수 있어 유리하지만, 백엔드 지원이 필요하고 캐싱이 복잡합니다. REST API는 HTTP 캐싱을 활용하기 쉽고 기존 인프라를 그대로 사용할 수 있으나, BFF(Backend for Frontend) 패턴으로 중간 레이어를 두어 여러 API를 조합하는 것이 좋습니다. API 레이어는 axios 인스턴스를 감싼 Repository 패턴으로 추상화하고, TypeScript와 OpenAPI 스펙으로 자동 타입 생성을 구현합니다. 독립적인 요청은 Promise.all로 병렬 처리하고, 의존적 요청은 VueQuery의 enabled 옵션으로 순차 실행을 제어합니다. 에러는 전역 interceptor에서 401/403 같은 공통 에러를 처리하고, 도메인별 에러는 컴포넌트에서 처리하며, 네트워크 에러는 exponential backoff 알고리즘으로 자동 재시도합니다.

정적 에셋(JS, CSS, 이미지)은 HTTP 캐시 헤더로 브라우저 캐싱하고 서비스 워커로 오프라인 지원합니다. API 응답은 변경 빈도에 따라 분류하여, 거의 변하지 않는 마스터 데이터는 IndexedDB에 장기 캐싱하고, 자주 조회되는 사용자 데이터는 VueQuery의 메모리 캐시에 5분 TTL로 저장하며, 실시간성이 중요한 데이터는 캐싱하지 않습니다. stale-while-revalidate 전략은 캐시된 데이터를 즉시 보여주고 백그라운드에서 갱신하여 UX와 신선도를 모두 확보합니다. 캐시 무효화는 mutation 발생 시 관련 쿼리를 명시적으로 invalidate하고, 버전 기반 캐시 키를 사용해 배포 시 자동으로 기존 캐시를 무효화합니다. 또한 Cache-Control 헤더와 ETag를 활용한 조건부 요청으로 불필요한 데이터 전송을 줄이고, prefetch로 사용자 행동을 예측해 미리 데이터를 로드합니다.

Headless UI 패턴은 로직만 제공하고 스타일은 사용자에게 맡겨 최대 유연성을 제공하지만 일관성 유지가 어려워, 기본 스타일을 제공하되 오버라이드 가능한 하이브리드 접근이 적합합니다. Compound Components는 Select와 Option처럼 부모-자식 관계가 강한 경우 provide/inject로 컨텍스트를 공유하여 API를 직관적으로 만듭니다. Renderless Components는 복잡한 상태 로직(Pagination, InfiniteScroll)을 재사용하되 렌더링은 슬롯으로 위임합니다. 테마는 CSS Variables로 색상과 간격을 정의하고 ThemeProvider로 주입하며, Tailwind 같은 유틸리티 우선 접근도 병행합니다. TypeScript로 props와 이벤트를 엄격히 타이핑하고, 제네릭으로 데이터 타입을 보존합니다. 접근성은 VueUse의 useAriaAnnouncer 같은 composable로 자동화하고, 모든 인터랙티브 요소에 키보드 네비게이션과 ARIA 속성을 필수로 구현하며, axe-core로 자동 테스트합니다.

먼저 vue-router의 lazy loading으로 라우트별 코드 스플리팅을 적용하고, Webpack Bundle Analyzer나 rollup-plugin-visualizer로 번들 구성을 분석합니다. 큰 라이브러리(lodash, moment)는 경량 대안(lodash-es, dayjs)으로 교체하고, Tree Shaking이 작동하도록 ES Module 빌드를 사용합니다. Vite의 manualChunks로 vendor(vue, pinia), common(공통 유틸), feature(도메인별) 청크를 분리하고, 각 청크가 200~300KB를 넘지 않도록 조정합니다. 자주 변경되는 코드와 안정적인 코드를 분리해 캐싱 효율을 높이고, prefetch/preload로 다음 페이지 리소스를 미리 로드합니다. 또한 Vite의 build.cssCodeSplit으로 CSS도 분리하고, 이미지는 WebP 변환과 lazy loading을 적용하며, 폰트는 subset으로 용량을 줄입니다. 마지막으로 Compression(Brotli)을 활성화하고 CDN에 배포하여 전송 속도를 개선합니다.