이 강의에서 다루는 것
- Monolithic, Headless, SaaS Embed, Self-hosted를 “누가 무엇을 책임지는가” 관점에서 비교할 수 있습니다.
- 콘텐츠 모델, 리비전, 권한, 감사로그, 캐시 무효화를 하나의 설계 문제로 묶어 볼 수 있습니다.
- 서비스 상황별로 어떤 조합이 유리한지 선택 프레임워크를 만들 수 있습니다.
- 실무 구현 전 단계에서 데이터 모델과 운영 체크리스트 초안을 작성할 수 있습니다.
웹 서비스를 설계할 때
콘텐츠를 어디서 관리하고 어떻게 전달할지 결정하는 4가지 접근
먼저 구조를 어떻게 나누는지 보고, 그다음 누가 운영하는지 보면 혼동이 줄어듭니다
아키텍처 축: 콘텐츠 관리와 프레젠테이션(HTML 생성)을 어떻게 나누는가
콘텐츠 관리와 프레젠테이션(HTML 생성)을 한 시스템이 함께 담당합니다.
콘텐츠(데이터)는 API로 관리하고, 프레젠테이션(HTML 생성)은 별도 프런트엔드가 구현합니다.
운영 축: 기능을 외부 SaaS에 맡길지, 직접 설치해서 운영할지
댓글, 검색, 분석 같은 기능을 외부 서비스에 맡기고 스크립트나 SDK로 연결합니다.
오픈소스 도구나 별도 서비스를 우리 인프라에 설치하고 직접 운영합니다.
WordPress 같은 CMS에 댓글·검색·분석 기능만 외부 SaaS로 붙이는 구조
Drupal·TYPO3를 우리 서버에 직접 설치하고 운영하는 구조
Contentful·Sanity와 Next.js/Astro를 조합해 빠르게 구축하는 구조
Strapi·Directus·Payload를 직접 운영해 데이터 통제권을 높이는 구조
즉, Monolithic/Headless는 구조를 고르는 질문이고, SaaS/Self-hosted는 운영 책임을 어디에 둘지 정하는 질문입니다.
4가지 패턴을 한 번에 훑고, 언제 먼저 후보로 떠올릴지 정리합니다
콘텐츠 관리와 프레젠테이션(HTML 생성)을 한 시스템이 함께 담당
콘텐츠는 API로 관리하고 프레젠테이션은 별도 프런트엔드가 담당
일부는 기존 CMS, 일부는 별도 프런트엔드로 단계적으로 분리
댓글·검색·분석 같은 기능을 독립 서비스로 붙이는 방식
| 비교 항목 | Monolithic | Headless | Hybrid | Embed |
|---|---|---|---|---|
| 프레젠테이션(HTML 생성) | CMS가 직접 HTML 생성 | 별도 프런트엔드가 HTML 생성 | 경로/화면별로 나누어 생성 | 기능별 내부 서비스가 응답 |
| 핵심 장점 | 구축 단순, 백오피스 일체형 | 멀티채널 확장, 프런트 자유도 | 점진적 분리, 위험 분산 | 기능 도입 속도, 선택적 분리 |
| 캐시 전략 | HTML·정적 자산 CDN | API + ISR/Edge 캐시 | 경로별 캐시 전략 분리 | 기능별 캐시·큐 운영 |
| 먼저 떠올릴 상황 | 웹사이트가 핵심 채널일 때 | 웹·앱·API를 함께 운영할 때 | 기존 CMS를 유지하며 일부만 개선할 때 | 댓글/검색/분석만 빠르게 붙일 때 |
먼저 HTML을 누가 만드는지 보고, 다음으로 캐시 전략과 운영 복잡도를 비교하시면 빠르게 후보를 좁힐 수 있습니다.
콘텐츠 관리와 프레젠테이션이 결합된 전통 구조
콘텐츠 백오피스(관리 화면)와 프레젠테이션(템플릿/테마)이 한 시스템 안에 결합된 구조. 프론트엔드와 백엔드가 본질적으로 결합(coupled)되어 있어, 테마·플러그인 생태계를 통해 기능을 확장합니다.
라이선스·강점·운영 고려사항 비교
API로 콘텐츠를 분리·전달하는 현대적 구조
콘텐츠 저장·관리(backend)와 프레젠테이션(frontend)을 분리하고, REST/GraphQL API로 콘텐츠를 어느 채널에든 전달하는 구조. 프론트엔드 기술 스택(React, Vue, Astro 등)을 자유롭게 선택할 수 있습니다.
SaaS형과 Self-host형 비교
CMS를 어떻게 운영할 것인가
이 비교는 Monolithic vs Headless와는 다른 축입니다. Monolithic, Headless CMS 모두 SaaS(클라우드) 또는 Self-hosted(직접 설치) 방식으로 운영할 수 있습니다. Cloud 벤더(AWS, GCP, Azure)도 이런 오픈소스 CMS를 자신들의 인프라에 배포하는 도구를 제공합니다.
기능을 외부 서비스로 위임하고 스크립트로 삽입
댓글·검색·분석·인증 같은 기능을 외부 SaaS에 위임하고, JS/SDK를 통해 애플리케이션에 삽입하는 접근. "붙이는 속도"가 가장 빠르지만, 시간이 지날수록 보안·프라이버시·성능 통제 비용이 발생합니다.
아래 항목은 SaaS Embed를 붙일 때 함께 따라오는 운영 고려사항입니다.
누가 무엇을 책임지는가
상황별 권장 스택
페이지 제작과 운영을 빠르게 시작하고, 서버 관리·보안 패치·업데이트는 벤더가 맡는 구성이 현실적입니다.
외부 데이터 전송 최소화. PostHog, Sentry self-host 배포로 내부망 운영
콘텐츠 정기 export 파이프라인 구축 (CLI backup) · SaaS Embed는 CSP/SRI로 격리 · 비용 단위(MAU/이벤트/요청/레코드) 먼저 확정
실무에서는 구조를 한 번에 바꾸기보다 섞어서 운영하는 경우가 많습니다
2~3페이지에서 본 비교는 개념 축을 이해하기 위한 요약입니다. 실제 서비스에서는 모든 화면과 기능을 한 번에 바꾸지 않고, 필요한 부분부터 단계적으로 분리하는 경우가 많습니다.
CMS에서 글을 발행한 뒤 화면이 언제 바뀌는가
"글을 고쳤는데 왜 바로 화면이 안 바뀌지?"의 답은 대부분 캐시입니다. DB를 고쳐도 CDN이나 프런트엔드가 예전 결과를 들고 있으면 화면은 바로 안 바뀝니다.
콘텐츠뿐만 아니라 권한·리비전·감사로그까지 설계해야 합니다
CMS DB는 단순 글 저장소가 아닙니다. 누가 수정할 수 있는지, 언제 발행됐는지, 이전 버전으로 되돌릴 수 있는지까지 함께 설계합니다.
글·댓글·감사로그 모두와 연결
리비전·태그·미디어까지 연결
예전 버전 전체를 통째로 저장한 복사본
승인 큐를 거쳐 XSS·스팸 방어
ROLE, PERMISSION, USER_ROLE, MEDIA, TAXONOMY, AUDIT_LOG도 함께 설계합니다.
누가 무엇을 할 수 있는가
| 리소스/행위 | Guest | User | Author+Publisher | Admin |
|---|---|---|---|---|
| Content 읽기(공개) | ✅ | ✅ | ✅ | ✅ |
| Content 생성 (draft) | ❌ | 옵션 | ✅(own) | ✅(any) |
| Content 수정 | ❌ | ❌ | ✅(own) | ✅(any) |
| Content 발행 | ❌ | ❌ | ✅ | ✅ |
| Content 롤백 | ❌ | ❌ | ✅(권한부여) | ✅ |
| Comment 작성 | ✅ | ✅ | ✅ | ✅ |
| Comment 승인/삭제 | ❌ | ❌ | ✅(권한부여) | ✅ |
| User/Role 관리 | ❌ | ❌ | ❌ | ✅ |
Draft → Review → Publish → Rollback
글을 쓰는 사람과 승인하는 사람이 다를 수 있습니다. 워크플로는 작성·검토·발행 과정을 일정하게 관리하는 장치입니다.
CMS는 입력·권한·스크립트·미디어 등 공격 표면이 넓습니다
보안 체크리스트는 외워야 할 목록이 아닙니다. "입력값이 위험한가?", "권한이 너무 넓지 않은가?", "외부 스크립트를 믿어도 되는가?"를 점검하는 질문표입니다.
| 영역 | 체크항목 | 수준 |
|---|---|---|
| 인증 | 비밀번호 해시, MFA(옵션), 로그인 시도 제한 | critical |
| 인가 (RBAC) | scope(own/any), 관리자 기능 분리 | critical |
| XSS | 출력 인코딩, HTML Sanitization, 에디터 허용 태그 제한 | critical |
| CSRF | 상태 변경 요청에 CSRF 토큰/Origin 검사 | high |
| CSP | script-src를 nonce/hash 기반으로 엄격화, 인라인 차단 | high |
| SRI | 외부 스크립트에 integrity 속성 적용 | high |
| 비밀 관리 | DB/토큰 키를 Secret Manager로 분리, 코드에 비밀 금지 | critical |
| 감사로그 | 발행·롤백·권한 변경은 반드시 AuditLog 기록 | high |
어떤 순간에 어떤 시스템이 움직이는가
Presigned URL 패턴을 조금 더 자세히 보면
작은 텍스트 요청은 애플리케이션 서버가 직접 처리해도 부담이 크지 않습니다. 하지만 동영상 같은 큰 파일을 웹서버가 직접 받기 시작하면 네트워크 대역폭, 동시 연결, 임시 저장 공간이 모두 웹서버에 몰리면서 연쇄적인 장애로 이어질 수 있습니다.
여기서 "Browser → S3에 직접 PUT"은 HTML form submit으로 페이지 전체를 넘기는 방식이 아니라, 브라우저의 JavaScript 코드가 fetch/XHR로 비동기 업로드를 수행한다는 뜻입니다. 그래서 진행률 표시, 실패 재시도, 업로드 완료 후 메타데이터 등록을 분리해서 처리할 수 있습니다.
캐시, DB 확장, 장애 복구
| 구성 요소 | RTO | RPO |
|---|---|---|
| 콘텐츠 DB | 1~4시간 | 5~15분 |
| 미디어 스토리지 | 1~4시간 | 15~60분 |
| 캐시/검색 인덱스 | 수분~1시간 | 재구축 가능 기준 |
이 값은 시작점입니다. 팀의 운영 정책과 예산에 맞게 조정하세요.
Monolithic, Headless, SaaS Embed, Self-hosted를 서비스 운영 관점에서 비교합니다.
콘텐츠를 어디서 관리하고, 어떤 기능을 외부 서비스에 위임하며, 캐시와 권한은 어떻게 설계해야 하는지 입문자 눈높이로 정리한 구조 설계 강의입니다.
결과물: 내 서비스에 맞는 CMS 구조 선택표, 데이터 모델 초안, 캐시/권한 운영 체크리스트
Monolithic vs Headless, SaaS vs Self-hosted를 각각 다른 축으로 보고 혼동을 줄입니다.
각 패턴의 장단점뿐 아니라 어떤 조직 조건에서 먼저 후보가 되는지도 함께 봅니다.
팀 규모, 데이터 민감도, 운영 역량, 비용 구조에 따라 어떤 조합을 추천할지 정리합니다.
리비전, RBAC, 감사로그, 캐시 무효화 흐름을 실제 구현 단위로 묶어 봅니다.
댓글 승인 큐, 대용량 업로드, 장애 복구, 관측성을 어떤 순서로 붙이면 좋은지 정리합니다.