Divi 웹사이트 디자인에 맞춤형 그래픽과 일러스트레이션을 추가하면 시각적 매력을 향상시키는 데 큰 도움이 됩니다. 그러나 올바른 이미지 자산을 찾거나 디자이너를 고용하는 것이 항상 가능한 것은 아닙니다. 다행스럽게도 Divi를 사용하면 빌더 내에서 바로 자신만의 벡터 이미지와 일러스트레이션을 쉽게 만들 수 있습니다.

이 가이드에서는 웹사이트를 손상시키지 않고 실제로 SVG를 구현하는 방법을 살펴보겠습니다.
디자인 경험이 없더라도 전문적인 고품질 벡터 이미지를 만들어 Divi 웹사이트를 시각적으로 한 단계 더 발전시킬 수 있습니다.
SVG 및 그 용도 소개
SVG는 확장 가능한 벡터 그래픽을 나타냅니다. 2차원 벡터 그래픽을 설명하기 위해 고안된 널리 사용되는 XML 기반 벡터 이미지 형식입니다. 이미지를 표현하기 위해 픽셀을 사용하는 래스터 이미지 형식(예: JPEG 또는 PNG)과 달리 SVG는 수학 방정식을 사용하여 모양, 선 및 색상을 정의하므로 해상도에 독립적이고 확장성이 뛰어난 형식입니다.
놀라운 웹사이트 만들기
최고의 무료 페이지 빌더 Elementor와 함께
지금 시작웹사이트 디자인에서 SVG를 사용하는 주요 용도는 다음과 같습니다.
- 반응형 그래픽: SVG 이미지는 해상도에 독립적입니다. 즉, 품질 저하 없이 크기를 늘리거나 줄일 수 있습니다. 따라서 콘텐츠가 다양한 화면 크기와 해상도에 맞게 조정되는 반응형 웹 디자인에 적합합니다.
- 아이콘 및 로고: SVG는 일반적으로 웹사이트의 아이콘, 로고 및 기타 그래픽 요소에 사용됩니다. SVG 파일은 크기가 작고 CSS 및 JavaScript로 쉽게 사용자 정의하고 애니메이션을 적용할 수 있으므로 대화형이고 시각적으로 매력적인 사용자 인터페이스를 만드는 데 널리 사용됩니다.
- Retina 및 높은 DPI 디스플레이: SVG는 Retina 디스플레이와 같은 높은 DPI(인치당 도트 수) 화면에서 선명하고 선명한 그래픽을 표시하는 데 이상적입니다. 기존 래스터 이미지는 확대 시 픽셀화되어 나타날 수 있습니다.
- 애니메이션: SVG를 사용하면 CSS 애니메이션과 같은 도구나 Snap.svg 및 GSAP(GreenSock Animation Platform)와 같은 JavaScript 라이브러리를 사용하여 XML 코드 내에서 직접 복잡한 애니메이션을 생성할 수 있습니다. 이를 통해 웹사이트에 동적 및 대화형 요소를 추가할 수 있습니다.
- 접근성: 기본 XML 구조에 설명 텍스트로 주석을 추가할 수 있으므로 SVG 이미지는 화면 판독기 및 보조 기술에서 쉽게 액세스할 수 있어 웹 사이트를 장애인이 더욱 포용적이고 사용할 수 있게 만듭니다.
- SEO 이점: 검색 엔진은 SVG 파일 내의 콘텐츠를 구문 분석하고 색인화할 수 있으므로 검색 엔진 크롤러에 더 많은 컨텍스트를 제공하여 검색 엔진 최적화(SEO)를 향상할 수 있습니다.
- 대화형 데이터 시각화: SVG는 웹 사이트에서 정보를 효과적으로 전달하는 데 도움이 되는 차트 및 그래프와 같은 대화형 데이터 시각화를 만드는 데 사용할 수 있습니다.
요약하자면, SVG는 웹사이트에서 벡터 그래픽을 만들고 표시하기 위한 다양하고 강력한 형식입니다. 원활하게 확장할 수 있고 다양한 화면 크기 및 해상도에서 잘 작동하며 애니메이션 및 상호 작용을 지원하는 기능은 현대 웹 디자인 및 개발에 유용한 도구입니다.
WordPress에서 벡터 이미지를 안전하게 사용하는 방법
이 부분에서는 WordPress에서 안전한 SVG를 사용하는 두 가지 방법, 즉 수동 및 플러그인을 살펴보겠습니다. 귀하의 필요에 가장 적합한 선택이 귀하에게 제시될 것입니다. 지금 시작하자!
SVG 지원을 수동으로 추가하고 코드를 삭제하세요
작은 코드 조각으로 단 몇 분 만에 WordPress에 SVG 지원을 추가할 수 있습니다. 이로 인해 우리가 이미 강조한 안전 문제에 노출될 수 있습니다. 보다 안전한 방식으로 SVG를 구현하려면 다음 작업이 필요합니다.
- SVG 지원을 활성화하려면 function.php 파일을 변경하세요.
- 원하는 사용자 역할이 svg 파일을 WordPress에 업로드하는 것을 허용하지 않습니다.
- SVG 파일을 업로드하기 전에 모두 삭제하세요.
전반적으로 1단계와 2단계를 완료하는 것은 어렵지 않습니다. 첫 번째 단계는 FTP(파일 전송 프로토콜)를 사용하여 웹사이트에 연결하고 WordPress의 루트 폴더를 찾는 것입니다. 거기에서 function.php 파일을 찾아서 열고, 다음 코드를 붙여넣으세요.
// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );
이를 통해 SVG 파일을 WordPress에 업로드하고 미디어 라이브러리에서 볼 수 있으며 두 가지 목적으로 사용할 수 있습니다. 코드를 추가한 후 function.php 파일을 닫고 수정 사항을 저장하세요.
이제 우리가 신뢰하지 않는 업로드를 하는 사람들이 손상되는 것을 막아야 하므로 상황이 좀 더 어려워집니다. 예를 들어, 편집자와 작성자가 정확한 파일을 업로드할 것이라는 믿음은 있지만 기여자에 대한 믿음은 없을 수 있습니다. 여기에서는 두 가지 접근 방식을 취할 수 있습니다.
- 미디어 라이브러리에 대한 액세스가 제한되거나 액세스할 수 없는 사용자에 대해 고유한 사용자 역할을 설정합니다.
- 각 사용자 역할이 업로드할 수 있는 파일 종류를 제한하려면 WP 업로드 제한 과 같은 플러그인을 설치하세요.

