시각적 경험 작성기 옵션

Last update: Thu Jun 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

주제:

Adobe Target Standard/Premium 25.2.1 릴리스(2015년 2월 17일)에서는 업데이트된 Visual Experience Composer(VEC)이 도입되었습니다. 이 문서에서는 업데이트된 UI 및 해당 옵션에 대해 설명합니다.

TIP

업데이트된 VEC가 기존 VEC와 어떻게 다른지 알아보려면 시각적 경험 작성기 변경 사항을 참조하십시오.

IMPORTANT

업데이트된 Visual Editing Composer에는 Chrome Web Store에서 사용할 수 있는 Adobe Experience Cloud Visual Editing Helper 확장이(가) 필요합니다.

VEC는 기존 활동을 작성하거나 편집할 때 표시됩니다.

VEC(시각적 경험 작성기)

VEC UI 개요

다음 섹션에서는 A/B Test 활동에 대해 업데이트된 VEC에서 사용할 수 있는 옵션에 대해 설명합니다. 옵션은 활동 유형에 따라 다릅니다.

Experiences 레일

Experiences 레일이 VEC의 왼쪽 레일에 표시됩니다.

경험 레일

Experiences 레일을 사용하여 경험을 보거나, 만들거나, 이름을 바꾸거나, 제거할 수 있습니다.

Experiences 레일에서 다음 옵션을 사용할 수 있습니다.

경험 보기: 경험을 보려면 원하는 경험을 클릭하여 Design 캔버스에 표시하십시오.
경험 추가: Add 아이콘( )을 클릭하여 새 경험을 추가합니다. 원하는 대로 새 경험을 구성합니다.
경험 이름 바꾸기: Rename 아이콘( )을 클릭하여 Rename Experience 대화 상자를 표시합니다. 새 이름을 지정한 다음 Save 을(를) 클릭합니다.
경험 복제, 삭제 또는 리디렉션: More Actions 아이콘( )을 클릭한 다음 Duplicate, Delete 또는 Redirect to URL 을(를) 선택합니다.

활동 설정/구성 settings

Design 캔버스 위에 표시된 Configure 아이콘( )을 클릭하여 활동 속성 메뉴를 표시합니다.

활동 구성 옵션

다음 옵션을 사용할 수 있습니다.

