이미지 구성 요소

핵심 구성 요소 이미지 구성 요소는 즉석 편집을 제공하는 응용 이미지 구성 요소입니다.

사용량

이미지 구성 요소는 컨텐츠 작성자를 위한 간편한 이미지 배치 및 자르기는 물론 페이지 방문자를 위한 레이지 로딩이 가능한 적응형 이미지 선택 및 응답형 비헤이비어를 제공합니다.

이미지 폭과 자르기 및 추가 설정은 템플릿 작성자가 디자인 대화 상자에서 정의할 수 있습니다. 내용 편집기는 구성 대화 상자에서 자산을 업로드하거나 선택하고 편집 대화 상자에서 이미지를 자를 수 있습니다. 편의를 위해 이미지를 직접 간단하게 수정할 수 있습니다.

반응형 기능

이미지 구성 요소에는 즉시 사용할 수 있는 강력한 반응형 기능이 포함되어 있습니다. 페이지 템플릿 수준에서 디자인 대화 상자를 사용하여 이미지 자산의 기본 너비를 정의할 수 있습니다. 그런 다음 이미지 구성 요소는 브라우저 창의 크기에 따라 표시할 올바른 너비를 자동으로 로드합니다. 창 크기가 조정되면 이미지 구성 요소는 올바른 이미지 크기를 신속하게 동적으로 로드합니다. 이미지 구성 요소가 이미 컨텐츠를 로드할 수 있도록 최적화되었으므로 구성 요소 개발자는 사용자 지정 미디어 쿼리를 정의할 필요가 없습니다.

또한 이미지 구성 요소는 실제 이미지 에셋이 브라우저에 표시될 때까지 로드를 연기하여 페이지의 응답성을 높였습니다.

Dynamic Media 지원

릴리스 2.13.0의 이미지 구성 요소는 Dynamic Media 자산을 지원합니다. 활성화되면 이러한 기능을 통해 다른 이미지처럼 간단하게 드래그하여 놓거나 자산 브라우저를 통해 Dynamic Media 이미지 자산을 추가할 수 있습니다. 또한 이미지 수정자, 이미지 사전 설정 및 스마트 자르기도 지원됩니다.

핵심 구성 요소로 구축한 웹 경험은 Sensei 기반의 풍부한 기능과 강력한 고성능, 크로스 플랫폼 Dynamic Media 이미지 기능을 제공하지 못합니다.

버전 및 호환성

이미지 구성 요소의 현재 버전은 v2이며, 2018년 1월에 핵심 구성 요소 릴리스 2.0.0에 도입되었으며 이 문서에 설명되어 있습니다.

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

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

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

SVG 지원

SVG(Scalable Vector Graphics)는 이미지 구성 요소에서 지원합니다.

  • DAM에서 SVG 에셋을 드래그 앤 드롭하고 로컬 파일 시스템에서 SVG 파일 업로드를 업로드할 수 있습니다.
  • 적응형 이미지 서블릿은 원본 SVG 파일을 스트리밍합니다(변형을 건너뜁니다).
  • SVG 이미지의 경우 "스마트 이미지" 및 "스마트 크기"가 이미지 모델의 빈 배열로 설정됩니다.

보안

보안상의 이유로 원본 SVG는 이미지 편집기에서 직접 호출되지 않습니다. 이것은 <img src=“path-to-component”>을 통해 호출됩니다. 이렇게 하면 브라우저가 SVG 파일에 포함된 스크립트를 실행하지 못합니다.

주의

AEM에서 이미지 편집기 기능을 지원하기 위해 SVG 지원을 사용하려면 AEM 6.4용 서비스 팩 2과 함께 핵심 구성 요소 2.1.0 이상의 릴리스가 필요합니다.

샘플 구성 요소 출력

이미지 구성 요소를 경험할 수 있을 뿐만 아니라 구성 옵션의 예 및 HTML 및 JSON 출력을 보려면 구성 요소 라이브러리를 방문하십시오.

기술 세부 정보

이미지 구성 요소 에 대한 최신 기술 문서는 GitHub에서 찾을 수 있습니다.

핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서에서 확인할 수 있습니다.

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

구성 대화 상자

표준 편집 대화 상자디자인 대화 상자 외에도 이미지 구성 요소는 설명 및 기본 속성과 함께 이미지 자체가 정의된 구성 대화 상자를 제공합니다.

자산 탭

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

  • 이미지 자산
    • 자산 브라우저에서 자산을 끌어 놓거나 찾아보기 옵션을 눌러 로컬 파일 시스템에서 업로드합니다.
    • 지우기​를 탭하거나 클릭하여 현재 선택한 이미지를 선택 해제합니다.
    • 편집​을 탭하거나 클릭하여 자산 편집기에서 자산](https://docs.adobe.com/content/help/ko-KR/experience-manager-cloud-service/assets/manage/manage-digital-assets.html)의 변환을 [관리합니다.

메타데이터 탭

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

  • 사전 설정 유형 - 사용 가능한 이미지 사전 설정 유형( 이미지 사전 설정 또는 스마트 자르기)을 정의하며 Dynamic Media 기능이 활성화된 경우에만 사용할 수 있습니다.
    • 이미지 사전 설정 - [ 이미지 사전 설정 유형]을 선택한 경우 드롭다운 이미지 사전 설정을 사용할 수 있으므로 사용 가능한 Dynamic Media 사전 설정에서 선택할 수 있습니다. 선택한 자산에 대해 사전 설정이 정의된 경우에만 사용할 수 있습니다.
    • 스마트 자르기 - 사전 설정 스마트 자르기 의 유형 ​을 선택한 경우 드롭다운변환을 사용할 수 있으므로 선택한 에셋의 사용 가능한 변환 중에서 선택할 수 있습니다. 선택한 자산에 대해 표현물이 정의된 경우에만 사용할 수 있습니다.
    • 이미지 수정자 - 선택한 사전 설정 유형에 &관계없이 여기에서 추가 Dynamic Media 이미지 제공 명령을 정의할 수 있습니다.
  • 이미지가 장식용임 - 보조 기술로 이미지를 무시해야 하므로 대체 텍스트가 필요하지 않은지 확인하십시오. 이것은 장식용 이미지에만 적용됩니다.
  • 대체 텍스트 - 시각 장애가 있는 독자를 위해 이미지의 의미나 기능에 대한 텍스트 대체 텍스트입니다.
    • DAM에서 대체 텍스트 가져오기 - 선택하면 이미지의 대체 텍스트가 DAM의 dc:description 메타데이터 값으로 채워집니다.
  • 캡션 - 기본적으로 이미지 아래에 표시되는 이미지에 대한 추가 정보입니다.
    • DAM에서 캡션 가져오기 - 선택하면 이미지의 캡션 텍스트가 DAM의 dc:title 메타데이터 값으로 채워집니다.
    • 캡션을 팝업으로 표시 - 이 옵션을 선택하면 캡션이 이미지 아래에 표시되지 않고 이미지 위로 마우스를 가져가면 일부 브라우저가 팝업으로 표시합니다.
  • 링크 - 이미지를 다른 리소스에 연결합니다.
    • 선택 대화 상자를 사용하여 다른 AEM 리소스에 연결합니다.
    • AEM 리소스에 연결되지 않은 경우 절대 URL을 입력합니다. 비솔루션 URL은 AEM에 상대적인 것으로 해석됩니다.
  • ID - 이 옵션을 사용하면 HTML 및 데이터 레이어에서 구성 요소의 고유 식별자를 제어할 수 있습니다.
    • 비워 두면 자동으로 고유 ID가 생성되며 결과 페이지를 검사하여 찾을 수 있습니다.
    • ID가 지정된 경우 작성자는 ID가 고유한지 확인해야 합니다.
    • ID를 변경하면 CSS, JS 및 데이터 레이어 추적에 영향을 줄 수 있습니다.

스마트 자르기이미지 사전 설정은 함께 사용할 수 없습니다. 작성자가 스마트 자르기 변환과 함께 이미지 사전 설정을 사용해야 하는 경우 작성자는 사전 설정을 수동으로 추가하려면 이미지 수정자​를 사용해야 합니다.

편집 대화 상자

편집 대화 상자를 사용하면 컨텐츠 작성자가 이미지를 자르고, 론치 맵을 수정하고, 확대할 수 있습니다.

노트

자르기, 회전 및 확대/축소 기능은 Dynamic Media 에셋에 적용되지 않습니다. Dynamic Media 기능이 활성화된 경우 Dynamic Media 자산에 대한 모든 편집 작업은 구성 대화 상자를 통해 수행해야 합니다.

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

  • 자르기 시작

    자르기 시작 아이콘

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

    • 원하는 자르기를 정의하려면 Free Hand 옵션을 선택합니다.
    • 원본 에셋을 표시하려면 자르기 제거 옵션을 선택합니다.

    자르기 옵션을 선택한 후에는 파란색 핸들을 사용하여 이미지의 자르기 크기를 조정합니다.

    자르기 옵션

  • 오른쪽으로 회전

    오른쪽으로 회전 아이콘

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

  • 가로로 뒤집기

    가로로 뒤집기 아이콘

    이미지를 가로로 뒤집거나 y축을 따라 180° 이미지를 회전하려면 이 옵션을 사용합니다.

  • 세로로 뒤집기

    세로로 뒤집기 아이콘

    이미지를 세로로 뒤집거나 x축을 따라 180° 이미지를 회전하려면 이 옵션을 사용합니다.

  • 확대/축소 재설정

    확대/축소 아이콘 재설정

    이미지가 이미 확대된 경우 이 옵션을 사용하여 확대/축소 수준을 재설정합니다.

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

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

    이 옵션을 사용하여 이미지의 확대/축소 레벨을 제어할 수 있습니다.

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

즉석 편집기를 사용하여 이미지를 수정할 수도 있습니다. 공간 제한으로 인해 온라인에서는 기본 옵션만 사용할 수 있습니다. 전체 편집 옵션을 보려면 전체 화면 모드를 사용합니다.

이미지 즉석 편집 옵션

노트

이미지 편집 작업(자르기, 뒤집기, 회전)은 GIF 이미지에 대해 지원되지 않습니다. 편집 모드에서 GIF로 수행된 모든 변경 사항은 지속되지 않습니다.

디자인 대화 상자

템플릿 작성자는 디자인 대화 상자를 사용하여 내용 작성자가 이 구성 요소를 사용할 때 가지고 있는 자르기, 업로드 및 회전 및 업로드 옵션을 정의할 수 있습니다.

기본 탭

Main 탭에서 이미지의 너비 목록을 픽셀 단위로 정의할 수 있으며 구성 요소는 브라우저 크기를 기준으로 가장 적절한 너비를 자동으로 로드합니다. 이미지 구성 요소의 응답형 기능에서 중요한 부분입니다.

또한 작성자가 페이지에 구성 요소를 추가할 때 자동으로 또는 비활성화되는 일반 구성 요소 옵션을 정의할 수 있습니다.

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

  • DM 기능 활성화 - 이 옵션을 선택하면 Dynamic Media 기능 사용 을 사용할 수 있습니다.
  • 레이지 로드 활성화 - 페이지에 이미지 구성 요소를 추가할 때 레이지 로드 옵션이 자동으로 활성화되는지 여부를 정의합니다.
  • 이미지가 장식용임 - 이미지 구성 요소를 페이지에 추가할 때 장식 이미지 옵션이 자동으로 활성화되는지 여부를 정의합니다.
  • DAM에서 대체 텍스트 가져오기 - 이미지 구성 요소를 페이지에 추가할 때 DAM에서 대체 텍스트를 가져오는 옵션이 자동으로 활성화되는지 여부를 정의합니다.
  • DAM에서 캡션 가져오기 - 이미지 구성 요소를 페이지에 추가할 때 DAM에서 캡션을 가져오는 옵션이 자동으로 활성화되는지 여부를 정의합니다.
  • 캡션을 팝업으로 표시 - 이미지 구성 요소를 페이지에 추가할 때 이미지 캡션을 팝업으로 표시하는 옵션이 자동으로 활성화되는지 여부를 정의합니다.
  • UUID 추적 비활성화 - 이미지 자산의 UUID 추적을 비활성화하려면 확인하십시오.
  • - 이미지의 폭 목록을 픽셀 단위로 정의하며 구성 요소는 브라우저 크기에 따라 가장 적합한 너비를 자동으로 로드합니다.
    • 추가 단추를 탭하거나 클릭하여 다른 크기를 추가합니다.
      • 그랩 핸들을 사용하여 크기 순서를 다시 정렬합니다.
      • 너비를 제거하려면 삭제 아이콘을 사용합니다.
    • 기본적으로 이미지 로드가 표시될 때까지 연기됩니다.
      • 페이지 로드 시 이미지를 로드하려면 레이지 로드 비활성화 옵션을 선택합니다.
  • JPEG 품질 - 변형된(예: 비율 또는 잘림) JPEG 이미지의 품질 요소(0 및 100의 백분율)입니다.

기능 탭

기능 탭에서 업로드 옵션, 방향 및 자르기 옵션을 포함한 구성 요소를 사용할 때 컨텐츠 작성자가 사용할 수 있는 옵션을 정의할 수 있습니다.

  • 소스

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

    내용 작성자가 로컬 컴퓨터에서 이미지를 업로드할 수 있도록 하려면 파일 시스템에서 자산 업로드 허용 옵션을 선택합니다. 컨텐츠 작성자가 AEM에서 에셋만 선택하도록 하려면 이 옵션을 선택 취소합니다.

  • 방향

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

  • 회전
    이 옵션을 사용하여 내용 작성자가
    오른쪽으로 회전 옵션을 참조하십시오.


  • 뒤집기컨텐츠 작성자가
    가로 뒤집기 및 뒤집기 세로 옵션

    주의

    기본적으로 뒤집기 옵션은 비활성화됩니다. 활성화하면 이미지 구성 요소의 편집 대화 상자에 세로로 뒤집기가로로 뒤집기 단추가 표시되지만 AEM에서 현재 이 기능이 지원되지 않으며 이러한 옵션을 사용하여 변경한 내용은 지속되지 않습니다.

  • 자르기

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

    내용 작성자가 편집 대화 상자의 구성 요소에서 이미지를 자르는 것을 허용하려면 자르기 허용 옵션을 선택합니다.

    • 사전 정의된 자르기 종횡비를 추가하려면 추가​를 클릭합니다.
    • 자르기 시작 드롭다운에 표시될 설명형 이름을 입력합니다.
    • 종횡비의 숫자 비율을 입력합니다.
    • 드래그 핸들을 사용하여 종횡비의 순서를 다시 정렬합니다.
    • 종횡비를 삭제하려면 휴지통 아이콘을 사용합니다.
    주의

    AEM에서 자르기 종횡비는 높이/너비​로 정의됩니다. 이것은 종래의 폭/높이 정의와 다르며, 레거시 호환성을 위해 수행됩니다. 비율 자체가 아니라 UI에 이름이 표시되므로 컨텐츠 작성자는 비율에 대한 명확한 이름을 제공하는 한 어떤 차이도 인식하지 못합니다.

스타일 탭

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

응용 이미지 서블릿

이미지 구성 요소는 핵심 구성 요소의 응용 이미지 서블릿을 사용합니다. 응용 이미지 서비스는 이미지 처리 및 스트리밍을 담당하며 개발자가 사용자 정의한 핵심 구성 요소 에 활용할 수 있습니다.

노트

Last-Modified 헤더를 통한 조건부 요청은 응용 이미지 서블릿에서 지원되지만 Last-Modified 헤더 의 캐싱은 Dispatcher에서 활성화해야 합니다.

AEM 프로젝트 원형 형식의 샘플 디스패처 구성에는 이미 이 구성이 포함되어 있습니다.

이 페이지에서는