이미지 구성 요소 image-component

핵심 구성 요소 이미지 구성 요소는 적응형 이미지 구성 요소입니다.

사용 usage

이미지 구성 요소에는 페이지 방문자의 레이지 로딩과 콘텐츠 작성자의 간단한 이미지 배치 옵션이 있는 적응형 이미지 선택 기능과 반응 동작이 포함됩니다.

콘텐츠 작성자는 편집 대화 상자를 사용하여 자르기를 적용하거나 이미지를 회전하는 등 이미지 자산을 편집할 수 있습니다.

템플릿 작성자는 디자인 대화 상자에서 이미지 폭 및 추가 설정 옵션을 정의할 수 있습니다. 콘텐츠 편집기는 구성 대화 상자에서 자산을 업로드하거나 선택할 수 있습니다.

버전 및 호환성 version-and-compatibility

현재 버전의 이미지 구성 요소는 2022년 2월 핵심 구성 요소 릴리스 2.18.0과 함께 도입된 v3입니다. 이 문서에서는 해당 구성 요소에 대해 설명합니다.

다음 표에서 구성 요소의 모든 지원 버전, 구성 요소 버전과 호환되는 AEM 버전 및 이전 버전에 대한 설명서 링크에 대해 자세히 살펴볼 수 있습니다.

구성 요소 버전
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v3
-
호환 가능
호환 가능
v2
호환 가능
호환 가능
호환 가능
v1
호환 가능
호환 가능
호환 가능

핵심 구성 요소 버전 및 릴리스에 대한 자세한 내용은 핵심 구성 요소 버전을 참조하십시오.

반응형 기능 responsive-features

이미지 구성 요소에는 즉시 사용 가능한 강력한 반응형 기능이 제공됩니다. 페이지 템플릿 수준에서 디자인 대화 상자를 사용하여 이미지 자산의 기본 폭을 정의할 수 있습니다. 브라우저 창의 크기에 따라 이미지 구성 요소는 적절한 폭을 자동으로 로드하여 표시합니다. 창의 크기가 조정되면 이미지 구성 요소는 즉시 올바른 이미지 크기를 자동으로 로드합니다. 이미지 구성 요소가 이미 콘텐츠 로드에 최적화되었기 때문에 구성 요소 개발자는 맞춤형 미디어 쿼리를 정의하는 데 걱정할 필요가 없습니다.

또한, 이미지 구성 요소는 소극적 로드를 지원하여 브라우저에 표시될 때까지 실제 이미지 자산 로드를 지연합니다. 이로써 페이지의 응답성이 향상될 수 있습니다.

TIP
기본적으로 이미지 구성 요소는 적응형 이미지 서블릿에 의해 제공됩니다. 작동 방식에 대한 자세한 내용은 적응형 이미지 서블릿을 참조하십시오.

Dynamic Media 지원 dynamic-media

이미지 구성 요소(릴리스 2.13.0부터)는 Dynamic Media 자산을 지원합니다. 활성화되면 다른 이미지에서와 마찬가지로 이 기능의 간단한 드래그 앤 드롭이나 자산 브라우저를 통해 Dynamic Media 이미지 자산을 추가할 수 있습니다. 또한 이미지 수정자, 이미지 사전 설정 및 스마트 자르기를 지원합니다.

핵심 구성 요소가 내장된 웹 경험에는 Sensei에서 지원하는 강력한 고성능 크로스 플랫폼 Dynamic Media 이미지 기능이 포함될 수 있습니다.

차세대 Dynamic Media 지원 next-gen-dm

이미지 구성 요소(릴리스 2.23.2 기준)는 차세대 Dynamic Media 원격 자산을 지원합니다.

구성한 다음 이미지 구성 요소에 대해 원격 차세대 Dynamic Media 서비스에서 자산을 선택할 수 있습니다.

SVG 지원 svg-support

이미지 구성 요소는 확장 가능한 벡터 그래픽(SVG)을 지원합니다.

  • DAM에서의 SVG 자산 드래그 앤 드롭과 로컬 파일 시스템에서 업로드된 SVG 파일의 업로드를 모두 지원합니다.
  • 원본 SVG 파일이 스트리밍됩니다(변환은 건너뜀).
  • SVG 이미지의 경우 “스마트 이미지”와 “스마트 크기”를 이미지 모델에서 빈 배열로 설정합니다.

보안 security

