Headless

• Headless란 원래 GUI(그래픽 사용자 인터페이스)가 있는 소프트웨어를 GUI 없이 실행하는 모드
• 네트워크, 커맨드라인, API 등 대안 인터페이스를 통해 입출력하는 GUI-less 실행 방식
• “Head”가 사용자가 보는 화면/디스플레이를 의미하고, 그것이 없다(“-less”)는 뜻

해당 개념이 필요한 이유

• Hyperframes는 Headless Chrome을 사용하여 HTML을 프레임 단위로 캡처한다
• 비디오 렌더링에 Chrome 화면을 실제로 띄울 필요가 없으므로, Headless 모드로 실행하여 리소스를 절약한다
• Headless 개념은 브라우저 외에도 CMS, 게임 서버, 서버 머신 등 다양한 영역에서 사용된다

AS-IS — GUI 기반 소프트웨어

sequenceDiagram
    autonumber
    participant User as 사용자
    participant GUI as GUI 화면
    participant Core as 핵심 로직

    User->>GUI: 마우스 클릭, 키보드 입력
    GUI->>Core: 사용자 요청 전달
    Core->>GUI: 처리 결과 반환
    GUI->>User: 화면에 시각적으로 표시
    Note over User,Core: GUI가 사용자와 핵심 로직 사이의 다리 역할

TO-BE — Headless 실행

sequenceDiagram
    autonumber
    participant Code as 코드 / 스크립트
    participant Core as 핵심 로직

    Code->>Core: API / Protocol로 직접 명령
    Core->>Code: 처리 결과 반환 (데이터)
    Note over Code,Core: GUI 없이 코드가 직접 핵심 로직을 제어

대표적 사례

소프트웨어	Headful (일반 모드)	Headless 모드
Chrome 브라우저	창이 뜨고, 사용자가 클릭·타이핑	창 없이 코드(Puppeteer)로만 제어
게임 서버	클라이언트에서 그래픽 렌더링	서버는 게임 로직만 실행, 화면 없음
CMS	관리 UI + 프론트엔드 포함 (WordPress)	API만 제공, 프론트엔드는 별도 구축 (Contentful)
서버 머신	모니터·키보드 연결	원격 SSH로만 접속 (화면 없음)

Headless ≠ CLI

git, ffmpeg 같은 CLI 도구는 처음부터 GUI 없이 설계된 것이지, GUI를 “제거한” 것이 아니다. 따라서 이들을 “headless”라고 부르지 않는다.

• Headless: “원래 머리(GUI)가 있는데, 떼어낸 것”
• CLI: “처음부터 머리(GUI) 없이 만든 것”

Headless CMS — 웹 콘텐츠 관리의 사례

CMS(Content Management System)란

CMS는 개발자가 아닌 사람(마케터, 에디터, 운영자)이 코드를 몰라도 웹 콘텐츠를 만들고 수정할 수 있게 해주는 시스템이다. “Content Management System”의 약자로, 콘텐츠(글, 이미지, 상품 정보 등)를 관리하는 시스템을 뜻한다.

• CMS 없이: 개발자가 HTML을 직접 수정 → 서버에 배포 → 매번 개발자 필요
• CMS 있으면: 운영자가 관리 화면에서 글 작성 → “게시” 버튼 → 끝. 개발자 불필요

전통적 CMS(WordPress)는 어떻게 동작하는가

WordPress를 예로 들면, 블로그 글 하나를 작성할 때 일어나는 일:

1. 작성: 관리자 페이지(/wp-admin)에서 글을 쓴다
2. 저장: WordPress DB(MySQL)에 글이 저장된다
3. 표시: WordPress가 PHP 템플릿으로 HTML 페이지를 만들어 방문자에게 보여준다

이 세 단계가 하나의 시스템 안에 전부 들어 있다. 관리 화면, 데이터베이스, 프론트엔드 템플릿이 결합(coupled)되어 있어, “WordPress로 작성한 글은 WordPress가 만든 웹페이지로만 볼 수 있다.”

graph LR
    A[관리자: 글 작성] --> B[WordPress]
    B --> C[DB 저장]
    B --> D[PHP 템플릿으로 HTML 생성]
    D --> E[웹사이트 방문자가 봄]
    style B fill:#f9f,stroke:#333
    linkStyle 0,1,2,3 stroke:#333

