Softonic

SVG 그리드 생성기

단계 1 / 3
다음

그리드 배경은 디자인 도구(Figma, Framer), 개발자 중심의 랜딩 페이지(Linear, Vercel), 그리고 블루프린트나 그래프 페이퍼 스타일을 목표로 하는 모든 인터페이스에서 기본적으로 사용되는 요소입니다. 또한 출시 가능한 배경 중 가장 경량화된 형태 중 하나로, 일반적으로 두 스트로크만 포함하는 반복적인 <pattern> 패턴이며 크기가 보통 300바이트 미만입니다. 이 생성기는 다양한 셀 크기, 스트로크 두께 및 색상으로 그리드를 자동으로 생성하므로, 섬세한 Figma 스타일의 배경이나 강조감 있는 블루프린트 효과에 맞게 정교하게 조정할 수 있습니다.

그리드를 구성하는 방법

  1. 1

    캔버스 크기 설정

    너비와 높이를 50~3,000px로 설정하세요. 셀 크기의 배수를 쓰면 가장자리의 부분 셀을 피할 수 있습니다.

  2. 2

    셀 크기를 선택하세요

    5~500px 중에서 선택하세요. 은은한 배경에는 20~40px, 그래프 용지에는 8~12px, 뚜렷한 와이어프레임에는 60~80px가 좋습니다.

  3. 3

    선의 두께와 색상을 선택하세요

    0.5~1px 크기의 선은 깨끗한 선으로 인식되며, 2px 이상에서는 드로잉된 것처럼 보이기 시작합니다.

  4. 4

    배경을 설정하세요

    SVG가 출력할 단색 배경을 선택하세요. 겹쳐 쓰려면 SVG를 복사한 뒤 자체 코드에서 배경 `<rect>`를 바꾸거나 제거하세요.

  5. 5

    SVG를 복사하세요

    마크업에 붙여넣거나, 타일링 가능한 배경 이미지로 쓰기 위해 CSS 데이터 URL에 인라인으로 삽입하세요.

패턴 요소

각 셀은 오른쪽 가장자리와 아래쪽 가장자리를 그리는 단일 <path> 요소입니다. 이 타일을 반복하면 각 셀에 네 개가 아닌 두 개의 선 구간만으로 전체 격자를 구성할 수 있습니다.

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#cccccc" stroke-width="1"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

마법은 M 40 0 L 0 0 0 40 경로에 있습니다. 이 경로는 (40, 0)에서 시작하여 (0, 0)까지, 다시 (0, 40)까지 이어집니다. 이로 인해 상단 선은 오른쪽 상단 모서리까지만 그려지고, 이후 왼쪽 측면을 따라 아래로 이어집니다. 타일링 시 중복된 선 없이 완전한 격자 구조가 생성됩니다.

패턴 사이즈 설정 가이드

사용 사례 셀 크기 스트로크 색상 느낌
피그마 스타일 캔버스 20–30px 1px #e5e7eb / #fafafa
그래프 종이 10–12px 0.5px #cbd5e1 / #ffffff
블루프린트 40–60px 1px #bfdbfe / #1e3a8a
와이어프레임 80px 1.5px #9ca3af / #ffffff
레트로 터미널 16px 1px #22c55e / #000000

주요 및 부차적 그리드

정밀한 격자와 간격이 N개의 셀마다 더 강력한 주 격자를 원하는 블루프린트 효과를 원한다면, 두 개의 SVG 배경을 중첩 사용하세요.

.grid {
  background:
    url("data:image/svg+xml,<svg>... major grid ...</svg>"),
    url("data:image/svg+xml,<svg>... minor grid ...</svg>");
}

브라우저는 두 가지 요소를 하나의 페인트로 통합하여 처리하므로 성능 저하가 없습니다.

접근성

그리드는 순전히 장식용입니다. 이를 가상 요소(pseudo-element, ::before 및 position: absolute; inset: 0; z-index: -1;)에 적용하면 스크린 리더와 콘텐츠 파서는 배경이 아닌 실제 콘텐츠만을 인식할 수 있습니다.

자주 묻는 질문

서브픽셀 너비로 그리는 SVG 스트로크는 안티앨리어싱 처리가 될 수 있습니다. 스트로크 너비를 정수 픽셀(1, 2)로 설정하고, 1px 크기의 스트로크의 경우 경로를 0.5px만큼 이동시켜 픽셀 격자와 정렬하세요.

이 생성기에서는 사용할 수 없습니다. 육각 그리드는 높이의 √3배만큼 넓은 타일과 반육각을 그리는 경로가 필요합니다. 전용 육각 그리드 도구를 사용하거나 Figma에서 직접 그리세요.

이 편집기는 단색 배경을 출력합니다. 겹쳐 쓰려면 SVG를 복사한 후 자체 코드에서 첫 번째 배경 <rect>를 fill="transparent"로 바꾸거나 제거하세요.

네. SVG 그리드는 크기가 200~500바이트로, 모든 DPR에 정확하게 스케일링되며 CSS 변수를 사용해 색상을 변경할 수 있습니다. 반면 PNG 그리드는 일반적으로 5~20KB이며 레티나 디스플레이에서는 픽셀화됩니다.

편집기는 SVG를 렌더링하기 위해 현재 치수와 색상을 당사 서버로 전송합니다. 세 단계 흐름에서는 이 설정이 페이지 URL에도 들어갑니다. 기밀 값은 입력하지 마세요. 원본 파일 업로드나 저장된 프로젝트는 없습니다.

관련 도구

Material Design 색상 선택기

Material Design 색상 팔레트를 둘러보세요. 어떤 음영(50부터 A700까지)이든 HEX, RGB, HSL로 한 번에 복사합니다.

십자수 도안 만들기

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

이미지 포맷 변환기

브라우저에서 바로 이미지를 JPG, PNG, WebP로 변환하세요. 손실 형식의 품질을 조절하고 PNG와 WebP의 투명도는 그대로 유지됩니다.

모눈종이 생성기

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

Pantone to HEX 변환기

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

깃발 만들기

여섯 가지 레이아웃, 색상, 텍스트, 기호로 간단한 맞춤 3:2 깃발을 브라우저에서 디자인하세요. SVG 또는 PNG를 내려받거나 브라우저 인쇄 대화상자를 열 수 있습니다.

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