마이크로 프론트엔드 자산 선택기

마이크로 프론트엔드 자산 선택기는 Experience Manager Assets as a Cloud Service 저장소와 간편하게 통합하는 사용자 인터페이스를 제공하므로 사용자는 해당 저장소에서 사용 가능한 디지털 자산을 탐색 또는 검색하고 애플리케이션 작성 경험에 사용할 수 있습니다.

자산 선택기 패키지를 사용하여 마이크로 프론트엔드 사용자 인터페이스를 애플리케이션 경험에 사용할 수 있습니다. 이렇게 하면 패키지에 대한 모든 업데이트를 자동으로 가져오고 최근 배포된 자산 선택기가 애플리케이션 내에서 자동으로 로드됩니다.

개요

자산 선택기는 다음과 같은 많은 이점을 제공합니다.

  • Vanilla JavaScript 라이브러리를 사용하여 Adobe 애플리케이션 또는 Adobe 이외의 애플리케이션과 쉽게 통합할 수 있습니다.

  • 자산 선택기 패키지에 대한 업데이트가 애플리케이션에서 사용할 수 있는 자산 선택기에 자동으로 배포되므로 유지 관리가 간편합니다. 최신 수정 사항을 로드하기 위해 애플리케이션 내에서 업데이트를 수행하지 않아도 됩니다.

  • 애플리케이션 내에서 자산 선택기 표시를 제어하는 속성을 통해 손쉽게 사용자 정의할 수 있습니다.

  • 전체 텍스트 검색, 기본 제공 및 사용자 정의 필터를 통해 작성 경험 내에서 사용할 자산을 빠르게 탐색할 수 있습니다.

  • IMS 조직 내에서 저장소를 전환하여 자산을 선택할 수 있습니다.

  • 자산을 이름, 차원 및 크기별로 정렬하고 목록 보기, 격자 보기, 갤러리 보기 또는 워터폴 보기로 볼 수 있습니다.

이 문서는 통합 셸에서 Adobe 애플리케이션과 함께 자산 선택기를 사용하는 방법과 인증용으로 생성된 imsToken을 이미 보유한 경우에 대해 다룹니다. 이 문서에서는 이러한 워크플로를 SUSI 외 흐름이라고 합니다.

Experience Manager Assets as a Cloud Service 저장소와 자산 선택기를 통합하고 사용하려면 다음 작업을 수행하십시오.

Vanilla JS를 사용하여 자산 선택기 통합

모든 Adobe 또는 Adobe 이외의 애플리케이션을 Experience Manager Assets as a Cloud Service 저장소와 통합하고 애플리케이션 내에서 자산을 선택할 수 있습니다.

이러한 통합은 자산 선택기 패키지를 가져온 다음 Vanilla JavaScript 라이브러리를 사용하여 Assets as a Cloud Service에 연결하여 수행할 수 있습니다. index.html 또는 애플리케이션 내의 적절한 파일을 편집하여 다음 작업을 수행해야 합니다.

  • 인증 세부 정보 정의
  • Assets as a Cloud Service 저장소 액세스
  • 자산 선택기 표시 속성 구성

다음과 같은 경우 일부 IMS 속성을 정의하지 않고 인증을 수행할 수 있습니다.

  • 통합 셸에서 Adobe 애플리케이션을 통합하는 경우
  • 인증용으로 생성된 IMS 토큰을 이미 보유하고 있는 경우

사전 요구 사항

index.html 파일 또는 애플리케이션 구현 내에 있는 유사한 파일의 사전 요구 사항을 정의하여 Experience Manager Assets as a Cloud Service 저장소에 액세스하기 위한 인증 세부 정보를 정의합니다. 사전 요구 사항에는 다음이 포함됩니다.

  • imsOrg
  • imsToken
  • apikey

설치

자산 선택기는 ESM CDN(예: esm.sh/Skypack) 및 UMD 버전을 통해 사용할 수 있습니다.

UMD 버전​을 사용하는 브라우저의 경우(권장됨):

<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>

<script>
  const { renderAssetSelector } = PureJSSelectors;
</script>

ESM CDN 버전​을 사용하며 import maps가 지원되는 브라우저의 경우:

<script type="module">
  import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
</script>

ESM CDN 버전​을 사용하는 Deno/Webpack Module Federation의 경우:

import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'

선택된 자산 유형

