WordPress에 SVG 이미지 파일을 추가하는 방법

WordPress 사이트의 그래픽을 대폭 업그레이드할 준비가 되셨나요? 어떤 기기에서든 선명하게 보이는 무한 확장 가능한 로고와 아이콘을 상상해 보세요. 픽셀화나 왜곡 없이 말이죠. 이 가이드는 WP Media Folder사용하여 WordPress에 SVG 파일을 업로드하고 관리하는 방법을 자세히 보여주며, 개발자가 아니더라도 누구나 쉽게 사용할 수 있습니다.

이 단계별 튜토리얼에서는 SVG 파일의 장점, 디자이너들이 SVG 파일을 선호하는 이유, 그리고 SEO 및 페이지 성능 향상에 탁월한 이유를 자세히 알아보겠습니다. 신뢰할 수 있는 플러그인 사용부터 간단한 코드 수정까지, SVG 업로드를 활성화하는 다양하고 쉬운 방법을 배우고, 사이트 보안을 위한 현명한 전략도 익힐 수 있습니다.

JoomUnited의 강력한 미디어 관리 플러그인인 WP Media Folder사용해 보겠습니다. 

SVG가 확장 가능한 그래픽에 적합한 이유

확장성 – SVG는 벡터 파일입니다. 즉, 로고, 아이콘 또는 반응형 디자인의 품질 저하 없이 확대, 축소 또는 확대할 수 있습니다.

가볍고 SEO 친화적 – SVG 파일은 래스터 이미지보다 크기가 작고 텍스트 기반 XML이므로 검색 엔진에서 주요 요소(대체 텍스트, 제목 등)를 직접 읽을 수 있습니다.

스타일링 및 애니메이션 – CSS 또는 JavaScript를 통해 SVG를 조작할 수 있습니다. 호버 효과나 애니메이션을 원하시나요? 간단합니다.

접근성 – SVG를 올바르게 설정하면 화면 판독기가 해석할 수 있는 접근 가능한 텍스트 태그와 역할이 포함되어 있으므로 SVG를 사용해야 하는 또 다른 확실한 이유가 됩니다.

WordPress에 SVG를 추가하는 솔루션

WordPress는 보안 위험 때문에 기본적으로 SVG를 차단합니다(SVG는 XML이므로 악성 코드가 포함될 수 있음). 그러나 SVG 지원을 활성화하는 세 가지 안정적인 방법이 있습니다.

1. 플러그인을 사용하세요

a) WPCode + SVG 스니펫

• 무료 WPCode 플러그인을 설치하세요.
• 라이브러리에서 'SVG 파일 업로드 허용' 스니펫을 추가하고 활성화합니다.
• 기본적으로 관리자만 SVG를 업로드할 수 있습니다.

b) SVG 지원 플러그인

• 플러그인 > 새로 추가로 "SVG 지원"을 설치하고 활성화합니다.
• 설정에서 "관리자로 제한" 및/또는 "고급 모드 사용"(인라인 렌더링, CSS 스타일링)을 선택하세요.
• 미디어 > 새로 추가 또는 드래그 앤 드롭을 통해 SVG를 업로드하세요.

c) 기타 옵션 :

• SVG Safe는 오래되었지만 아직도 사용되고 있습니다.
• SVG 지원은 XSS/XXE 위험을 방지하기 위해 업로드 내용을 정리합니다.
• HappyFiles/CatFolders는 정리 및 미리보기 기능을 갖춘 SVG 업로드를 추가합니다.

2. functions.php에 코드 조각을 추가합니다.

다음 코드를 사용할 수 있습니다. 

함수 enable_svg_upload($mimes) { $mimes['svg'] = 'image/svg+xml'; $mimes를 반환합니다. } add_filter('upload_mimes', 'enable_svg_upload'); 

위치: 테마의 functions.php(항상 자식 테마임을 명심하세요!)

단점: 기본적으로 살균 기능이 없어서 살균기와 함께 사용하지 않으면 위험할 수 있습니다. 또한 업로드 권한이 관리자에게만 제한되어 있습니다(사용자 지정 가능).

3. 보안 고려 사항

 SVG = XML, 다음을 포함할 수 있음:

• XSS 공격 (JavaScript).
• XXE 공격 (외부 엔터티 호출).

모범 사례:

• SVG 지원, SVG 안전, HappyFiles와 같은 플러그인을 사용하세요
• 온라인 도구 (예: Darryll Doyle의 SVG Sanitizer Test)를 사용하여 정리하세요.
• SVG 업로드는 관리자 또는 신뢰할 수 있는 사용자에게만 허용됩니다.

WP Media Folder 와 WordPress에서 SVG에 중요한 이유

WP Media Folder 는 강력한 미디어 라이브러리 관리자입니다.

- 폴더/하위 폴더 구조

- 고급 필터, 정렬, 드래그 앤 드롭

 - 이름 바꾸기, 워터마크, 대량 교체, 미리보기, 다운로드

- 페이지 빌더, WooCommerce, WPML 등 다양한 도구와 호환됩니다.

WP Media Folder 자체에서는 SVG 파일을 사용할 수 없지만, SVG 파일을 포함한 모든 유형의 파일을 구성, 유지 관리하고 관리할 수 있습니다.

마무리: SVG와 WP Media Folder 로 사이트 개선하기

지저분한 미디어 폴더와 최적화되지 않은 이미지 파일로 고민하지 마세요. WP Media Folder의 직관적인 정리 도구를 사용하여 가볍고 검색 가능하며 다양한 용도로 활용 가능한 SVG의 잠재력을 최대한 활용하세요. 

콘텐츠 제작자, 디자이너, 소규모 사업주 등 누구든 코드 없이 강력한 기술을 사용할 수 있습니다. 사이트 로딩 속도, 순위 상승, 그리고 멋진 디자인을 경험해 보세요! 더 이상 망설이지 마세요! 지금 바로 여기에서 바로 사용해 보세요.