Softonic

SVG 점무늬 생성기

단계 1 / 3
다음

점 패턴은 현대 웹 배경에서 대표적인 기본 요소로 꼽힌다. 노션 페이지 뒤의 미묘한 점 격자, 히어로 섹션의 물방울 무늬, 카드 표면의 입자감 있는 질감 등을 생각해보라. 이 생성기는 인라인 <pattern> 정의를 사용하여 단일 SVG 파일을 생성하므로 파일 크기가 매우 작아(일반적으로 500바이트 미만) 모든 화면 크기에 완벽하게 맞게 배치된다. 사용자는 캔버스 크기, 점 간 간격, 반지름, 점 색상 및 배경을 자유롭게 설정할 수 있다.

점 패턴을 어떻게 만들 수 있을까

  1. 1

    캔버스를 설정하세요

    픽셀 단위로 표시되는 너비와 높이입니다. CSS 배경의 경우 이 값은 작게 유지할 수 있으며(예: 800×600), 타일링 처리가 가능합니다.

  2. 2

    간격을 선택하세요

    인접한 점들의 중심 사이의 거리입니다. 20~40px일 경우 깔끔하게 보이지만, 10px일 경우 노이즈가 발생합니다.

  3. 3

    점 반경을 설정하세요

    미묘한 질감을 위해 1~3px, 의도적인 점무늬를 위해 4~8px 사용합니다.

  4. 4

    색상을 선택하세요

    점 채우기(전경) 및 캔버스 배경을 사용합니다. 진정한 오버레이 패턴을 얻으려면 배경을 `transparent`로 설정하세요.

  5. 5

    SVG를 복사하세요

    HTML에 붙여넣거나 CSS에서 `background-image: url("data:image/svg+xml,...")`로 사용하세요.

패턴의 정의 방식

제너레이터는 <defs> 내부에 <pattern> 요소를 출력하며, 전체 캔버스 크기의 <rect> 영역을 fill="url(#dots)"로 채운다.

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

patternUnits="userSpaceOnUse"는 타일 크기를 픽셀 단위로 고정하므로, 모체 SVG를 스케일링하더라도 점들이 왜곡되지 않습니다.

패턴 튜닝 치트 시트

느낌 간격 반지름 대비
속삭임(약간만 보인다) 30–40 1–1.5 불투명도 5–10%
은은한 배경 25–30 2 불투명도 15–20%
정직한 점무늬 20 2~3 전색
의도적으로 추가된 점무늬 40–60 8–15 전색
반톤 효과 10 1 그라디언트 채우기

CSS 배경으로 사용하기

SVG를 데이터 URL로 인코딩한 후 이를 모든 요소에 적용하세요:

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

CSS를 사용해 SVG 파일을 타일링하는 방법은 PNG 파일을 전송하는 것보다 더 빠릅니다. 브라우저는 최종 표시 크기에 따라 SVG를 라스터화하므로 모든 DPR(1x, 2x, 3x 디스플레이)에서 선명하게 표시됩니다.

점들이 가독성에 영향을 미칠 때

본문 바로 뒤에 점 무늬를 사용하면 미세한 글자 위에 반짝이는 모아레 효과가 나타날 수 있습니다. 글자를 위쪽에 배치해야 하는 경우에는 다음 중 하나를 선택하십시오:

  • 간격을 40px 이상으로 늘려 점들이 줄 사이에 위치하도록 설정하세요.
  • 패턴 불투명도를 10% 미만으로 낮추세요, 또는
  • 텍스트를 패턴 위에 있는 단색 카드 안에 넣습니다.

자주 묻는 질문

배경 색상을 transparent로 설정하면, 표시되는 것은 점들뿐입니다. 원하는 색상이나 이미지 위에 SVG 파일을 배치하세요.

이 생성기는 정사각형 격자를 생성하지 않습니다. 육각형 배치를 사용하려면 너비의 √3배 높이가 되는 패턴 타일이 필요하며, 각 타일에는 반으로 오프셋된 두 개의 원이 포함되어야 합니다. SVG 경로 생성기나 전용 육각형 생성기를 사용하는 것이 좋습니다.

SVG 자체는 어떤 크기에서도 선명하게 표시되지만, 패턴 타일보다 낮은 해상도로 래스터화하면 알리아싱이 발생합니다. 출력 시에는 예정된 표시 크기의 2배 또는 3배 해상도로 설정하시기 바랍니다.

원 위의 fill="#hex"를 fill="url(#gradient-id)"로 대체하고, 동일한 <defs> 내에 <linearGradient> 정의를 추가하세요. 이렇게 하면 각 점이 해당 그라디언트로 표시되게 되며, 캔버스에 수천 개의 점이 존재할 경우 이는 상당한 처리 부하가 될 수 있습니다.

일반 편집기는 미리 보기를 렌더링하기 위해 캔버스, 간격, 반경, 색상을 서버로 전송합니다. 안내형 흐름에서는 이 설정도 페이지 URL에 표시됩니다. 민감한 정보는 입력하지 마세요. 이 도구는 재사용 가능한 패턴 프로젝트를 저장하지 않습니다.

관련 도구

Material Design 색상 선택기

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

십자수 도안 만들기

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

깃발 만들기

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

이미지 포맷 변환기

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

모눈종이 생성기

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

Pantone to HEX 변환기

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

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