배경 패턴 생성
Background Pattern Generator
줄무늬·점·격자·노이즈 등 이음매 없는 SVG 패턴을 색과 크기를 정해 만듭니다.
이음매 없는 배경 무늬를 그립니다. 점·격자·줄무늬·체크·십자·삼각형·물결 중에서 고르면 CSS 데이터 URI나 SVG 파일, 또는 기존 문서에 붙여넣을 `<pattern>` 조각으로 돌려줍니다. 회전은 `patternTransform`으로 걸기 때문에 타일 경계가 어긋나지 않고 이음매가 유지됩니다.
무늬
가장 조용한 무늬입니다. 점이 타일의 5분의 1을 넘으면 무늬가 아니라 질감으로 읽힙니다.
결과
URL 인코딩 URI로 450바이트, Base64로는 526바이트입니다.
Base64 대신 URL 인코딩입니다. 여기서는 14% 더 작고 스타일시트에서 읽히기도 합니다. 아무 SVG나 같은 방식으로 바꾸려면 SVG 데이터 URI 인코더를 쓰세요.
사용 방법
모양을 고릅니다
각각 무엇에 쓰는지 적혀 있습니다. 점이 가장 조용하고, 격자는 도표 뒤에서는 읽히지만 글자 뒤에서는 방해가 되며, 대각선 줄무늬는 모두가 아는 "작업 중" 무늬입니다.
타일 크기와 굵기를 정합니다
굵기는 픽셀 값이 아니라 타일에 대한 비율이라, 타일 크기를 바꿔도 무늬의 성격이 유지됩니다. 5분의 1을 넘어가면 무늬가 아니라 질감으로 읽히기 시작합니다.
대비를 낮게 유지합니다
배경 무늬의 성패를 가르는 결정입니다. 눈에 띄는 무늬는 대개 이미 너무 센 것입니다. 대비되는 색 대신 배경에서 한두 단계 떨어진 색을 고르고, 배포 전에 실제 글자 뒤에 놓고 확인하세요.
CSS·파일·조각 중에서 가져갑니다
CSS는 `background-image`에 바로 쓸 수 있는 URL 인코딩 데이터 URI입니다. SVG 파일은 URI를 못 쓰는 곳을 위한 것이고, `<pattern>` 조각은 기존 `<svg>` 안에 넣고 `fill="url(#p)"`로 참조합니다.
자주 묻는 질문
이음매 없이 반복되나요?
됩니다. 그리고 그 부분이 도형 계산이 실제로 일하는 지점입니다. 대각선 줄무늬는 감싼 복사본 세 개로 그려서 타일 경계를 넘어 대각선이 이어지고, 물결은 이음매에서 기울기를 맞춘 3차 곡선 두 개입니다. 회전을 `patternTransform`으로 거는 것도 같은 이유입니다. 타일 안의 도형을 돌리면 경계에 잘린 끝이 남습니다.
PNG로 내보낼 수 있나요?
여기서는 안 됩니다. 결과물은 세 가지 형태의 SVG인데, 해상도에 무관하고 용량도 훨씬 작습니다. 점 무늬는 데이터 URI로 수백 바이트인데 PNG 타일이면 수 킬로바이트입니다. 래스터가 꼭 필요하면 SVG를 내려받아 변환하세요.
배경 무늬가 성능에 나쁜가요?
드물지만 실제 사례가 있습니다. 아주 작은 타일을 아주 넓은 면적에 깔면 합성기가 엄청나게 여러 번 반복하고, 저사양 휴대폰에서는 스크롤에 드러납니다. 무늬를 깐 페이지가 무겁게 느껴지면 같은 밀도로 보이는 더 큰 타일을 시도해 보세요.
이미지 위에 질감으로 얹을 수 있나요?
됩니다. 투명 배경을 켜면 타일에 전경 도형만 남아서 뒤에 있는 것이 비칩니다. 사진 위에 두 번째 `background-image` 레이어로 쌓으면 됩니다.
이 도구로 이어지는 것
CSS 그라디언트 생성
CSS Gradient Builder
정지점을 끌어 선형·원형·원뿔 그라디언트를 만들고 sRGB 또는 OKLCH CSS를 내보냅니다.
OG 이미지 생성
Social Card Generator
제목·부제·브랜드 문구와 로고(선택)를 템플릿에 얹어 1200×630 공유 이미지를 만들고 함께 넣을 메타 태그를 써 줍니다.
색상 선택기
Colour Picker
OKLCH 좌표판에서, 화면 스포이드로, 또는 업로드한 이미지에서 색을 고르고 원하는 표기법으로 복사합니다.
색상 코드 변환
Colour Format Converter
HEX·RGB·HSL·HWB·LAB·LCH·OKLCH로 색을 변환하고 가장 가까운 색 이름을 알려 줍니다.
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
CSS 그라디언트 생성
CSS Gradient Builder
정지점을 끌어 선형·원형·원뿔 그라디언트를 만들고 sRGB 또는 OKLCH CSS를 내보냅니다.
OG 이미지 생성
Social Card Generator
제목·부제·브랜드 문구와 로고(선택)를 템플릿에 얹어 1200×630 공유 이미지를 만들고 함께 넣을 메타 태그를 써 줍니다.
SVG CSS 데이터 URI 변환
SVG to CSS Data URI
SVG를 CSS 배경용 데이터 URI로 인코딩하며 꼭 필요한 문자만 이스케이프해 크기를 줄입니다.
SVG 최적화
SVG Optimiser
편집기 잔여 데이터를 지우고 변환을 합치며 좌표 자릿수를 줄이고, 결과를 나란히 비교합니다.
색상 코드 변환
Colour Format Converter
HEX·RGB·HSL·HWB·LAB·LCH·OKLCH로 색을 변환하고 가장 가까운 색 이름을 알려 줍니다.
색상 선택기
Colour Picker
OKLCH 좌표판에서, 화면 스포이드로, 또는 업로드한 이미지에서 색을 고르고 원하는 표기법으로 복사합니다.