선택된 자산 유형은 handleSelection, handleAssetSelection 및 onDrop 기능을 사용할 때 자산 정보를 포함하는 오브젝트의 배열입니다.

스키마 구문

interface SelectedAsset {
    'repo:id': string;
    'repo:name': string;
    'repo:path': string;
    'repo:size': number;
    'repo:createdBy': string;
    'repo:createDate': string;
    'repo:modifiedBy': string;
    'repo:modifyDate': string;
    'dc:format': string;
    'tiff:imageWidth': number;
    'tiff:imageLength': number;
    'repo:state': string;
    computedMetadata: Record<string, any>;
    _links: {
        'http://ns.adobe.com/adobecloud/rel/rendition': Array<{
            href: string;
            type: string;
            'repo:size': number;
            width: number;
            height: number;
            [others: string]: any;
        }>;
    };
}

다음 표에서는 선택한 자산 오브젝트의 몇 가지 중요한 속성에 대해 설명합니다.

속성 유형 설명
repo:repositoryId 문자열 자산이 저장된 저장소의 고유 식별자입니다.
repo:id 문자열 자산의 고유 식별자입니다.
repo:assetClass 문자열 자산의 분류입니다(예: 이미지 또는 비디오, 문서).
repo:name 문자열 파일 확장명을 포함한 자산의 이름입니다.
repo:size 숫자 자산의 크기입니다(바이트).
repo:path 문자열 저장소 내 자산의 위치입니다.
repo:ancestors Array<string> 저장소에 있는 자산의 상위 항목 배열입니다.
repo:state 문자열 저장소에 있는 에셋의 현재 상태(예: 활성, 삭제됨 등)입니다.
repo:createdBy 문자열 자산을 생성한 사용자 또는 시스템입니다.
repo:createDate 문자열 자산이 생성된 날짜 및 시간입니다.
repo:modifiedBy 문자열 마지막으로 자산을 수정한 사용자 또는 시스템입니다.
repo:modifyDate 문자열 자산이 마지막으로 수정된 날짜 및 시간입니다.
dc:format 문자열 파일 유형(예: JPEG, PNG 등)과 같은 에셋의 형식입니다.
tiff:imageWidth 숫자 자산의 폭입니다.
tiff:imageLength 숫자 자산의 높이입니다.
computedMetadata Record<string, any> 모든 종류의 모든 자산 메타데이터(저장소, 애플리케이션 또는 임베드된 메타데이터)에 대한 버킷을 나타내는 오브젝트입니다.
_links Record<string, any> 관련 자산에 대한 하이퍼미디어 링크입니다. 메타데이터 및 렌디션과 같은 리소스에 대한 링크가 포함됩니다.
_links.http://ns.adobe.com/adobecloud/rel/rendition Array<Object> 자산의 렌디션에 대한 정보가 포함된 오브젝트 배열입니다.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].href 문자열 렌디션에 대한 URI입니다.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].type 문자열 렌디션의 MIME 유형입니다.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].'repo:size' 숫자 렌디션의 크기입니다(바이트).
_links.http://ns.adobe.com/adobecloud/rel/rendition[].width 숫자 렌디션의 폭입니다.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].height 숫자 렌디션의 높이입니다.

전체 속성 목록과 자세한 예를 보려면 자산 선택기 코드 예를 방문하십시오.

SUSI 외 흐름 예

이 예는 통합 셸에서 Adobe 애플리케이션을 실행할 때 SUSI 외 흐름을 통해 자산 선택기를 사용하는 방법과 인증용으로 생성된 imsToken을 이미 보유한 경우에 대해 설명합니다.

를 사용하여 코드에 에셋 선택기 패키지 포함 script 태그로 표시 라인 6-15 아래 예제 참조. 스크립트가 로드되면 PureJSSelectors 전역 변수를 사용할 수 있습니다. 자산 선택기 정의 속성 에 보여진 것처럼 라인 16-23. SUSI 외 흐름 인증에는 imsOrg 및 imsToken 속성이 모두 필요합니다. handleSelection 속성은 선택한 자산을 처리하는 데 사용됩니다. 자산 선택기를 렌더링하려면 17행​에서 언급한 대로 renderAssetSelector 기능을 호출합니다. 21~22행​에 표시된 대로 <div> 컨테이너 요소에 자산 선택기가 표시됩니다.

