문제 발견

버핏케어 백오피스는 회사 내부에서 사용하는 관리 도구다. 하지만 배포할 때마다 7 ~ 8분이라는 시간이 소요됐고, 첫 로컬 개발 서버 구동 시간이 7.2초가 걸렸다.

매번 배포할 때마다 "빌드가 왜 이렇게 오래 걸리지?" 하는 생각이 들었다.

문제는 명확했다. 배포 시간이 길어지면서 긴급한 수정사항이 생겼을 때 빠르게 대응하기 어려웠고, 개발 중에도 서버를 재시작할 때마다 불필요한 대기 시간이 발생했다.

원인 파악

배포 시간을 줄이려면 AWS Amplify의 빌드 이미지와 인스턴스를 버전업해야 했다. 그런데 여기에는 선행 조건이 있었다.

라이브러리를 최신 버전으로 올려야 했다.

하지만 현재 프로젝트는 Next.js가 옛날 버전이었고, React도 17 버전을 사용하고 있었다. 이 상태에서 모든 라이브러리를 올리는 건 너무 큰 작업이 될 것 같았다.

그러던 중 문득 생각이 들었다.

"백오피스에 SEO가 꼭 필요할까?"

버핏케어는 회사 내부 관리 도구다. 검색 엔진에 노출될 필요도 없고, SSR이 필수적이지 않았다. 그렇다면 굳이 Next.js를 고집할 이유가 없었다.

결국 처음부터 다시 만들자는 결론을 내렸다.

해결 방법

Next.js → React 18 전환

Next.js 대신 React 18을 선택했다. 백오피스 특성상 SEO가 필요 없고, CSR만으로도 충분했기 때문이다.

기존 프로젝트에서 실제로 사용하는 코드만 마이그레이션했고, 쓰이지 않는 레거시 코드는 과감하게 삭제했다. 라이브러리도 필요한 것만 설치했다.

빌드 툴: Vite 선택

빌드 툴로는 Vite를 선택했다. 처음에는 단순히 "빠르다"는 이유로 선택했는데, 실제로 써보니 그 이상의 장점이 있었다.

Vite를 선택한 이유:

1. 네이티브 ESM 기반의 빠른 개발 서버

   Vite는 번들링 없이 브라우저의 네이티브 ES 모듈을 활용한다. 개발 서버 구동 시 전체 앱을 번들링하지 않고, 요청이 들어올 때마다 필요한 모듈만 변환해서 제공한다. 덕분에 프로젝트 크기와 관계없이 서버 시작이 거의 즉각적이다.

2. 빠른 HMR (Hot Module Replacement)

   코드를 수정하면 변경된 모듈만 교체되기 때문에 페이지 새로고침 없이 즉시 반영된다. Next.js의 Webpack 기반 HMR보다 훨씬 빠른 피드백을 받을 수 있었다.

3. Rollup 기반의 최적화된 프로덕션 빌드

   프로덕션 빌드는 Rollup을 사용해서 Tree-shaking과 코드 분할을 효율적으로 처리한다. 불필요한 코드가 제거되고, 번들 크기가 최소화된다.

4. 간단한 설정과 플러그인 시스템

   설정 파일이 간결하고, 필요한 기능을 플러그인으로 쉽게 추가할 수 있다. TypeScript, JSX, CSS 전처리기 등을 별도 설정 없이 바로 사용할 수 있었다.

코드 분할과 최적화

라우트별로 코드를 분할해서 초기 로딩 시 필요한 코드만 불러오도록 했다. 또한 데이터 캐싱과 낙관적 업데이트를 도입해 사용자 경험을 개선했다.

모바일에서도 사용할 수 있도록 반응형 UI도 함께 작업했다.

결과

개발자 경험(DX) 향상

가장 체감이 큰 건 로컬 개발 서버 구동 시간이었다. 7.2초에서 244밀리초로 줄어들면서 개발 중 서버를 껐다 켜는 일이 전혀 부담스럽지 않게 됐다. 배포 시간도 절반 이상 줄어들면서 긴급 수정이 생겼을 때 훨씬 빠르게 대응할 수 있게 됐다.

사용자 경험(UX) 향상

• Lighthouse 평균 점수 80 ~ 90점 달성
  • 캘린더 페이지: 50점 → 90점
  • 락커 페이지: 70점 → 80점
  • 회원 페이지: 85점 → 98점
    리뉴얼 전 Lighthouse 점수리뉴얼 후 Lighthouse 점수
• 데이터 캐싱으로 불필요한 네트워크 요청 감소
• 낙관적 업데이트로 즉각적인 피드백 제공
• 모바일 친화적 UI로 어디서든 사용 가능

배운 점

1. 기술 선택은 맥락에 따라 달라진다

Next.js는 좋은 프레임워크지만, 모든 상황에 맞는 건 아니다. 백오피스처럼 SEO가 필요 없는 경우엔 React만으로도 충분하다. 무조건 최신 프레임워크를 쓰는 게 아니라, 프로젝트 특성에 맞는 도구를 선택하는 게 중요하다.

2. 레거시 정리의 중요성

사용하지 않는 코드를 정리하고 필요한 라이브러리만 설치했을 뿐인데, 프로젝트 크기가 58% 줄어들었다. 정기적으로 코드를 점검하고 불필요한 부분을 제거하는 습관이 필요하다는 걸 느꼈다.

3. 개발 경험이 곧 생산성이다

개발 서버 구동 시간이 29.5배 빨라지면서 개발하는 게 훨씬 즐거워졌다. 작은 수정을 할 때도 기다림 없이 바로 확인할 수 있어서 피드백 속도가 빨라졌다. 개발자 경험이 좋아지면 자연스럽게 생산성도 올라간다.

요약

배포에 7 ~ 8분이 걸리던 Next.js 기반 백오피스를 React 18 + Vite로 전환하면서 배포 시간을 2 ~ 3분으로 단축했다. SEO가 필요 없는 백오피스 특성을 고려해 Next.js 대신 React를 선택했고, Vite의 빠른 개발 서버와 효율적인 번들링 덕분에 개발 경험이 크게 개선됐다. 레거시 코드를 정리하고 필요한 코드만 마이그레이션한 결과, 프로젝트 크기는 58% 줄었고 Lighthouse 점수는 80 ~ 90점대로 올라갔다. 기술은 맥락에 맞게 선택해야 하고, 개발자 경험이 좋아지면 생산성도 자연스럽게 따라온다는 걸 배웠다.