SVG 패턴은 벡터 기반으로 어떤 크기에서도 선명하게 유지되며 파일 크기가 작습니다. PNG는 래스터 이미지로 특정 해상도에 최적화되지만 모든 환경에서 호환됩니다. 웹용이라면 SVG를, 범용적으로 사용할 때는 PNG를 추천합니다.
'CSS 복사' 버튼으로 인라인 SVG 데이터 URI가 포함된 background-image CSS 코드를 복사할 수 있습니다. 이 코드를 스타일시트에 붙여넣으면 별도의 이미지 파일 없이 패턴 배경을 적용할 수 있습니다.
'크기' 슬라이더로 패턴 단위의 전체 크기를 조절하고, '간격' 슬라이더로 패턴 단위 간의 여백을 설정합니다. '선 두께'는 선 기반 패턴(줄무늬, 그리드 등)에서 선의 굵기를 조절합니다.
이 도구로 생성한 패턴은 자유롭게 개인 및 상업 프로젝트에 사용할 수 있습니다. 별도의 라이센스나 저작권 표시가 필요하지 않습니다.
패턴 디자인의 기본과 활용
반복 패턴(Seamless Pattern)은 그래픽 디자인, 웹 디자인, 텍스타일 디자인 등 다양한 분야에서 핵심 요소로 활용됩니다.
패턴 디자인의 기본 원리
반복 패턴은 하나의 '타일'이 상하좌우로 매끄럽게 연결되어 무한히 반복되는 디자인입니다. 기하학적 패턴(도트, 줄무늬, 그리드)은 깔끔하고 모던한 느낌을, 유기적 패턴(파도, 쉐브론)은 역동적이고 자연스러운 느낌을 줍니다. SVG 기반 패턴은 해상도 독립적이므로 어떤 화면 크기에서도 선명하게 표시됩니다.
웹 디자인에서의 패턴 활용
CSS background-image 속성으로 SVG 패턴을 데이터 URI 형태로 삽입하면 별도의 이미지 파일 없이 패턴 배경을 구현할 수 있습니다. 이 방식은 HTTP 요청을 줄이고 성능을 향상시킵니다. 패턴은 히어로 섹션 배경, 카드 배경, 구분선 대체, 로딩 화면 등 다양한 UI 요소에 활용됩니다.