올리브영, 블록 기반 CMS로 콘텐츠 제작 시간을 99% 줄이다

Context

기존 에디토리얼 콘텐츠 발행은 기획 → 디자인 → 퍼블리싱 → 발행 과정을 거쳐 평균 7일 이상 소요되었으며, 외주 인력에 의한 디자인 및 퍼블리싱 단계에서 수십 시간의 커뮤니케이션 오버헤드가 발생했다. 같은 모양의 블록을 매번 새로 작성해야 했고, 제한된 인력으로 콘텐츠 수요를 충족할 수 없었다.

Technical Solution

• 콘텐츠 구조를 HTML 기반에서 블록 기반 배열 구조로 변경: 각 블록이 type과 data를 가진 독립된 객체로 정의되어 저장 및 렌더링
• Vue 컴포넌트 기반 초기 CMS 구현: 모듈 단위로 이미지/텍스트/상품 컴포넌트 개발하고 부모 컴포넌트에서 상태 관리
• Lit 웹 컴포넌트로 마이그레이션: @customElement 데코레이터로 프레임워크 독립적인 커스텀 HTML 태그 정의
• CMS 모듈을 npm 패키지로 배포: 다양한 프로젝트에서 라이브러리처럼 다운로드 후 사용 가능하도록 구성
• CKEditor5 도입: contentEditable의 브라우저 간 불일치 문제(태그 처리, 줄바꿈, execCommand 동작 차이)를 해결하기 위해 별도 에디터 라이브러리 사용
• Drag & Drop 기반 모듈 배치: 필수 정보 입력 후 자동 생성되는 방식으로 디자인 및 퍼블리싱 리소스 제거

Impact

• 콘텐츠 제작 시간 40시간에서 약 20분으로 단축(99% 감소)
• 에디토리얼 콘텐츠 발행량 약 2배 증가
• 현재 올리브영 내 발행 콘텐츠의 약 40%가 CMS를 통해 생성
• 외주 커뮤니케이션 비용 감소

Key Takeaway

프레임워크 종속적 구조(Vue)보다 웹 컴포넌트 표준 기반의 독립적 구조(Lit)가 장기적 유지보수와 다중 프로젝트 재사용성에서 유리하며, CMS는 단순한 관리 도구가 아닌 사용자 워크플로우를 근본적으로 개선하는 도구로 설계해야 한다.