Show GN: Composify - React 오픈소스 비주얼 에디터 & SDUI 라이브러리

1 month ago 15

지난 회사에서 내부적으로 사용하던 React 기반 비주얼 에디터를 정리해 오픈소스로 공개했습니다. 프로모션 페이지, 제품 소개, 블로그 등에서 반복적으로 쓰이는 컴포넌트들을 미리 등록해 두면, 페이지 구성과 수정 작업을 비개발자가 직접 수행할 수 있도록 돕는 도구입니다.

제가 재직하던 회사에서는 실제로 전체 트래픽의 절반 이상을 이 에디터로 만든 페이지가 처리했습니다. 마케팅, 프로덕트, 콘텐츠 팀이 엔지니어의 도움 없이도 빠르게 페이지를 만들고 배포할 수 있었습니다.

동작 방식은 Puck이나 Builder.io와 유사합니다. 미리 만들어 둔 React 컴포넌트를 등록하고, 각 prop을 어떤 형태로 입력받을지 설정하면 Drag & Drop 에디터에서 바로 사용할 수 있습니다. 페이지 콘텐츠는 원격 서버에 저장되어, 배포 없이도 실시간으로 페이지를 업데이트할 수 있습니다.

가장 큰 차이점은 기존 컴포넌트를 수정하지 않아도 바로 사용할 수 있다는 점입니다. 별도의 스키마를 새로 정의하거나 컴포넌트 구조를 바꿀 필요 없이, 이미 사용 중인 컴포넌트를 그대로 에디터에 연결할 수 있도록 설계했습니다.