Headless란 무엇인가?

 

1. Headless?

Headless는 말 그대로 '머리가 없다'라는 의미를 갖고 있습니다. 소프트웨어 아키텍처에서 이는 UI, 즉 사용자 인터페이스가 없는 시스템을 말하는 것이며, 백엔드 로직은 존재하지만 이를 직접적으로 보여주는 프론트엔드가 없는 구조를 의미합니다.

 

2. Headless CMS(Content Management System)

Headless CMS는 콘텐츠 관리 시스템(CMS)에서 콘텐츠 저정과 관리 기능만 제공하고, 이를 표시하는 프론트엔드 레이어는 제공하지 않는 시스템입니다. 대신 API를 통해 콘텐츠를 제공하여 다양한 플랫폼에서 활용할 수 있게 합니다.

 

장점으로는 다음과 같은 것들이 있습니다.

• 유연성: 웹, 모바일 앱, IoT 기기 등 다양한 채널에 콘텐츠를 제공할 수 있습니다.
• 스케일링 용이성: 프론트엔드와 백엔드가 분리되어 있어 각각 독립적으로 확장이 가능합니다.
• 개발 효율성: 프론트엔드 개발자가 선호하는 프레임워크와 기술 스택을 자유롭게 선택할 수 있습니다.

전통적인 CMS는 프론트엔드와 하나로 밀접하게 연결되어 있기 때문에 프론트엔드 개발 언어나 구조 같은 것을 쉽게 바꿀 수 없습니다. 또한 요구 사항이 많아지면 사이트에 적용하기가 어려워지고 정해진 틀에 따라서만 적용해야 한다는 단점이 있습니다.

 

https://engineering.linecorp.com/ko/blog/headless-cms-in-line

 

반면 Headless CMS는 CMS에 좀 더 집중합니다. 머리가 프론트엔드 자체를 의미하기 때문에 헤드리스 CMS를 사용하면 프론트엔드는 각자의 프로젝트에 맞춰 개발 플랫폼이나 언어 등을 선택해 개발하면 됩니다.

 

헤드리스 CMS는 API를 통해서 프론트엔드와 통신합니다. 그렇기에 웹 개발자 입장에서는 헤드리스 CMS로 개발하면 React나 Vue, Vanilia JS 등 프로젝트에 맞게 프레임워크를 자유롭게 선택할 수 있는 것이죠.

 

3. Headless UI

프론트엔드 개발을 하다보면 항상 기본적인 엘리먼트 컴포넌트를 반복해서 만드는 경험을 할 수 있습니다.

가령 Input, Button, Dialog 등과 같은 컴포넌트가 그 예인데요.

 

 

이러한 컴포넌트들의 기능은 대부분 그대로지만, 프로젝트마다 그리고 요구사항마다 달랐기에 새롭게 만들어주어야 합니다. 동일한 기능이지만 다른 디자인을 가지는 컴포넌트를 매 프로젝트마다 새롭게 만들어주는 것은 비효율적일 수 있기 때문에 이렇게 동일한 기능으로 많이 사용되는 컴포넌트들을 제공하는 시스템을 Headless UI라고 하는 것입니다.