React 컴포넌트, 이제 드래그 앤 드롭으로!
Composify는 React 컴포넌트를 드래그 앤 드롭 방식으로 조립하여 UI를 구성하는 오픈소스 시각 편집기임.
기존 React 컴포넌트를 그대로 사용하며, JSX 문자열을 생성하여 개발 생산성을 향상시킴.
아직 초기 단계이나, 마케팅팀의 페이지 변경 요청에 대한 개발자 부담을 줄여줄 수 있을 것으로 기대됨.
Composify의 핵심 아키텍처
Composify는 기존 React 컴포넌트를 시각적으로 편집하고, 그 결과를 JSX 코드로 생성한다. 구체적으로, 사용자는 컴포넌트를 드래그하여 배치하고, 속성을 설정할 수 있다. 따라서, 개발자는 컴포넌트 코드를 수정하지 않고도 UI 레이아웃을 변경할 수 있다. 결과적으로, 마케팅팀과 디자이너가 직접 페이지를 제작할 수 있게 된다.
No-code vs Headless CMS 비교
Composify는 Wix와 같은 No-code 페이지 빌더와 Builder.io, Storyblok과 같은 Headless CMS의 중간 지점에 위치한다. 반면, No-code 빌더는 자체 컴포넌트에 종속되지만, Headless CMS는 컴포넌트 모델을 학습해야 한다. 따라서, Composify는 기존 컴포넌트를 재사용하여 학습 곡선을 줄이고, 유연성을 확보한다.
실제 프로젝트 적용 가이드
Composify를 실제 프로젝트에 적용하기 위해서는 기존 React 컴포넌트 라이브러리가 필요하다. 구체적으로, 컴포넌트를 Composify에 등록하고, 속성을 정의해야 한다. 따라서, 초기 설정에 약간의 시간이 소요될 수 있지만, 페이지 제작 속도를 크게 향상시킬 수 있다. 결과적으로, A/B 테스트와 같은 마케팅 활동을 더욱 효율적으로 수행할 수 있다.
