헤드리스 CMS는 속도와 확장성 면에서 탁월하지만, 마케터가 콘텐츠를 발행하기 전까지 화면이 어떻게 보일지 전혀 알 수 없는 '맹목적 편집(Blind Editing)' 문제를 낳습니다. 이 문제를 방치하면 레이아웃 붕괴, 반복 배포 오류, 개발팀과의 불필요한 커뮤니케이션 비용이 눈덩이처럼 쌓입니다. 해결책은 실시간 프리뷰(Live Preview) 환경을 홈페이지 제작 기획 단계부터 개발 요건으로 못 박는 것입니다. 이 글은 그 이유와 구체적인 설계 방향을 마케터와 경영자 눈높이에서 설명합니다.
헤드리스 CMS를 처음 접하는 마케터들이 가장 먼저 받는 충격은 '편집창이 너무 낯설다' 는 것입니다.
기존 워드프레스 같은 전통적인 CMS에서는 글자를 입력하면 바로 옆에서 웹페이지 모양이 그려졌습니다. 이미지를 올리면 레이아웃에 어떻게 들어가는지 즉시 확인할 수 있었죠. 이를 WYSIWYG(What You See Is What You Get) 방식이라고 부릅니다. 한마디로 '보이는 대로 나온다'는 뜻입니다.
반면 헤드리스 CMS는 백엔드(콘텐츠 저장소)와 프런트엔드(실제 웹 화면)를 완전히 분리합니다. 마케터가 보는 관리 화면은 텍스트 입력창과 메타데이터 필드뿐입니다. 실제로 방문자에게 어떻게 보일지는 배포를 해봐야 알 수 있습니다.
마케터 입장에서는 원고를 쓴 다음 인쇄소에 넘기고, 책이 배달돼야 오탈자를 확인할 수 있는 것과 같습니다.
이 구조 때문에 생기는 문제들이 쌓이면 마케팅팀과 개발팀 사이에 불필요한 갈등이 반복됩니다.
이 문제를 '불편함' 수준으로만 보면 안 됩니다. 실제 운영 현장에서는 다음과 같은 비용이 발생합니다.
실제로 한 글로벌 이커머스 기업은 이 문제를 해결하기 위해 Next.js Draft Mode와 헤드리스 실시간 프리뷰 인프라를 전면 구축한 결과, 마케터의 변경사항 검증 대기 시간을 0초(즉시 렌더링) 수준으로 단축하고 배포 오류율을 크게 낮췄습니다.
실시간 프리뷰(Live Preview) 는 마케터가 CMS 관리 화면에서 콘텐츠를 수정하는 순간, 배포 전 임시(Draft) 상태의 내용이 실제 웹 화면에 즉시 반영되어 보이는 기술 구조입니다.
쉽게 말하면, 왼쪽 창에서 문장을 고치면 오른쪽 창의 실제 웹 화면이 동시에 바뀌는 것입니다.
이를 구현하는 방식은 크게 두 가지입니다.
① 병렬 프리뷰(Parallel Preview) 화면을 좌우로 나눠 왼쪽은 편집창, 오른쪽은 실제 렌더링 화면을 보여주는 방식입니다. 구조화된 콘텐츠 모델에 가장 안정적으로 작동합니다.
② 인라인 편집(Inline Editing) 실제 웹 화면 위에 편집 버튼이 뜨고, 그 자리에서 직접 수정하는 방식입니다. 시각적으로 직관적이지만 컴포넌트 설계가 더 복잡합니다.
2026년 현재 주요 헤드리스 CMS 플랫폼들은 이 기능을 핵심 경쟁력으로 내세우고 있습니다.
글로벌 헤드리스 CMS 시장은 2026년 약 39억 4,000만 달러 규모에서 2034년까지 222억 8,000만 달러 규모로 성장(연평균 21% 이상)할 것으로 전망됩니다. 이 성장의 핵심 동력 중 하나가 바로 마케터 친화적인 비주얼 편집 환경입니다.
실시간 프리뷰 환경은 홈페이지 제작 기획 단계에서 개발 요건으로 지정해야 합니다. 오픈 직전이나 오픈 후에 소급하여 구축하려면 이미 짜인 프런트엔드 컴포넌트와 데이터 호출 구조를 전부 뜯어고쳐야 해서 비용이 몇 배로 불어납니다.
홈페이지 제작 RFP(제안 요청서)나 기획서를 작성할 때 다음 항목을 반드시 포함하세요.
현대 홈페이지 제작에서 가장 많이 쓰이는 프런트엔드 프레임워크인 Next.js에는 Draft Mode라는 기능이 내장되어 있습니다.
Draft Mode는 정적으로 빌드된 페이지라도, 마케터의 프리뷰 세션 쿠키를 감지하면 빌드 과정 없이 즉시 실시간 초안 콘텐츠를 동적으로 렌더링합니다. 쉽게 말해, 배포하지 않아도 마케터만 미리 볼 수 있는 전용 통로를 만들어주는 기술입니다.
이 통로를 여는 API 핸들러를 개발 초기에 설계해두는 것이 핵심입니다.
// app/api/draft/route.ts
import { draftMode } from 'next/headers';
export async function GET(request: Request) {
const draft = await draftMode();
draft.enable();
return new Response('Draft mode enabled. Live preview ready.');
}프리뷰 URL이 외부에 노출되면 미발행 콘텐츠가 유출될 수 있습니다. CMS 관리 화면과 Next.js 서버만 공유하는 비밀 토큰(Secret Token) 을 환경 변수로 설정하고, 토큰이 일치할 때만 Draft Mode가 켜지도록 API를 제한하세요.
대부분의 헤드리스 CMS는 관리자 화면 안에 웹사이트를 iframe으로 불러와 프리뷰를 렌더링합니다. 브라우저 보안 정책 차단을 피하려면 next.config.js 설정에서 CMS 도메인을 신뢰할 수 있는 출처로 명시해야 합니다.
// next.config.mjs
async headers() {
return [{
source: '/:path*',
headers: [{
key: 'Content-Security-Policy',
value: "frame-ancestors 'self' https://app.storyblok.com"
}]
}];
}마케터가 임시 저장(Draft)을 누를 때마다 전체 사이트 정적 빌드가 트리거되도록 설정하면 서버 리소스가 빠르게 고갈됩니다. 프리뷰 세션은 브라우저 쿠키 기반의 동적 요청으로만 처리되도록 메인 배포 파이프라인과 완전히 격리해야 합니다.
홈페이지 제작을 의뢰하거나 내부 개발팀과 협의할 때 다음 항목을 체크하세요.
Next.js)의 Draft Mode 또는 동등한 기능이 기획 단계에서 개발 요건으로 포함되었는가Q1. 워드프레스를 쓰면 이 문제가 없지 않나요? 맞습니다. 워드프레스는 WYSIWYG 편집 환경이 기본 내장되어 있어 미리보기 문제가 없습니다. 다만 속도·보안·멀티채널 대응 측면에서 헤드리스 CMS에 비해 한계가 있습니다. 팀 규모와 운영 방식에 따라 어떤 아키텍처가 맞는지 판단해야 합니다.
Q2. 실시간 프리뷰 구축은 비용이 얼마나 드나요? 기획 초기부터 개발 요건에 포함하면 추가 비용이 크지 않습니다. 문제는 오픈 후 소급 구축인데, 이 경우 기존 컴포넌트 구조를 전면 수정해야 하므로 비용이 수 배 이상 증가할 수 있습니다.
Q3. Storyblok과 Contentful 중 어떤 CMS가 프리뷰에 더 유리한가요? Storyblok은 컴포넌트 기반 실시간 비주얼 에디터가 강점으로, 마케터 친화성이 높습니다. Contentful은 엔터프라이즈 규모의 구조화된 콘텐츠 관리에 강하며 'Contentful Studio'로 비주얼 편집을 보완하고 있습니다. 팀의 기술 수준과 콘텐츠 구조 복잡도에 따라 선택이 달라집니다.
Q4. 정적 사이트(SSG)에서도 실시간 프리뷰가 가능한가요?
네, 가능합니다. Next.js의 Draft Mode를 활용하면 정적으로 빌드된 페이지라도 마케터의 프리뷰 세션 쿠키를 감지해 빌드 없이 즉시 초안 콘텐츠를 렌더링합니다.
Q5. 마케터가 직접 이 환경을 구축할 수 있나요? 보안 토큰 설정, CORS 정책, Draft Mode API 연동은 개발자 영역입니다. 마케터의 역할은 기획 단계에서 이 요건을 명확히 요구하고, 완성된 환경을 검수하는 것입니다.
헤드리스 CMS(Headless CMS) 콘텐츠 저장소(백엔드)와 화면 표시(프런트엔드)를 분리한 현대적 콘텐츠 관리 시스템. API를 통해 웹·앱·IoT 등 다양한 채널에 콘텐츠를 공급합니다.
WYSIWYG 'What You See Is What You Get'의 약자. 편집 화면에서 보이는 모양이 실제 출력 결과와 동일한 편집 방식입니다.
Draft Mode
Next.js에 내장된 기능으로, 정적 빌드 페이지에서도 특정 세션(쿠키)을 감지하면 미발행 초안 콘텐츠를 동적으로 렌더링하는 기술입니다.
SSG(Static Site Generation) 빌드 시점에 HTML 파일을 미리 생성해두는 방식. 속도가 빠르지만 콘텐츠 변경 시 재빌드가 필요합니다.
CORS(Cross-Origin Resource Sharing) 서로 다른 도메인 간 데이터 요청을 허용하거나 차단하는 브라우저 보안 정책입니다.
컴포넌트(Component) 웹 화면을 구성하는 재사용 가능한 UI 단위. 헤더, 배너, 카드 블록 등이 각각 하나의 컴포넌트입니다.
배포 파이프라인(Deployment Pipeline) 코드나 콘텐츠 변경사항이 실제 서비스에 반영되기까지 거치는 자동화된 빌드·테스트·배포 과정입니다.
비주얼 헤드리스 CMS(Visual Headless CMS) 헤드리스 CMS의 API 중심 구조를 유지하면서, 마케터가 시각적으로 콘텐츠를 편집하고 미리 볼 수 있는 편집 환경을 제공하는 차세대 플랫폼입니다.
헤드리스 CMS는 홈페이지 제작 방식의 미래입니다. 속도, 보안, 멀티채널 대응 모두 전통적인 CMS를 앞섭니다. 그러나 마케터의 눈을 멀게 한 채로 운영되는 헤드리스 사이트는 기술적 우월함이 오히려 팀의 발목을 잡는 역설을 만듭니다.
실시간 프리뷰 환경은 마케팅팀을 위한 배려가 아닙니다. 헤드리스 전환 프로젝트의 성공 여부를 결정짓는 핵심 아키텍처입니다. 그리고 이 구조는 홈페이지 제작 기획 단계에서만 비용 효율적으로 설계할 수 있습니다.
홈페이지를 새로 만들거나 리뉴얼을 검토 중이라면, CMS 선정과 실시간 프리뷰 설계를 처음부터 함께 논의할 수 있는 파트너가 필요합니다.
에이달(ADALL) 은 헤드리스 CMS 기반 홈페이지 제작 기획 단계부터 실시간 프리뷰 환경 구축, 프런트엔드 성능 최적화까지 일관된 기술 설계를 제공합니다. 마케터가 개발자 없이도 안심하고 콘텐츠를 운영할 수 있는 구조를 처음부터 함께 설계하고 싶다면 편하게 문의 주세요.
📞 02-2664-8631 | ✉️ master@adall.co.kr
👉 프로젝트 문의 또는 무료 컨설팅 신청하기
무료 컨설팅 받아보고 싶다면?
무료 컨설팅 신청하기