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

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

규칙적 격자에 비대칭·겹침·예상 밖의 리듬을 의도적으로 더하는 방향이다. 이것이 2026년에 보편적으로 더 효과적이라는 실증 주장은 하지 않는다.

**이 프리셋의 범위는 "그리드 해체" 한 가지 문법이다.** 예전에는 해체주의·브루탈리즘·그런지·맥시멀을 한 덩어리로 다뤘지만, 넷은 정체성 핵심이 다르다. 사용자가 아래 이름을 말하면 이 프리셋의 제약을 그대로 들이대지 말고 [../style-atlas.md](../style-atlas.md)의 해당 카드를 연다.

| 사용자가 말한 것 | 정체성 핵심 | 여는 곳 |
|---|---|---|
| 해체·실험적 레이아웃 | 격자를 정의하고 깬다 | 이 프리셋 |
| 브루탈리즘 | 기본값·구조의 노출, 장식 거부 | style-atlas 브루탈리즘 |
| 네오브루탈리즘 | 두꺼운 외곽선, 블러 0 오프셋 그림자, 고채도 면색 다수 | style-atlas 네오브루탈리즘 |
| 그런지·진(zine) | 복사기·콜라주 질감, 손 조판 | style-atlas 레트로 프린트 |
| 맥시멀·키치·멤피스 | 질서 있는 과잉, 반복 모티프 | style-atlas 키치/맥시멀·멤피스 |

이 프리셋을 지배로 두고 위 카드 하나를 보조 축으로 섞는 것은 [../remix.md](../remix.md)의 절차를 따른다.

## 언제 고르나

- 에이전시·스튜디오 자사 사이트, 아트/문화 프로젝트, 캠페인, 음악·패션
- 클라이언트가 "안전한 것 말고"를 명시적으로 요구했을 때
- **기본적으로 비채택**: 전환이 목적인 커머스 구매 경로, B2B SaaS 구매 경로, 접근성 요구가 엄격한 공공. 격자 해체는 읽기 비용을 높인다. 이런 브리프에서도 캠페인 장면 하나에만 쓰는 것은 표면 다이얼(`../trustworthy-showcases.md` §3)로 검토할 수 있다

## 결정

### 타이포그래피
- **모노스페이스 또는 개성 강한 그로테스크**를 주역 후보로 둔다. 한글 모노는 라틴 모노로 조판하지 않는다(`README.md` 모노 절)
- 크기 대비를 극단적으로 — 비율 1.618 이상, 또는 스케일을 아예 무시하고 두세 개 크기만 극단적으로 배치
- 대문자·자간 확대·세로쓰기·회전 같은 조판 장치는 **하나의 중심 개념에 복무할 때** 쓴다. 장치 개수가 아니라 아래 "과잉과 무질서를 가르는 기준"으로 판정한다
- 전체 대문자 헤드라인은 AI 생성 화면에서 자주 반복되는 관찰 후보다(`../antipatterns.md` §2). 쓰려면 이유가 있어야 하고, 긴 문장은 대문자로 읽기 속도가 떨어지므로 짧게 둔다. 한글 화면의 영문 대문자 장식 라벨은 언어 판정과 함께 본다

| 슬롯 | 무료(라틴) | 유료(라틴) | 한글 후보 풀 |
|---|---|---|---|
| 디스플레이 | Karrik, Basteleur, Terminal Grotesque (Velvetyne) | Right Grotesk | Gasoek One · Black Han Sans · Do Hyeon · 제주명조 · Orbit · Bagel Fat One · 여기어때 잘난체 |
| 본문 | Work Sans, Archivo | Neue Montreal | Gothic A1 · Wanted Sans · SUIT · Noto Sans KR |

- 선택 기준: 디스플레이는 브리프의 **소리**로 고른다 — 둔탁하고 무거우면 Gasoek One·Black Han Sans, 간판·거리면 Do Hyeon, 레트로 퓨처면 Orbit, 놀이·팝이면 Bagel Fat One, 문학·전통의 비틀기면 제주명조. 본문은 디스플레이와 폭·맺음이 충돌해 긴장을 만들되 읽히는 쪽을 고른다.
- 서체 성격과 라이선스는 [README.md](README.md)의 한글 서체 후보 풀을 따른다.

### 색
- 원색 또는 극단적 대비. 중간 톤을 피하는 것이 출발점이다
- **배경 명도 범위**: 제한 없음. 원색 면(OKLCH C 0.15 이상)을 배경 전체로 쓰는 것을 먼저 검토한다 — 흰 배경이나 웜 오프화이트를 기본값이라고 가정하지 않는다
- **강조색 계열**: 두 색의 강한 대비에서 시작한다. 색을 더 늘리는 것은 실패가 아니다 — 늘릴 때는 각 색의 역할(면/글자/행동)을 나누고, 아래 기준을 통과하는지 본다. 역할 없이 늘어난 무지개는 혼돈이다
- **radius 범위**: 0이나 완전 원형(pill) 같은 극단을 우선 검토한다. 2~4px 중간값은 이 프리셋의 의도를 흐리기 쉽다

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

### 재질 (`svg-filters.md`)
- 거친 질감이 어울린다: **강한 그레인, 리소그래프 인쇄, 잉크 번짐(`feTurbulence` + `feDisplacementMap`)**
- 크로마틱 애버레이션을 호버에 얹기
- 매끄러운 유리·글로우는 기본적으로 비채택이다. Y2K·사이버펑크 카드를 보조 축으로 섞기로 했다면 [../remix.md](../remix.md)의 축 소유권 표에 재질 축 소유자를 적고 채택한다

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

## 과잉과 무질서를 가르는 기준

장치 개수나 색 개수로 판정하지 않는다. 다음 세 질문에 모두 "예"면 의도된 과잉이다.

1. **읽기 경로가 하나로 고정되는가** — 회색조·390px에서 첫 시선 → 메시지 → 행동 순서를 한 문장으로 설명할 수 있다.
2. **반복 모티프로 통일되는가** — 장치들이 같은 형태·각도·색 관계를 되풀이해 한 시스템으로 묶인다.
3. **효과 off에서 메시지가 남는가** — 질감·모션·겹침을 끈 정지 화면에서도 히어로 메시지와 주 행동이 읽힌다.

하나라도 "아니오"면 장치를 줄이거나 한 장면으로 몰아넣는다.

## 흔한 실패

1. **그리드를 정의하지 않고 시작** → 깬 게 아니라 못 맞춘 것으로 보인다
2. **읽을 수 없게 만들고 "의도"라고 함** → 해체도 읽혀야 한다. 히어로 메시지는 반드시 읽혀야 한다
3. **중심 개념 없이 장치를 동원** → 대문자 + 자간확대 + 겹침 + 회전 + 그레인이 서로 다른 이야기를 하면 소음이다. 위 세 질문으로 판정한다
4. **접근성 포기** → 포커스 링과 대비는 이 프리셋에서도 지킨다
5. **과업이 비교·구매·입력인 화면 전체에 적용** → 그 화면은 다른 프리셋이 지배하고, 해체는 진입 장면 하나로 좁힌다

## 리스크 후보

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