편집기를 불러오는 중입니다.
편집은 넓은 화면에서 쓰기 좋습니다. 휴대폰에서는 미리보기 위주로 확인하세요.
포토샵 속성 패널처럼 고른 영역의 글자 크기·색·여백을 바로 바꿉니다.
데스크톱·태블릿·모바일 폭으로 바꿔 가며 확인합니다.
CSS까지 묶은 파일 하나로 받아 어디에 올려도 그대로 열립니다.
간단한 소개 페이지 하나를 고치려고 개발자를 부르는 일을 줄입니다. 캔버스에서 영역을 고르고, 포토샵 속성 패널처럼 오른쪽에서 글자·여백·배경을 바꾸고, 끝나면 HTML 파일 하나로 받습니다. 받은 파일은 어디에 올려도 그대로 열립니다.
직접 만들기 전에 오픈소스를 먼저 비교했습니다.
| 후보 | 장점 | 이 작업에 안 맞는 점 |
|---|---|---|
| GrapesJS (BSD-3) | 프레임워크 무관, 스타일 관리자·레이어·기기별 미리보기 내장, HTML/CSS 내보내기 | 기본 UI가 무거워 테마를 덮어써야 함 |
| Craft.js (MIT) | React 컴포넌트 단위 편집이 깔끔 | 편집 UI를 거의 다 직접 만들어야 함 |
| Puck (MIT) | 데이터(JSON) 중심 페이지 구성 | 결과가 React 렌더링 전제라 HTML 파일 한 장과 거리가 있음 |
| Editor.js (Apache-2.0) | 블록 문서 편집에 강함 | 레이아웃·스타일 편집이 목적이 아님 |
"영역 선택 → 스타일 조절 → HTML로 받기"가 기본 기능으로 있는 것은 GrapesJS뿐이었습니다. 그래서 편집 엔진은 GrapesJS를 그대로 쓰고, 이 사이트의 톤에 맞춰 패널 색과 블록 목록, 위쪽 빠른 조절 막대만 손봤습니다.