다음 단계를 따르면 Adobe 애플리케이션에서 SUSI 외 흐름과 함께 자산 선택기를 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Asset Selector</title>
    <script src="https://experience.adobe.com/solutions/CQ-assets-selectors/assets/resources/assets-selectors.js"></script>
    <script>
        // get the container element in which we want to render the AssetSelector component
        const container = document.getElementById('asset-selector-container');
        // imsOrg and imsToken are required for authentication in non-SUSI flow
        const assetSelectorProps = {
            imsOrg: 'example-ims@AdobeOrg',
            imsToken: "example-imsToken",
            apiKey: "example-apiKey-associated-with-imsOrg",
            handleSelection: (assets: SelectedAssetType[]) => {},
        };
        // Call the `renderAssetSelector` available in PureJSSelectors globals to render AssetSelector
        PureJSSelectors.renderAssetSelector(container, assetSelectorProps);
    </script>
</head>

<body>
    <div id="asset-selector-container" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
    </div>
</body>

</html>

자세한 예를 보려면 자산 선택기 코드 예를 방문하십시오.

자산 선택기 속성 사용

자산 선택기 속성을 사용하여 자산 선택기가 렌더링되는 방식을 사용자 정의할 수 있습니다. 다음 표에는 자산 선택기를 사용자 정의하고 사용하는 데 사용할 수 있는 속성이 나열되어 있습니다.

