올리브영, CMS 전환으로 콘텐츠 제작 시간 99% 단축!
by DD
10개월 전
조회수 15
Vue 기반 CMS에서 Lit 웹 컴포넌트 기반으로 전환하여 프레임워크 독립성 확보
블록 기반 CMS 도입으로 콘텐츠 제작 시간 7일 → 20분으로 획기적 단축
모듈화된 CMS를 통해 재사용성 및 확장성을 개선하고, 개발 생산성 향상
블록 기반 CMS 아키텍처 설계
올리브영 CMS는 블록 기반 구조를 채택하여 텍스트, 이미지, 상품 등 콘텐츠 요소를 독립 모듈로 관리한다. 구체적으로 각 블록은 타입과 데이터를 가진 배열 형태로 저장되며, Drag & Drop 기능을 통해 손쉽게 배치할 수 있다. 따라서 퍼블리셔 의존도 감소와 콘텐츠 제작 속도 향상을 동시에 달성했다.
Vue vs Lit: 기술 스택 전환의 이유
초기 Vue 기반 CMS는 빠른 프로토타입 제작에 유리했지만, 프레임워크 종속성과 확장성 부족 문제가 있었다. 반면 Lit 웹 컴포넌트 기반으로 전환하면서 프레임워크 독립성을 확보하고, 다른 프로젝트에서 CMS 모듈 재사용이 가능해졌다. 결과적으로 유지보수성과 개발 생산성을 향상시켰다.
Lit 웹 컴포넌트 구현 핵심 기술
Lit 웹 컴포넌트 구현 시, @customElement 데코레이터를 사용하여 사용자 정의 HTML 태그를 정의한다. 구체적으로 @property 데코레이터와 접근자를 통해 반응형 속성을 관리하고, static override styles와 unsafeCSS를 활용하여 스타일을 캡슐화한다. 따라서 코드 재사용성과 UI 일관성을 확보했다.
