[www]

Headless CMS가 무엇인고? Headless CMS와 microCMS 첫 경험담

Last updated on

HeadlessCMS

약 2년 전, 우연히 Headless라는 개념을 알게 되면서부터 관련 기술에 관심을 갖기 시작했다. 특히 일본에서 제공하는 microCMS라는 서비스를 알게 된 이후로 회원가입을 하고 직접 테스트도 해봤지만, 당시에는 일반 CMS와의 차이를 명확히 이해하지 못했었다.

하지만, 최근 프로젝트에서 Radix UI라는 Headless UI 라이브러리를 경험한 것을 계기로, 그동안 관심만 갖고 있던 microCMS를 본격적으로 활용해 보기로 했다. 그리고 이번 기회에 포트폴리오를 재정비하면서 TypeScript와 Headless CMS에 대해 학습하고 있는 중이다.

Headless CMS에 관심을 갖게 된 이유

Headless CMS의 가장 큰 매력은 백엔드 없이도 콘텐츠 중심의 서비스 개발이 가능하다는 점이다.

  • 별도의 호스팅 서비스 없이 API만 제공받아 프론트엔드 중심으로 개발 가능
  • 콘텐츠 관리(CMS)와 디자인/레이아웃을 분리하여 유연한 설계 가능
  • 소규모 프로젝트나 개인 블로그 구축 시 개발 리소스 절감 효과

하지만 실제로 사용해보니, 백엔드가 없다는 점이 오히려 난이도를 높이는 요인이 되기도 했다. API로 모든 데이터를 가져오고 가공하는 과정에서 프론트엔드 개발 역량이 상당히 필요하다는 사실을 깨달았다.

ChatGPT 경험

처음에는 ChatGPT를 사용하는 것은 실력이 부족해서 의존하는 것 같아 망설였지만 프로젝트를 진행하면서 오히려 ChatGPT 덕분에 몰랐던 기능 구현 방법을 빠르게 학습할 수 있었고, 혼자서는 해결하기 어려운 문제도 단시간에 해결할 수 있었다.

  • API 설계 방식 및 데이터 구조 이해
  • Headless CMS를 활용한 콘텐츠 관리 전략
  • 프론트엔드에서 처리해야 하는 다양한 케이스 해결

결론적으로 ChatGPT는 개발 생산성을 크게 높여주는 필수 도구라는 것을 실감했다.

Headless CMS vs 전통적인 CMS

전통적인 CMS(예: WordPress)는 디자인, 관리 화면, 콘텐츠 관리까지 사이트 전체를 아우르는 기능을 제공하고 있다. 반면, Headless CMS는 다음과 같은 특징을 갖고 있다고 생각된다.

  • 항목 전통적인 CMS (WordPress 등) Headless CMS (microCMS 등)
  • 아키텍처 올인원(All-in-One) API 중심, 콘텐츠 제공 전용
  • 디자인/레이아웃 내장 테마 및 편집기 제공 프론트엔드에서 직접 구현
  • 관리 화면 통합 대시보드 제공 기본 API 관리 화면만 제공
  • 개발 난이도 낮음 (플러그인 활용) 상대적으로 높음
  • 확장성 제한적 프론트엔드 프레임워크와 자유로운 조합 가능
  • 속도 및 성능 사이트 크기에 따라 무거워질 수 있음 경량 API 기반으로 빠름

microCMS 사용 후기

microCMS는 일본에서 개발된 Headless CMS로, 개인이나 소규모 팀이 사용하기에 최적화된 서비스다.

  • 무료 플랜에서 API 5개 생성 가능
  • 등록 가능한 콘텐츠 건수 최대 10,000건
  • RESTful API 및 GraphQL 지원
  • 직관적인 대시보드와 문서화 제공

개인 블로그나 포트폴리오 사이트 정도를 운영하기에는 충분한 스펙이라 생각된다. 다만, Headless CMS 자체가 국내에서는 아직 사용자층이 많지 않아 한글 기반 자료가 부족한 편으로 해외 커뮤니티에서는 국내보다 활발하게 활용되고 있는 것 같아 보였다.

실제 프로젝트에서 느낀 점

1. API 설계의 중요성

초반에는 아무 생각 없이 다양한 필드를 생성했지만, 나중에 포트폴리오 방향을 재설정하면서 API를 수정하는 데 상당한 시간이 소요되었고 다음과 같은 사항을 사전에 가능한 세세히 정의할 필요가 있음을 알았다.

  • 콘텐츠 구조를 처음부터 명확히 설계할 것
  • 불필요한 인풋 필드 최소화
  • 프론트엔드와의 데이터 매핑 방식 미리 고려

2. 프론트엔드의 역할 확대

백엔드가 없으니 프론트엔드에서 모든 데이터를 제어해야 했다. 결과적으로 다음과 같은 추가 작업이 필요했다.

  • API 호출 및 데이터 가공 처리
  • 콘텐츠별 표시 여부 및 상태 관리
  • 레이아웃 및 UI 최적화

개인적으로 느낀 장점과 단점

장점

  • 백엔드 없이 콘텐츠 중심 서비스 개발 가능
  • 빠른 API 응답 속도와 경량화된 구조
  • React, Next.js, Astro 등 다양한 프레임워크와 쉽게 연동
  • 소규모 프로젝트, 개인 블로그 구축에 최적화
  • 일반 CMS와 마찬가지로 CMS에서 내용 수정시 별도 프론트 작업 불필요

단점

  • 프론트엔드 개발 난이도 증가
  • API 설계 초기 단계에서 많은 고민 필요
  • 일부 기능은 직접 구현해야 하므로 개발 공수가 커짐
  • CMS에 따라 국내 사용자 커뮤니티 및 자료 부족

마무리

Headless CMS는 단순히 백엔드 없이 프론트만으로 서비스를 만들 수 있다는 매력 때문에 관심을 가졌지만, 실제로 경험해보니 프론트엔드 역량을 더욱 높여야 제대로 활용 가능하다는 걸 깨달았다.

microCMS는 무료 플랜만으로도 충분히 실험할 수 있는 서비스이며, 소규모 블로그, 포트폴리오, 소상공인 사이트 구축에는 꽤 좋은 선택지라고 생각된다. 다만, 국내에서 활용 사례가 많지 않기 때문에 해외 사례와 문서를 참고하며 개발하는 것이 효율적일 것 같다.

tags : microCMS, Headless CMS, Headless UI, cms, blog, API