---
type: knowledge
domain: design
status: active
last-reviewed: 2026-07-06
---

# 그레인 블러 (Grain Blur)

> 한 줄 정의
> 크게 블러된 색 글로우 위에 필름 그레인 노이즈를 얹어 아날로그 분위기를 만드는 텍스처 중심 스타일. 분위기가 콘텐츠보다 먼저 도착한다.

![[preview-grain-blur.jpg]]

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 음악·영상·크리에이티브 툴 랜딩 | 데이터 밀도 높은 대시보드 |
| 감성 브랜딩 히어로, 온보딩·로그인 | 장문 독서형 화면 (그레인이 본문 가독성 해침) |
| 다크 배경 제품의 무드 연출 | 저사양 타깃 (대형 blur 비용) |

## 스타일 DNA

### 팔레트 — 어두운 잉크 + 채도 있는 글로우 2~3색

| 토큰 | 값 | 역할 |
|------|-----|------|
| ink | `#14101C` | 바탕 (순수 검정 금지 — 톤 있는 어둠) |
| glow-warm | `#FF6B5E` | 코랄 글로우 |
| glow-cool | `#7C5CFF` | 바이올렛 글로우 |
| glow-sub | `#FFB454` | 앰버 소형 글로우 |
| text | `#F6F0FF` | 본문/디스플레이 |

- 글로우는 **채도를 충분히** — 낮으면 흙탕물(murky)이 된다. 블러가 채도를 깎으므로 원색은 한 단계 더 진하게.

### 타이포

- 디스플레이: 세리프 이탤릭 (Fraunces, Playfair Display) — 안개 위에 붓글씨 느낌.
- 캡션/eyebrow: 모노 + letter-spacing `.3~.4em`.
- 한글: 마루부리·나눔명조 디스플레이 + Pretendard 본문. 명조 이탤릭이 없으므로 기울이지 말고 굵기 대비로.

### 질감·모션

- 그레인: SVG `feTurbulence fractalNoise`, `baseFrequency 0.7~0.9`, `mix-blend-mode: overlay`, opacity `0.3~0.45`.
- 블롭 드리프트는 20~40s 초저속 — 빨라지면 라바램프가 된다. `prefers-reduced-motion`이면 정지.

## 핵심 레시피 (CSS)

```css
.hero { position: relative; background: #14101C; overflow: hidden; }

/* 1. 글로우 블롭 — 3개 이하 */
.blob { position: absolute; border-radius: 50%; filter: blur(90px); }
.blob--warm { width: 420px; height: 420px; background: radial-gradient(circle, #FF6B5E, transparent 70%); }
.blob--cool { width: 480px; height: 480px; background: radial-gradient(circle, #7C5CFF, transparent 70%); }

/* 2. 필름 그레인 — 300px SVG 타일, blend로 위아래 톤 모두 물듦 */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .45; mix-blend-mode: overlay;
}
```

> [!TIP] 성능
> `blur(90px)`는 큰 요소에 비싸다 — 블롭은 3개 이하, 고정 크기로. 그레인은 큰 이미지 대신 **작은 SVG 타일 반복**이 정답. 애니메이션은 `transform`만 건드린다.

## 흔한 실수

- 그레인 opacity 0.5 초과 → 텍스트 대비 붕괴 (본문 4.5:1은 여기서도 하한선).
- 글로우 채도 부족 → 회색 안개. 원인은 대부분 시작색이 파스텔.
- 밝은 바탕에 시도 → 그레인 overlay가 안 보임. 이 스타일은 어두운 바탕 전제.

## 실물 레퍼런스

**정석 — 실물에서 확인**
- [basement.studio](https://basement.studio) — 그레인+글로우를 브랜드 시그니처로 쓰는 디지털 스튜디오. 다크 바탕 위 노이즈가 "분위기 먼저"를 어떻게 만드는지 그대로 보여준다.
- [Webflow — grain 태그 갤러리](https://webflow.com/made-in-webflow/grain) — 그레인 텍스처 실사이트 모음. 클론 가능한 프로젝트라 레이어 구조까지 뜯어볼 수 있다.
- [Dribbble — noise gradient 태그](https://dribbble.com/tags/noise_gradient) — 글로우 색 조합 아이디어 수집용.

**기법 — 만드는 법**
- [CSS-Tricks — Grainy Gradients](https://css-tricks.com/grainy-gradients/) — 이 기법의 원전. feTurbulence + 대비 부스트 원리 해설.
- [Frontend Masters — Grainy Gradients](https://frontendmasters.com/blog/grainy-gradients/) — 원전의 최신 후속편. 모던 CSS 문법으로 갱신.
- [freeCodeCamp — SVG 필터 그레인 배경](https://www.freecodecamp.org/news/grainy-css-backgrounds-using-svg-filters/) — 단계별 따라하기용.
- [그레인 그라디언트 플레이그라운드](https://grainy-gradients.vercel.app) — baseFrequency·octaves 파라미터를 눈으로 실험.

**폰트**
- [Fraunces](https://fonts.google.com/specimen/Fraunces) — 타이포 절의 디스플레이 세리프. 옵티컬 사이즈 축까지 있는 가변 폰트.

- 로컬 데모(코드=이 문서 레시피): `스타일/_previews/스타일-데모.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · [[UI 시각 체계]] · 인접 스타일: [[리퀴드 글라스]] (같은 분위기 축, 유리 질감)