[AEM Assets]{class="badge positive" title="AEM Assets에 적용됩니다)."}

Dynamic Media 여정: 기본 사항, 2부 dm-journey-part2

Dynamic Media 여정: 다음을 배울 수 있는 기본 사항, 2부

Dynamic Media 여정: 기본 사항, 파트 I도 참조하세요.

Dynamic Media URL의 구조 및 Dynamic Media가 콘텐츠를 제공하는 방법 dm-journey-d

Dynamic Media 에셋이 업로드되고 게시되면 에셋에서 생성된 URL을 복사하여 브라우저에 붙여넣어 해당 에셋이 고객에게 어떻게 표시되는지 볼 수 있습니다. 시계 이미지에 대해 다음과 같이 복사된 URL은 보다 쉽게 읽고 이해할 수 있도록 색상별로 분류됩니다.

Dynamic Media URL의
Dynamic Media URL의 구조

빨간색으로 표시된 URL의 첫 번째 부분은 서버 도메인 자체를 참조합니다. 이 경우 Dynamic Media는 일반 서버 도메인(https://s7d1.scene7.com/is/image/)에서 실행되고 있습니다. 서버 도메인을 확인하여 Dynamic Media가 이미지 집합을 제공하는지 여부를 쉽게 식별할 수 있습니다. URL 구조가 일관됩니다. 그러나 일부 Dynamic Media 고객이 name-of-your-company.scene7.com인 전용 서버 도메인으로 전환했습니다. 스마트 이미징에는 전용 서버 도메인이 필요합니다.

계정 이름은 자주색으로 된 부분입니다. 이 경우 계정을 jpearldemo이라고 합니다.

자산 ID 또는 이름 AdobeStock_28563982이(가) 녹색으로 표시되어 있습니다. 자산에 .png 또는 .jpg과(와) 같은 no 파일 확장명이 있습니다. 에셋을 Dynamic Media에 수집하면 파일 확장자가 제거되고 다른 종류의 파일이 생성됩니다. 피라미드 TIFF 파일입니다. 피라미드형 TIFF을 사용하면 Dynamic Media에서 신속하게 렌디션을 바로 만들 수 있습니다.

마지막으로 이미지 처리 매개 변수 ?wid=1000&fmt=jpeg&qlt=85이(가) 끝에 노란색으로 표시됩니다.

전체 URL 경로는 라이브입니다. 사용해 보기.

브라우저 창에서 Dynamic Media URL과 시계 이미지를 볼 수 있지만 URL을 변경하여 이미지 렌디션을 만드는 방법을 확인하십시오.

URL을 통해 시계 이미지 렌더링

먼저 URL 경로에서 이미지 처리 규칙만 수동으로 삭제하고 서버 이름, 계정 이름 및 자산 ID 또는 이미지 이름을 그대로 둡니다. 사용해 보기.

이제 URL 끝에 이미지 처리 매개 변수를 추가합니다. URL 필드에서 이미지 이름 오른쪽에 ?wid=500을(를) 입력한 다음 Enter​를 누릅니다. 사용해 보기.

시계의 새 렌디션이 생성됩니다. 이미지의 폭을 변경하는 이러한 간단한 연습을 통해 이해하는 주요 방법은 본 이미지가 100% 동적으로 생성된다는 것입니다.

이제 너비 값 500픽셀을 1000픽셀로 변경한 다음 Enter​을 누릅니다. 사용해 보기.
Enter​를 누른 후 브라우저가 Dynamic Media 이미지 서버로 돌아갑니다. 입력한 새 너비 값을 기반으로 시계의 렌디션을 생성한 다음 이미지를 브라우저에 전달하고 캐시합니다.

Dynamic Media에는 웹 페이지에서 이미지 자산을 미세 조정하는 데 사용할 수 있는 다양한 이미지 처리 매개 변수가 있습니다. 목록을 여기에서 볼 수 있습니다.

이제 시계 이미지에 회전 매개 변수를 추가해 보십시오. URL 경로의 끝에서 wid=1000 바로 다음에 &rotate=90을(를) 입력한 다음 Enter​를 누릅니다. 사용해 보기.

그 시계는 아직도 약간 왼쪽으로 기울어져 있다. 회전 값 90을(를) 92(으)로 변경한 다음 Enter​를 누릅니다. 사용해 보기.

Enter​를 누르는 순간 시계의 새 렌디션이 즉시 생성됩니다. 성능 수준을 볼 수 있습니다. 이렇게 하면 Dynamic Media가 트래픽이 많은 기간 동안 초당 개 이상의 이미지 요청을 전달할 수 있는 이유를 알 수 있습니다.

URL의 이미지 처리 매개 변수를 이미지별로 변경하는 것은 비효율적입니다. 특히 수천 개의 이미지가 있는 웹 사이트의 경우 더욱 그렇습니다. 이미지 사전 설정을 사용하는 것이 훨씬 좋습니다.

자산 렌더링용 이미지 사전 설정 만들기의 기본 사항 dm-journey-e

이미지를 만드는 방법에는 여러 가지가 있습니다. 이미지를 사용할 수 있도록 하려는 경우 일반적으로 크리에이티브 전문가는 Adobe Photoshop으로 이동하여 이러한 다양한 렌디션을 각각 정적 이미지로 저장합니다.

좋음: 각각 수동으로 만든 정적 이미지입니다.

이제 창조적인 리더가 이미지를 보고 이렇게 말한다고 상상해 보세요.

“큰 손이 4개를 가리키고 작은 손이 1을 가리키도록 하여 시계 다이얼을 더 쉽게 볼 수 있게 하고 싶었습니다.”

그 창조물은 모든 새로운 정적인 이미지를 재촬영한다.

그러나 Dynamic Media를 사용하면 다른 이미지 사전 설정이 있는 경우 필요할 때마다 이러한 이미지를 사용할 수 있습니다. 이미지 사전 설정은 표준을 적용합니다.

최상: Search_Grid 및 Thumbnail과 같은 이미지 사전 설정을 사용하여 즉석에서 만들어지는 여러 표현물이 있는 파일 하나.

특정 유형의 이미지를 보유해야 하는 모든 위치(예:

사용되는 모든 위치에 동일한 매개 변수와 함께 해당 이미지를 전달하려고 합니다.

잠시 Dynamic Media에서 이미지 사전 설정을 만드는 방법을 살펴보겠습니다.

기본 탭으로 시작하는 이미지 사전 설정을 만드는 중입니다.

위의 예에서는 이름이 Medium​인 새 이미지 사전 설정을 만든 것을 볼 수 있습니다. Dynamic Media는 예제 기본 제공 이미지(배낭)를 사용하여 이미지 사전 설정을 만들 때 이미지 특성을 볼 수 있도록 합니다.

Medium 이미지 사전 설정의 너비는 500픽셀이고 높이는 800픽셀입니다. 이 여정의 Part I에서 에셋을 다양한 형식으로 제공하는 방법에 대해 읽었습니다. 형식 풀다운 메뉴에서 자산을 JPEG, PNG, TIFF 또는 기타 여러 형식으로 전달하도록 선택할 수 있습니다. 여기는 융통성이 있으시군요.

고급 탭을 선택하면 에셋의 색상 공간에 대한 옵션이 제공됩니다. 기본 탭에서 선택한 형식에 따라 RGB, 회색 음영 또는 CMYK로 자산을 전달할 수 있습니다. 색상 프로필 풀다운 메뉴를 사용하여 인쇄할 CMYK 이미지 자산을 전달하는 방법을 선택하십시오. 이미지를 선명하게 하기 위해 적용할 수 있는 추가 매개 변수도 있습니다. 이 경우 언샵 마스크​가 적용되었습니다.

고급 탭에서 옵션을 선택하여 이미지 사전 설정을 만듭니다.

이전에 Dynamic Media URL의 구조에서 Dynamic Media URL과 이 URL의 빌드 방법에 대해 읽은 것을 상기했습니다. 이미지 수정자 텍스트 상자에 원하는 추가 이미지 처리 매개 변수를 입력할 수 있습니다. 매개 변수는 사전 설정을 사용하여 이미지가 전달될 때 URL의 사전 설정 이름에 포함됩니다. 위의 스크린샷에 bgc=451B15 매개 변수가 추가되었습니다. 즉, 어두운 갈색의 배경색을 추가하였다.

이미지 사전 설정은 이미지에 대한 구성으로 생각할 수 있습니다. 이 설정은 항상 사전 설정을 일관되게 사용하는 모든 이미지를 전달합니다. 이는 동일합니다. 밝기를 약간 늘리기 위해 매개 변수 &op_brightness=+10도 추가되었습니다.

완료되면 사전 설정을 저장하면 이제 보유한 모든 이미지에 사용할 수 있습니다. 이 경우 Medium 이미지 사전 설정을 액체 초콜릿 그릇의 이미지에 적용하려고 합니다.

이미지 렌디션을 생성하려면 이미지 사전 설정 Medium을 적용하세요.

이미지의 모양을 확인하려면 URL을 복사하여 브라우저에 붙여넣습니다. 사용해 보기.

브라우저에서 전체 URL 경로에 있는 이미지 사전 설정 Medium​의 이름을 확인합니다.

이미지에 표시되는 선명도 종류를 확인할 수 있습니다. 그 품질은 부분적으로 초콜릿 그릇을 찍은 방식 때문입니다. 또한 Dynamic Media를 사용하면 디지털 채널에 제공되는 이미지보다 더 큰 이미지를 저장할 수 있기 때문입니다.

모든 것이 초콜릿 그릇에 만족스럽게 보이는 경우 웹 페이지에 이미지를 표시할 URL을 붙여 넣습니다.

아래 시계 이미지를 다시 보면 Cart 이미지 사전 설정, Grid 사전 설정, Large 사전 설정, PDP-page(제품 세부 정보 페이지) 사전 설정 등이 있습니다.

정적 및 동적 이미지 사전 설정. 시계 이미지가 PDP-page 이미지 사전 설정을 사용하여 렌더링되었습니다.

하지만 만약 웹사이트의 이미지를 변경해야 한다면? 예를 들어 테스트를 수행한 결과 120 x 120의 이미지(Cart 이미지 사전 설정)가 생각대로 인식되지 않는다고 가정합시다. 너비를 175픽셀로 늘리고 높이를 175픽셀로 늘려 이미지 크기를 늘립니다. 일반적으로 Adobe Photoshop으로 이동하여 이러한 모든 장바구니 이미지를 다시 만듭니다. 하지만 Dynamic Media를 사용하면 아래 예와 같이 [폭] 및 [높이] 값을 175로 업데이트하여 이미지 사전 설정을 편집하고 사전 설정을 저장할 수 있습니다.

Cart 이미지 사전 설정의 너비와 높이를 편집하는 중입니다.

이미지 사전 설정을 변경하고 캐시를 지우면 모든 이미지가 업데이트되고, 해당 사전 설정과 함께 사용 중인 모든 URL은 아무 곳에서도 변경하지 마십시오. 즉, 링크가 끊기지 않고 웹 페이지 리디렉션이 필요하지 않습니다.

이미지 세트, 스핀 세트 및 혼합 미디어 세트 dm-journey-f

Dynamic Media의 가장 일반적인 용도 중 일부는 이미지 세트, 스핀 세트 및 혼합 미디어 세트를 만들 수 있는 기능입니다.

이미지 세트는 일반적으로 단일 엔티티로 표시되는 일련의 이미지 에셋으로 구성됩니다. 이러한 종류의 세트는 사용자에게 썸네일 이미지를 클릭하여 항목의 다양한 보기를 볼 수 있는 통합된 보기 환경을 제공합니다. 이미지 집합을 사용하면 대체 보기를 표시할 수 있으며 뷰어는 이미지를 면밀하게 검사하는 확대/축소 도구를 제공합니다. 플라이아웃 뷰어를 사용하는 "실행 중"이라는 이미지 집합을 봅니다.

여기 Dynamic Media 내에서 운동화의 여러 이미지를 볼 수 있습니다. 영업 및 마케팅 부서에서 하나의 프레젠테이션(이미지 세트)으로 볼 수 있도록 하는 제품 라인 시리즈입니다.

이미지 집합 만들기를 시작합니다.

이미지 집합을 만들려면 만들기 풀다운 메뉴에서 이미지 집합​을(를) 선택합니다. 혼합 미디어 집합, 회전 집합 및 회전 메뉴 집합​을 만드는 옵션도 있습니다. 이러한 세트는 이미지 세트와 매우 동일한 방식으로 만듭니다.

혼합 미디어 세트에는 이미지, 견본 세트, 스핀 세트, 비디오 및 응용 비디오 세트가 포함될 수 있습니다. 사용해 보기. 회전 집합을 사용하면 사용자가 개체를 회전하고 검사할 수 있습니다. 스핀 세트를 사용하면 모든 각도에서 주요 시각적 세부 사항을 볼 수 있습니다. 사용해 보기.

이미지 세트를 만드는 것은 간단합니다. 세트에 포함할 이미지 에셋을 추가합니다.

이미지 집합 편집기를 사용하여 이미지 에셋을 추가하고 집합 내의 모양 순서를 변경할 수 있습니다.

세트의 이름을 지정해야 합니다. 나중에 편집할 수 없으므로 이름을 신중하게 선택하십시오. 위의 예에서 집합 이름은 Running입니다. 완료되면 세트를 저장합니다.

Experience Manager Assets에 설정된 Running 이미지입니다.

Experience Manager Assets, 카드 보기에서 설정된 Running 이미지

이미지 세트, 혼합 미디어 세트, 스핀 세트 또는 기타 대화형 미디어를 만든 후 고객을 위해 표시되고 작동하는 방식을 미리 봅니다. Dynamic Media에는 이를 수행할 수 있는 많은 기본 제공 뷰어가 있습니다.

다음 예제와 같이 미리 보기에서 열려면 이미지 세트를 선택하는 것부터 시작합니다.

Viewers 옵션을 선택한 미리 보기에서 설정된 Running 이미지.

미리 보기에서 실행 중인 신발 견본을 선택하고 신발을 확대하거나 축소할 수 있습니다. 세트에 뷰어를 적용하려면 풀다운 메뉴에서 뷰어​를 선택합니다.

플라이아웃 뷰어가 적용된 Running 이미지 집합입니다.

이 경우 Flyout 뷰어가 선택되었습니다. 이 시점에서 뷰어에 설정된 이미지를 미리 볼 수 있습니다. 하지만 고객이 볼 때 브라우저에서 보는 것이 가장 좋습니다. 왼쪽 아래에서 URL​을(를) 선택한 다음 URL을 복사하여 브라우저에 붙여넣습니다. 사용해 보기.

단일 URL을 사용하면 웹 사이트에서 필요한 이미지 세트와 뷰어를 사용할 수 있습니다. 앞의 예제에서 Embed​이(가) URL 단추 오른쪽에 있음을 알 수 있습니다. 포함​을 선택하면 이 이미지 집합/뷰어의 코드를 복사하여 웹 페이지나 Experience Manager Sites 구성 요소에 추가할 수 있습니다.

플라이아웃 뷰어는 속성을 편집할 수 있는 기본 표준 뷰어입니다. 또는 이미지 사전 설정 만들기와 같이 자신만의 사용자 지정 뷰어를 만들 수 있습니다.

이제 영업 및 마케팅 팀이 플라이아웃 뷰어를 선호하지 않는다고 가정해 봅시다. 그들은 줌 기능을 좋아하지만 고객들이 신발 위로 바로 줌 효과를 보기를 원합니다. 이러한 경우 이미지 세트에 InlineZoom 뷰어를 적용하고 해당 URL을 복사하여 브라우저에 붙여넣어 작동 방식을 확인합니다. 사용해 보기.

마우스 포인터를 신발 위로 이동하면 이미지가 확대되며 포인터를 이동하면 더 자세한 내용을 볼 수 있습니다. 이러한 확대/축소 효과는 처음에 Dynamic Media에 업로드된 이미지 크기 때문입니다.

고객으로서의 역할, 또는 직업적 역할로 업무에 종사하면서 다양한 웹 사이트를 방문함에 따라, 이러한 기능의 예를 볼 수 있습니다. 이를 수행하는 방법과 자체 작업 및 회사 웹 사이트에서 Dynamic Media의 기능을 사용하는 방법을 생각해 보십시오.

이미지 집합 및 뷰어에 대해 읽습니다. 두 명의 다른 시청자를 보고 단일 자산에 대해 시도해 보겠습니다. 뷰어를 재설정하려면 왼쪽 하단의 새로 고침 단추를 클릭하십시오.

선택 사항 - 자세히 알아보기

읽은 내용에 대해 자세히 알아보려면 아래 자료를 사용하여 개념을 자세히 살펴보십시오. 그렇지 않으면 Dynamic Media 여정이 완료됩니다!

Dynamic Media 튜토리얼

Dynamic Media 뷰어