what it does
Pattern Generator가 하는 일.
Pattern Generator는 인라인 SVG로 타일형 기하학 배경을 만듭니다. 점, 줄무늬, 격자, 셰브론 등 패턴을 선택한 뒤, 전경색과 배경색, 타일 스케일, 불투명도를 설정합니다.
컨트롤을 조정하면 미리보기가 실시간으로 업데이트됩니다. 원하는 모양이 되면 워크플로에 맞는 형식으로 내보냅니다: CSS background 스니펫, 독립 SVG 타일, 또는 1600×900 PNG.
workflow
4단계로 선택, 맞춤 설정, 내보내기.
- Pattern Generator를 열고 피커에서 패턴 타일을 클릭합니다.
- 전경색과 배경색, 스케일, 불투명도를 조정해 미리보기가 브랜드나 레이아웃에 맞을 때까지 조정합니다.
- Copy CSS를 클릭해 바로 붙여넣을 수 있는 background 속성을 얻거나, Download SVG / Download PNG로 에셋 파일을 다운로드합니다.
- 출력을 페이지 스타일시트, Figma 파일 또는 슬라이드 덱에 넣으세요 — 계정도 업로드도 필요 없습니다.
css
CSS를 페이지에 붙여넣기.
복사한 CSS는 인라인 SVG data URI가 포함된 단일 background 선언입니다. 패턴을 표시할 요소의 클래스 규칙이나 인라인 스타일에 붙여넣습니다:
예: 복사한 줄을 .hero { … } 또는 스타일시트의 유틸리티 클래스에 추가합니다. SVG가 매끄럽게 타일되므로 추가 마크업 없이 전체 너비 섹션, 카드, 히어로 블록에 사용할 수 있습니다.
패턴이 data URI로 임베드되므로 별도로 호스팅할 이미지 파일이 없습니다. 배포가 간단합니다 — CSS를 붙여넣으면 끝입니다.
figma
SVG 타일을 Figma 채우기로 사용.
SVG 타일을 다운로드해 Figma 파일로 드래그하거나 Place image로 가져옵니다. 프레임이나 도형을 선택한 뒤 채우기 유형을 Image로 설정하고 가져온 SVG를 선택합니다.
채우기 모드를 Tile로 설정하면 기하학 반복이 도구 미리보기와 일치합니다. 기본 타일 크기보다 촘촘하거나 넓은 반복이 필요하면 Figma에서 스케일을 조정합니다.
목업과 프로덕션 CSS에서 같은 패턴을 쓰고 싶을 때 유용합니다 — Pattern Generator에서 한 번 내보낸 뒤, Figma에서는 SVG, 라이브 페이지에서는 CSS를 사용하세요.
png
슬라이드와 OG 이미지용 PNG.
Download PNG는 현재 색상과 스케일 설정으로 1600×900 래스터를 내보냅니다. Keynote, Google Slides, PowerPoint 슬라이드 배경이나 라이브 CSS 대신 플랫 에셋이 필요한 소셜 미리보기 이미지로 사용할 수 있습니다.
PNG는 SVG 채우기나 data URI 배경을 지원하지 않는 도구에도 유용합니다 — 이메일 템플릿, PDF 내보내기, 썸네일 생성기는 종종 단일 이미지 파일이 필요합니다.
privacy
브라우저 로컬 전용.
Pattern Generator는 완전히 브라우저에서 실행됩니다. 색상, 스케일, 내보내기는 사용자 기기에서 계산됩니다 — Tiny Design Shop이나 서드파티 서버로 업로드되지 않습니다. 탭을 닫으면 세션이 사라집니다.