Payload CMS에 비주얼 에디터 추가하기
콘텐츠 편집자가 Payload에서 페이지를 구성하고 웹사이트에서도 직접 수정할 수 있도록 이 플러그인을 만들었습니다. 개발자는 사용할 수 있는 컴포넌트와 설정 항목, 웹사이트에 표시되는 방식을 정의합니다.
관리자 화면에서도, 실제 페이지에서도 편집
관리자 화면의 Widget 모드
Widget 모드는 Payload 콘텐츠 필드 안에 Page Composer를 배치합니다. 편집자는 컴포넌트를 드래그해 배치하고 텍스트, 이미지, 스타일을 수정한 뒤 Payload의 기존 기능으로 저장하거나 게시할 수 있습니다. 에디터는 iframe 없이 관리자 페이지에서 직접 실행됩니다.
웹사이트에서 비주얼 편집
편집 권한이 있는 사용자는 웹사이트에서 Live 모드를 열 수도 있습니다. 실제 사이트의 머리글과 바닥글을 함께 보면서 변경 사항을 확인하고, 바로 초안을 저장하거나 게시할 수 있습니다. 두 모드는 동일한 콘텐츠를 편집합니다.
편집자가 사용할 항목을 정의하세요
각 컴포넌트에는 자체 필드 설정과 프런트엔드 렌더링 함수가 있습니다. 콘텐츠에 맞게 일반 텍스트, 서식 있는 텍스트, 이미지, 드롭다운, 반복 필드, 설정 그룹을 조합할 수 있습니다. 필드 설정은 에디터에 제공할 항목을, 렌더링 함수는 사이트에 표시할 모습을 결정합니다.
예를 들어 페이지 상단의 히어로 영역에는 이미지, 제목, 부제목만 필요할 수 있습니다. 나중에 링크나 배경색이 필요해지면 컴포넌트 설정에 추가하면 됩니다.
플러그인이 제공하는 다른 기능
템플릿과 프리셋
전체 레이아웃을 템플릿으로 저장하거나 개별 컴포넌트 설정을 프리셋으로 저장하세요. 편집자는 페이지마다 처음부터 설정할 필요 없이 이를 재사용할 수 있습니다.
데스크톱, 태블릿, 모바일 스타일
화면 크기마다 여백, 글자 스타일, 레이아웃을 조정할 수 있습니다. 이 설정은 게시된 페이지를 표시할 때도 적용됩니다.
Payload의 기존 도구와 연동
콘텐츠는 Payload의 JSON 필드에 저장되며 미디어 라이브러리, 초안, 버전 관리, 접근 규칙과 함께 작동합니다. 필드를 컬렉션이나 글로벌 콘텐츠에 추가할 수 있어 페이지 외의 콘텐츠에도 사용할 수 있습니다.
Payload CMS용 Page Composer
플러그인 상세 정보, 가격, 연동 코드의 소스를 확인하세요.