# 프리셋: anti-grid — 의도적으로 깨진 격자

> 한 문장: **기억되는 것이 목적일 때.** 규칙을 알고 나서 깬다.

벤토 그리드가 표준화되자 그 반작용으로 부상한 방향이다. 2026년 현재 **실제로 작동하는 차별화 수단**이다.

## 언제 고르나

- 에이전시·스튜디오 자사 사이트, 아트/문화 프로젝트, 캠페인, 음악·패션
- 클라이언트가 "안전한 것 말고"를 명시적으로 요구했을 때
- **쓰지 마라**: 전환이 목적인 커머스, B2B SaaS 구매 경로, 접근성 요구가 엄격한 공공. 이 프리셋은 읽기 비용을 높인다

## 결정

### 타이포그래피
- **모노스페이스 또는 개성 강한 그로테스크**를 주역으로
- 크기 대비를 극단적으로 — 비율 1.618 이상, 또는 스케일을 아예 무시하고 두세 개 크기만 극단적으로 배치
- 대문자·자간 확대·세로쓰기 같은 장치를 **하나만** 쓴다. 셋을 동시에 쓰면 아마추어
- **전체 대문자 헤드라인은 검출률 2위 슬롭 지문**이다. 쓰려면 이유가 있어야 하고, 짧아야 한다(한 줄 이내)

| 슬롯 | 무료 | 유료 | 한글 |
|---|---|---|---|
| 디스플레이 | Karrik, Basteleur, Terminal Grotesque (Velvetyne) | Right Grotesk | 제주명조, 여기어때 잘난체 |
| 본문 | Work Sans, Archivo | Neue Montreal | Pretendard |

### 색
- 원색 또는 극단적 대비. 중간 톤을 피한다
- 배경색 자체를 강한 색으로 쓰는 것을 검토 (흰 배경이 기본값이라고 가정하지 마라)
- **단, 색은 두 개까지.** 무지개는 브루탈리즘이 아니라 혼돈이다

### 간격
- 격자를 **정의한 뒤에 깬다.** 그리드 없이 배치하면 깨진 게 아니라 그냥 엉망이다
- 요소를 겹치게(`z-index`, 음수 마진) 배치 — 단 겹침이 읽기를 방해하면 실패
- 화면 밖으로 흘려보내기, 극단적 여백과 극단적 밀집을 한 페이지에 공존시키기

### 재질 (`svg-filters.md`)
- 거친 질감이 어울린다: **강한 그레인, 리소그래프 인쇄, 잉크 번짐(`feTurbulence` + `feDisplacementMap`)**
- 크로마틱 애버레이션을 호버에 얹기
- 매끄러운 유리·글로우는 이 프리셋의 반대편이다

### 모션 (`motion.md`)
- 갑작스럽게. `steps()` 이징, 짧고 각진 전환
- 커서 인터랙션(마그네틱, 왜곡)이 잘 맞는다
- **`prefers-reduced-motion` 대응이 특히 중요하다.** 이 프리셋의 모션은 강해서 어지러움을 유발하기 쉽다

## 흔한 실패

1. **그리드를 정의하지 않고 시작** → 깬 게 아니라 못 맞춘 것으로 보인다
2. **읽을 수 없게 만들고 "의도"라고 함** → 브루탈리즘도 읽혀야 한다. 히어로 메시지는 반드시 읽혀야 한다
3. **장치를 전부 동원** → 대문자 + 자간확대 + 겹침 + 회전 + 그레인 = 소음
4. **접근성 포기** → 포커스 링과 대비는 이 프리셋에서도 지킨다
5. **B2B 브리프에 적용** → 프리셋 선택 자체가 실패

## 리스크 후보

- 히어로 텍스트를 화면 밖으로 절반 흘려보내기
- 스크롤에 따라 그리드 자체가 재배치되기
- 배경을 원색 하나로 덮고 이미지를 흑백으로