puckeditor/puck

어떤 프로젝트인가요?

핵심 기능

• 01자체 React 컴포넌트로 구성하는 드래그 앤 드롭 편집 기능입니다.
• 02컴포넌트 config에서 편집 가능한 필드와 렌더링 결과를 정의합니다.
• 03에디터는 직접 데이터베이스에 저장할 수 있는 일반 JSON을 출력합니다.
• 04별도의 Render 컴포넌트가 저장된 페이지를 표시합니다.
• 05Next.js를 비롯한 React 환경에서 동작합니다.
• 06create-puck-app을 통해 스타터 레시피를 이용할 수 있습니다.

활용 사례

• 비개발자가 기존 디자인 시스템을 활용해 랜딩 페이지를 구성하도록 지원합니다.
• React 또는 Next.js 콘텐츠 관리 워크플로에 페이지 빌더를 추가합니다.
• 마케팅 팀이 코드 없이 레이아웃을 편집할 수 있는 내부 도구를 구축합니다.

빠른 시작

1. 1

   패키지를 설치합니다

   npm i @puckeditor/core --save
2. 2

   Puck 컴포넌트와 config를 사용해 에디터를 렌더링합니다

3. 3

   Render 컴포넌트를 사용해 게시된 페이지를 렌더링합니다

사용 전 알아둘 점

• !React 프로젝트가 필요합니다. 독립 실행형 앱이 아니라 React 컴포넌트입니다.

토픽

자주 묻는 질문

puck은(는) 무엇인가요?

자체 컴포넌트와 데이터를 렌더링에 활용하는 모듈형 오픈소스 React 비주얼 드래그 앤 드롭 에디터입니다. Puck은 자체 애플리케이션 컴포넌트를 조합해 드래그 앤 드롭 방식으로 페이지를 만들 수 있는 React.js용 비주얼 에디터입니다. React 컴포넌트로 제공되므로 기존 React 앱에 임베드할 수 있으며, Next.js 같은 환경에서도 사용할 수 있습니다.

puck은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

puck은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

puck은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. puck의 마지막 커밋은 2026년 10월 16일입니다.

puck은(는) 어디에 사용할 수 있나요?

비개발자가 기존 디자인 시스템을 활용해 랜딩 페이지를 구성하도록 지원합니다. React 또는 Next.js 콘텐츠 관리 워크플로에 페이지 빌더를 추가합니다. 마케팅 팀이 코드 없이 레이아웃을 편집할 수 있는 내부 도구를 구축합니다.

puck는 어떻게 설치하나요?

패키지를 설치합니다: npm i @puckeditor/core --save Puck 컴포넌트와 config를 사용해 에디터를 렌더링합니다 Render 컴포넌트를 사용해 게시된 페이지를 렌더링합니다

puck은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/puckeditor/puck