Glif 표현 개요

Glif 사례를 읽기 전에 최소한으로 알아야 할 것들. 깊은 제품 설명이 아니라, 하네스 맥락을 잡기 위한 최소 컨텍스트다.

Glif가 하는 일

Glif는 콘텐츠를 블록 단위로 구성하는 웹 앱이다. 에디터에서 콘텐츠를 편집하고, 프리뷰에서 결과를 확인한다. 각 블록은 타입과 속성을 가지며, 컴포넌트 레지스트리를 통해 화면에 연결된다.

컴포넌트 연결 구조

Schema (BlockNode[])
    ↓ type: "hero" | "quote" | "cta"
Component Registry
    hero → HeroBlock
    quote → QuoteBlock
    cta → CtaBlock
    ↓ resolve(type)
Resolver
    ↓ <Component {...props} />
Rendered Output

규칙: Page나 Screen은 컴포넌트를 직접 import하지 않는다. Schema의 type key를 가지고 있고, Resolver가 Registry에서 실제 컴포넌트를 찾아 렌더링한다.

핵심 용어

용어	의미
BlockNode	타입과 속성을 가진 콘텐츠 단위. Schema의 최소 단위
Registry	타입 키와 컴포넌트를 매핑하는 중앙 등록소
Resolver	Registry에서 컴포넌트를 찾아 렌더링하는 함수
Provider	React Context를 통해 하위 컴포넌트에 데이터를 공급하는 구조
Slot	컴포넌트 내부에 외부 콘텐츠가 삽입되는 지정 위치
Style Token	디자인 시스템의 색상, 간격 등을 중앙에서 관리하는 변수

에디터와 프리뷰

에디터와 프리뷰는 같은 Schema를 읽는다. 같은 BlockNode 배열을 가지고, 같은 Registry와 Resolver를 통해 렌더링한다. 에디터가 직접 수정한 데이터를 프리뷰가 즉시 반영한다.

둘이 다른 데이터를 보기 시작하면 에디터/프리뷰 분기 우회가 발생한 것이다.

이 구조를 머릿속에 두고 각 우회 패턴을 읽으면, 어떤 연결 경로가 어디서 무너지는지 바로 보인다.

→ Glif 패턴 묶음으로 계속

Glif 패턴 묶음