Logo

Prolip's Blog

Headless CMS란 무엇일까?
  • #CMS
  • #Sanity

Headless CMS란 무엇일까?

Prolip

2024-03-21

CMS, Headless CMS에 대해 알아보기, Sanity로 프로젝트 생성하기

시작…

이번에 Next 공부하면서 토이 프로젝트 하나 진행하려고 하는데 데이터 저장소로 Headless CMS를 사용해보려고 공부 중입니다..

우선 이 Headless CMS가 무엇인지 알아보기 전에 CMS는 또 무엇인지 짚고 넘어가는게 좋을 거 같으니 정리해봅시다.

CMS

CMS란 Content Management System의 약자로 디지털 컨텐츠 관리 시스템입니다.

컨텐츠 생성, 수정 심지어 기술에 대한 전문 지식 없이도 웹 사이트(블로그 및 기타 플랫폼)를 관리할 수 있는 기능을 제공합니다.

전통적인 CMS(Traditional CMS)는 데이터를 저장하는 것뿐만 아니라 이 데이터가 브라우저에 표시되는 마크업 렌더링 기능이 모두 포함되어있습니다.

CMS는 화면에 표시되는 프레젠테이션 레이어와 데이터 레이어 기능이 하나로 밀접하게 연결되어있다고 볼 수 있습니다.

대표적으로 Word Press가 전통적인 CMS에 속합니다만 최근 Headless CMS를 지원하고 있습니다.

Headless CMS

이제 Headless CMS에 대해 정리해봅시다..

Head(머리)less(없는) Content Management System(컨텐츠 관리 시스템) Head가 존재하지 않는 CMS라고 볼 수 있겠습니다.

Head가 없다는게 무슨 뜻일까요??

우리 웹 사이트는 보통 Body(백엔드)와 Head(프론트)로 이루어져있다고 말합니다.

전통적인 CMS는 프론트와 백이 밀접하게 연결되어있어 사실 화면에 표시되는 영역에 대한 언어와 구조 변경이 힘들 수밖에 없습니다.

반면 Headless CMS는 데이터가 저장되는 Body(데이터 레이어)와 화면에 표시되는 Head(프레젠테이션 레이어)를 분리시켜 데이터 관리만을 위한 저장소 역할을 수행합니다.

그럼 당연히 개발 플랫폼, 언어, 구조 등 개발자가 프로젝트에 맞게 유연하게 구성할 수 있게 됩니다.

그럼 어떻게 데이터를 가져오나요??

Headless CMS는 철저하게 데이터 저장소로 설계 및 구축됩니다.

관리되는 데이터는 API를 통해 컨텐츠를 제공합니다.

개발자는 제공된 컨텐츠를 자유롭게 웹, 모바일 등 다양한 방식으로 제공이 가능합니다.

Sanity

headlesscms1

Sanity는 클라우드 기반의 Headless CMS로 클라우드 상에 존재하는 Content Lake라는 데이터 보관소에 우리의 데이터를 저장하고 관리할 수 있습니다.

이 때 이 데이터를 관리하기 위한 GUI 툴로 Sanity Studio를 제공합니다.

Sanity Studio를 이용해 클라우드 상의 Content Lake와 동기화 시킨 뒤 데이터 모델(스키마)을 정의하고 관리할 수 있습니다.

이후 Sanity에서 제공하는 API를 통해 content lake에 저장된 데이터에 접근할 수 있습니다.

어떻게 시작하나요?

Sanity: The Composable Content Cloud 해당 링크의 Start Building 버튼을 클릭해 프로젝트를 생성할 수 있습니다.

Google, Github 등 로그인을 통해 프로젝트를 빌드할 수 있습니다.

저는 따로 깃헙에 [프로젝트명]-backend 이런 식으로 하나의 리포를 따로 만들어 Front 저장소와 Back 저장소를 분리 시켰습니다만, 프로젝트 규모나 취향에 따라 해당 프로젝트 내부에 Sanity를 심어놓을 수 있습니다.

headlesscms2

설치된 패키지 매니저를 이용해 dev 모드로 실행하게 되면 3333번 포트로 실행됩니다.

해당 포트를 브라우저에서 실행하면 아래와 같이 로그인 선택창이 표시됩니다.

headlesscms3

전 Sanity에 깃헙으로 로그인 했으므로 Github 로그인을 선택했습니다.. 로그인이 성공적으로 끝난다면 성공적으로 프로젝트를 생성할 수 있습니다.

headlesscms4

Build a schema 버튼을 클릭하면 어떻게 스키마를 정의할 수 있는지 Sanity docs로 연결됩니다.

마치며…

사실 이번 포스팅은 Headless CMS가 무엇인지에 대해 기록해보려 남기는 포스팅이므로 스키마 정의 및 사용법에 대한 포스팅은 후에 다시 게시할 생각입니다…

항상 느끼는 사실이지만 무언가를 배울 때 희열감을 느끼는 것 같습니다.

배운 것들을 기록하고 써먹을 때 진정 내 것이 되는 거 같은데 다들 저와 같은 마음이신지 궁금합니다.

이렇게 게시물들을 작성하며 블로그 만들길 잘했다 싶습니다..

.

.

.

.

뿅..

블로그(7) - Serverless, API Routes 알아보기

블로그(7) - Serverless, API Routes 알아보기

Sanity에 스키마 정의하기

Sanity에 스키마 정의하기