Glif 패턴 묶음
Glif에서 반복된 우회를 한눈에 본다. 개별 사례를 읽기 전에 전체 지형을 파악하는 용도다.
패턴 지도
| 우회 패턴 | 발생 위치 | 위반 기준 | 문서 |
|---|---|---|---|
| Page에서 컴포넌트 직접 import | Page / Screen | 단일 진입점 | UI 렌더링 우회 |
| Registry 없이 직접 렌더링 | Renderer | 합법 경로 | 컴포넌트 레지스트리 우회 |
| 공식 렌더러 우회 | Content area | 합법 경로 | 콘텐츠 렌더러 우회 |
| Provider 없이 컴포넌트 조합 | Component | 단일 진입점 | 컴포넌트 조합 우회 |
| Provider 경계를 건너뛰는 접근 | Component tree | 합법 경로 | Provider 경계 우회 |
| Slot 계약 무시 | Component | 단일 진입점 | Slot 계약 우회 |
| 레이아웃 구조 직접 변경 | Layout | 정본 | 레이아웃 우회 |
| 공식 바인딩 없이 상태 직접 읽기 | Component | 상태 분리 | 상태-UI 바인딩 우회 |
| 액션 경로 건너뛰기 | UI interaction | 상태 분리 | UI 액션 우회 |
| 에디터와 프리뷰가 다른 데이터 참조 | Editor / Preview | 정본 | 에디터/프리뷰 분기 |
| 스타일 토큰 없이 인라인 스타일 | Styling | 정본 | 스타일 토큰 우회 |
가장 자주 발생한 패턴
Glif에서 AI와 함께 작업하면서 가장 많이 반복된 패턴은 두 가지였다.
import { HeroBlock } from "@/ui/blocks/HeroBlock" 직접 import — Registry와 Resolver를 완전히 건너뛴다. 컴포넌트가 즉시 화면에 나오기 때문에 AI가 가장 먼저 선택하는 경로다. ESLint가 잡기 전까지는 아무 오류 없이 동작한다.
switch(type) ad-hoc renderer — Registry가 있는데도 별도 switch문으로 type별 컴포넌트를 직접 연결한다. Registry가 점점 형식적으로만 존재하게 된다.
ESLint 규칙 요약
| 규칙 | 의미 |
|---|---|
glif/no-direct-component-import | Page/Screen에서 UI 컴포넌트 직접 import 금지 |
glif/no-raw-component-reference | Config에 component reference 포함 금지 |
glif/registry-resolver-only | 렌더링은 Resolver 경유만 허용 |
glif/no-state-direct-mutation | 상태는 공식 바인딩 경로만 허용 |
전체 강제 구현은 → 실행 통제 — 빌드 타임 강제