설명서TargetTarget 안내서

시각적 경험 작성기 옵션

마지막 업데이트: 2026년 9월 30일

Adobe Target Standard/Premium 25.2.1 릴리스(2015년 2월 17일)에서는 업데이트된 시각적 경험 작성기​(VEC)가 도입되었습니다. 이 문서에서는 업데이트된 UI 및 해당 옵션에 대해 설명합니다.

TIP
업데이트된 VEC가 기존 VEC와 어떻게 다른지 알아보려면 시각적 경험 작성기 변경 사항을 참조하십시오.
IMPORTANT
업데이트된 시각적 편집 작성기에는 Chrome Web Store에서 사용할 수 있는 Adobe Experience Cloud 시각적 편집 도우미 확장이 필요합니다.

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

VEC(시각적 경험 작성기)

VEC UI 개요

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

경험 레일

경험 레일은 VEC의 왼쪽 레일에 표시됩니다.

경험 레일

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

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

  • 경험 보기: 경험을 보려면 원하는 경험을 클릭하여 디자인 캔버스에 표시하십시오.
  • 경험 추가: 추가 아이콘( 추가 아이콘 )을 클릭하여 새 경험을 추가합니다. 원하는 대로 새 경험을 구성합니다.
  • 경험 이름 바꾸기: 이름 바꾸기 아이콘( 이름 바꾸기 아이콘 )을 클릭하여 경험 이름 바꾸기 대화 상자를 표시합니다. 새 이름을 지정한 다음 저장​을 클릭합니다.
  • 경험을 복제, 삭제 또는 리디렉션합니다: 추가 작업 아이콘( 추가 작업 아이콘 )을 클릭한 다음 복제, 삭제 또는 URL로 리디렉션​을 선택합니다.

활동 설정/구성 settings

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

활동 구성 옵션

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

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

디자인/찾아보기 모드

디자인 캔버스 위에 표시되는 디자인/찾아보기 전환을 사용하여 디자인과 찾아보기 모드를 전환하십시오.

디자인 및 찾아보기 전환

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

실행 취소/다시 실행

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

VEC의 실행 취소 아이콘

작업을 다시 실행하려면 실행 취소/다시 실행 단추 그룹을 확장하고 다시 실행을 선택하세요.

구성 요소 레일

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

구성 요소 레일

NOTE
이 영역에 구성 요소 레일 대신 수정 사항 레일이 표시되면 구성 요소 표시 아이콘( 구성 요소 표시 아이콘 )을 클릭합니다. 구성 요소 표시 아이콘( 구성 요소 표시 아이콘 )과 수정 사항 표시 아이콘( 수정 사항 표시 레일 )은 적절한 옵션을 표시하도록 전환합니다.
구성 요소 레일이 열려 있는 동안 구성 요소 레일을 축소하고 디자인 캔버스를 확대하려면 ( 구성 요소 표시 아이콘 ) 아이콘을 클릭합니다.

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

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

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

  2. 구성 요소를 디자인 캔버스의 기존 페이지 요소 위로 끌어서 놓습니다.

  3. 선택한 요소를 바꾸거나 선택한 요소 뒤에 구성 요소를 삽입하도록 선택합니다.

수정 레일

수정 사항 레일을 열려면 구성 요소 레일에서 수정 사항 표시 아이콘( 수정 사항 표시 레일 )을 클릭합니다.

수정 레일

NOTE
구성 요소 표시 아이콘( 구성 요소 표시 아이콘 )과 수정 사항 표시 아이콘( 수정 사항 표시 레일 )은 적절한 옵션을 표시하도록 전환합니다.
수정 사항 레일이 열려 있는 동안 수정 사항 레일을 축소하고 디자인 캔버스를 확대하려면 수정 사항 표시 아이콘( 수정 사항 레일 표시 ) 아이콘을 클릭합니다.

수정 사항 레일에는 시각적 경험 작성기​(VEC)에서 페이지에 적용된 모든 변경 사항이 표시되며 추가 변경을 수행할 수 있습니다(예: CSS 선택기, Mbox, 사용자 지정 코드).

