Softonic

SVG 그리드 패턴 배경

단계 1 / 3
다음

그리드 패턴 배경은 이미지 파일을 추가하지 않고도 랜딩 페이지, 히어로 섹션, 카드에 차분한 구조를 줍니다. 아래에서 크기와 색을 설정하면, 화면 전체에 하나의 타일을 반복하는 작은 SVG를 복사할 수 있습니다.

그리드 패턴 배경 만들기

  1. 1

    영역 크기 맞추기

    덮고 싶은 영역의 너비와 높이를 입력하세요. 예를 들어 1200 x 800입니다.

  2. 2

    차분한 셀 크기 고르기

    그리드 크기를 32 또는 40으로 설정하면 선이 콘텐츠를 경쟁적으로 가리지 않고 감싸 줍니다.

  3. 3

    선을 부드럽게 만들기

    배경보다 살짝만 진한 선 색을 고르고, 선 두께는 1로 설정하세요.

  4. 4

    SVG 복사하기

    마지막 단계에서 복사 버튼을 누르고, 배경이 필요한 곳에 코드를 붙여 넣으세요.

패턴 배경의 구성

생성되는 파일에는 패턴으로 한 번 정의된 작은 타일 하나와, 그 패턴으로 캔버스 전체를 채우는 사각형이 들어 있습니다. 브라우저가 타일을 반복하기 때문에, 그리드가 20개 셀이든 2,000개 셀이든 파일은 수백 바이트 정도입니다. 첫 번째 사각형이 배경 색을 칠하고, 두 번째 사각형이 그 위에 선을 그립니다.

각 타일은 위쪽 가장자리와 왼쪽 가장자리만 그리고, 인접한 타일이 나머지를 채우므로 같은 선이 두 번 그려지지 않습니다. 그 결과 첫 번째 열과 행의 선은 캔버스 가장자리에 걸쳐 있어서, 선 두께의 절반이 캔버스 밖으로 잘립니다. 따라서 1px 선은 위와 왼쪽에 반 픽셀짜리 얇은 테두리로 보입니다. 캔버스 너비가 셀 크기의 정확한 배수라면, 오른쪽과 아래쪽 가장자리에는 닫히는 선이 없이 끝납니다.

배경으로 쓸 수 있는 값 고르기

배경은 그 위에 놓이는 텍스트를 받쳐 주어야 합니다. 아래 값들은 안전한 출발점입니다.

느낌 셀 크기 선 두께 배경 위의 선 색
거의 보이지 않게 40 1 #ffffff 위의 #eeeeee
부드러운 구조 32 1 #f8fafc 위의 #e2e8f0
뚜렷한 틀 64 1.5 #ffffff 위의 #cbd5e1

선과 배경 사이의 대비는 낮게 유지하세요. 본문 텍스트를 그 위에 놓을 경우, 텍스트와 거의 같은 진하기의 선은 읽기를 피곤하게 만듭니다.

예시

너비 1200px, 높이 800px의 히어로 섹션에서 40px 셀을 쓰면 30개 열과 20개 행, 총 600개 셀이 됩니다. 1200과 800이 모두 40으로 나누어떨어지므로, 그리드는 두 가장자리에서 깔끔하게 끝납니다. 50px 셀을 쓰면 24 x 16 셀이 되며, 이 역시 깔끔합니다. 45px 셀은 1200을 45로 나눈 값이 26.67이므로 오른쪽과 아래에 잘린 셀이 생깁니다.

결과물 사용하기

SVG를 마크업에 직접 붙여 넣거나, 파일로 저장해 이미지로 참조하거나, 장식용 레이어로 콘텐츠 뒤에 배치하세요. 배경 색은 SVG의 일부라는 점을 기억하세요. 다른 색 위에 그리드를 올리고 싶다면, 복사한 코드의 첫 번째 사각형을 수정하세요.

레이아웃에 배경 맞추기

콘텐츠 열의 너비가 960px이라면, 32px 또는 40px 셀이 그리드와 열의 가장자리를 맞춰 줍니다. 960은 둘 다로 나누어떨어지기 때문입니다. 그리드를 레이아웃에 맞추면 선이 임의로 그려진 것이 아니라 의도적으로 설계된 것처럼 보입니다.

자주 묻는 질문

너비와 높이는 50에서 3,000px, 셀 크기는 5에서 500px까지 받아들입니다. 이 범위를 벗어난 값은 가장 가까운 한계값으로 조정됩니다.

각 타일은 위쪽과 왼쪽 가장자리를 그리므로, 첫 행과 첫 열이 캔버스 경계에 정확히 놓여 선 두께의 절반이 밖으로 나갑니다. 안쪽의 선은 전체 두께로 보입니다.

자동으로는 반복되지 않습니다. SVG는 너비와 높이가 고정되어 있습니다. 더 넓은 영역을 덮으려면 더 큰 크기로 생성하거나, 자체 스타일시트에서 SVG를 반복되는 배경 이미지로 사용하세요.

이 생성기는 한 가지 선 색과 한 가지 두께로 그립니다. 주 그리드와 보조 그리드가 필요하다면 SVG를 두 개 만들어 별도의 배경으로 겹치세요.

관련 도구

모눈종이 생성기

인쇄용 모눈종이를 온라인으로 만드세요: 사각 또는 점 격자를 선택하고 간격을 mm로 설정하며 A4 또는 Letter와 원하는 선 색을 지정한 뒤, 인쇄하거나 선명한 SVG로 내려받으세요.

십자수 도안 만들기

JPEG, PNG, WebP를 10–150칸, 2–40가지 전용 색상, 기호, 정확한 스티치 수와 원단 크기가 포함된 인쇄용 십자수 도안으로 변환하세요.

LEGO 모자이크 제작기

사진으로 16, 32, 48, 64칸 정사각형 모자이크 도안을 만드세요. 비슷한 화면 색상, 1×1 플레이트의 색상별 수량, 번호가 적힌 조립 안내서를 확인할 수 있습니다.

오선지 만들기

인쇄용 오선지를 만드세요: 빈 오선, 높은음자리표나 낮은음자리표, 피아노용 큰보표, 기타 타브 악보. 개수, 줄 간격, A4 또는 레터, 여백을 정하고 PDF나 SVG로 받으세요.

Pantone to HEX 변환기

화면과 인쇄 매칭을 위해 Pantone PMS 색상을 가장 가까운 HEX, RGB, CMYK 값으로 변환하고 견본 미리보기를 제공합니다.

텍스트를 손글씨로

글을 입력하거나 붙여넣고 손글씨 서체 다섯 가지 중 하나, 무지·줄·모눈 종이와 잉크 색을 고른 뒤 PNG로 내려받으세요. 모두 브라우저에서 그려집니다. 다만 서체에 한글은 없습니다.

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

사용 가이드와 활용 사례