보안상 이유로 이미지 편집기에서 바로 최초 SVG를 호출하지 않습니다. <img src="path-to-component">를 통해 호출됩니다. 이렇게 하면 브라우저는 SVG 파일에 임베드된 스크립트를 실행할 수 없습니다.

샘플 구성 요소 출력 sample-component-output

이미지 구성 요소를 경험하고 구성 옵션의 샘플과 HTML 및 JSON 출력을 확인하려면 구성 요소 라이브러리를 방문하십시오.

기술 세부 사항 technical-details

이미지 구성 요소에 대한 최신 기술 설명서는 GitHub에서 확인할 수 있습니다.

핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서를 참조하십시오.

이미지 구성 요소는 schema.org microdata를 지원합니다.

편집 대화 상자 edit-dialog

콘텐츠 작성자는 편집 대화 상자를 통해 이미지를 자르고, 확대/축소할 수 있습니다.

Dynamic Media를 활성화했는지 또는 차세대 Dynamic Media 기능을 활성화했는지에 따라 이미지 편집 작업에 사용할 수 있는 옵션이 달라집니다.

표준 자산 편집 standard-assets

표준 AEM 자산을 편집하는 경우 이미지 구성 요소의 컨텍스트 메뉴에서 편집 아이콘을 클릭할 수 있습니다.

이미지 구성 요소의 편집 대화 상자

  • 자르기 시작

    자르기 시작 아이콘

    이 옵션을 선택하면 자르기 비율을 사전 정의하는 드롭다운이 열립니다.

    • 자르기 제거 옵션을 선택하면 원본 자산이 표시됩니다.

    자르기 옵션이 선택되면 파란색 핸들이 사용하여 이미지에서 자르기 크기를 조정합니다.

    자르기 옵션

  • 오른쪽 회전

    오른쪽 회전 아이콘

    이 옵션을 사용하여 오른쪽으로(시계 방향으로) 이미지를 90° 회전합니다.

  • 확대/축소 재설정

    확대/축소 재설정 아이콘

    이미지가 이미 확대/축소되었다면 이 옵션을 사용하여 확대/축소 레벨을 재설정합니다.

  • 확대/축소 슬라이더 열기

    확대/축소 슬라이더 아이콘

    이 옵션을 사용하여 이미지의 확대/축소 레벨을 제어하는 슬라이더를 표시합니다.

    확대/축소 슬라이더 컨트롤

바로 편집 기능을 가진 편집기를 사용하여 이미지를 수정합니다. 공간 제약으로 인라인에서는 기본 옵션만 제공됩니다. 전체 편집 옵션의 경우 전체 화면 모드를 사용합니다.

이미지 바로 편집 기능 옵션

NOTE
GIF 이미지의 경우 이미지 편집 작업이 지원되지 않습니다. 편집 모드에서 GIF에 적용한 변경 사항은 유지되지 않습니다.

Dynamic Media 자산 편집 dynamic-media-assets

Dynamic Media 기능이 활성화된 경우 자산 콘솔에서 이미지 자체 편집을 수행해야 합니다.

차세대 Dynamic Media 자산 편집 next-gen-dm-assets

차세대 Dynamic Media가 구성된 경우 구성 요소의 컨텍스트 메뉴에서 스마트 자르기 옵션을 사용할 수 있습니다.

스마트 자르기

대화 상자를 사용하여 스마트 자르기를 조정합니다.

스마트 자르기 대화 상자

TIP
스마트 자르기에 대한 자세한 내용은 해당 기능에 대한 이 비디오를 참조하십시오.

구성 대화 상자 configure-dialog

이미지 구성 요소는 설명 및 기본 속성과 함께 이미지 자체를 정의하는 구성 대화 상자를 제공합니다.

자산 탭 asset-tab

