DatoCMS 시각적 편집 기능 소개

DatoCMS 시각적 편집이란 무엇인가요?

DatoCMS 시각적 편집(Visual Editing)은 기존 헤드리스 CMS 워크플로우에서 발생하는 콘텐츠 생성과 콘텐츠 표시 간의 단절을 없애기 위해 설계된 혁신적인 기능입니다. 콘텐츠 편집자가 복잡한 백엔드 양식을 탐색하며 어떤 필드가 어떤 페이지 요소에 해당하는지 추측하도록 강요하는 대신, 시각적 편집 기능을 통해 라이브 웹사이트 미리보기와 직접 상호작용할 수 있습니다. 이 기능은 '보는 대로 얻는(WYSIWYG)' 직관적인 경험을 헤드리스 환경에 직접 제공하여 콘텐츠 변경이 빠르고 정확하며 상황 인지적으로 이루어지도록 보장합니다. 이는 편집자의 사고방식을 데이터 모델 관리가 아닌 페이지 및 게시물 관리로 근본적으로 전환시킵니다.

이 강력한 기능은 클릭하여 편집(콘텐츠 링크)과 나란히 편집(시각적 모드)이라는 두 가지 뚜렷하면서도 상호 보완적인 워크플로우를 통해 지원됩니다. 중요하게도, 이 기능은 무료 등급을 포함한 모든 DatoCMS 요금제에서 사용할 수 있으며, Next.js, Astro, Svelte, Vue와 같은 최신 프론트엔드 프레임워크를 위한 전용 SDK를 통해 지원되므로 기존 및 신규 프로젝트에 원활하게 채택될 수 있습니다.

주요 기능

• 클릭하여 편집 (콘텐츠 링크): 편집자는 초안 모드로 라이브 사이트를 방문하여 편집 가능한 콘텐츠 위로 마우스를 가져간 다음 클릭하면 DatoCMS에서 해당 필드가 새 탭에 즉시 열립니다. 이는 호스팅 환경(Vercel, Netlify, Cloudflare)에 관계없이 프론트엔드에서 완전히 작동합니다.
• 나란히 시각적 모드: 웹 미리보기 플러그인의 향상된 버전으로, 한쪽에는 웹사이트 미리보기를, 바로 옆에는 편집 패널을 표시합니다. 콘텐츠를 클릭하면 컨텍스트 전환 없이 관련 편집 패널이 즉시 열립니다.
• 스테가노그래피 백엔드: 이 시스템은 GraphQL API 응답에 추가된 보이지 않는 유니코드 문자를 사용하여 모든 콘텐츠 조각의 출처 메타데이터(레코드 ID, 필드 경로, 로케일)를 인코딩합니다. 이를 통해 프론트엔드는 수동 개발자 연결 없이도 클릭을 올바른 데이터 소스에 자동으로 매핑할 수 있습니다.
• 양방향 컨텍스트 동기화: 나란히 모드에서 미리보기 패널을 스크롤하면 편집 패널도 동기화되어 복잡한 편집 중에도 완벽한 컨텍스트를 유지합니다.
• 범용 호환성: 레코드 링크, 모듈식 블록, 구조화된 텍스트(Structured Text), 현지화된 필드 등 복잡한 콘텐츠 구조와 함께 즉시 작동합니다.
• 프레임워크 SDK 지원: 주요 프레임워크(React/Next.js, Astro, Svelte/SvelteKit, Vue/Nuxt)를 위한 전용 SDK는 프레임워크에 구애받지 않는 @datocms/content-link 라이브러리를 기반으로 구축되어 구현을 단순화합니다.

DatoCMS 시각적 편집 사용 방법

시각적 편집 기능 시작은 최소한의 작업으로 설계되었으며, 개발자가 콘텐츠 팀을 위해 경험을 활성화하려면 세 가지 주요 단계만 필요합니다.

1. Stega 인코딩 활성화: GraphQL을 통해 초안 콘텐츠를 가져올 때 요청에 두 가지 특정 헤더를 추가해야 합니다: X-Visual-Editing: v1 및 X-Base-Editing-Url: https://<YOUR-PROJECT-NAME>.admin.datocms.com.
2. ContentLink 컴포넌트 통합: 기본 레이아웃 파일에 프레임워크별 <ContentLink /> 컴포넌트를 추가합니다. 이 컴포넌트는 렌더링된 DOM에서 임베드된 스테가노그래피 메타데이터를 자동으로 스캔하고 필요한 편집 오버레이를 렌더링합니다.
3. 나란히 편집 잠금 해제 (선택 사항이지만 권장): DatoCMS 프로젝트 설정 내에서 웹 미리보기 플러그인을 설치하고 구성하여 CMS 사이드바 내에서 매우 효율적인 나란히 편집 인터페이스를 활성화합니다.

