노이즈 텍스처 만들기
그레인 질감부터 그레이니 그라디언트까지 브라우저 안에서 만들고, PNG나 CSS 코드로 바로 내보내요.
픽셀마다 값을 따로 무작위로 정해요. 거칠고 촘촘한 느낌의 클래식 그레인이에요.
CSS(SVG 노이즈)는 PNG와 비슷한 느낌일 뿐, 픽셀까지 똑같지는 않아요.
모든 작업이 지금 쓰고 있는 브라우저 안에서 끝나요. 업로드 자체가 없어서, 탭을 닫는 순간 아무것도 남지 않아요.
사용 방법
노이즈나 그라디언트 고르기
위쪽 탭에서 노이즈 텍스처와 그레이니 그라디언트를 오가며 써보세요. 두 탭 모두 같은 크기 설정과 노이즈 엔진을 함께 써요.
크기 정하기
프리셋 칩을 누르거나 가로·세로를 직접 입력하세요 (16~4096px). 캔버스는 항상 실제 픽셀 크기로 렌더링되고, 화면에서는 맞는 크기로 축소해서 보여줄 뿐이에요.
느낌 다듬기
파인·스무스 노이즈를 고르고 강도를 조절하세요. 그라디언트에서는 색상과 각도, 그레인 양까지 바꿀 수 있어요. 값을 바꿀 때마다 바로바로 다시 그려져요.
내보내기
다시 만들기를 눌러 다른 무작위 패턴을 얻고, 원본 해상도 그대로 PNG를 받거나 이미지 파일 없이도 비슷한 그레인을 내는 CSS 코드를 복사하세요.
자주 묻는 질문
PNG랑 CSS 코드 중 뭘 써야 하나요?
PNG는 화면에 보이는 그대로를 픽셀 단위로 내보낸 파일이라 이미지가 쓰이는 곳이면 어디서나 똑같이 보여요. CSS 코드는 SVG feTurbulence 필터로 비슷한 그레인을 흉내 내는 방식이라 이미지 용량이 전혀 들지 않아서 실제 사이트 배경에 쓰기 좋지만, PNG와 픽셀까지 같지는 않고 브라우저마다 feTurbulence 표현이 조금씩 달라요.
피그마나 포토샵에서 투명 그레인 오버레이는 어떻게 쓰나요?
투명 모드를 켜고 PNG를 받은 다음, 디자인 위에 새 레이어로 올려보세요. 알파 채널에만 노이즈가 들어 있어서, 아래 레이어를 건드리지 않고도 그 레이어의 블렌드 모드(오버레이·곱하기·스크린)와 불투명도만 조절하면 돼요.
CSS 코드의 baseFrequency는 정확히 뭘 조절하나요?
feTurbulence가 노이즈 한 칸의 크기를 정하는 값이에요. 값이 클수록 같은 면적에 더 작고 촘촘한 무늬가 들어가요. 이 값은 선택한 노이즈 타입과 그레인 크기에서 추정한 값이라, 실제 노이즈 엔진과 SVG 방식이 서로 다른 알고리즘이라 정확한 공식이라기보다는 근사치예요.
시드를 쓰면 진짜 똑같은 텍스처가 다시 나오나요?
네. 모든 텍스처는 시드값으로 초기화한 난수로 만들어져서, 시드와 다른 설정이 그대로면 픽셀까지 똑같은 노이즈가 나와요. 다시 만들기를 누르면 시드가 무작위로 바뀌는 거고, 아직 원하는 시드값을 직접 입력하는 기능은 없어요.
캔버스가 크면 왜 더 느려지나요?
노이즈는 픽셀 하나하나를 지금 쓰는 기기에서 직접 계산해요. 그래서 4096×4096은 1024×1024보다 계산량이 16배나 많아요. 슬라이더를 드래그하는 동안에는 작은 미리보기로 렌더링하다가 손을 떼는 순간 원본 해상도로 다시 그려서 반응성을 지켰고, 실제로 다운로드하는 PNG는 미리보기와 상관없이 항상 원본 크기로 렌더링돼요.
파인 그레인과 스무스 노이즈는 속도가 같나요?
아니요. 파인 그레인은 픽셀마다 난수 하나만 뽑으면 되니까 더 빨라요. 스무스 노이즈는 채널마다 값 노이즈를 3단계 겹쳐서 계산하는데, 특히 색상 모드에서는 이 계산을 R·G·B 세 번 따로 해야 해서 조금 더 오래 걸려요.