속성 유형 필수 기본값 설명
레일 부울 아니요 false 표시된 경우 true, 자산 선택기가 왼쪽 레일 보기에서 렌더링됩니다. 표시된 경우 false, 자산 선택기가 모달 보기에서 렌더링됩니다.
imsOrg 문자열 예 조직에 Adobe Experience Manager as a Cloud Service를 프로비저닝하는 중에 할당된 Adobe IMS(Identity Management System)입니다. 다음 imsOrg 액세스하려는 조직이 Adobe IMS에 속해 있는지 여부를 인증하려면 키가 필요합니다.
imsToken 문자열 아니요 인증에 사용되는 IMS 전달자 토큰입니다. SUSI 외 흐름을 사용하는 경우 imsToken이 필요합니다.
apiKey 문자열 아니요 AEM Discovery 서비스에 액세스하는 데 사용되는 API 키입니다. SUSI 외 흐름을 사용하는 경우 apiKey가 필요합니다.
rootPath 문자열 아니요 /content/dam/ 자산 선택기에 자산이 표시되는 폴더 경로입니다. 캡슐화된 형태로도 rootPath를 사용할 수 있습니다. 예를 들어 다음 경로가 주어지면 /content/dam/marketing/subfolder/, 에셋 선택기를 사용하면 상위 폴더를 통과할 수 없지만 하위 폴더만 표시됩니다.
path 문자열 아니요 자산 선택기가 렌더링될 때 자산의 특정 디렉터리로 이동하는 데 사용되는 경로입니다.
filterSchema 배열 아니요 필터 속성을 구성하는 데 사용되는 모델입니다. 자산 선택기에서 특정 필터 옵션을 제한하려는 경우에 유용합니다.
filterFormProps 오브젝트 아니요 검색을 세분화하는 데 사용해야 하는 필터 속성을 지정합니다. 예를 들어 MIME 유형을 JPG, PNG, GIF로 지정할 수 있습니다.
selectedAssets 배열 <Object> 아니요 자산 선택기가 렌더링될 때 선택된 자산을 지정합니다. 자산의 ID 속성을 포함하는 오브젝트 배열이 필요합니다. 그 예로는 [{id: 'urn:234}, {id: 'urn:555'}] 등이 있습니다. 또한 현재 디렉터리에서 자산을 사용할 수 있어야 합니다. 다른 디렉터리를 사용해야 하는 경우 path 속성 값도 제공하십시오.
acvConfig 오브젝트 아니요 기본값을 재정의하기 위한 사용자 지정 구성을 포함하는 오브젝트가 포함된 자산 컬렉션 보기 속성입니다.
i18nSymbols Object<{ id?: string, defaultMessage?: string, description?: string}> 아니요 OOTB 번역이 애플리케이션 요구 사항을 제대로 충족하지 않는 경우 i18nSymbols 속성을 통해 현지화된 사용자 정의 값을 전달할 수 있는 인터페이스를 노출할 수 있습니다. 이 인터페이스를 통해 값을 전달하면 제공된 기본 번역이 재정의되며 사용자 고유의 번역이 대신 사용됩니다. 재정의를 수행하려면 유효한 재정의하려는 i18nSymbols의 키에 메시지 설명자 오브젝트를 전달해야 합니다.
intl 오브젝트 아니요 자산 선택기는 기본 OOTB 번역을 제공합니다. intl.locale 속성을 통해 유효한 로케일 문자열을 제공하여 번역 언어를 선택할 수 있습니다. 예를 들어 intl={{ locale: "es-es" }}의 경우

지원되는 로케일 문자열은 언어 표준의 이름을 표현하기 위해 ISO 639 - 코드를 따릅니다.

지원되는 로케일 목록: 영어 - “en-us”(기본값) 스페인어 - “es-es” 독일어 - “de-de” 프랑스어 - “fr-fr” 이탈리아어 - “it-it” 일본어 - “ja-jp” 한국어 - “ko-kr” 포르투갈어 - “pt-br” 중국어(번체) - “zh-cn” 중국어(대만) - “zh-tw”
repositoryId 문자열 아니요 '' 자산 선택기가 콘텐츠를 로드하는 저장소입니다.
additionalAemSolutions Array<string> 아니요 [ ] 추가 AEM 저장소 목록을 추가할 수 있습니다. 이 속성에 정보를 제공하지 않으면 미디어 라이브러리 또는 AEM Assets 저장소만 고려됩니다.
hideTreeNav 부울 아니요 자산 트리 탐색 사이드바를 표시할지 또는 숨길지 지정합니다. 모달 보기에서만 사용되므로 레일 보기에서는 이 속성이 영향을 미치지 않습니다.
onDrop 함수 아니요 이 속성은 자산의 드롭 기능을 허용합니다.
dropOptions {allowList?: Object} 아니요 “allowList”를 사용하여 드롭 옵션을 구성합니다.
colorScheme 문자열 아니요 자산 선택기에 대한 테마를 구성합니다(light 또는 dark).
handleSelection 함수 아니요 자산을 선택하고 모달의 Select 버튼을 클릭하면 자산 항목 배열과 함께 호출됩니다. 이 함수는 모달 보기에서만 호출됩니다. 레일 보기의 경우 handleAssetSelection 또는 onDrop 함수를 사용하십시오. 예: 
handleSelection=(assets: Asset[])=> {…}
자세한 내용은 선택된 자산 유형을 참조하십시오.
handleAssetSelection 함수 아니요 자산을 선택하거나 선택 취소할 때 항목 배열과 함께 호출됩니다. 이 속성은 사용자가 자산을 선택할 때 자산을 수신하려는 경우에 유용합니다. 예: 
handleSelection=(assets: Asset[])=> {…}
자세한 내용은 선택된 자산 유형을 참조하십시오.
onClose 함수 아니요 모달 보기에서 Close 버튼을 누르면 호출됩니다. 이 속성은 modal 보기에서만 호출되며 rail 보기에서는 무시됩니다.
onFilterSubmit 함수 아니요 사용자가 다른 필터 조건을 변경할 때 필터 항목과 함께 호출됩니다.
selectionType 문자열 아니요 단일 한 번에 single 자산을 선택할지 또는 multiple 자산을 선택할지에 대한 구성입니다.

자산 선택기 속성 사용 예

index.html 파일에서 자산 선택기 속성을 정의하여 애플리케이션 내 자산 선택기 표시를 사용자 정의할 수 있습니다.

예 1: 레일 보기의 자산 선택기

레일-보기-예

AssetSelector rail 값이 false로 설정되어 있거나 속성에 언급되어 있지 않는 경우 자산 선택기는 기본적으로 모달 보기에 표시됩니다.

예 2: 메타데이터 팝오버

다양한 속성을 통해 정보 아이콘을 사용하여 보려는 자산의 메타데이터를 정의합니다. 정보 팝오버는 자산의 제목, 차원, 수정일, 위치 및 설명을 포함하여 자산 또는 폴더에 대한 정보 모음을 제공합니다. 아래 예에서는 자산의 메타데이터를 표시하는 데 다양한 속성이 사용됩니다. 예를 들어 repo:path 속성은 자산의 위치를 지정합니다.

메타데이터-팝오버-예

예 3: 레일 보기의 사용자 정의 필터 속성

패싯된 검색 외에도 에셋 선택기를 사용하여 다양한 속성을 사용자 정의하여 검색 범위를 구체화할 수 있습니다 Adobe Experience Manager as a Cloud Service 응용 프로그램. 애플리케이션에 사용자 정의된 검색 필터를 추가하려면 다음 코드를 추가해야 합니다. 아래 예의 이미지, 문서 또는 비디오 중에서 자산 유형을 필터링하는 Type Filter 검색 또는 검색을 위해 추가한 필터 유형

사용자-정의-필터-예-바닐라

오브젝트 스키마를 사용한 자산 선택 처리

handleSelection 속성은 자산 선택기에서 단일 또는 다중 자산 선택을 처리하는 데 사용됩니다. 아래 예는 handleSelection의 사용 구문을 나타냅니다.

선택-처리

자산 선택기 사용하기

자산 선택기를 설정하고 Adobe Experience Manager as a Cloud Service와 자산 선택기를 사용하도록 인증되면 자산을 선택하거나 다른 다양한 작업을 수행하여 저장소 내에 있는 자산을 검색할 수 있습니다.

자산-선택기-사용

패널 숨기기/표시

왼쪽 탐색 영역에서 폴더를 숨기려면 폴더 숨기기 아이콘을 클릭합니다. 변경 내용을 실행 취소하려면 폴더 숨기기 아이콘을 다시 클릭합니다.

저장소 전환기

또한 에셋 선택기를 사용하여 에셋 선택을 위한 저장소를 전환할 수 있습니다. 왼쪽 패널에 있는 드롭다운에서 원하는 저장소를 선택할 수 있습니다. 드롭다운 목록에서 사용할 수 있는 저장소 옵션은 index.html 파일에 정의된 repositoryId 속성을 기반으로 하며, 이 속성은 로그인한 사용자가 액세스하는 선택된 IMS 조직의 환경을 기반으로 합니다. 소비자는 기본 repositoryID를 전달할 수 있으며 이 경우 자산 선택기는 저장소 전환기 렌더링을 중지하고 주어진 저장소의 자산만 렌더링합니다.

자산 저장소

작업을 수행하는 데 사용할 수 있는 자산 폴더 모음입니다.

기본 제공 필터

자산 선택기에는 검색 결과를 세분화할 수 있는 기본 필터 옵션도 제공됩니다. 사용 가능한 필터는 다음과 같습니다.

  • File type: 폴더, 파일, 이미지, 문서 또는 비디오 포함

  • MIME type: JPG, GIF, PPTX, PNG, MP4, DOCX, TIFF, PDF, XLSX 포함

  • Image Size: 이미지 최소/최대 폭, 최소/최대 높이 포함

    레일-보기-예

사용자 정의 검색

전체 텍스트 검색 외에도 에셋 선택기를 사용하여 사용자 지정된 검색을 사용하여 파일 내에서 에셋을 검색할 수 있습니다. 모달 보기 및 레일 보기 모드 모두에서 사용자 정의 검색 필터를 사용할 수 있습니다.

사용자 정의-검색

자주 검색하는 필드를 저장하고 나중에 사용할 수 있도록 기본 검색 필터를 생성할 수도 있습니다. 자산에 대한 사용자 정의 검색을 만들기 위해 filterSchema 속성을 사용할 수 있습니다.

에셋 선택기를 사용하여 선택한 저장소 내의 에셋에 대한 전체 텍스트 검색을 수행할 수 있습니다. 예를 들어 검색 창에 wave 키워드를 입력하면 메타데이터 속성에 언급된 것 중 wave 키워드가 있는 모든 자산이 표시됩니다.

정렬

자산 선택기에서 자산의 이름, 차원 또는 크기별로 자산을 정렬할 수 있습니다. 자산을 오름차순 또는 내림차순으로 정렬할 수도 있습니다.

보기 유형

에셋 선택기를 사용하여 에셋을 다음 네 가지 보기로 볼 수 있습니다.

  • 목록 보기 목록 보기: 목록 보기에는 스크롤 가능한 파일과 폴더가 단일 열에 표시됩니다.
  • 격자 보기 격자 보기: 격자 보기에는 스크롤 가능한 파일과 폴더가 행과 열의 격자로 표시됩니다.
  • 갤러리 보기 갤러리 보기: 갤러리 보기에는 파일 또는 폴더가 중앙이 잠긴 가로 목록으로 표시됩니다.
  • 워터폴 보기 워터폴 보기: 워터폴 보기에는 파일 또는 폴더가 Bridge 형태로 표시됩니다.

이 페이지에서는