58 lines
3.3 KiB
Markdown
58 lines
3.3 KiB
Markdown
# 프리셋: 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 브리프에 적용** → 프리셋 선택 자체가 실패
|
|
|
|
## 리스크 후보
|
|
|
|
- 히어로 텍스트를 화면 밖으로 절반 흘려보내기
|
|
- 스크롤에 따라 그리드 자체가 재배치되기
|
|
- 배경을 원색 하나로 덮고 이미지를 흑백으로
|