올리브영, 블록 기반 CMS와 Lit 웹 컴포넌트로 콘텐츠 제작 시간을 7일에서 20분으로 단축한 경험 공유

핵심 기술

올리브영은 기존 7일 이상 소요되던 콘텐츠 제작 과정을 혁신하기 위해 자체 블록 기반 CMS를 구축했으며, Vue에서 Lit 기반 웹 컴포넌트로 전환하여 제작 시간을 20분으로 단축하고 확장성을 확보했습니다.

기술적 세부사항

• 기존 발행 방식의 비효율성: 콘텐츠 기획, 디자인, 퍼블리싱, 발행 단계를 거치며, 특히 디자인 및 퍼블리싱 외주로 인한 수십 시간의 커뮤니케이션 시간 소요, 동일 블록 반복 작성으로 인한 제작 효율 저하, 제한된 인력으로 인한 수요 대응 불가, 발행량 부족으로 인한 고도화 제한 등의 문제가 있었습니다.
• CMS 구축 목표: 퍼블리싱 및 디자인 단계 제거, 모듈 단위 블록 시스템 도입을 통한 디자이너 개입 최소화, 기획자/BPO도 개발자 도움 없이 콘텐츠 작성 가능한 시스템 구현 ('기획만 하면 바로 발행').
• CMS 아키텍처:
  • 블록 기반 구조: 텍스트, 상품, 이미지 등 콘텐츠 요소를 독립적인 type과 data를 가진 배열 형태로 저장합니다.
  • Vue 기반 초기 구현: 빠른 프로토타입 개발 및 사용자 피드백 확보를 위해 Vue를 사용했으나, Vue 종속성, 재사용성 및 확장성 부족, 상태 관리 복잡성 증가 등의 한계를 경험했습니다.
  • Lit 기반 웹 컴포넌트 전환: 프레임워크 독립성, 웹 컴포넌트 표준 기반의 장기적 유지보수 유리함, 다른 프로젝트에서의 재사용성 및 라이브러리화 가능성 때문에 Lit으로 전환했습니다.
    • 각 모듈(이미지, 텍스트, 상품)을 Lit 컴포넌트로 제작.
    • 모듈 간 통신은 이벤트 기반으로 처리.
    • 상태 관리는 중앙 store에서 수행.
    • CMS 모듈을 npm 패키지로 배포하여 재사용성을 높임.
    • @customElement를 사용하여 브라우저에서 사용자 정의 HTML 태그로 인식되도록 함.
    • static override styles와 unsafeCSS를 활용하여 컴포넌트 스타일 캡슐화.
    • @property를 사용하여 설정값 변경 시 UI 자동 갱신 (예: config 객체를 통한 visibleModuleList 제어).
• 프로젝트 성과: 콘텐츠 제작 시간 40시간 → 20분 단축, 외주 커뮤니케이션 비용 감소, 에디토리얼 콘텐츠 발행량 약 2배 증가, 현재 발행 콘텐츠의 약 40%가 CMS 통해 생성.

개발 임팩트

콘텐츠 제작 워크플로우를 근본적으로 개선하여 생산성을 극대화했으며, 이는 사용자에게 더 풍부하고 개인화된 콘텐츠를 적시에 제공할 수 있는 기반을 마련했습니다. 또한, 프레임워크 독립적인 웹 컴포넌트 기반 아키텍처를 통해 시스템의 재사용성과 확장성을 확보하여 장기적인 유지보수 및 기술 부채 감소에 기여했습니다.

커뮤니티 반응

톤앤매너

전문적이고 실무적인 경험 공유에 초점을 맞추어, CMS 구축 및 기술 전환 과정을 명확하고 구체적으로 설명하고 있습니다.