설명서TargetTarget 안내서

시각적 경험 작성기 옵션

Last update: Fri Feb 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 주제:

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

IMPORTANT
업데이트된 Visual Editing Composer에는 Chrome 웹 스토어에서 사용할 수 있는 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 ​을(를) 선택합니다.

활동 설정/구성

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 아이콘( 수정 사항 표시 패널 )을 전환하여 적절한 옵션을 표시합니다.

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

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

    사용 가능한 구성 요소는 논리 컨테이너로 그룹화됩니다.

  2. 구성 요소를 Design 캔버스의 기존 페이지 요소 위로 드래그합니다.

  3. 선택한 요소 뒤에 구성 요소를 삽입하려면 선택합니다.

    이전 VEC 버전과 비교할 때 선택한 요소를 구성 요소로 바꿀 수 없습니다.

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 패널을 접을 수 있습니다. 패널 오른쪽에 있는 Show/Hide Properties 아이콘( 속성 아이콘 )을 클릭하여 Properties 패널을 축소하거나 표시합니다.

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

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

이미지 옵션

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

이미지가 선택된 VEC

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

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

  • 링크를 삽입합니다( 링크 삽입 아이콘 ).
  • 이미지를 변경합니다( 이미지 선택 아이콘 ).
  • 개인화 추가( Personalization 추가 아이콘 ).
  • 이미지를 삭제합니다( 삭제 아이콘 ).

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

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

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

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

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

텍스트 옵션

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

텍스트가 선택된 VEC

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

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

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

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

오른쪽의 Properties 패널을 통해 텍스트의 속성을 추가로 구성할 수 있습니다.

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

  • HTML( 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 아이콘 표시 )을 클릭합니다.

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

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

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

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654