GLIF 하네스

Glif는 React 웹 앱이다. 이 환경에서는 컴포넌트 연결 경로와 표현 계약의 우회가 두드러진다.

Glif란

Glif는 React / TypeScript로 작성된 웹 애플리케이션이다. 콘텐츠를 블록 단위로 구성하고, 에디터와 프리뷰가 분리된 구조를 가진다. 컴포넌트 레지스트리를 통해 화면에 연결되는 블록을 관리한다.

기술 스택:

언어: TypeScript / React
아키텍처: 컴포넌트 중심, 레지스트리 기반
상태 관리: Context / Store 기반
강제 도구: ESLint, 커스텀 플러그인, 런타임 가드

Glif의 컴포넌트 연결 구조:

Schema / Block Spec
    ↓
Component Registry    ← 승인된 컴포넌트 목록
    ↓
Resolver              ← key → Component 변환
    ↓
Rendered Component
    ↑
Page / Screen         ← key만 알고 있어야 함 (Component 직접 참조 금지)

Page는 어떤 컴포넌트를 쓸지 직접 결정하지 않는다. Schema와 key를 가지고, Resolver가 Registry를 통해 실제 컴포넌트를 선택한다.

이 환경에서 드러난 우회

Glif에서 AI와 함께 작업하면서 반복된 우회는 크게 네 종류였다.

렌더링 경로 우회 — Page에서 컴포넌트를 직접 import해서 바로 렌더링하는 패턴. Registry와 Resolver를 완전히 건너뛴다.

컴포넌트 레지스트리 우회 — Registry에 없는 컴포넌트를 switch문이나 조건 분기로 직접 연결하는 패턴. Registry가 형식적으로만 존재하게 된다.

상태-UI 바인딩 우회 — 공식 바인딩 경로 없이 상태를 직접 읽거나, 이벤트 없이 UI를 업데이트하는 패턴. 상태 변화와 렌더링이 분리된다.

표현 정합성 붕괴 — 에디터와 프리뷰가 서로 다른 데이터를 보거나, 스타일 토큰이 공식 경로 없이 적용되는 패턴.

Atlas와의 차이

Atlas의 우회는 레이어 경계가 무너질 때 런타임 오류나 데이터 불일치로 드러난다. Glif의 우회는 달리 작동한다. 화면이 정상으로 보인다. 컴포넌트가 직접 import되어도 일단 렌더링은 된다. 그래서 발견이 늦다. 그리고 발견됐을 때는 이미 여러 곳에 복제되어 있다.

강제 도구

Glif의 강제는 ESLint 기반이다.

ESLint 규칙이 Page/Screen 레이어의 직접 컴포넌트 import를 금지하고, raw component reference 사용을 차단한다. 런타임 가드가 Registry에 없는 컴포넌트 주입을 실패로 전환한다.

주요 규칙:

glif/no-direct-component-import    : Page는 UI 컴포넌트를 직접 import할 수 없다
glif/no-raw-component-reference    : Config에 component reference를 넣을 수 없다
glif/registry-resolver-only        : 렌더링은 Resolver를 통해서만
glif/no-state-direct-mutation      : 상태는 공식 바인딩 경로를 통해서만

이 규칙들은 실행 통제 — 빌드 타임 강제에서 상세히 다룬다.

이 파트의 문서 목록

문서	우회 패턴	핵심 질문
Glif 사례 개요	입문	Glif 연결 구조를 읽기 위한 최소 컨텍스트는 무엇인가?
Glif 패턴 묶음	전체 조망	Glif에서 반복되는 패턴을 한눈에
UI 렌더링 우회	direct path bypass	Resolver 없이 렌더링하는가?
컴포넌트 레지스트리 우회	direct path bypass	Registry를 건너뛰는가?
콘텐츠 렌더러 우회	direct path bypass	공식 렌더러를 우회하는가?
컴포넌트 조합 우회	contract flattening	Provider 없이 조합하는가?
Provider 경계 우회	contract flattening	Provider 경계를 뚫는가?
Slot 계약 우회	contract flattening	Slot 계약을 무시하는가?
레이아웃 우회	contract flattening	레이아웃 구조를 직접 건드리는가?
상태-UI 바인딩 우회	state & meaning bypass	공식 바인딩 없이 상태를 읽는가?
UI 액션 우회	state & meaning bypass	액션 경로를 건너뛰는가?
에디터/프리뷰 분기	parallel path divergence	에디터와 프리뷰가 같은 데이터를 보는가?
스타일 토큰 우회	parallel path divergence	스타일이 공식 토큰을 통해 적용되는가?

읽는 순서: Glif 사례 개요 → Glif 패턴 묶음 → 관심 있는 개별 패턴

각 사례 문서의 구조

Glif 사례 문서는 거의 같은 구조를 따른다.

개요 / 질문 / 문제 — 어떤 우회가 반복됐고 무엇을 물어야 하는가
문제의 본질 — 왜 이 우회가 UI 구조를 무너뜨리는가
목표 구조 / 하네스 적용 위치 — 합법 경로와 잠가야 할 표면은 어디인가
실제 구현 / 위반 예시 — 실제 TypeScript / React 코드와 실패 결과는 어떻게 보이는가
보조 강제 수단 / 결과 — 하네스가 어떤 강제와 연결되고 어떤 변화를 만드는가
실무 적용 팁 / 요약 — 현업에서 무엇을 먼저 봐야 하는가