구성되면 편집자는 단순히 초안 모드로 사이트를 탐색하거나(또는 CMS 인터페이스를 열어) 수정하려는 콘텐츠를 클릭하기만 하면 변경 사항이 즉시 반영되거나 편집 준비 상태가 됩니다.

사용 사례

1. 고속 마케팅 팀: 빈번한 캠페인이나 랜딩 페이지를 출시하는 팀은 페이지 미리보기에서 직접 카피와 이미지를 빠르게 반복하여 디자인, 개발, 콘텐츠 팀 간의 조정에 소요되는 시간을 획기적으로 줄일 수 있습니다.
2. 복잡한 전자상거래 제품 페이지: 깊이 중첩된 모듈식 콘텐츠(예: 제품 설명, 기능 블록, 사양)를 관리하는 편집자는 수십 개의 콘텐츠 레코드를 수동으로 검색할 필요 없이 직접 수정하려는 특정 섹션을 클릭할 수 있습니다.
3. 다국어 콘텐츠 관리: 여러 로케일을 지원하는 사이트의 경우, 시각적 편집 기능은 편집자가 올바른 현지화된 버전의 콘텐츠를 편집하고 있는지 확인합니다. 메타데이터에 로케일 정보가 포함되어 있어 번역된 문자열을 실수로 덮어쓰는 것을 방지합니다.
4. 에이전시 개발 및 클라이언트 인계: 에이전시는 시각적 편집 기능을 활성화하여 프로젝트를 배포함으로써 클라이언트에게 즉시 직관적인 편집 경험을 제공하여 교육 시간을 최소화하고 콘텐츠 위치와 관련된 지원 요청을 줄일 수 있습니다.
5. 반복적인 디자인 및 콘텐츠 페어링: 개발자와 디자이너는 콘텐츠 편집자와 실시간으로 협력할 수 있습니다. 새로운 구성 요소가 구축됨에 따라 편집자는 시각적 인터페이스를 사용하여 프로덕션 준비가 된 콘텐츠로 즉시 채울 수 있습니다.

FAQ

Q: 시각적 편집 기능은 유료 요금제에서만 사용할 수 있나요? A: 아닙니다. DatoCMS는 시각적 편집 기능을 무료 요금제를 포함한 모든 요금제에서 사용할 수 있도록 하여, 모든 사용자가 업그레이드할 필요 없이 향상된 편집 경험의 혜택을 누릴 수 있도록 했습니다.

Q: 명시적으로 나열되지 않은 프레임워크(예: Remix)를 사용하면 어떻게 되나요? A: 모든 공식 SDK는 프레임워크에 구애받지 않는 라이브러리인 @datocms/content-link를 기반으로 구축되었습니다. 이 핵심 라이브러리를 모든 프론트엔드 설정에 직접 통합하여 동일한 기능을 얻을 수 있습니다.

Q: 콘텐츠 조각 하나하나를 필드에 수동으로 매핑해야 하나요? A: 전혀 그렇지 않습니다. 핵심 혁신은 스테가노그래피 기술로, GraphQL 응답에 출처 메타데이터를 자동으로 추가합니다. <ContentLink /> 컴포넌트는 이 메타데이터를 스캔하고 편집 오버레이를 자동으로 연결하여 지루한 수동 구성을 제거합니다.

Q: 기존 웹 미리보기 설정으로 시각적 편집 기능을 사용할 수 있나요? A: 예. 나란히 시각적 모드는 기존 웹 미리보기 플러그인의 업그레이드 버전입니다. 이미 웹 미리보기를 사용하고 있다면 새로운 기능을 활성화하는 데 필요한 구성 변경 사항은 최소화됩니다.

Q: 이 기능은 어떤 종류의 콘텐츠 구조를 지원하나요? A: 표준 필드, 다른 레코드에 대한 링크, 복잡한 구조화된 텍스트 블록 및 깊이 중첩된 모듈식 콘텐츠 구조를 포함하여 DatoCMS 콘텐츠 모델의 전체 스펙트럼을 지원합니다.