Headless CMS 소개

블로그를 개설하면서 알게된 생소한 단어 'Headless CMS'

이번에 Gatsby 블로그를 개설하는 과정에서 Headless CMS라는 용어를 접하게 되었습니다. Headless CMS는 도대체 무엇일까요?🤔

Headless CMS가 무엇일까?

Headless CMS에서 Headless는 "head"(프론트엔드)를 "body"(백엔드 콘텐츠)에서 떼어낸다는 것을 의미합니다. 그리고 CMS는 Content Management System의 약자로써 말 그대로 콘텐츠를 관리하는 시스템을 나타냅니다.

기존 CMS

기존의 CMS는 컨텐츠를 서비스하는 시스템과 시스템이 담고 있는 컨텐츠가 긴밀하게 연결되어 있다보니 동일한 컨텐츠를 다른 서비스(다른 웹 또는 앱 등)에서 보이게 하는 것이 쉽지 않았습니다. 즉, 컨텐츠를 이식하기가 힘들었다는 의미입니다.

Headless CMS

제 블로그 컨텐츠 관리에 사용하고 있는 headless CMS인 DatoCMS를 예로 설명을 드리자면 headless CMS는 크게 다음과 같은 요소로 나눌 수 있습니다.

• 프론트엔드 코드(Gatsby)

• 블로그 게시 컨텐츠(DatoCMS)

• CMS와 프론트엔드간 통신 요소(GraphQL)

여기서 프론트엔드 코드는 컨텐츠들이 어떻게 보일지만 알려주면 되기 때문에 프론트엔드 프레임워크의 선택이 자유롭습니다. 또한 블로그에 들어갈 실질적인 컨텐츠들은 컨텐츠만을 관리하는 별도의 CMS에서 관리하기 때문에 이 둘은 철저히 분리되어 있습니다.

Headless CMS는 어떻게 작동할까?

그렇다면 블로그를 실제로 띄울 때는 이 프론트엔드 코드에 올라갈 컨텐츠를 어떻게 가져오는 것일까요? 일반적으로 RESTful API 또는 GraphQL 등을 활용하여 가져오게 됩니다. 우리가 블로그 컨텐츠를 새로 작성하고 정적 사이트로 빌드한다고 할 때 다음과 같은 순서로 포스팅이 진행됩니다.

1. CMS 상에서 블로그에 게시할 컨텐츠 작성

2. 배포 진행(npm run deploy 등)

3. 정적 사이트 생성 등의 과정에서 CMS상에서 컨텐츠들을 받아옴(RESTful API 방식 등)

4. 컨텐츠 + 화면 구성(Gatsby, Jekyll 등)의 형태로 블로그 배포 완료

섬뜩한 이름 뒤에 숨어 있던 편리함

Headless.. 왠지 공포 영화에 나올 법한 단어였지만 headless CMS는 결국 블로그와 같은 사이트 운영을 더욱 유연하고 편리하게 해주는 멋진 도구였습니다! 여러분도 혹시 새로운 블로그나 비슷한 사이트를 운영하실 계획이 있으시다면 headless CMS를 활용하여 멋지고 편리한 자신만의 웹 사이트를 꾸려나가 보시길 바랍니다!