두 전략 모두 단점이 있다는 것은 사실이며, 이는 수동 SVG 구현이 어려울 수 있는 이유 중 하나입니다. 하지만 악의적인 SVG 업로드를 차단하기 위한 전략을 선택하는 경우 실수로 사용하지 않도록 해야 합니다.
이상적으로는 SVG를 웹 사이트에 업로드하기 전에 살균 도구를 사용해야 합니다. 파일을 가져와서 의심스러운 내용이 포함되어 있는지 확인한 다음 포함되어 있으면 삭제합니다. 결국 WordPress에 제출할 수 있는 깔끔한 SVG 파일을 갖게 됩니다.
안전한 SVG 플러그인 사용
앞서 언급한 방법을 사용하여 안전한 SVG 구현이 얼마나 어려운지 보여주고자 했습니다. 이는 Safe SVG 플러그인이 수행하는 작업을 완전히 이해하는 데 필요합니다.

안전한 SVG용 플러그인. 간단히 말해서, 이전에 언급한 어려움은 다음을 포함하여 이 플러그인으로 모두 해결됩니다.
- SVG를 업로드할 수 있게 해줍니다.
- 미디어 라이브러리에 SVG가 표시되는지 확인합니다.
- 보안 결함을 방지하기 위해 업로드하는 각 SVG의 소스 코드를 정리합니다. 이 플러그인은 본질적으로 플러그 앤 플레이 방식이며 WordPress에서 SVG 구현을 보호하기 위한 가장 간단한 경로를 사용합니다. SVG를 사용하기로 결정했다면 시도해 보는 것이 좋습니다.
CSS 및 플러그인을 사용하여 SVG 애니메이션
SVG를 WordPress에 통합하는 작업을 진행한다면 의심할 여지없이 투자 수익을 극대화하고 싶을 것입니다. 이는 적절한 경우 CSS를 사용하여 SVG에 애니메이션을 적용해야 함을 의미합니다. 취할 수 있는 접근 방식에는 두 가지가 있습니다. 이에 대해서는 이전에 논의했습니다.
- SVG는 다른 요소와 마찬가지로 CSS를 사용하여 수동으로 애니메이션을 적용할 수 있습니다.
- SVGator 와 같은 프로그램을 사용하여 SVG를 만들고 애니메이션을 적용합니다.

새로운 것을 시도해보고 싶다면 여기에 몇 가지 애니메이션을 추가하면 웹 사이트의 사용자 경험을 크게 향상시킬 수 있습니다. 그러나 비디오나 GIF를 추가하는 것은 이를 달성하기 위해 SVG 및 CSS를 활용하는 것보다 모바일 장치에 훨씬 더 나쁩니다.
결론
Divi 빌더 내에서 직접 사용자 정의 벡터 그래픽을 구축할 수 있는 기능을 사용하면 디자인 전문 지식 없이도 사이트에 대한 일러스트레이션과 아이콘을 만들 수 있는 강력한 방법이 있습니다. 이러한 원본 그래픽을 구현하면 페이지와 게시물을 더욱 독특하고 개인화된 미학으로 꾸밀 수 있습니다. DIY 벡터 그래픽이 얼마나 전문적으로 보이는지 놀라게 될 것입니다!