Softonic

노이즈 텍스처 생성기

단계 1 / 2
다음

노이즈를 살짝 얹으면 밴딩이 가려지고 단색 면이 부드러워지며 UI 그러데이션이 덜 밋밋해집니다. 이 생성기는 SVG feTurbulence 필터로 이음매 없이 반복되는 정사각형 노이즈 텍스처를 만듭니다. 배경색, 노이즈 불투명도, 그레인 주파수, 노이즈 유형을 조절할 수 있고, 결과는 배경색과 인라인 SVG 데이터 URI로 이루어진 완성형 CSS라 스타일시트에 바로 붙여 넣으면 됩니다.

노이즈 텍스처를 만드는 방법

  1. 1

    배경색을 고르세요

    그레인은 이 색 위에 얹히므로 실제로 사용할 표면 색에서 시작하세요.

  2. 2

    불투명도를 설정하세요

    거의 보이지 않는 수준(2~5%)부터 두꺼운 필름 그레인(25% 이상)까지 조절합니다. UI에서는 은은한 쪽이 낫습니다.

  3. 3

    주파수를 조정하세요

    기본 주파수가 높을수록 곱고 촘촘한 그레인이, 낮을수록 크고 부드러운 덩어리가 생깁니다.

  4. 4

    노이즈 유형을 선택하세요

    프랙탈 노이즈는 부드럽고 자연스럽고, 터뷸런스는 대비가 강하며 구름 같은 느낌을 줍니다.

  5. 5

    CSS를 복사하세요

    출력은 배경색과 인라인 SVG 데이터 URI로, 스타일시트에 그대로 붙여 넣을 수 있습니다.

feTurbulence를 활용한 SVG 노이즈

노이즈를 가장 가볍게 넣는 방법은 SVG와 터뷸런스 필터의 조합입니다.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

background-image: url("data:image/svg+xml,...") 형태로 인라인 삽입하면 수백 바이트짜리 마크업만으로 어떤 표면에서도 타일링되며, 추가 HTTP 요청도 발생하지 않습니다.

용도별 권장 설정

용도 불투명도 기본 주파수 노이즈 유형
다크 모드 UI 패널 3~5% 0.8~1.0 프랙탈 노이즈
히어로 그러데이션 위 오버레이 5~10% 0.7~0.9 프랙탈 노이즈
종이 질감 카드 8~15% 0.6~0.8 프랙탈 노이즈
필름 그레인 사진 느낌 15~25% 0.9~1.2 프랙탈 노이즈
레트로 포스터 그레인 25~40% 0.4~0.6 터뷸런스

성능 참고 사항

  • SVG 터뷸런스는 대부분의 브라우저에서 GPU 없이 동작합니다. CSS 배경에서 잘 작동하고 리페인트 비용도 낮습니다.
  • 타일 하나를 재사용하세요. 이 도구는 stitchTiles="stitch"가 적용된 200 x 200 타일을 출력하므로 넓은 화면에서도 이음매 없이 반복됩니다.
  • 노이즈를 애니메이션하지 마세요. feTurbulence는 baseFrequency를 바꾸지 않으면 애니메이션이 매끄럽지 않고, 오래 재생하면 성능이 급격히 떨어집니다.
  • 그러데이션 위에 노이즈를 얹으세요. CSS 그러데이션 위에 불투명도 10%로 그레인을 얹으면 그러데이션만 쓸 때보다 훨씬 풍부한 표면이 됩니다.

자주 묻는 질문

넓은 단색 면이나 그러데이션이 지나치게 매끈해 보일 때 쓰면 좋습니다. 히어로 섹션, 모달 배경, 어두운 UI 패널은 3~10% 노이즈만으로 깊이가 생깁니다. 다만 가독성을 해칠 수 있으니 본문 텍스트 영역에는 쓰지 마세요.

SVG의 feTurbulence 필터에서 type="turbulence"는 펄린 노이즈의 절댓값을 만들어 대비가 강하고 구름 같은 결과를 내고, type="fractalNoise"는 부호가 있는 값을 사용해 더 부드럽고 자연스러운 그레인을 만듭니다. UI라면 거의 언제나 프랙탈 노이즈가 정답입니다.

아닙니다. 이 도구는 CSS 안에 그대로 들어가는 수백 바이트짜리 인라인 SVG 데이터 URI를 출력하므로 이미지 파일도, 추가 요청도 없습니다. 게다가 리샘플링 없이 어떤 크기의 표면에도 맞춰집니다.

네. 채널당 8비트 디스플레이에서는 대비가 낮은 그러데이션에 밴딩이 눈에 띄곤 합니다. 2~3% 노이즈를 덮으면 색 전환에 디더링이 걸려 휴대폰과 모니터 모두에서 밴딩이 사라집니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이메일 검증기

이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.

이 도구는 다른 언어로도 제공됩니다