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

Last update: Wed Apr 09 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

관리자
사용자

^신규 Dynamic Media Prime 및 Ultimate

^신규 AEM Assets Ultimate

^신규 Edge Delivery Services와의 AEM Assets 통합

^신규 UI 확장성

^신규 Dynamic Media Prime 및 Ultimate 활성화

모범 사례 검색

메타데이터 모범 사례

Content Hub

OpenAPI 기능이 포함된 Dynamic Media

AEM Assets 개발자 설명서

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

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

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

Vanilla JavaScript 라이브러리를 사용하여 Adobe 애플리케이션 또는 Adobe 이외의 애플리케이션과 쉽게 통합할 수 있습니다.
자산 선택기 패키지에 대한 업데이트가 애플리케이션에서 사용할 수 있는 자산 선택기에 자동으로 배포되므로 유지 관리가 간편합니다. 최신 수정 사항을 로드하기 위해 애플리케이션 내에서 업데이트를 수행하지 않아도 됩니다.
애플리케이션 내에서 자산 선택기 표시를 제어하는 속성을 통해 손쉽게 사용자 정의할 수 있습니다.
전체 텍스트 검색, 기본 제공 및 사용자 정의 필터를 통해 작성 경험 내에서 사용할 자산을 빠르게 탐색할 수 있습니다.
IMS 조직 내에서 저장소를 전환하여 자산을 선택할 수 있습니다.
자산을 이름, 차원 및 크기별로 정렬하고 목록 보기, 격자 보기, 갤러리 보기 또는 워터폴 보기로 볼 수 있습니다.

전제 조건 prereqs

다음 커뮤니케이션 방법을 보장해야 합니다.

호스트 응용 프로그램이 HTTPS에서 실행 중입니다.
localhost에서 응용 프로그램을 실행할 수 없습니다. 로컬 컴퓨터에서 자산 선택기를 통합하려면 [https://<your_campany>.localhost.com:<port_number>]과(와) 같은 사용자 지정 도메인을 만들고 이 사용자 지정 도메인을 redirectUrl list에 추가해야 합니다.
각 imsClientId을(를) 사용하여 clientID를 구성하고 AEM 클라우드 서비스 환경 변수에 추가할 수 있습니다.
환경 구성에서 IMS 범위 목록을 정의해야 합니다.
애플리케이션의 URL이 IMS 클라이언트가 허용하는 리디렉션 URL 목록에 있습니다.
IMS 로그인 흐름은 웹 브라우저의 팝업을 사용하여 구성 및 렌더링됩니다. 따라서 타깃 브라우저에서 팝업을 활성화하거나 허용해야 합니다.

자산 선택기의 IMS 인증 워크플로가 필요한 경우 위의 전제 조건을 사용합니다. 또는 이미 IMS 워크플로로 인증된 경우 대신 IMS 정보를 추가할 수 있습니다.

더 보기

IMPORTANT

이 저장소는 자산 선택기를 통합하는 데 사용할 수 있는 API와 사용 예를 설명하는 추가 문서로 사용할 수 있습니다. 자산 선택기를 설치하거나 사용하기 전에 조직에서 Experience Manager Assets as a Cloud Service 프로필의 일부로 자산 선택기에 대한 액세스 권한을 프로비저닝했는지 확인합니다. 프로비저닝되지 않은 경우 이러한 구성 요소를 통합하거나 사용할 수 없습니다. 프로비저닝을 요청하려면 프로그램 관리자가 Admin Console에서 P2로 표시된 지원 티켓을 올리고 다음 정보를 포함해야 합니다.

통합 애플리케이션이 호스팅되는 도메인 이름.
프로비저닝 후 조직에 자산 선택기 구성에 필수적인 요청 환경에 해당하는 imsClientId, imsScope 및 redirectUrl이 제공됩니다. 이러한 유효한 속성이 없으면 설치 단계를 실행할 수 없습니다.

설치 installation

자산 선택기는 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'

자산 선택기 사용하기 using-asset-selector

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

자산-선택기-사용

A: 패널 숨기기/표시
B: 저장소 전환기
C: 자산
D: 필터
E: 검색 창
F: 정렬
G: 오름차순 또는 내림차순으로 정렬
H: 보기

패널 숨기기/표시 hide-show-panel

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

저장소 전환기 repository-switcher

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

자산 저장소

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

기본 제공 필터 filters

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

상태: all, approved, rejected 또는 no status 중 자산의 현재 상태를 포함합니다.
파일 유형: folder, file, images, documents 또는 video을 포함합니다.

만료 상태: 만기 기간을 기준으로 자산을 나타냅니다. Expired 확인란을 선택하여 만료된 자산을 필터링하거나 만료 기간을 기준으로 자산을 표시하도록 자산의 Expiration Duration을 설정할 수 있습니다. 자산이 이미 만료되었거나 곧 만료될 예정인 경우 배지에 해당 내용이 표시됩니다. 또한 만료된 자산의 사용(또는 드래그 앤 드롭)을 허용할지 여부를 제어할 수 있습니다. 만료된 자산 사용자 정의에 대한 자세한 내용을 참조하십시오. 기본적으로 30일 이내에 만료되는 자산의 경우 곧 만료됨 배지가 표시됩니다. 그러나 expirationDate 속성을 사용하여 만료를 구성할 수 있습니다.

note tip
TIP
향후 만기일을 기준으로 자산을 보거나 필터링하려면 `Expiration Duration` 필드의 미래 날짜 범위를 입력합니다. 자산에 곧 만료됨 배지가 표시됩니다.