DatoCMS의 Visual Editing은 콘텐츠 편집자가 라이브 웹사이트의 모든 요소를 직접 클릭하여 CMS에서 편집할 수 있는 기능입니다. 레코드 양식에서 올바른 필드를 찾기 위해 헤매는 대신, 편집자는 변경하려는 제목, 이미지 또는 블록을 클릭하기만 하면 됩니다. 이 시스템은 스테가노그래피(Steganography)—GraphQL API 응답의 모든 문자열에 추가되는 보이지 않는 유니코드 문자—를 사용하여 각 값의 출처를 인코딩하므로, 프론트엔드는 모든 콘텐츠가 어디서 왔는지 자동으로 정확히 알 수 있습니다. 초안 모드 및 실시간 업데이트와 결합하여 변경 작업이 원활한 WYSIWYG 경험이 됩니다.
편집자는 초안 모드로 웹사이트를 방문하여 편집 가능한 콘텐츠 위에 마우스를 올리고 클릭하면 새 탭에서 DatoCMS가 열립니다. 이 기능은 Vercel, Netlify, Cloudflare 등 모든 호스팅 환경에서 프론트엔드에서 완전히 작동합니다. 더 이상 "그 필드가 어디였더라?"라고 묻지 않아도 됩니다.
Web Previews 플러그인이 업그레이드되었습니다: 왼쪽에는 미리보기, 오른쪽에는 편집 패널이 표시됩니다. 콘텐츠를 클릭하면 편집 패널이 바로 열립니다. 탭 전환도, 맥락 상실도 없으며 즉각적인 실시간 업데이트가 가능합니다. 이 플러그인은 CMS 사이드바의 미리보기 링크, 패널 간 양방향 탐색, 전체 화면 Visual Editing 모드도 지원합니다.
스테가노그래피는 각 값의 출처(레코드 ID, 필드 경로, 로케일)를 GraphQL API 응답에 직접 포함시킵니다. `` 컴포넌트는 이 메타데이터를 위해 페이지를 자동으로 스캔하고 올바른 DOM 노드에 편집 오버레이를 렌더링합니다—수동 연결이 필요 없습니다. 레코드 링크, 블록, 구조화된 텍스트, 모듈형 콘텐츠 등 전체 콘텐츠 모델에서 즉시 작동합니다.
"더 이상 레코드 양식에서 올바른 필드를 찾기 위해 헤맬 필요가 없습니다."
이는 단순한 미리보기 도구가 아닙니다—편집자가 헤드리스 CMS 콘텐츠와 상호작용하는 방식의 근본적인 변화입니다. 스테가노그래피 접근 방식 덕분에 개발자는 모든 콘텐츠를 소스 필드에 수동으로 연결할 필요가 없습니다. 이는 최선의 경우에도 지루하고 최악의 경우 유지보수 악몽이 될 수 있습니다. 대신 메타데이터가 자동으로 함께 제공되므로 설정이 최소화됩니다: 기존 GraphQL 요청에 두 개의 헤더를 추가하고 레이아웃에 하나의 컴포넌트를 추가하기만 하면 됩니다.
편집자들이 "그 필드가 어디였더라?"라고 묻는 것에 지쳤고, 기존 DatoCMS 프로젝트, 모든 호스팅 제공업체, 최소한의 개발자 노력으로 작동하는 시각적 편집 경험을 원한다면 확인해보세요. 모든 요금제(무료 포함)에서 사용할 수 있으며 Next.js, Astro, Svelte 및 Vue용 SDK를 제공합니다.
고려해볼 만한 다른 도구
Loading comments…
제작자
meowbyte
웹사이트 방문
datocms.com/blog/introducing-visual-editing
프로젝트 정보
제품 키워드
성과
