본문으로 건너뛰기

로고 SVG 생성

로고 SVG 생성 기능은 테마 빌더가 사용자 정의 로고 SVG를 워드프레스 사이트에 직접 생성하고 임베드할 수 있게 하며, 이 과정에서 네임스페이스 안전한 검증(sanitisation)을 자동으로 수행합니다.

개요​

이 기능은 사이트의 브랜딩 방향과 디자인 선호도에 따라 확장 가능한 벡터 그래픽(SVG) 로고를 생성합니다. 생성된 SVG는 시각적 무결성을 유지하면서 워드프레스에서 안전하게 사용될 수 있도록 자동으로 검증(sanitised)됩니다.

매개변수​

매개변수타입필수설명
site_namestring예로고를 생성할 사이트 이름
stylestring예디자인 스타일 (예: "modern", "classic", "minimalist", "playful")
colorsarray아니요로고에 사용할 색상 헥스 코드 배열 (예: ["#678233", "#ffffff"])
widthnumber아니요픽셀 단위의 SVG 너비 (기본값: 200)
heightnumber아니요픽셀 단위의 SVG 높이 (기본값: 200)
include_textboolean아니요로고에 사이트 이름을 텍스트로 포함할지 여부 (기본값: true)

출력 형식​

이 기능은 다음 구조를 가진 SVG 문자열을 반환합니다.

{
  "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\">...</svg>",
  "width": 200,
  "height": 200,
  "colors_used": ["#678233", "#ffffff"],
  "sanitised": true
}

SVG 안전하게 처리되는 방식​

생성된 SVG는 다음을 위해 자동 네임스페이스 안전 검증을 거칩니다.

  • 안전하지 않은 속성 제거 — 이벤트 핸들러, 스크립트 및 잠재적으로 위험한 속성을 제거합니다.
  • 네임스페이스 유지 — 올바른 렌더링을 위해 SVG 네임스페이스(xmlns, xlink)를 유지합니다.
  • 구조 유효성 검사 — SVG가 W3C 표준을 준수하는지 확인합니다.
  • 엔티티 인코딩 — 텍스트 콘텐츠의 특수 문자를 올바르게 이스케이프합니다.
  • 외부 참조 제거 — 외부 스타일시트 및 이미지 참조를 제거합니다.

이를 통해 추가적인 검증 없이도 SVG를 워드프레스에 직접 임베드할 수 있도록 안전하게 만듭니다.

사용 예시​

프롬프트:

파란색과 흰색을 사용하여 "CloudSync"라는 기술 스타트업을 위한 모던한 로고를 생성해 주세요.

결과: 이 기능은 다음을 포함하는 SVG 로고를 생성합니다.

  • 사이트 이름 "CloudSync"를 통합합니다.
  • 지정된 파란색과 흰색 색상 구성을 사용합니다.
  • 모던한 디자인 원칙을 따릅니다.
  • 자동으로 검증되어 바로 사용할 준비가 되어 있습니다.

테마 빌더와의 통합​

테마 빌더의 디자인 방향 선택 기능을 사용할 때, 로고 SVG 생성 기능은 다음을 수행합니다.

  1. 디자인 방향과 색상 팔레트를 분석합니다.
  2. 사용자의 선호도에 맞는 사용자 정의 SVG 로고를 생성합니다.
  3. 로고를 사이트의 헤더/브랜딩 영역에 자동으로 임베드합니다.
  4. SVG를 워드프레스 미디어에 사용자 정의 로고로 저장합니다.

모범 사례​

  • 명확한 스타일 선호도 제공 — 원하는 디자인 스타일(모던, 클래식, 플레이풀 등)을 설명해 주세요.
  • 색상 지정 — 일관성을 위해 브랜드 색상을 포함해 주세요.
  • 렌더링 테스트 — 다양한 화면 크기에서 로고가 올바르게 표시되는지 확인하세요.
  • 추가 사용자 정의 — 크기 및 배치를 조정하기 위해 워드프레스의 로고 사용자 정의 도구를 사용하세요.

제한 사항​

  • SVG 로고는 정적 그래픽으로 생성됩니다 (애니메이션 아님).
  • 요소가 많은 복잡한 로고는 수동으로 다듬어야 할 수 있습니다.
  • 사용자 정의 폰트는 지원되지 않으며, 텍스트는 시스템 폰트를 사용합니다.
  • 매우 크거나 매우 작은 치수는 품질에 영향을 줄 수 있습니다.