CodeWatchers

WordPress에서 벡터 이미지를 안전하게 사용하는 방법

Rifat Divi Tutorials Nov 29, 2023

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

WordPress에서 벡터 이미지를 안전하게 사용하는 방법

이 가이드에서는 웹사이트를 손상시키지 않고 실제로 SVG를 구현하는 방법을 살펴보겠습니다.

디자인 경험이 없더라도 전문적인 고품질 벡터 이미지를 만들어 Divi 웹사이트를 시각적으로 한 단계 더 발전시킬 수 있습니다.

SVG 및 그 용도 소개

SVG는 확장 가능한 벡터 그래픽을 나타냅니다. 2차원 벡터 그래픽을 설명하기 위해 고안된 널리 사용되는 XML 기반 벡터 이미지 형식입니다. 이미지를 표현하기 위해 픽셀을 사용하는 래스터 이미지 형식(예: JPEG 또는 PNG)과 달리 SVG는 수학 방정식을 사용하여 모양, 선 및 색상을 정의하므로 해상도에 독립적이고 확장성이 뛰어난 형식입니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

웹사이트 디자인에서 SVG를 사용하는 주요 용도는 다음과 같습니다.

  1. 반응형 그래픽: SVG 이미지는 해상도에 독립적입니다. 즉, 품질 저하 없이 크기를 늘리거나 줄일 수 있습니다. 따라서 콘텐츠가 다양한 화면 크기와 해상도에 맞게 조정되는 반응형 웹 디자인에 적합합니다.
  2. 아이콘 및 로고: SVG는 일반적으로 웹사이트의 아이콘, 로고 및 기타 그래픽 요소에 사용됩니다. SVG 파일은 크기가 작고 CSS 및 JavaScript로 쉽게 사용자 정의하고 애니메이션을 적용할 수 있으므로 대화형이고 시각적으로 매력적인 사용자 인터페이스를 만드는 데 널리 사용됩니다.
  3. Retina 및 높은 DPI 디스플레이: SVG는 Retina 디스플레이와 같은 높은 DPI(인치당 도트 수) 화면에서 선명하고 선명한 그래픽을 표시하는 데 이상적입니다. 기존 래스터 이미지는 확대 시 픽셀화되어 나타날 수 있습니다.
  4. 애니메이션: SVG를 사용하면 CSS 애니메이션과 같은 도구나 Snap.svg 및 GSAP(GreenSock Animation Platform)와 같은 JavaScript 라이브러리를 사용하여 XML 코드 내에서 직접 복잡한 애니메이션을 생성할 수 있습니다. 이를 통해 웹사이트에 동적 및 대화형 요소를 추가할 수 있습니다.
  5. 접근성: 기본 XML 구조에 설명 텍스트로 주석을 추가할 수 있으므로 SVG 이미지는 화면 판독기 및 보조 기술에서 쉽게 액세스할 수 있어 웹 사이트를 장애인이 더욱 포용적이고 사용할 수 있게 만듭니다.
  6. SEO 이점: 검색 엔진은 SVG 파일 내의 콘텐츠를 구문 분석하고 색인화할 수 있으므로 검색 엔진 크롤러에 더 많은 컨텍스트를 제공하여 검색 엔진 최적화(SEO)를 향상할 수 있습니다.
  7. 대화형 데이터 시각화: SVG는 웹 사이트에서 정보를 효과적으로 전달하는 데 도움이 되는 차트 및 그래프와 같은 대화형 데이터 시각화를 만드는 데 사용할 수 있습니다.

요약하자면, SVG는 웹사이트에서 벡터 그래픽을 만들고 표시하기 위한 다양하고 강력한 형식입니다. 원활하게 확장할 수 있고 다양한 화면 크기 및 해상도에서 잘 작동하며 애니메이션 및 상호 작용을 지원하는 기능은 현대 웹 디자인 및 개발에 유용한 도구입니다.

WordPress에서 벡터 이미지를 안전하게 사용하는 방법

이 부분에서는 WordPress에서 안전한 SVG를 사용하는 두 가지 방법, 즉 수동 및 플러그인을 살펴보겠습니다. 귀하의 필요에 가장 적합한 선택이 귀하에게 제시될 것입니다. 지금 시작하자!

SVG 지원을 수동으로 추가하고 코드를 삭제하세요