이미지 구성 요소의 구성 대화 상자 자산 탭

  • 페이지에서 추천 이미지 상속 옵션은 링크된 페이지의 추천 이미지를 사용하거나 이미지가 링크되지 않은 경우 현재 페이지의 추천 이미지를 사용합니다.

  • 이미지 자산 - 페이지에서 추천 이미지 상속 ​을 선택한 경우 자동으로 채워집니다. 다음 옵션을 설정하여 이미지를 수동으로 정의하려면 선택 해제합니다.

    • 자산 브라우저에서 자산을 드롭하거나 검색 옵션을 탭하여 로컬 파일 시스템에서 업로드할 수 있습니다.

    • 지우기 ​를 탭하거나 클릭하여 현재 선택된 이미지 선택을 해제합니다.

    • 선택 ​을 탭하거나 클릭하여 자산 브라우저를 열고 이미지를 선택할 수 있습니다.

      • 차세대 Dynamic Media 기능이 활성화된 경우 자산을 선택할 수 있는 여러 옵션이 있습니다.

        • 로컬 ​은 로컬 AEM 자산 라이브러리에서 선택할 수 있습니다.
        • 원격 ​은 AEM 인스턴스 외부의 Dynamic Media 라이브러리에서 선택할 수 있습니다.
    • 편집 ​을 탭하거나 클릭하여 자산 편집기에서 자산 렌디션을 관리합니다.

  • 접근성을 위한 그림 설명 필드에서는 시각 장애인 독자를 위한 이미지 설명을 정의할 수 있습니다.

    • 페이지에서 그림 설명 상속 옵션은 DAM에 있는 dc:description 메타데이터 또는 연결된 자산이 없는 경우 현재 페이지의 연결된 자산 값에 대한 대체 설명을 사용합니다.
  • 그림 설명을 제공하지 않음 - 이미지가 단순히 장식용이거나 페이지에 추가 정보를 전달하지 않는 경우 화면 판독기와 같은 보조 기술에서 무시되도록 이미지를 표시합니다.

메타데이터 탭 metadata-tab

이미지 구성 요소의 구성 대화 상자 메타데이터 탭

  • 사전 설정 유형 - 이는 사용 가능한 이미지 사전 설정 유형, 이미지 사전 설정 또는 스마트 자르기 중 하나를 정의하고, Dynamic Media 기능이 활성화되는 경우에만 사용할 수 있습니다.

    • 이미지 사전 설정 - 이미지 사전 설정 ​의 사전 설정 유형 ​이 설정되면 사용 가능한 Dynamic Media 사전 설정을 선택하면서 드롭다운 이미지 사전 설정 ​을 사용할 수 있습니다. 선택한 자산에 대한 사전 설정이 정의되는 경우에만 사용할 수 있습니다.
    • 스마트 자르기 - 스마트 자르기 ​의 사전 설정 유형 ​이 설정되면 선택한 자산에 대해 사용 가능한 렌디션을 선택하면서 드롭다운 렌디션 ​을 사용할 수 있습니다. 선택한 자산에 대해 렌디션이 정의되는 경우에만 사용할 수 있습니다.
    • 이미지 수정자 - 사전 설정 유형 선택에 관계없이 명령을 제공하는 추가 Dynamic Media 이미지를 &로 구분하여 정의할 수 있습니다.
  • 캡션 - 기본적으로 이미지에 대한 추가 정보가 이미지 아래에 표시됩니다.

    • DAM에서 캡션 다운로드 - 확인 표시가 되어 있으면 이미지의 캡션 텍스트가 DAM의 dc:title 메타데이터 값으로 채워집니다.
    • 팝업으로 캡션 표시 - 확인 표시가 되어 있으면 캡션은 이미지 아래에 표시되지 않고 마우스로 이미지를 가리키면 일부 브라우저에서 팝업으로 표시됩니다.
  • 링크 - 이미지를 다른 리소스에 연결합니다.

    • 선택 대화 상자를 통해 다른 AEM 리소스에 연결합니다.
    • AEM 리소스에 연결되지 않은 경우 절대 URL을 입력합니다. 절대 URL이 아닌 URL은 AEM의 상대 URL로 해석됩니다.
    • 새 탭에서 링크 열기 - 이 옵션을 통해 새 브라우저 창에서 링크를 열 수 있습니다.
  • ID - 이 옵션을 통해 HTML과 데이터 레이어에서 구성 요소의 고유 식별자를 제어할 수 있습니다.

    • 비워 두면 고유 ID는 자동으로 생성되고 결과 페이지 검사를 통해 발견될 수 있습니다.
    • ID가 지정된 경우 작성자는 ID가 고유한지 확인해야 합니다.
    • ID가 변경되면 CSS, JS 및 데이터 레이어 추적에 영향을 미칠 수 있습니다.
TIP
스마트 자르기 ​와 이미지 사전 설정 ​은 함께 수행할 수 없는 옵션입니다. 작성자가 스마트 자르기 렌디션과 함께 이미지 사전 설정을 사용해야 한다면 이미지 수정자 ​를 사용해야 합니다.

