[ COCOMU ] 코드 스플리팅으로 사용자 경험 살리기

왜 코드 스플리팅이 필요했을까?

---

cocomu는 React 기반의 SPA(Single Page Application)로 개발되었습니다.

SPA는 페이지 전환 시 새로고침 없이 콘텐츠를 렌더링할 수 있다는 장점이 있지만, 그만큼 초기 진입 시점에 필요한 모든 JavaScript 파일을 한 번에 불러오는 구조적인 특성을 가지고 있습니다.

 

이 구조는 프로젝트가 작을 땐 문제가 되지 않지만, 페이지 수가 많아지고 컴포넌트가 복잡해질수록 초기 번들 크기가 비대해지며, 첫 화면 렌더링 속도에 직접적인 영향을 주기 시작합니다.

특히 모든 페이지와 컴포넌트를 import로 정적으로 불러오는 경우, 사용자가 방문하지도 않은 페이지의 코드까지 함께 로드되기 때문에, 초기 로딩 시간이 길어지고 사용자 경험이 저하되는 문제가 발생했습니다.

 

동적 import를 활용한 코드 스플리팅 최적화

---

이러한 문제를 해결하기 위해, 저희는 React의 lazy()와 동적 import를 활용한 코드 스플리팅(Code Splitting) 전략을 도입했습니다.

 

핵심 아이디어는 단순합니다.

지금 당장 필요한 컴포넌트만 로드하고, 나머지는 실제로 필요할 때 불러오자!

 

const StudyCreate = lazy(() => import('@pages/Study/StudyCreate'));
const StudyEdit = lazy(() => import('@pages/Study/StudyEdit'));
const StudyParticipation = lazy(() => import('@pages/Study/StudyParticipation'));
const StudyDetail = lazy(() => import('@pages/Study/StudyDetail'));

const SpaceList = lazy(() => import('@pages/Space/SpaceList'));
const MemberList = lazy(() => import('@pages/Study/MemberList'));
const StudyInfo = lazy(() => import('@pages/Study/StudyInfo'));

const MyPage = lazy(() => import('@pages/MyPage'));
const MyStudyList = lazy(() => import('@pages/MyPage/MyStudyList'));
const MySpaceList = lazy(() => import('@pages/MyPage/MySpaceList'));

위와 같은 방식으로 각 페이지 단위로 코드를 분리하면, 초기 번들에는 홈 화면에 필요한 최소한의 코드만 포함되고 마이페이지, 게시글 작성 페이지 등은 사용자가 진입하는 순간 네트워크 요청을 통해 로드됩니다.

 

결과적으로, 초기 번들 크기 감소를 통해 첫 화면이 더욱 빠르게 렌더링되는 효과를 얻을 수 있었습니다.

 

 

Suspense를 활용한 UX 향상

---

코드 스플리팅을 통해 특정 컴포넌트를 lazy()로 지연 로딩하면, 해당 컴포넌트는 네트워크 요청이 완료될 때까지 화면에 표시되지 않는 상태가 됩니다.

이때 아무런 처리를 하지 않으면 사용자 입장에서는 잠깐의 빈 화면을 보게 될 수 있습니다. 이러한 공백 상태를 자연스럽게 처리하기 위해 React에서는 Suspense라는 컴포넌트를 제공합니다.

Suspense는 지연 로딩되는 컴포넌트가 준비되기 전까지 대체 UI(예: 로딩 스피너, 스켈레톤 등)를 보여주는 역할을 합니다.

 

<Suspense fallback={<Loading />}>
  <RouterProvider router={router} />
</Suspense>

위와 같이 fallback 속성에 로딩 컴포넌트를 지정하면, 지연 로딩되는 컴포넌트가 로드되는 동안 사용자에게 일관된 피드백을 제공할 수 있습니다.

 

이를 통해 사용자는 갑작스러운 공백이나 깜빡임 없이, 부드럽고 안정적인 화면 전환을 경험하게 되고, 결과적으로, 코드 스플리팅은 단순한 성능 최적화를 넘어 사용자 경험(UX)까지 향상시키는 설계 전략으로 작용할 수 있습니다.