수정 사항을 추가하거나, 모든 수정 사항을 삭제하거나, 모든 잘못된 수정 사항을 삭제하려면 레일 헤더의 추가 옵션 아이콘( 추가 작업 아이콘 )을 클릭하십시오. 일괄 작업을 수행하려면 선택을 클릭하세요. 모든 페이지에 적용 또는 삭제.

각 수정 사항 옆에 있는 추가 옵션 아이콘( 추가 작업 아이콘 )을 클릭하여 해당 정보를 보거나, 수정 사항을 삭제하거나, 수정 사항을 더 많은 보기에 적용합니다.

디자인 캔버스

디자인 캔버스를 사용하면 화면 맞춤, 데스크톱, 태블릿, 모바일 가로 및 모바일 세로를 포함한 뷰포트를 선택할 수 있습니다. 기본적으로 캔버스는 관리 섹션에 정의된 뷰포트와 함께 페이지에 맞게 화면에 표시됩니다.

뷰포트 옵션

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

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

다양한 시각적 경험 작성기​(VEC) 작업은 작업을 보다 빠르고 효율적으로 수행할 수 있도록 적절한 메뉴 옵션으로 그룹화됩니다.

VEC 선택 사항 메뉴

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

속성 레일

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

속성 레일

레일 상단의 아이콘을 클릭하여 HTML 코드를 편집하거나 요소를 삭제, 복제 또는 숨깁니다. 변경 사항이 수정 사항 레일에 표시됩니다.

디자인 캔버스를 숨기고 디자인 캔버스를 확대할 수 있도록 오른쪽 레일에서 속성 레일을 접을 수 있습니다. 속성 레일을 축소하거나 표시하려면 레일의 오른쪽에 있는 속성 표시/숨기기 아이콘( 속성 아이콘 )을 클릭하십시오.

디자인 캔버스를 사용하여 요소 편집 design

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

이미지 옵션

A/B 테스트 활동에서 이미지를 클릭하면 VEC가 다음 그림과 비슷하게 보입니다.

이미지가 선택된 VEC

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

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

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

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

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

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

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

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

텍스트 옵션

A/B 테스트 활동에서 텍스트를 클릭하는 경우 VEC는 다음 그림과 유사합니다.

텍스트가 선택된 VEC

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

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

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

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

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

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

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

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

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

HTML 편집

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

A/B 및 경험 타깃팅 활동에 대한 텍스트 및 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 경로가 표시되지 않으면 DOM 표시 아이콘( DOM 표시 아이콘 )을 클릭합니다.

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

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

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

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

  • Target Standard/Premium 25.2.1(2025년 2월 17일) 릴리스 정보: 활동, 권장 사항 및 시각적 경험 작성기​(VEC)에 대한 Target의 주요 UI 변경 사항에 대한 요약을 제공합니다.

  • Target Standard/Premium 25.1.1(2025년 1월 9일) 릴리스 정보: 오퍼 라이브러리에 대한 Target의 주요 UI 변경 사항에 대한 요약을 제공합니다.

  • UI 이해 Target UI: Target에 익숙해지는 데 도움이 되는 간단한 개요를 제공하고 자세한 정보와 단계별 지침을 제공하는 링크를 제공합니다.

  • 시각적 경험 작성기 변경 사항: Adobe Target Standard/Premium 25.2.1 릴리스(2015년 2월 17일)에서는 업데이트된 시각적 경험 작성기​(VEC)를 도입했습니다. 이 문서에서는 VEC의 기존 버전과 업데이트된 버전의 차이점에 대해 설명합니다.

  • 시각적 경험 작성기 옵션: 이 문서에서는 업데이트된 VEC UI 및 해당 옵션에 대해 설명합니다.

  • Target UI 업데이트 FAQ: 이 FAQ는 탐색 변경, 기능 위치 및 임시 UI 버전 전환 중단 등 새 Target UI 및 시각적 경험 작성기​(VEC)에 대한 일반적인 질문을 해결합니다. 마케터, 개발자 또는 관리자이든, 이 FAQ는 원활하게 전환하고 업데이트된 UI를 최대한 활용하는 데 도움이 됩니다.

recommendation-more-help
target-help-main