프론트엔드
웹빌더 시스템 Part 1: GrapesJS와 Next.js로 만드는 웹빌더 개발기
두줄요약
GrapesJS와 Next.js로 펜션 홈페이지용 웹빌더를 구성한 사례를 정리했습니다. 정적 배포와 S3 연동으로 운영 효율과 비용 절감을 함께 확보했습니다.
문제 상황
- 펜션 홈페이지를 빠르게 제작·유지보수할 웹빌더 필요
- GrapesJS 기본 UI만으로는 커스터마이징과 외부 데이터 연동에 한계
- 이미지 업로드, HTML 저장, 제휴점 정보 조회 같은 서버 작업 처리 필요
해결 방법
- GrapesJS를 Next.js로 래핑해 프론트와 서버 로직 통합
- Next.js API Routes로 웹빌더 전용 API 구성
- S3 연동과 CMS 데이터 가공을 통해 배포·조회 흐름 설계
구조와 흐름
- React와 GrapesJS 간 템플릿 정보 공유를 window 전역 객체로 처리
- storageManager remote 설정으로 S3의 프로젝트 데이터를 자동 로드
- 템플릿이 없으면 신규 생성, 있으면 기존 사이트 수정 흐름 제공
성능/운영 포인트
- HTML 중심 정적 사이트를 S3에 배포해 서버 비용 절감
- 예약 같은 동적 기능은 별도 시스템으로 분리
- getHtml, getCss, getProjectData로 게시 결과를 구조화해 저장