웹빌더 시스템 Part 1: GrapesJS와 Next.js로 만드는 웹빌더 개발기

간단 소개

GrapesJS와 Next.js를 이용한 웹빌더 개발 과정, 주요 기능, 커스터마이징, 배포 및 운영 전략을 소개합니다.

AI Summary

GrapesJS 기반 웹빌더 개발 배경 및 구조
- 여기어때는 펜션 홈페이지 제작 지원을 위해 GrapesJS와 Next.js를 활용한 웹빌더 서비스를 구축했다.
- GrapesJS의 UI 커스터마이징 한계와 외부 데이터 연동 문제를 해결하기 위해 Next.js로 래핑하는 방식을 채택했다.
- Next.js API Routes를 활용하여 웹빌더 전용 API를 구성, CMS 데이터 연동 및 AWS S3 연동을 구현했다.
주요 기능 및 커스터마이징
- Page Manager, Layer Manager, Block Manager, Assets Manager, Style Manager, Trait Manager 등 다양한 기능을 제공한다.
- 컴포넌트 등록 예시를 통해 GrapesJS의 커스터마이징 방법을 설명하고, React와 GrapesJS 간 데이터 공유 방안을 제시한다.
배포 및 운영 전략
- 5000여 개 펜션 홈페이지 운영을 위해 S3를 활용한 정적 리소스 배포 방식을 채택하여 비용을 절감했다.
- GrapesJS의 storageManager 기능을 활용하여 S3에 저장된 프로젝트 데이터를 불러와 기존 사이트 수정 및 신규 사이트 제작을 지원한다.