필름 그레인 오버레이 (SVG 노이즈)

제작 과정

한 줄 요약

이미지 한 장 없이 SVG feTurbulence 노이즈를 컬러 표면 위에 background-image로 얹고 mix-blend로 합성하는 필름 그레인 오버레이입니다.

이럴 때 필요해요

밋밋한 그라데이션/단색에 질감과 깊이를 더하고 싶을 때 히어로 배경, 카드, 다크 테마 표면.

어떻게 동작하나

feTurbulence(fractalNoise)를 data-URI로 만들어 오버레이 background로 쓴다.
컬러 표면과 mix-blend-mode(overlay/soft-light)로 합성한다.
opacity로 강도, baseFrequency로 입자 크기를 조절한다.
애니메이션 그레인은 background-position을 steps로 지터링한다.

놓치기 쉬운 것

data-URI는 # 인코딩만 신경 쓰면 된다.
블렌드 모드에 따라 결이 크게 달라진다.
prefers-reduced-motion이면 애니메이션 그레인을 끈다.

이런 곳에 써요

랜딩 히어로/카드 배경
다크 테마 질감

import type { Metadata } from "next"; import { NoiseGrainDemo } from "./-components/NoiseGrainDemo"; export const metadata: Metadata = { title: "노이즈 · 필름 그레인 오버레이 (데모)", description: "SVG feTurbulence(fractalNoise)로 만든 그레인 텍스처를 컬러 그라데이션 위에 mix-blend로 얹는 기법. 강도·스케일·블렌드 모드·애니메이션 조절 + CSS 복사.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-white"> <NoiseGrainDemo /> </main> ); }