프론트엔드에서 Headless란?

(출처: https://itnext.io/decoupling-ui-and-logic-in-react-a-clean-code-approach-with-headless-components-82e46b5820c)

이런저런 아티클을 읽다보면 자주 마주치는 개념들이 있는데 그 중 하나가 'headless' 입니다. 전 아직도 headless가 무엇인지 헷갈릴 때가 있는데요, 오늘은 headless에 대한 아티클을 공유해보려고 합니다.

Bard의 답변

The word "headless" can have several meanings, depending on the context.

• Without a head. This is the most literal meaning of the word. It can refer to a person or animal that has had its head cut off, or to a device or object that does not have a head. For example, a headless printer is one that does not have a display screen.

• Without a leader or chief. This meaning is more figurative. It can refer to a group or organization that does not have a clear leader or authority figure. For example, a headless company is one that is struggling to find a new CEO after the previous one resigned.

• Foolish or stupid. This meaning is informal and is often used in a humorous way. It can refer to someone who is making a silly mistake or who is not thinking clearly. For example, you might say that someone made a headless argument if they were not making any sense.

In the context of technology, the term "headless" is often used to describe a device or application that does not have a graphical user interface (GUI). This means that it does not have a display screen or any other visual elements. Instead, it is controlled through a command-line interface (CLI) or a web API.

For example, a headless browser is a web browser that does not have a graphical user interface. It is used by developers to test web pages and applications without having to display them on a screen.

I hope this helps! Let me know if you have any other questions.

아래에 소개해드리는 몇몇 아티클을 요약해보면 headless는

"마크업(HTML), 스타일(CSS), 구현 등을 제외한 핵심 로직을 제공하는 라이브러리 또는 유틸리티 입니다."

가장 유명한 Counter 컴포넌트를 예로 들면, 라이브러리에선 숫자를 세는 로직을 분리해서 제공하고 Counter 컴포넌트를 만드는 데 사용하는 HTML, CSS 그리고 갯수를 어떻게 활용할지(구현) 등은 라이브러리 사용자에게 위임하는 것입니다.

반면, Headless Design System은 어떨까요? 프론트엔드 개발을 할 때 '모달'을 가져다 쓴다면 라이브러리나 디자인시스템의 차이를 구분하시나요? 또는 라이브러리를 'headless' 인지 아닌지 구분하시나요? 제가 혼동하던 부분은 이 부분이었던 것 같기도 합니다.

아래 아티클은 Headless Design System에 대해 소개합니다.

On the other hand, the term “headless” refers to an architecture where the front-end and back-end systems operate independently from one another. In this case, a headless design system allows you to use a single design system across multiple applications and platforms while decoupling it from any specific technology, integration, or UI.

"'headless'는 서로 독립적으로 운영하는 프론트엔드 그리고 백엔드 아키텍처를 의미합니다. 이 경우, 'headless' 디자인 시스템은 여러 애플리케이션과 플랫폼 사이에서 특정 기술, 통합 또는 UI로부터 분리해서 디자인시스템을 사용할 수 있도록 합니다."

즉,

"디자인시스템을 사용하려는 환경을 고려하지 않아도 쓸 수 있도록 설계된 디자인시스템을 'headless' 디자인시스템이라고 한다."

입니다.

결국 'headless'란 사용하는 곳의 환경에 의해 쉽게 바뀔 수 있는 부분을 제외한 핵심적인 부분을 의미하는 것 같습니다.

만약 더 구체적인 예제와 이해를 하고 싶다면 위에 소개해드린 아티클들을 참고해주세요 :)