스타일 탭 styles-tab-edit

이미지 구성 요소의 디자인 대화 상자 스타일 탭

이미지 구성 요소는 AEM 스타일 시스템을 지원합니다.

드롭다운을 사용하여 구성 요소에 적용할 스타일을 선택합니다. 편집 대화 상자에서 선택한 항목은 구성 요소 툴바에서 선택한 항목과 동일한 효과를 가집니다.

드롭다운 메뉴를 사용하려면 디자인 대화 상자에서 이 구성 요소에 대한 스타일을 구성해야 합니다.

디자인 대화 상자 design-dialog

메인 탭 main-tab

이미지 구성 요소의 디자인 대화 상자 메인 탭

  • DM 기능 활성화 - 확인 표시가 되어 있으면 Dynamic Media 기능을 사용할 수 있습니다.

    • 이 옵션은 환경에서 Dynamic Media가 활성화된 경우에만 표시됩니다.
  • 웹 최적화 이미지 활성화 - 선택하면 웹에 최적화된 이미지 게재 서비스는 WebP 형식으로 이미지를 전달하여 이미지 크기를 평균 25% 줄일 수 있습니다.

    • 이 옵션은 AEMaaCS에서만 사용할 수 있습니다.
    • 선택하지 않거나 웹 최적화된 이미지 게재 서비스를 사용할 수 없는 경우에는 적응형 이미지 서블릿이 사용됩니다.
  • 레이지 로딩 비활성화 - 확인 표시가 되어 있으면 구성 요소가 레이지 로딩 없이 모든 이미지를 미리 로드합니다.

  • 장식적 이미지 - 페이지에 이미지 구성 요소를 추가할 때 장식적 이미지 옵션이 자동으로 활성화되면 정의합니다.

  • DAM에서 그림 설명 다운로드 - 페이지에 이미지 구성 요소를 추가할 때 DAM에서 그림 설명을 검색하는 옵션이 자동으로 활성화되면 정의합니다.

  • DAM에서 캡션 다운로드 - 페이지에 이미지 구성 요소를 추가할 때 DAM에서 캡션을 검색하는 옵션이 자동으로 활성화되면 정의합니다.

  • 팝업으로 캡션 표 - 페이지에 이미지 구성 요소를 추가할 때 팝업으로 이미지 캡션을 표시하는 옵션이 자동으로 활성화되면 정의합니다.

  • 폭 조정 - 이 값은 DAM 자산인 베이스 이미지의 폭을 조정하는 데 사용됩니다.

    • 이미지의 종횡비가 유지됩니다.
    • 값이 이미지의 실제 폭보다 크면 이 값은 효과가 없습니다.
    • 이 값은 SVG 이미지에 영향을 주지 않습니다.

이미지에 대해 폭 목록을 픽셀 단위로 정의하면 구성 요소는 브라우저 크기에 따라 가장 적절한 폭을 자동으로 로드합니다. 이는 이미지 구성 요소 반응형 기능의 주요 부분입니다.

  • 이미지에 대해 폭 목록을 픽셀 단위로 정의하면 구성 요소는 브라우저 크기에 따라 가장 적절한 폭을 자동으로 로드합니다.

    • 추가 버튼을 탭하거나 클릭하여 다른 크기를 추가합니다.

      • 그랩 핸들을 사용하여 크기 순서를 재배열합니다.
      • 삭제 아이콘을 사용하여 폭을 제거합니다.
    • 기본적으로 이미지가 표시될 때까지 이미지 로드를 연기합니다.

      • 레이지 로딩 비활성화 옵션을 선택하여 페이지 로드에서 이미지를 로드할 수 있습니다.
  • JPEG 품질 - 변환된(예: 크기 조정된 또는 잘린) JPEG 이미지의 품질 인수(0~100 사이의 백분율)입니다.

TIP
폭을 정의함으로써 렌디션 선택을 최적화하기 위한 팁과 관련된 자세한 내용은 적응형 이미지 서블릿 문서를 참조하십시오.

스타일 탭 styles-tab

이미지 구성 요소는 AEM 스타일 시스템을 지원합니다.

Adobe 클라이언트 데이터 레이어 data-layer

이미지 구성 요소는 Adobe 클라이언트 데이터 레이어를 지원합니다.

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c