작은 코드 조각으로 단 몇 분 만에 WordPress에 SVG 지원을 추가할 수 있습니다. 이로 인해 우리가 이미 강조한 안전 문제에 노출될 수 있습니다. 보다 안전한 방식으로 SVG를 구현하려면 다음 작업이 필요합니다.

  1. SVG 지원을 활성화하려면 function.php 파일을 변경하세요.
  2. 원하는 사용자 역할이 svg 파일을 WordPress에 업로드하는 것을 허용하지 않습니다.
  3. 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 파일을 닫고 수정 사항을 저장하세요.

이제 우리가 신뢰하지 않는 업로드를 하는 사람들이 손상되는 것을 막아야 하므로 상황이 좀 더 어려워집니다. 예를 들어, 편집자와 작성자가 정확한 파일을 업로드할 것이라는 믿음은 있지만 기여자에 대한 믿음은 없을 수 있습니다. 여기에서는 두 가지 접근 방식을 취할 수 있습니다.

  1. 미디어 라이브러리에 대한 액세스가 제한되거나 액세스할 수 없는 사용자에 대해 고유한 사용자 역할을 설정합니다.
  2. 각 사용자 역할이 업로드할 수 있는 파일 종류를 제한하려면 WP 업로드 제한 과 같은 플러그인을 설치하세요.

두 전략 모두 단점이 있다는 것은 사실이며, 이는 수동 SVG 구현이 어려울 수 있는 이유 중 하나입니다. 하지만 악의적인 SVG 업로드를 차단하기 위한 전략을 선택하는 경우 실수로 사용하지 않도록 해야 합니다.

이상적으로는 SVG를 웹 사이트에 업로드하기 전에 살균 도구를 사용해야 합니다. 파일을 가져와서 의심스러운 내용이 포함되어 있는지 확인한 다음 포함되어 있으면 삭제합니다. 결국 WordPress에 제출할 수 있는 깔끔한 SVG 파일을 갖게 됩니다.

안전한 SVG 플러그인 사용

앞서 언급한 방법을 사용하여 안전한 SVG 구현이 얼마나 어려운지 보여주고자 했습니다. 이는 Safe SVG 플러그인이 수행하는 작업을 완전히 이해하는 데 필요합니다.

안전한 SVG용 플러그인. 간단히 말해서, 이전에 언급한 어려움은 다음을 포함하여 이 플러그인으로 모두 해결됩니다.

  1. SVG를 업로드할 수 있게 해줍니다.
  2. 미디어 라이브러리에 SVG가 표시되는지 확인합니다.
  3. 보안 결함을 방지하기 위해 업로드하는 각 SVG의 소스 코드를 정리합니다. 이 플러그인은 본질적으로 플러그 앤 플레이 방식이며 WordPress에서 SVG 구현을 보호하기 위한 가장 간단한 경로를 사용합니다. SVG를 사용하기로 결정했다면 시도해 보는 것이 좋습니다.

CSS 및 플러그인을 사용하여 SVG 애니메이션

SVG를 WordPress에 통합하는 작업을 진행한다면 의심할 여지없이 투자 수익을 극대화하고 싶을 것입니다. 이는 적절한 경우 CSS를 사용하여 SVG에 애니메이션을 적용해야 함을 의미합니다. 취할 수 있는 접근 방식에는 두 가지가 있습니다. 이에 대해서는 이전에 논의했습니다.

  • SVG는 다른 요소와 마찬가지로 CSS를 사용하여 수동으로 애니메이션을 적용할 수 있습니다.
  • SVGator 와 같은 프로그램을 사용하여 SVG를 만들고 애니메이션을 적용합니다.

새로운 것을 시도해보고 싶다면 여기에 몇 가지 애니메이션을 추가하면 웹 사이트의 사용자 경험을 크게 향상시킬 수 있습니다. 그러나 비디오나 GIF를 추가하는 것은 이를 달성하기 위해 SVG 및 CSS를 활용하는 것보다 모바일 장치에 훨씬 더 나쁩니다.

결론

Divi 빌더 내에서 직접 사용자 정의 벡터 그래픽을 구축할 수 있는 기능을 사용하면 디자인 전문 지식 없이도 사이트에 대한 일러스트레이션과 아이콘을 만들 수 있는 강력한 방법이 있습니다. 이러한 원본 그래픽을 구현하면 페이지와 게시물을 더욱 독특하고 개인화된 미학으로 꾸밀 수 있습니다. DIY 벡터 그래픽이 얼마나 전문적으로 보이는지 놀라게 될 것입니다!

Divi WordPress Theme