라이브관 프론트엔드 입장에서 바라보기👀

Context

올리브영 온라인몰은 오프라인 성장과 함께 빠르게 확장되고 있으나 기술 부채가 축적되어 서비스 확장 및 개선에 어려움이 있었다. 기존 아키텍처에서 프론트엔드와 백엔드가 엉켜있어 개발 효율성이 저하되고 있었다.

Technical Solution

• SSR(Server-Side Rendering) 도입: 페이지 진입 시 서버에서 미리 주요 영역을 렌더링하여 공백 화면 노출 제거 및 SEO 최적화
• Next.js 12 + TypeScript 기반 아키텍처: React 기반 SSR 구현을 위해 Next.js 12 선택, 타입 안정성 확보
• Recoil + React Query 상태 관리: 클라이언트 상태와 서버 상태를 분리하여 데이터 페칭 및 캐싱 최적화
• Next/Image 컴포넌트 활용: 이미지 최적화 및 lazy loading 구현으로 페이지 로드 성능 개선
• Dynamic import를 통한 스크립트 분할: 당장 필요하지 않은 스크립트는 동적으로 로드하여 초기 번들 크기 감소
• Custom Hook으로 비즈니스 로직 분리: UI 렌더링 로직과 비즈니스 로직의 역할 분리로 코드 가독성 및 유지보수성 향상
• useMemo와 useCallback 활용: 불필요한 리렌더링 최소화를 통한 성능 최적화

Impact

프리미엘 전환 후 페이지 성능이 향상되었으며 UI/UX가 개선되어 고객에게 우수한 페이지 경험을 제공하게 되었다. 개발자 입장에서는 개발 효율성과 집중도가 증가하였다.

Key Takeaway

온라인몰과 같은 상품 중심 서비스에서는 빈 화면 노출을 최소화하고 SEO를 확보하기 위해 SSR을 선택하되, Next/Image, lazy loading, 스켈레톤 UI 등 프론트엔드 최적화 기법을 조합하여 이미지/영상 기반 콘텐츠의 로드 성능을 관리해야 한다.