Properties: 활동에 속성을 할당하거나 활동에서 속성을 제거합니다. Properties은(는) (Target Premium 기능입니다. 자세한 내용은 엔터프라이즈 사용자 권한을 참조하십시오.
Page Delivery: 사이트의 유사한 페이지에 동일한 경험을 포함하십시오. 페이지 템플릿을 사용하여 페이지에 구조를 제공하거나 페이지에 유사한 요소가 포함되어 있는 경우 유사한 구조의 페이지 요소에서 또는 전체 도메인에서 변형을 테스트할 수 있습니다. 자세한 내용은 유사한 페이지에 동일한 경험 포함을 참조하십시오.
Site Preferences: 사이트 환경 설정을 구성하여 Target에서 CSS 선택기를 생성하는 방법을 지정하십시오. 자세한 내용은 구성 Visual Experience Composer의 CSS 선택기 를 참조하십시오.
추가 페이지 추가: 활동에 페이지를 추가하여 여러 페이지에 걸쳐 각 페이지별 디자인을 사용하여 스토리를 만들 수 있는 다중 페이지 활동을 만듭니다. 자세한 내용은 다중 페이지 활동을 참조하세요.
단일 대상: 활동에 단일 대상을 사용합니다.
여러 대상: 활동에 여러 대상을 할당합니다. 대상자 추가 아이콘( )을 클릭한 다음, 목록에서 대상자를 하나 이상 선택합니다. Add Audiences 대화 상자에서 대상을 결합하거나 새 대상을 만들기할 수도 있습니다.

Design/Browse 모드

디자인 캔버스 위에 표시된 Design/Browse 전환을 사용하여 디자인과 찾아보기 모드 간에 전환합니다.

디자인 및 찾아보기 전환

Browse 모드를 사용하여 사이트를 탐색하고 업데이트할 보기 또는 페이지를 선택하십시오. 변경 내용을 추가하거나 편집하려면 Design 모드로 다시 전환하십시오.

Undo/Redo

Undo 아이콘( )을 클릭하여 변경 내용을 실행 취소할 수 있습니다.

VEC의 실행 취소 아이콘

작업을 다시 실행하려면 실행 취소/Redo 단추 그룹을 확장하고 Redo을(를) 선택합니다.

Components 레일

새 Components 레일을 사용하여 웹 페이지에 여러 구성 요소를 추가하고 필요에 따라 편집할 수 있습니다.

구성 요소 레일

NOTE

이 영역에 Components 레일 대신 Modifications 레일이 표시되면 Show Components 아이콘(

)을 클릭합니다. Show Components 아이콘(

)과 Show Modifications 아이콘(

)은 적절한 옵션을 표시하도록 전환합니다.

경험에 새 구성 요소를 추가하려면 다음 작업을 수행하십시오.

추가하려는 구성 요소를 클릭하여 강조 표시합니다.

사용 가능한 구성 요소는 논리 컨테이너로 그룹화됩니다.
- Basic
  - Divider
  - HTML
  - Image
- Text
  - Heading
  - Paragraph
  - Link
- Dynamic
구성 요소를 Design 캔버스의 기존 페이지 요소 위로 드래그합니다.
선택한 요소를 바꾸거나 선택한 요소 뒤에 구성 요소를 삽입하도록 선택합니다.

Modifications 레일

Modifications 레일을 열려면 Components 레일에서 Show Modifications 아이콘( )을 클릭합니다.

수정 레일

NOTE

Show Components 아이콘(

)과 Show Modifications 아이콘(

)은 적절한 옵션을 표시하도록 전환합니다.

Modifications 레일에는 Visual Experience Composer(VEC)에서 페이지에 적용된 모든 변경 내용이 표시되며 추가 변경을 수행할 수 있습니다(CSS 선택기, Mbox, 사용자 지정 코드 등).

수정 사항을 추가하거나, 모든 수정 사항을 삭제하거나, 모든 잘못된 수정 사항을 삭제하려면 레일 헤더의 More Options 아이콘( )을 클릭하십시오. 대량 작업을 수행하려면 Select을(를) 클릭하십시오. Apply to All Pages 또는 Delete.

각 수정 사항 옆의 More Options 아이콘( )을 클릭하여 해당 정보를 보거나, 수정 사항을 삭제하거나, 수정 사항을 더 많은 보기에 적용합니다.

Design 캔버스

Design 캔버스를 사용하면 화면 맞춤, Desktop, Tablet, Mobile Landscape 및 Mobile Portrait을(를) 포함한 뷰포트를 선택할 수 있습니다. 기본적으로 캔버스는 관리 섹션에 정의된 뷰포트와 함께 페이지에 맞게 화면에 표시됩니다.

뷰포트 옵션

적절한 아이콘( 또는 )을 클릭하여 확대하거나 축소할 수도 있습니다.

Design 캔버스에서 페이지 요소를 클릭하면 메뉴에 해당 요소 유형에 사용할 수 있는 옵션이 표시됩니다. 또한 페이지 구조를 쉽게 탐색할 수 있는 DOM 경로가 페이지 하단에 표시됩니다.

다양한 Visual Experience Composer(VEC) 작업은 작업을 보다 빠르고 효율적으로 수행할 수 있도록 적절한 메뉴 옵션으로 그룹화됩니다.

VEC 선택 사항 메뉴

NOTE

사용 가능한 옵션은 만들거나 편집하는 활동 유형과 요소에 따라 다릅니다. A/B Test 활동에서 이미지 및 오퍼 편집에 대한 자세한 내용은 아래의 캔버스를 사용하여 요소 편집을 참조하십시오.Design

Properties 레일

Properties 레일을 사용하면 해당 요소가 HTML 요소인지 또는 Target과(와) 관련된 개체(예: 권장 사항 또는 오퍼)인지 여부에 관계없이 페이지에서 선택한 요소의 속성을 변경할 수 있습니다.

속성 레일

레일 상단의 아이콘을 클릭하여 HTML 코드를 편집하거나 요소를 삭제, 복제 또는 숨깁니다. Modifications 레일에 변경 내용이 나타납니다.

오른쪽 레일에서 Properties 레일을 접을 수 있습니다. Properties 레일을 축소하거나 표시하려면 레일의 오른쪽에 있는 Show/Hide Properties 아이콘( )을 클릭합니다.

Design 캔버스를 사용하여 요소 편집 design

다음 단원에서는 Design 캔버스에서 이미지와 텍스트를 편집하는 방법을 보여 줍니다. 구성 요소, 수정 사항 및 속성 레일과 함께 디자인 캔버스에서는 활동을 위한 경험을 쉽게 만들 수 있는 강력한 도구를 제공합니다.

이미지 옵션

A/B Test 활동에서 이미지를 클릭하면 VEC가 다음 그림과 유사합니다.

이미지가 선택된 VEC

다음 요소를 삽입하려면 왼쪽의 Components 프레임에서 구성 요소를 선택하십시오.

기본(구분선, HTML, 이미지).
텍스트(제목, 단락, 링크).
동적(권장 사항, 경험 조각, HTML 오퍼).

이미지 맨 위에 있는 메뉴를 사용하여 다음을 수행할 수 있습니다.

링크를 삽입합니다( ).
이미지를 변경합니다( ).
개인화 추가( ).
이미지를 삭제합니다( ).

오른쪽의 Properties 창을 사용하면 이미지의 속성을 추가로 구성할 수 있습니다.

프레임 상단의 아이콘을 사용하면 다음 작업을 수행할 수 있습니다.

HTML( )를 편집합니다. 자세한 내용은 아래 HTML 편집을 참조하십시오.
이미지를 복제합니다( ).
이미지를 삭제합니다( ).
이미지를 숨깁니다( ).

오른쪽 프레임의 옵션을 사용하면 다음 작업을 수행할 수 있습니다.

CSS 클래스를 편집합니다.
이미지의 속성(소스, 제목, 대체 텍스트)을 구성합니다.
링크 URL을 편집합니다.
이미지의 크기(높이 및 너비)를 구성합니다. 이미지의 최소 및 최대 크기, 너비, 높이, 오버플로 및 개체 맞춤을 구성하려면 Show Advanced Options을(를) 클릭하십시오.
페이지에서 이미지의 위치(절대, 고정, 상대, 정적 또는 고정)를 구성합니다.
여백 및 패딩을 포함하여 요소의 간격을 구성합니다.
요소의 효과(불투명도)를 구성합니다. 이미지의 세피아, 회색 음영, 대비, 밝기 및 흐림 값을 구성하려면 Show Advanced Options을(를) 클릭합니다. 이미지를 반전하거나 회전할 수도 있습니다.
이미지의 인라인 스타일을 구성합니다.

텍스트 옵션

A/B Test 활동에서 텍스트를 클릭하면 VEC가 다음 그림과 유사합니다.

텍스트가 선택된 VEC

다음 요소를 삽입하려면 왼쪽의 Components 프레임에서 구성 요소를 선택하십시오.

기본(구분선, HTML, 이미지).
텍스트(제목, 단락, 링크).
동적(권장 사항, 경험 조각, HTML 오퍼).

Show Modifications 아이콘( )을 클릭하여 경험에 대한 수정 사항을 표시합니다.

텍스트 요소의 맨 위에 있는 메뉴를 사용하여 다음을 수행할 수 있습니다.

텍스트 속성(제목 수준, 단락, 블록 인용 또는 고정 폭) 구성
텍스트 색상 선택( )
텍스트의 특성(굵게, 기울임꼴, 밑줄 또는 취소선)을 구성합니다( ).
텍스트의 맞춤을 구성합니다(왼쪽, 가운데, 오른쪽, 양쪽 맞춤)( ).
링크를 삽입합니다( ).
콘텐츠를 HTML 오퍼, 경험 조각 또는 권장 사항(으)로 바꾸십시오.
HTML( )를 편집합니다.
개인화 추가( ).
이미지를 삭제합니다( ).

오른쪽의 Properties 레일을 사용하여 텍스트의 속성을 추가로 구성할 수 있습니다.

프레임 상단의 아이콘을 사용하면 다음 작업을 수행할 수 있습니다.

HTML( )를 편집합니다. 자세한 내용은 아래 HTML 편집을 참조하십시오.
텍스트를 복제합니다( ).
텍스트를 삭제합니다( ).
텍스트를 숨깁니다( ).

오른쪽 프레임의 옵션을 사용하면 다음 작업을 수행할 수 있습니다.

CSS 클래스를 편집합니다.
텍스트의 배경색 및 이미지를 구성합니다.
텍스트의 타이포그래피(제목 스타일, 글꼴 크기, 글꼴 두께, 줄 높이, 정렬, 텍스트 색상, 텍스트 스타일(굵게, 기울임꼴, 밑줄 또는 취소선) 구성
글머리 기호, 번호 매기기 또는 A,B,C를 포함한 목록을 구성합니다.
테두리 색상을 선택합니다.
텍스트 상자의 크기(높이 및 너비)를 구성합니다. Show Advanced Options을(를) 클릭하여 텍스트 상자의 최소 및 최대 크기, 너비, 높이, 오버플로 및 개체 맞춤을 구성합니다.
페이지에서 텍스트 상자의 위치(절대, 고정, 상대, 정적 또는 고정)를 구성하고 위쪽, 오른쪽, 아래쪽 및 왼쪽에서 픽셀 수를 설정합니다.
여백 및 패딩을 포함하여 요소의 간격을 구성합니다.
요소의 효과(불투명도)를 구성합니다. 이미지의 세피아, 회색 음영, 대비, 밝기 및 흐림 값을 구성하려면 Show Advanced Options을(를) 클릭합니다. 텍스트를 반전하거나 회전할 수도 있습니다.
인라인 스타일을 구성합니다.

HTML 편집

HTML 코드 외에도, 사용자 지정 자바스크립트를 편집하고 삽입할 수 있습니다.

A/B 및 Experience Targeting 활동에 대해 텍스트와 HTML을 편집할 때 여러 서식 있는 텍스트 서식 옵션을 사용할 수 있습니다. 글꼴을 선택하고, 글꼴 스타일을 선택하고, 텍스트 정렬을 변경하고, 기타 표준 텍스트 서식 옵션을 사용할 수 있습니다. HTML을 수정할 때 HTML의 코드 보기와 리치 편집 보기 간에 전환할 수 있습니다.

다음 HTML5 태그를 중첩할 수 있습니다.

태그

허용된 중첩 태그

<a>

<h1-h6>, <p>, <ul>, <ol>, <menu>, <div>, <figure>, <figcaption>

<ins>

<h1-h6>, <p>, <ul>, <ol>, <menu>

<del>

<ul>, <ol>, <menu>, <h1-h6>, <p>

<label>

<p>

DOM 경로를 사용하여 요소 탐색 dom-path

페이지에서 요소를 클릭하면 VEC 옵션 메뉴가 표시됩니다. 또한 요소를 클릭하면 해당 DOM 경로가 페이지 하단에 표시됩니다.

DOM 경로

DOM 경로가 표시되지 않으면 Show DOM 아이콘( )을 클릭합니다.

DOM 경로를 사용하여 선택한 요소(유형, ID 및 클래스)에 대한 정보를 빠르게 확인하고, DOM 경로로 위 또는 아래로 이동하여 원하는 요소를 선택할 수 있습니다.

DOM 경로를 사용하여 VEC 내에서 상위 요소, 동일 수준의 요소 또는 하위 요소로 손쉽게 이동할 수 있습니다.

DOM 경로 기능은 클릭 추적을 설정할 때도 사용할 수 있습니다.

업데이트된 UI에 대한 추가 정보

Target Standard/Premium 25.2.1(2025년 2월 17일) 릴리스 정보: Activities, Recommendations 및 Visual Experience Composer(VEC)에 대한 Target의 주요 UI 변경 사항에 대한 요약을 제공합니다.
Target Standard/Premium 25.1.1(2025년 1월 9일) 릴리스 정보: Offers Library에 대한 Target의 주요 UI 변경 사항에 대한 요약을 제공합니다.
UI 이해 Target UI: Target에 익숙해지는 데 도움이 되는 간단한 개요를 제공하고 자세한 정보와 단계별 지침을 제공하는 링크를 제공합니다.
Visual Experience Composer 변경 내용: Adobe Target Standard/Premium 25.2.1 릴리스(2015년 2월 17일)에서는 업데이트된 Visual Experience Composer(VEC)이 도입되었습니다. 이 문서에서는 VEC의 기존 버전과 업데이트된 버전의 차이점에 대해 설명합니다.
Visual Experience Composer 옵션: 이 문서에서는 업데이트된 VEC UI 및 해당 옵션에 대해 설명합니다.
Target UI 업데이트 FAQ: 이 FAQ는 탐색 변경, 기능 위치 및 임시 UI 버전 전환 중단 등 새 Target UI 및 Visual Experience Composer(VEC)에 대한 일반적인 질문을 해결합니다. 마케터, 개발자 또는 관리자이든, 이 FAQ는 원활하게 전환하고 업데이트된 UI를 최대한 활용하는 데 도움이 됩니다.

recommendation-more-help

3d9ad939-5908-4b30-aac1-a4ad253cd654