이미지 구성 요소 (v2) image-component

이미지 에셋

• 에셋 브라우저에서 에셋을 삭제하거나 검색 옵션을 탭하여 로컬 파일 시스템에서 로드합니다.
• 지우기 ​를 탭하거나 클릭하여 현재 선택된 이미지 선택을 해제합니다.
• 편집 ​을 탭하거나 클릭하여 에셋 편집기에서 에셋 렌디션을 관리합니다.

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

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

장식적 이미지 - 이미지가 보조 기술에서 무시되어 대체 텍스트가 필요한지 확인합니다. 이는 장식적 이미지에만 적용됩니다.

대체 텍스트 - 이미지 의미 또는 기능에 대한 시각 장애인 독자용 대체 텍스트입니다.

• DAM에서 대체 텍스트 다운로드 - 확인 표시가 되어 있으면 이미지의 대체 텍스트가 DAM의 dc:description 메타데이터 값으로 채워집니다.

캡션 - 기본적으로 이미지에 대한 추가 정보가 이미지 아래에 표시됩니다.

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

링크 - 이미지를 다른 리소스에 연결합니다.

• 선택 대화 상자를 통해 다른 AEM 리소스에 연결합니다.
• AEM 리소스에 연결되지 않은 경우 절대 URL을 입력합니다. 절대 URL이 아닌 URL은 AEM의 상대 URL로 해석됩니다.

ID - 이 옵션을 통해 HTML과 데이터 레이어에서 구성 요소의 고유 식별자를 제어할 수 있습니다.

• 비워 두면 고유 ID는 자동으로 생성되고 결과 페이지 검사를 통해 발견될 수 있습니다.
• ID가 지정된 경우 작성자는 ID가 고유한지 확인해야 합니다.
• ID가 변경되면 CSS, JS 및 데이터 레이어 추적에 영향을 미칠 수 있습니다.

자르기 시작

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

• 프리 핸드 옵션을 선택하여 자체 자르기를 정의합니다.
• 자르기 제거 옵션을 선택하면 원본 에셋이 표시됩니다.

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

오른쪽 회전

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

가로 뒤집기

이 옵션을 사용하여 이미지를 가로로 뒤집거나 y축을 따라 이미지를 180° 피벗합니다.

세로 뒤집기

이 옵션을 사용하여 이미지를 세로로 뒤집거나 y축을 따라 이미지를 180° 피벗합니다.

확대/축소 재설정

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

확대/축소 슬라이더 열기

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

DM 기능 활성화 - 확인 표시가 되어 있으면 Dynamic Media 기능이 제공됩니다.

웹 최적화 이미지 활성화 - 선택하면 웹에 최적화된 이미지 게재 서비스는 WebP 형식으로 이미지를 전달하여 이미지 크기를 평균 25% 줄일 수 있습니다.

• 이 옵션은 AEMaaCS에서만 사용할 수 있습니다.
• 선택하지 않거나 웹 최적화된 이미지 게재 서비스를 사용할 수 없는 경우 적응형 이미지 서블릿이 사용됩니다.

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

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

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

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

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

UUID 추적 비활성화 - 이미지 에셋의 UUID 추적 비활성화를 확인합니다.

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

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

  • 그랩 핸들을 사용하여 크기의 순서를 재배열합니다.
  • 삭제 아이콘을 사용하여 폭을 삭제합니다.

• 기본적으로 이미지가 표시될 때까지 이미지 로드를 연기합니다.

  • 소극적 로드 활성화 옵션을 사용하여 페이지 로드에서 이미지를 로드합니다.

JPEG 품질 - 변환된(예: 크기 조정된 또는 잘린) JPEG 이미지의 품질 인수(0~100 사이의 백분율)입니다

소스

파일 시스템에서 에셋 업로드 허용 옵션을 선택하여 콘텐츠 작성자는 자신의 컴퓨터에서 이미지를 업로드할 수 있습니다. 콘텐츠 작성자가 AEM에서 에셋만 강제 선택하려면 이 옵션 선택을 해제합니다.

방향

회전
이 옵션을 사용하여 콘텐츠 작성자는 오른쪽 회전 옵션을 사용할 수 있습니다.

뒤집기
이 옵션을 사용하여 콘텐츠 작성자는 가로 뒤집기 및 세로 뒤집기 옵션을 사용할 수 있습니다.

자르기

자르기 허용 옵션을 선택하여 콘텐츠 작성자는 편집 대화 상자의 구성 요소에 있는 이미지를 자를 수 있습니다.

• 추가 ​를 클릭하여 사전 정의된 자르기 종횡비를 추가합니다.
• 자르기 시작 드롭다운에 표시된 설명하는 이름을 입력합니다.
• 숫자로 된 종횡비를 입력합니다.
• 드래그 핸들을 사용하여 종횡비의 순서를 재배열합니다.
• 휴지통을 사용하여 종횡비를 삭제합니다.