WYSIWYG 방식으로 HTML을 편집할 수 있는 오픈소스 정리

English (N/A)
#HTML#WYSIWYG#GrapesJS#오픈소스

HTML을 시각적으로 편집하고 싶다고 하면 보통 두 가지 종류의 도구가 있다.

첫 번째는 텍스트 WYSIWYG 에디터 다. Quill, TipTap, CKEditor 같은 도구들이 여기에 해당한다. 이런 에디터들은 워드프로세서처럼 텍스트를 굵게 만들거나, 링크를 추가하거나, 이미지를 삽입하는 용도다.

두 번째는 비주얼 HTML 빌더 다. Figma처럼 마우스로 요소를 드래그앤드롭하고, 크기를 조절하고, 위치를 바꾸는 방식이다. 이 글에서 다루는 건 바로 이 두 번째 종류다.

비주얼 HTML 빌더 오픈소스

GrapesJS

GrapesJS는 이 분야에서 가장 유명한 오픈소스다. 웹 페이지나 이메일 템플릿을 시각적으로 편집할 수 있다.

  • 드래그앤드롭, 리사이즈, 스타일 편집 모두 지원
  • React, Vue 등 프레임워크와 통합 가능
  • 플러그인으로 기능 확장 가능
  • BSD 3-Clause 라이선스 (완전 무료, 상업적 사용 가능)

가장 큰 장점은 기존 HTML을 그대로 로드해서 편집할 수 있다는 점이다.

const editor = grapesjs.init({
  container: '#editor',
  components: '<div class="my-component">기존 HTML</div>',
});

Craft.js

Craft.js는 React 기반의 페이지 빌더 프레임워크다.

  • React 컴포넌트를 드래그앤드롭으로 배치
  • 커스텀 컴포넌트를 쉽게 만들 수 있음
  • MIT 라이선스 (완전 무료)

단, GrapesJS와 달리 기존 HTML을 그냥 넣는 방식이 아니다. 미리 정의한 컴포넌트(버튼, 텍스트, 이미지 등)를 조합하는 방식이라 페이지 빌더에 더 가깝다.

Puck

Puck은 비교적 최근에 나온 React용 비주얼 에디터다.

  • 모던한 아키텍처
  • 자체 컴포넌트 정의 가능
  • MIT 라이선스 (완전 무료)

Craft.js와 마찬가지로 컴포넌트 기반이라 기존 HTML을 직접 로드하는 용도보다는 새로 페이지를 조립하는 용도에 적합하다.

Builder.io

Builder.io는 헤드리스 비주얼 CMS다. 오픈소스 SDK를 제공하지만, 클라우드 서비스는 유료다.

  • React, Vue, Next.js 등 지원
  • 오픈소스 SDK는 무료
  • 클라우드 서비스: Free 플랜 (월 1명) / 유료 플랜 월 $49부터

어떤 도구를 선택해야 할까?

기존 HTML을 그대로 편집하고 싶다면 → GrapesJS

새로 페이지를 조립하는 용도라면 → Craft.js, Puck

GrapesJS가 가장 범용적이고 기능이 풍부하다. 기존에 만들어둔 HTML 템플릿을 비개발자가 수정할 수 있게 해주고 싶다면 GrapesJS를 먼저 검토해보면 된다.

참고