(image_tag)= # 템플릿에서 이미지 사용하는 방법 `image` 태그는 XHTML 호환 `img` 요소를 페이지에 삽입하고 `src`, `width`, `height`, `alt` 를 설정합니다. [](image_tag_alt)도 참조하십시오. 태그 구문은 다음과 같습니다. ```html+django {% image [image] [resize-rule] %} ``` **이미지와 크기 조정 규칙 모두 템플릿 태그에 전달되어야 합니다.** 예를 들어: ```html+django {% load wagtailimages_tags %} ... {% image page.photo width-400 %} {% image page.photo fill-80x80 %} ``` 위 구문 예시에서 `[image]` 는 이미지를 참조하는 Django 객체입니다. 페이지 모델이 "photo"라는 필드를 정의했다면 `[image]` 는 아마 `page.photo` 일 것입니다. `[resize-rule]` 은 이미지가 페이지에 삽입될 때 크기를 조정하는 방법을 정의합니다. 다양한 크기 조정 방법이 지원되어 다양한 사용 사례(예: 페이지 전체 너비를 차지하는 리드 이미지 또는 고정 크기로 잘라낼 썸네일)에 대응합니다. `[image]` 와 `[resize-rule]` 사이에 공백이 있지만, 크기 조정 규칙에는 공백이 없어야 합니다. 너비는 항상 높이보다 먼저 지정됩니다. 크기 조정된 이미지는 `fill` 규칙을 사용하지 않는 한 원래 가로 세로 비율을 유지하며, 이 경우 일부 픽셀이 잘릴 수 있습니다. (multiple_formats)= ## 여러 형식 여러 형식으로 이미지를 렌더링하려면 `picture` 태그를 사용할 수 있습니다. ```html+django {% picture page.photo format-{avif,webp,jpeg} width-400 %} ``` `image` 와 비교하여, 이것은 대체 `` 와 하나의 `` 요소를 각 추가 형식당 포함하는 `` 요소를 렌더링합니다. 브라우저는 [지원하는 첫 번째 형식](https://web.dev/learn/design/picture-element/#source)을 선택하거나 대체 `` 요소로 기본 설정됩니다. 예를 들어, 위 코드는 다음과 유사한 HTML을 렌더링합니다. ```html 얼룩무늬 물떼새 ``` 이 경우 브라우저가 [AVIF](https://en.wikipedia.org/wiki/AVIF) 형식을 지원하면 AVIF 파일을 로드합니다. 그렇지 않으면 브라우저가 [WebP](https://en.wikipedia.org/wiki/WebP) 형식을 지원하면 WebP 파일을 로드하려고 시도합니다. 이러한 형식 중 어느 것도 지원되지 않으면 브라우저는 JPEG 이미지를 로드합니다. 제공된 형식의 순서는 구성할 수 없습니다. Wagtail은 항상 AVIF, WebP, JPEG, PNG, GIF 순서로 소스 요소를 출력합니다. 이는 가능한 한 가장 최적화된 형식이 제공되도록 보장합니다. `picture` 태그는 여러 이미지 크기 조정 규칙과 함께 사용하여 반응형 이미지를 생성할 수도 있습니다. (responsive_images)= ## 반응형 이미지 Wagtail은 `srcset` 속성이 있는 이미지 요소를 생성할 수 있는 `picture` 및 `srcset_image` 템플릿 태그를 제공합니다. 이를 통해 브라우저는 [반응형 이미지 규칙](https://developer.mozilla.org/en-US/docs/Web/HTML/Multimedia_and_embedding/Responsive_images)에 따라 로드할 가장 적절한 이미지 파일을 선택할 수 있습니다. `srcset_image` 의 구문은 `image` 와 동일하지만 두 가지 예외가 있습니다. ```html+django {% srcset_image [image] [resize-rule-with-brace-expansion] sizes="[my source sizes]" %} ``` - 크기 조정 규칙은 `width-{200,400}` 과 같이 중괄호 확장 패턴으로 여러 크기를 제공해야 합니다. 이렇게 하면 `srcset` 속성이 생성되며, 크기 조정 규칙에 정의된 크기만큼 많은 URL과 URL당 하나의 너비 설명자가 있습니다. 제공된 첫 번째 크기는 항상 `src` 속성으로 사용되며, 대체로 이미지의 너비 및 높이 속성을 정의합니다. - [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes) 속성은 필수입니다. 이는 브라우저에 이미지가 페이지에 표시될 크기를 알려주므로 로드할 가장 적절한 이미지를 선택할 수 있습니다. 다음은 `srcset` 속성을 생성하는 `srcset_image` 의 예시입니다. ```html+django {% srcset_image page.photo width-{400,800} sizes="(max-width: 600px) 400px, 80vw" %} ``` 출력은 다음과 같습니다. ```html 얼룩무늬 물떼새 ``` 다음은 `picture` 태그의 예시입니다. ```html+django {% picture page.photo format-{avif,webp,jpeg} width-{400,800} sizes="80vw" %} ``` 출력은 다음과 같습니다. ```html 얼룩무늬 물떼새 ``` (available_resizing_methods)= ## 사용 가능한 크기 조정 방법 사용 가능한 크기 조정 방법은 다음과 같습니다. ### `max` (두 차원 사용) ```html+django {% image page.photo max-1000x500 %} ``` 주어진 치수 **내에** 맞춥니다. 가장 긴 가장자리는 지정된 일치하는 치수로 줄어듭니다. 예를 들어, 너비 1000, 높이 2000의 세로 이미지를 `max-1000x500` 규칙(가로 레이아웃)으로 처리하면 이미지가 _높이_가 500픽셀이고 너비가 250픽셀이 되도록 축소됩니다. ![이미지에 max 필터 예시](../_static/images/image_filter_max.png) 예시: 이미지는 비율을 유지하지만 제공된 최대(녹색 선) 치수 내에 맞춥니다. ### `min` (두 차원 사용) ```html+django {% image page.photo min-500x200 %} ``` 주어진 치수를 **덮습니다**. 이로 인해 지정한 치수보다 약간 **큰** 이미지가 생성될 수 있습니다. 너비 2000, 높이 2000의 정사각형 이미지를 `min-500x200` 규칙으로 처리하면 높이와 너비가 500으로 변경됩니다. 즉, 크기 조정 규칙의 _너비_와 일치하지만 높이보다 큽니다. ![이미지에 min 필터 예시](../_static/images/image_filter_min.png) 예시: 이미지는 비율을 유지하면서 제공된 최소(녹색 선) 치수 이상을 채웁니다. ### `width` (한 차원 사용) ```html+django {% image page.photo width-640 %} ``` 이미지의 너비를 지정된 치수로 줄입니다. ### `height` (한 차원 사용) ```html+django {% image page.photo height-480 %} ``` 이미지의 높이를 지정된 치수로 줄입니다. ### `scale` (백분율 사용) ```html+django {% image page.photo scale-50 %} ``` 이미지 크기를 지정된 백분율로 조정합니다. ### `fill` (두 차원 및 선택적 `-c` 매개변수 사용) ```html+django {% image page.photo fill-200x200 %} ``` 지정된 **정확한** 치수를 채우도록 크기를 조정하고 **자릅니다**. 이는 임의의 이미지의 정사각형 썸네일이 필요한 웹사이트에 특히 유용할 수 있습니다. 예를 들어, 너비 2000, 높이 1000의 가로 이미지를 `fill-200x200` 규칙으로 처리하면 높이가 200으로 줄어들고, 너비(일반적으로 400)는 200으로 잘립니다. 이 크기 조정 규칙은 이미지의 초점(설정된 경우)으로 자릅니다. 설정되지 않은 경우 이미지 중앙으로 자릅니다. ![초점 설정된 이미지에 fill 필터 예시](../_static/images/image_filter_fill.png) 예시: 이미지는 크기가 조정되고 제공된 치수 내에서 가능한 한 많은 이미지를 맞추기 위해 잘립니다(빨간색 선). **확대되지 않는 이미지의 경우** 이미지가 확대 없이 지원할 수 없는 `fill` 치수로 이미지를 요청할 수 있습니다. 예를 들어 너비 400, 높이 200의 이미지를 `fill-400x400` 으로 요청하는 경우입니다. 이 상황에서는 _요청된 채우기의 비율_이 일치하지만 치수는 일치하지 않습니다. 따라서 예시 400x200 이미지(2:1 비율)는 200x200(1:1 비율, 크기 조정 규칙과 일치)이 될 수 있습니다. **초점에 더 가깝게 자르기** 기본적으로 Wagtail은 이미지의 가로 세로 비율을 크기 조정 규칙의 비율과 일치시키기 위해 충분히 자릅니다. 일부 경우(예: 썸네일)에는 이미지의 주제가 더 두드러지도록 초점에 더 가깝게 자르는 것이 바람직할 수 있습니다. 크기 조정 규칙 끝에 `-c` 를 추가하여 이를 수행할 수 있습니다. 예를 들어, 이미지가 초점에 가능한 한 가깝게 잘리도록 하려면 `-c100` 을 추가합니다. ```html+django {% image page.photo fill-200x200-c100 %} ``` 이렇게 하면 이미지가 초점을 자르지 않고 최대한 많이 잘립니다. `-c100` 이 너무 가깝다고 생각되면 `-c75` 또는 `-c50` 을 시도할 수 있습니다. 0에서 100까지의 모든 정수가 허용됩니다. ![초점 설정된 이미지에 fill 필터 예시](../_static/images/image_filter_fill_focal.png) 예시: 초점이 중앙에서 벗어나 설정되어 이미지가 채우기처럼 크기가 조정되고 잘리지만, 자르기 중앙 지점은 초점에 더 가깝게 배치됩니다. ![초점 설정된 이미지에 fill 및 closeness 필터 예시](../_static/images/image_filter_fill_focal_close.png) 예시: `-c75` 가 설정되면 최종 자르기는 초점에 더 가깝게 됩니다. ### `original` (치수 없음) ```html+django {% image page.photo original %} ``` 이미지를 원본 크기로 렌더링합니다. ```{note} Wagtail은 이미지 변형 또는 확대를 허용하지 않습니다. 이미지 치수 비율은 항상 유지됩니다. Wagtail은 또한 *확대를 지원하지 않습니다*. 더 큰 크기로 표시되도록 강제된 작은 이미지는 원래 치수에서 "최대"로 표시됩니다. ``` (image_tag_alt)= ## `img` 태그에 대한 더 많은 제어 Wagtail은 `img` 요소에 대한 더 큰 제어를 제공하는 두 가지 단축키를 제공합니다. ### 1. `{% image %}` 태그에 속성 추가 추가 속성은 `attribute="value"` 구문으로 지정할 수 있습니다. ```html+django {% image page.photo width-400 class="foo" id="bar" %} ``` 이미지 제목에서 자동으로 생성된 `alt` 속성을 재정의하여 더 관련성 있는 `alt` 속성을 설정할 수 있습니다. 필요한 경우 `src`, `width`, `height` 속성도 재정의할 수 있습니다. 모든 이미지에 기본 속성(예: 기본 클래스 또는 데이터 속성)을 추가할 수도 있습니다. [](adding_default_attributes_to_images)를 참조하십시오. ### 2. 개별 속성에 액세스하기 위해 이미지를 "as foo"로 생성 Wagtail은 Django의 `as` 구문을 사용하여 이미지 데이터를 다른 변수에 할당하여 기본 이미지 렌디션(`tmp_photo`)에 액세스할 수 있습니다. ```html+django {% image page.photo width-400 as tmp_photo %} {{ tmp_photo.alt }} ``` `srcset_image` 태그를 사용하여 여러 크기 렌디션을 검색할 수도 있습니다. ```html+django {% srcset_image page.photo width-{200,400} as tmp_photo %} {{ tmp_photo.renditions.0.alt }} ``` 그리고 그림 태그로 여러 형식을 검색할 수 있습니다. ```html+django {% picture page.photo format-{avif,jpeg} as tmp_photo %} {{ tmp_photo.formats.avif.0.url }} {{ tmp_photo.formats.jpeg.0.url }} ``` ```{note} `src` 속성에 사용되는 이미지 속성은 `image.url` 이며 `image.src` 가 아닙니다. ``` 렌디션에는 크기 조정 규칙, 치수 및 소스 URL을 사용하여 이미지를 형식화하도록 요청한 방식에 특정한 정보가 포함됩니다. 다음 속성을 사용할 수 있습니다. ### `url` 이미지의 크기 조정된 버전 URL입니다. 정적 파일이 구성된 방식에 따라 로컬 URL(예: `/static/images/example.jpg`) 또는 전체 URL(예: `https://assets.example.com/images/example.jpg`)일 수 있습니다. ### `width` 크기 조정 후 이미지 너비. ### `height` 크기 조정 후 이미지 높이. ### `alt` 이미지에 대한 대체 텍스트, 상황별 대체 텍스트 또는 `default_alt_text` (없는 경우). ### `attrs` `src`, `width`, `height`, `alt` 속성을 한 번에 출력하기 위한 약어: ```html+django ``` ### `full_url` `url` 과 동일하지만 항상 전체 절대 URL을 반환합니다. 이를 위해서는 프로젝트 설정에 `WAGTAILADMIN_BASE_URL` 이 설정되어 있어야 합니다. 이는 소셜 공유 이미지와 같이 현재 사이트 외부에서 재사용될 이미지에 유용합니다. ```html+django ``` 사이트가 `AbstractImage` 를 사용하여 사용자 지정 이미지 모델을 정의하는 경우 이미지에 추가하는 모든 필드(예: 저작권자)는 렌디션에 포함되지 않습니다. 따라서 위 예시에서 AbstractImage에 `author` 필드를 추가했다면 `{{ tmp_photo.author }}` 대신 `{{ page.photo.author }}` 를 사용하여 액세스할 수 있습니다. (렌디션과 부모 이미지 간의 데이터베이스 링크 때문에 `{{ tmp_photo.image.author }}` 로 액세스할 수 있지만 가독성이 떨어집니다.) (adding_default_attributes_to_images)= ## 모든 이미지에 기본 속성 추가 `wagtail.images` 애플리케이션을 구성하여 이미지에 추가할 추가 속성을 지정할 수 있습니다. 이는 프로젝트 폴더(즉, 최상위 설정 및 URL 모듈을 포함하는 패키지) 내에 사용자 지정 `AppConfig` 클래스를 설정하여 수행됩니다. 이렇게 하려면 기존 `apps.py` 파일을 만들거나 업데이트하여 다음을 포함하십시오. ```python from wagtail.images.apps import WagtailImagesAppConfig class CustomImagesAppConfig(WagtailImagesAppConfig): default_attrs = {"decoding": "async", "loading": "lazy"} ``` 그런 다음 `settings.INSTALLED_APPS` 의 `wagtail.images` 를 `CustomUsersAppConfig` 의 경로로 바꿉니다. ```python INSTALLED_APPS = [ ..., "myapplication.apps.CustomImagesAppConfig", # "wagtail.images", ..., ] ``` 이제 `{% image %}` 로 생성된 이미지에는 `decoding="async" loading="lazy"` 속성이 추가됩니다. 이는 리치 텍스트 및 `ImageBlock` 블록에 추가된 이미지에도 적용됩니다. ## 대체 HTML 태그 `as` 키워드를 사용하면 대체 HTML 이미지 태그(예: `` 또는 ``)를 사용할 수 있습니다. 예를 들어, `` 태그를 사용하려면: ```html+django {% image page.photo width-800 as wide_photo %} {% image page.photo width-400 %} ``` 그리고 `` 태그를 사용하려면(AMP 문서의 [산 예시](https://amp.dev/documentation/components/amp-img#specify-a-fallback-image) 기반): ```html+django {% image image width-550 format-webp as webp_image %} {% image image width-550 format-jpeg as jpeg_image %} ``` ## 리치 텍스트에 포함된 이미지 위 정보는 모델의 이미지별 필드를 통해 정의된 이미지와 관련이 있습니다. 그러나 이미지는 페이지 편집기에서 리치 텍스트 필드에 임의로 포함될 수도 있습니다( [](rich_text_field) 참조). 리치 텍스트 필드에 포함된 이미지는 템플릿 개발자가 쉽게 제어할 수 없습니다. 작업할 이미지 객체가 없으므로 `{% image %}` 템플릿 태그를 사용할 수 없습니다. 대신 편집자는 텍스트에 이미지를 삽입할 때 여러 이미지 "형식" 중 하나를 선택할 수 있습니다. Wagtail은 세 가지 사전 정의된 이미지 형식을 제공하지만, 개발자가 Python에서 더 많은 형식을 정의할 수 있습니다. ### `Full width` `width-800` 을 사용하여 이미지 렌디션을 생성하고 `` 태그에 `full-width` CSS 클래스를 부여합니다. ### `Left-aligned` `width-500` 을 사용하여 이미지 렌디션을 생성하고 `` 태그에 `left` CSS 클래스를 부여합니다. ### `Right-aligned` `width-500` 을 사용하여 이미지 렌디션을 생성하고 `` 태그에 `right` CSS 클래스를 부여합니다. ```{note} 이미지에 추가된 CSS 클래스에는 동반되는 스타일시트나 인라인 스타일이 **없습니다**. 예를 들어, `left` 클래스는 기본적으로 아무것도 하지 않습니다. 개발자는 이러한 클래스를 프런트엔드 CSS 파일에 추가하여 `left`, `right` 또는 `full-width` 가 정확히 무엇을 의미하는지 정의해야 합니다. ``` 자신만의 이미지 형식을 포함하여 이미지 형식에 대한 자세한 내용은 [](rich_text_image_formats)를 참조하십시오. (output_image_format)= ## 출력 이미지 형식 Wagtail은 이미지가 크기 조정될 때 일부 이미지의 형식을 자동으로 변경할 수 있습니다. - PNG 및 JPEG 이미지는 형식을 변경하지 않습니다. - 애니메이션 없는 GIF 이미지는 PNG로 변환됩니다. - AVIF 이미지는 PNG로 변환됩니다. - BMP 이미지는 PNG로 변환됩니다. - WebP 이미지는 PNG로 변환됩니다. 크기 조정 규칙 뒤에 `format` 필터를 사용하여 태그별로 출력 형식을 재정의할 수도 있습니다. 예를 들어, 태그가 항상 이미지를 JPEG로 변환하도록 하려면 `format-jpeg` 를 사용합니다. ```html+django {% image page.photo width-400 format-jpeg %} ``` You may also use `format-png`, `format-gif` or `format-ico`. ### 무손실 AVIF 및 WebP `format-avif-lossless` 또는 `format-webp-lossless` 필터를 사용하여 이미지를 무손실 AVIF 또는 WebP 형식으로 인코딩할 수 있습니다. ```html+django {% image page.photo width-400 format-avif-lossless %} {% image page.photo width-400 format-webp-lossless %} ``` (favicon_generation)= ### 파비콘 생성 `format-ico` 를 사용하여 이미지를 `.ico` 파일로 저장할 수 있습니다. 이는 관리자를 통해 사이트의 파비콘을 관리할 때 특히 유용합니다. ```html+django {% image favicon_image format-ico as favicon_image_formatted %} ``` (image_background_colour)= ## 배경색 PNG 및 GIF 이미지 형식은 모두 투명도를 지원하지만, 이미지를 JPEG 형식으로 변환하려면 투명도를 단색 배경색으로 대체해야 합니다. 기본적으로 Wagtail은 배경을 흰색으로 설정합니다. 그러나 흰색 배경이 디자인에 맞지 않으면 `bgcolor` 필터를 사용하여 색상을 지정할 수 있습니다. 이 필터는 단일 인수를 사용하며, 이는 사용할 색상을 나타내는 CSS 3 또는 6자리 16진수 코드입니다. ```html+django {# 이미지 배경을 검정색으로 설정 #} {% image page.photo width-400 bgcolor-000 format-jpeg %} ``` (image_quality)= ## 이미지 품질 Wagtail의 JPEG 이미지 품질 설정은 기본적으로 85(상당히 높음)입니다. AVIF 및 WebP는 기본적으로 80입니다. 이는 전역적으로 또는 태그별로 변경할 수 있습니다. ### 전역적으로 변경 `WAGTAILIMAGES_AVIF_QUALITY`, `WAGTAILIMAGES_JPEG_QUALITY` 및 `WAGTAILIMAGES_WEBP_QUALITY` 설정을 사용하여 AVIF, JPEG 및 WebP 품질의 전역 기본값을 변경합니다. ```python # settings.py # 저품질이지만 작은 이미지 만들기 WAGTAILIMAGES_AVIF_QUALITY = 50 WAGTAILIMAGES_JPEG_QUALITY = 40 WAGTAILIMAGES_WEBP_QUALITY = 45 ``` 이는 이전에 생성된 이미지에는 영향을 미치지 않으므로 새 설정으로 다시 생성할 수 있도록 모든 렌디션을 삭제해야 할 수 있습니다. 이는 Django 셸에서 수행할 수 있습니다. ```python # 사용자 지정 렌디션 모델을 사용하는 경우 이것을 사용자 지정 렌디션 모델로 바꿉니다. >>> from wagtail.images.models import Rendition >>> Rendition.objects.all().delete() ``` 렌디션을 다시 생성하기 위해 콘솔에서 이미지 관리 명령을 직접 사용할 수도 있습니다. ```sh ./manage.py wagtail_update_image_renditions --purge ``` 이 명령에 대한 자세한 내용은 [](wagtail_update_image_renditions)에서 읽을 수 있습니다. ### 태그별로 변경 `avifquality`, `jpegquality` 및 `webpquality` 필터를 사용하여 개별 태그에 다른 AVIF, JPEG 및 WebP 품질을 가질 수도 있습니다. 이는 항상 기본 설정을 재정의합니다. ```html+django {% image page.photo_avif width-400 avifquality-40 %} {% image page.photo_jpeg width-400 jpegquality-40 %} {% image page.photo_webp width-400 webpquality-50 %} ``` 이는 PNG 또는 GIF 파일에는 영향을 미치지 않습니다. 모든 이미지를 저품질로 만들려면 `format-avif`, `format-jpeg` 또는 `format-webp` 와 함께 이 필터를 사용할 수 있습니다(모든 이미지를 AVIF, JPEG 또는 WebP 형식으로 출력하도록 강제함). ```html+Django {% image page.photo width-400 format-avif avifquality-40 %} {% image page.photo width-400 format-jpeg jpegquality-40 %} {% image page.photo width-400 format-webp webpquality-50 %} ``` ## 파이썬에서 이미지 렌디션 생성 위에 언급된 모든 이미지 변환은 Python 코드에서도 직접 사용할 수 있습니다. [](image_renditions)를 참조하십시오. (svg_images)= ## SVG 이미지 Wagtail은 래스터 이미지와 함께 확장 가능한 벡터 그래픽 사용을 지원합니다. Wagtail 사용자가 SVG 이미지를 업로드하고 사용할 수 있도록 허용하려면 `WAGTAILIMAGES_EXTENSIONS` 구성에 "svg"를 허용되는 이미지 확장자 목록에 추가하십시오. ```python WAGTAILIMAGES_EXTENSIONS = ["gif", "jpg", "jpeg", "png", "webp", "svg"] ``` SVG 이미지는 래스터 이미지와 마찬가지로 `image` 템플릿 태그를 통해 템플릿에 포함될 수 있습니다. 그러나 SVG 이미지를 래스터화해야 하는 작업은 현재 지원되지 않습니다. 여기에는 직접 형식 변환(예: `format-webp`) 및 `bgcolor` 지시문이 포함됩니다. 자르기 및 크기 조정 작업은 래스터화를 필요로 하지 않으므로 자유롭게 사용할 수 있습니다( [](available_resizing_methods) 참조). `image` 태그의 `preserve-svg` 위치 인수는 SVG 이미지에 적용되는 작업을 래스터화를 필요로 하지 않는 작업으로만 제한하는 데 사용할 수 있습니다. 이는 단일 `image` 태그 선언이 여러 소스 이미지에 적용되는 상황에서 유용할 수 있습니다. 예를 들어: ```html+django {% for picture in pictures %} {% image picture fill-400x400 format-webp preserve-svg %} {% endfor %} ``` 이 예시에서 SVG인 이미지 객체는 `fill-400x400` 작업만 적용되는 반면, 래스터 이미지에는 `fill-400x400` 및 `format-webp` 작업이 모두 적용됩니다. 이 예시에서 `preserve-svg` 인수가 사용되지 않으면 SVG 이미지를 webp로 변환하려고 할 때 오류가 발생합니다. 래스터화 라이브러리 없이는 불가능하기 때문입니다. (svg_security_considerations)= ### 보안 고려 사항 ```{warning} 사용자 업로드 파일을 허용하는 모든 시스템은 잠재적인 보안 위험입니다. ``` Wagtail의 기본 이미지 라이브러리인 Willow는 의심스러운 파일을 거부하여 알려진 XML 파서 익스플로잇(예: billion laughs, quadratic blowup)을 완화하도록 구성되어 있습니다. `image` 태그를 통해 템플릿에 SVG 이미지를 포함할 때 HTML `img` 요소로 렌더링됩니다. 이 경우 SVG의 `script` 요소는 실행되지 않아 XSS 공격을 완화합니다. 사용자가 SVG 파일의 URL로 직접 이동하면 서버/저장소 구성에 따라 포함된 스크립트가 실행될 수 있습니다. 이는 SVG 응답에 적절한 Content-Security-Policy 또는 Content-Disposition 헤더를 설정하여 완화할 수 있습니다. - `Content-Security-Policy: default-src 'none'` 을 설정하면 스크립트가 로드되거나 실행되는 것을 방지합니다(다른 리소스도 마찬가지입니다. `script-src 'none'` 과 같은 더 완화된 정책도 적합할 수 있습니다). 그리고 - `Content-Disposition: attachment` 를 설정하면 파일이 브라우저에서 즉시 렌더링되는 대신 다운로드되므로 스크립트가 실행되지 않습니다(참고: 사용자가 SVG 파일을 다운로드한 후 브라우저에서 열면 스크립트가 실행되는 것을 막지는 않습니다). 특정 응답에 대한 헤더를 설정하는 데 필요한 단계는 Wagtail 애플리케이션이 배포되는 방식에 따라 다릅니다. 내장 동적 이미지 제공 뷰의 경우 Content-Security-Policy 헤더가 자동으로 설정됩니다. (heic_heif_images)= ## HEIC / HEIF 이미지 HEIC / HEIF 이미지는 웹에서 널리 지원되지 않지만 Apple 장치에서 이미지를 내보낼 때 발생할 수 있습니다. Wagtail은 기본적으로 이러한 이미지 업로드를 허용하지 않지만, `WAGTAILIMAGES_EXTENSIONS` 에 "heic"를 추가하여 활성화할 수 있습니다. ```python WAGTAILIMAGES_EXTENSIONS = ["gif", "jpg", "jpeg", "png", "webp", "heic"] ``` HEIC / HEIF 이미지를 업로드하려면 파일 확장자가 `.heic` 여야 하며 `.heif` 또는 다른 확장자는 안 됩니다. 이러한 이미지는 렌더링될 때 JPEG 형식으로 자동 변환됩니다( [](customizing_output_formats) 참조).