반복 배경 패턴, 용량이 작은 이유
사이트 배경에 촘촘한 도트나 격자 무늬를 넣고 싶어서 이미지 편집 프로그램으로 화면 크기만 한 PNG를 만들면, 파일 용량이 순식간에 수백 KB를 넘어가고 화면 크기가 달라질 때마다 무늬가 늘어나거나 잘립니다. 실제로 웹에서 쓰이는 반복 무늬는 화면 전체를 그린 큰 그림이 아니라, 작은 타일 하나를 CSS가 자동으로 반복해서 채운 결과입니다. 원리를 알면 점 하나, 격자선 하나 크기의 파일만으로 어떤 크기의 화면도 채울 수 있습니다.
요약 ① 웹 배경의 도트·격자 무늬는 화면 전체가 아니라 가로세로 수십 픽셀짜리 작은 타일 하나로 이루어져 있습니다 ② 이 타일을 background-repeat로 반복시켜 어떤 크기의 영역이든 이어붙여 채웁니다 ③ 타일 하나의 용량은 수백 바이트 수준이라 화면이 커져도 파일 용량은 그대로입니다
배경 무늬를 이미지로 만들면 왜 용량이 커질까
포토샵 같은 도구에서 도트 배경을 만들 때 화면 해상도(예: 1920×1080px)에 맞춰 캔버스를 잡고 점을 촘촘히 찍으면, 점 개수만큼 픽셀 정보가 그대로 파일에 저장됩니다. 결과물은 PNG 한 장이라도 수백 KB에서 수 MB까지 늘어납니다.
화면 크기가 다른 기기에서 열어보면 문제가 더 커집니다. 모바일처럼 화면이 좁으면 무늬가 잘려 보이고, 큰 모니터에서는 이미지를 늘려야 해서 점이 흐릿하게 번집니다. 화면 크기별로 여러 장을 따로 준비하지 않는 한 어느 기기에서든 깔끔하게 보이지 않습니다.
근본 이유는 '화면 전체 = 이미지 한 장'이라는 접근 자체에 있습니다. 도트나 격자처럼 같은 모양이 규칙적으로 반복되는 무늬는 화면 전체를 그릴 필요가 없고, 반복되는 최소 단위 하나만 있으면 충분합니다.
타일 하나만 반복시키기 — 용량 줄이는 방법
작은 타일 하나로 배경을 채우는 원리는 CSS의 background-repeat 기본 동작입니다. background-image에 지정한 이미지를 background-size로 정한 크기로 표시한 뒤, 가로세로로 자동 이어붙여 요소 전체를 채웁니다. background-repeat 값을 따로 지정하지 않아도 기본값이 repeat라 별도 설정이 필요 없습니다.
타일 자체는 SVG로 직접 그릴 수 있습니다. 예를 들어 24×24px 정사각형 안에 반지름 3px 원 하나를 그리고, 이를 data:image/svg+xml 데이터 URI로 인코딩해 background-image에 넣으면 원 하나가 24px 간격으로 반복되며 도트 배경이 됩니다. 격자는 가로·세로 선 두 개, 줄무늬는 사각형 하나, 대각선은 사선 path, 체커는 사각형 두 개로 같은 원리가 적용됩니다.
이렇게 만든 파일은 실제 이미지가 아니라 텍스트(SVG 마크업)라서 화면 크기와 무관하게 용량이 수백 바이트 수준으로 고정됩니다. 벡터 도형이라 확대해도 픽셀이 깨지지 않는 것도 장점입니다.
저희 도구로 확인하기. 타일의 도형과 간격, 색상을 직접 SVG 코드로 짜는 대신, 도트·격자·줄무늬·대각선·체커 다섯 가지 패턴을 슬라이더로 조절하면서 바로 붙여넣을 CSS와 SVG 코드를 얻을 수 있습니다.
무료 · 가입 불필요 · CSS·SVG 코드 바로 복사
자주 막히는 지점
| 상황 | 원인 |
|---|---|
| 타일 이음매가 어긋나 보임 | background-size로 지정한 타일 크기와 도형 좌표가 안 맞을 때 생깁니다 |
| 점이나 선이 옆 타일과 겹침 | 도트 반지름이나 선 굵기가 타일 크기의 절반을 넘으면 옆 타일 영역까지 침범합니다 |
| 배경이 아예 안 보임 | data URI 안의 특수문자가 인코딩되지 않아 브라우저가 값을 못 읽는 경우입니다 |
| 반투명 무늬를 만들고 싶음 | HEX 색상 뒤에 두 자리를 더 붙이는 8자리 알파값으로 처리합니다 |
표에 정리된 문제 대부분은 타일 크기와 도형 크기의 관계, 그리고 URL 인코딩 두 가지로 귀결됩니다. 직접 계산하지 않고 슬라이더로 조절하면 이 두 가지를 신경 쓸 필요가 없습니다.
정리
도트·격자 같은 배경 무늬는 화면 전체를 그린 큰 이미지가 아니라, 가로세로 수십 픽셀짜리 작은 타일 하나를 background-repeat로 반복시킨 결과입니다. 타일을 SVG 같은 벡터로 만들면 확대해도 깨지지 않고, 파일 용량도 화면 크기와 무관하게 수백 바이트 수준으로 유지됩니다.
타일 크기와 도형 크기의 관계, 색상 인코딩까지 직접 맞추는 대신 슬라이더로 조절하면서 완성된 코드를 바로 복사하면 시간을 아낄 수 있습니다.
무료 · 가입 불필요 · CSS·SVG 코드 바로 복사
자주 묻는 질문
반복 타일로 만든 배경은 이미지 파일보다 화질이 떨어지나요?
아닙니다. 도트·선·사각형 같은 도형을 SVG 벡터로 그리기 때문에 화면을 아무리 확대해도 픽셀이 깨지지 않습니다. 오히려 픽셀 기반 이미지를 늘렸을 때 생기는 흐림 현상이 없습니다.
타일 크기를 바꾸면 무늬가 어떻게 달라지나요?
타일 크기는 곧 무늬가 반복되는 간격입니다. 타일을 크게 하면 점과 점, 선과 선 사이 간격이 넓어지고, 작게 하면 무늬가 촘촘해집니다.
배경 무늬 색을 반투명하게 쓰고 싶은데 방법이 있나요?
HEX 색상 코드 뒤에 투명도를 나타내는 두 자리를 추가하면 됩니다. 예를 들어 #6366f1은 불투명 색이고, #6366f180을 쓰면 같은 색이 반투명하게 표시됩니다.