전통적 CMS의 한계 — 왜 Headless가 필요한가

전통적 CMS는 웹사이트 하나만 운영할 때는 충분하다. 문제는 같은 콘텐츠를 여러 채널에 보여줘야 할 때 발생한다.

예를 들어 쇼핑몰을 운영하는데, 처음에는 웹사이트만 있었다. WordPress로 상품을 등록하면 잘 보인다. 그런데 사업이 커지면서 모바일 앱도 만들었다. 앱에서도 같은 상품 정보를 보여줘야 하는데, WordPress는 “PHP로 만든 웹페이지”만 줄 수 있다. 앱은 PHP 웹페이지를 쓸 수 없으니, 같은 상품 데이터를 앱용으로 따로 관리해야 한다.

매장 키오스크, 스마트 스피커 등 채널이 늘어날 때마다 같은 콘텐츠를 각각 따로 관리하게 된다:

         ┌→ 웹사이트용 WordPress
상품 정보 ─┼→ 앱용 별도 DB        ← 같은 데이터를 3번 관리해야 함
         └→ 키오스크용 별도 시스템

Headless CMS는 무엇이 다른가

Headless CMS는 “콘텐츠 저장 + 관리”만 담당하고, “화면에 어떻게 보여줄지”는 전혀 관여하지 않는다. 콘텐츠를 꺼내가는 방법은 오직 API(JSON/GraphQL)뿐이다. 데이터를 1번만 관리하면 모든 채널이 API로 가져다 쓴다:

                    ┌→ 웹사이트 (React)
상품 정보 → API ────┼→ 모바일 앱 (Swift)     ← 1번만 관리
                    └→ 키오스크 / 스피커

구체적인 예시 — 쇼핑몰에서 상품 하나를 등록한다고 가정:

Headless CMS(Contentful)에 저장하는 데이터:

{
  "name": "무선 이어폰 Pro",
  "price": 129000,
  "description": "노이즈캔슬링 지원, 30시간 배터리",
  "image": "https://cdn.example.com/earphone.jpg"
}

이 데이터를 API로 요청해서 각각 다른 화면으로 표시:

채널	같은 데이터를 어떻게 쓰는가
웹사이트 (React)	상품 상세 페이지에 이미지 크게, 리뷰와 함께 표시
모바일 앱 (Swift/Kotlin)	작은 화면에 맞게 카드형 레이아웃으로 표시
매장 키오스크	터치스크린용 대형 UI로 표시
스마트 스피커 (Alexa)	“무선 이어폰 프로, 12만9천원, 노이즈캔슬링 지원” 음성 읽기

graph LR
    CMS[Headless CMS<br/>콘텐츠 저장 + API] -->|JSON API| Web[웹사이트<br/>React]
    CMS -->|JSON API| App[모바일 앱<br/>Swift]
    CMS -->|JSON API| Kiosk[매장 키오스크]
    CMS -->|JSON API| Speaker[스마트 스피커]
    style CMS fill:#4ecdc4,stroke:#333,color:#000

콘텐츠를 한 번만 수정하면 모든 채널에 자동으로 반영된다. 전통적 CMS에서는 채널마다 별도로 관리해야 한다.

핵심 차이 요약

	전통적 CMS (WordPress)	Headless CMS (Contentful, Strapi)
구조	콘텐츠 관리 + 화면 표시가 한 덩어리	콘텐츠 관리만 담당, 화면은 별도
콘텐츠 전달	PHP/HTML 템플릿으로 직접 렌더링	API(JSON)로 데이터만 전달
프론트엔드	CMS가 정해준 템플릿 사용	개발자가 자유롭게 구축 (React, Vue 등)
멀티 채널	웹사이트 1개에 최적화	웹, 앱, IoT, 스피커 등 다중 채널
”Head”	있음 — CMS가 화면까지 제공	없음 — 화면(head)을 떼어냄
적합한 상황	웹사이트 1개만 운영	웹 + 앱 + 여러 채널에 같은 콘텐츠 제공

참고 문서

• Headless software - Wikipedia
• Headless content management system - Wikipedia
• Content management system - Wikipedia
• What is a Headless CMS? - Contentful