라이브관 프론트엔드 관점에서의 개발 리뷰

올리브영은 기존 온라인몰의 기술 부채를 해결하기 위해 신규 아키텍처 기반의 서비스 전환을 진행하고 있으며, 그 결과물로 라이브관을 오픈했다.

프리미엄관 전환 경험을 바탕으로 라이브관에도 Next.js 12, TypeScript, Recoil, React Query를 도입했다. 특히 검색 엔진 최적화(SEO)와 빠른 초기 화면 노출을 위해 SSR(Server Side Rendering) 방식을 채택했다.

이미지와 영상 콘텐츠가 많은 서비스 특성을 고려하여 다음과 같은 최적화를 진행했다.

• Next/Image를 적극적으로 활용
• 뷰포트 밖의 영상은 미리 로드하지 않도록 처리

개발 과정에서는 Custom hook을 통한 로직 분리, useMemo 및 useCallback을 활용한 렌더링 최적화, dynamic import를 통한 스크립트 로딩 지연 등을 실천하며 효율적인 협업을 이어가고 있다.