plasmicapp/plasmic

어떤 프로젝트인가요?

핵심 기능

• 01직접 만든 React 컴포넌트를 비주얼 에디터에 드래그 앤 드롭할 수 있습니다.
• 02시각적으로 만든 페이지를 기존 애플리케이션과 웹사이트에 게시할 수 있습니다.
• 03codegen을 통해 코드베이스에 React 코드를 생성할 수 있습니다.
• 04런타임에 콘텐츠와 컴포넌트를 가져오는 Headless API를 제공합니다.
• 05react-aria 기반의 디자인 시스템 컴포넌트를 내장하고 있습니다.
• 06Figma 디자인을 가져와 DOM/CSS로 변환할 수 있습니다.
• 07협업자를 위한 디자인 가드레일을 지원하는 콘텐츠 제작자 모드를 제공합니다.

활용 사례

• 마케팅 팀이 Next.js 사이트에서 승인된 React 컴포넌트를 사용해 랜딩 페이지를 만들 수 있습니다.
• 비주얼 에디터로 내부 도구, 고객 포털, 비즈니스 소프트웨어를 구축할 수 있습니다.
• 호스팅이나 커머스 플랫폼을 옮기지 않고 기존 React 코드베이스에 비주얼 CMS 계층을 추가할 수 있습니다.

빠른 시작

1. 1

   사용 중인 프레임워크용 Plasmic loader 패키지를 설치합니다(Next.js 예시)

   npm install @plasmicapp/loader-nextjs
2. 2

   비주얼 에디터에서 드래그 앤 드롭할 수 있도록 직접 만든 React 컴포넌트를 등록합니다

3. 3

   PlasmicRootProvider 안에서 PlasmicComponent를 사용해 Plasmic으로 만든 컴포넌트를 앱에 렌더링합니다

사용 전 알아둘 점

• !platform/ 디렉터리는 MIT가 아닌 AGPL 라이선스가 적용됩니다.
• !코드베이스와 완전히 통합하려면 문서에 나온 프레임워크별 설정을 따라야 합니다.

토픽

자주 묻는 질문

plasmic은(는) 무엇인가요?

코드베이스에서 직접 React 컴포넌트를 드래그 앤 드롭해 앱과 웹사이트를 만들 수 있는 오픈소스 비주얼 빌더입니다. Plasmic은 웹 애플리케이션과 웹사이트를 시각적으로 디자인하고 만들 수 있는 빌더로, 코드를 선택적으로 활용할 수 있습니다. 주요 활용 사례로는 마케팅 팀이 Next.js 사이트에서 React 컴포넌트로 랜딩 페이지를 구성하거나, 내부 도구와 고객 포털을 만들거나, 특정 CMS, 이커머스 플랫폼 또는 호스팅 서비스에 종속되지 않고 웹사이트를 제작하는 것이 있습니다.

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

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

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

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

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

마케팅 팀이 Next.js 사이트에서 승인된 React 컴포넌트를 사용해 랜딩 페이지를 만들 수 있습니다. 비주얼 에디터로 내부 도구, 고객 포털, 비즈니스 소프트웨어를 구축할 수 있습니다. 호스팅이나 커머스 플랫폼을 옮기지 않고 기존 React 코드베이스에 비주얼 CMS 계층을 추가할 수 있습니다.

plasmic는 어떻게 설치하나요?

사용 중인 프레임워크용 Plasmic loader 패키지를 설치합니다(Next.js 예시): npm install @plasmicapp/loader-nextjs 비주얼 에디터에서 드래그 앤 드롭할 수 있도록 직접 만든 React 컴포넌트를 등록합니다 PlasmicRootProvider 안에서 PlasmicComponent를 사용해 Plasmic으로 만든 컴포넌트를 앱에 렌더링합니다

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

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