3.3 KiB
3.3 KiB
프리셋: 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대응이 특히 중요하다. 이 프리셋의 모션은 강해서 어지러움을 유발하기 쉽다
흔한 실패
- 그리드를 정의하지 않고 시작 → 깬 게 아니라 못 맞춘 것으로 보인다
- 읽을 수 없게 만들고 "의도"라고 함 → 브루탈리즘도 읽혀야 한다. 히어로 메시지는 반드시 읽혀야 한다
- 장치를 전부 동원 → 대문자 + 자간확대 + 겹침 + 회전 + 그레인 = 소음
- 접근성 포기 → 포커스 링과 대비는 이 프리셋에서도 지킨다
- B2B 브리프에 적용 → 프리셋 선택 자체가 실패
리스크 후보
- 히어로 텍스트를 화면 밖으로 절반 흘려보내기
- 스크롤에 따라 그리드 자체가 재배치되기
- 배경을 원색 하나로 덮고 이미지를 흑백으로