웹 콘텐츠 편집 edit-web-content

웹 작업을 캠페인에 추가하면 웹 디자이너를 사용하여 사이트의 콘텐츠를 편집할 수 있습니다.

이 비디오에서는 웹 캠페인을 만드는 방법을 알아봅니다.

Journey Optimizer에서 웹 작성은 Adobe Experience Cloud Visual Helper chrome 브라우저 확장 기능을 기반으로 합니다. 자세히 알아보기

CAUTION
Journey Optimizer 사용자 인터페이스에서 웹 페이지에 액세스하고 작성하려면 이 섹션에 나열된 필수 구성 요소를 따라야 합니다.

다음 섹션에 액세스하여 각 주제에 대해 자세히 알아보십시오.

웹 디자이너를 사용하여 작업 work-with-web-designer

웹 캠페인 작성을 시작하려면 아래 단계를 따르십시오.

  1. campaignAction 탭에서 콘텐츠 편집 ​을(를) 선택합니다.

  2. 페이지 일치 규칙을 만든 경우 이 규칙과 일치하는 URL을 입력해야 합니다. 변경 사항은 규칙과 일치하는 모든 페이지에 적용됩니다. 페이지의 콘텐츠가 표시됩니다.

    note note
    NOTE
    단일 URL을 웹 표면으로 입력한 경우 개인화할 URL이 이미 채워져 있습니다.

    note caution
    CAUTION
    웹 페이지에는 Adobe Experience Platform 웹 SDK가 포함되어야 합니다. 자세히 알아보기
  3. 작성을 시작하려면 웹 페이지 편집 ​을 클릭하세요. 웹 디자이너가 표시됩니다.

    note note
    NOTE
    로드하지 못하는 웹 사이트를 로드하려고 하면 Visual Editing Helper 브라우저 확장 기능을 설치하라는 메시지가 표시됩니다. 이 섹션에서 문제 해결을 위한 팁을 확인하십시오.
  4. 캔버스에서 이미지, 단추, 단락, 텍스트, 컨테이너, 머리글, 링크 등과 같은 요소를 선택합니다. 자세히 알아보기

  5. 사용:

    • 컨텍스트 메뉴 를 사용하여 콘텐츠, 레이아웃, 링크 또는 개인화 등을 편집할 수 있습니다.

    • 오른쪽 패널 상단에 있는 아이콘으로 각 요소를 편집, 복제, 삭제 또는 숨길 수 있습니다.

    • 선택한 요소에 따라 동적으로 변경되는 오른쪽 패널. 예를 들어 요소의 배경, 타이포그래피, 테두리, 크기, 위치, 간격, 효과 또는 인라인 스타일을 편집할 수 있습니다.

NOTE
웹 콘텐츠 디자이너는 대부분 이메일 디자이너와 유사합니다. 콘텐츠를 디자인 Journey Optimizer에 대해 자세히 알아보세요.

구성 요소 사용 content-components

  1. 왼쪽의 구성 요소 창에서 항목을 선택합니다. 웹 페이지에 다음 구성 요소를 추가하고 필요에 따라 편집할 수 있습니다.

    • 구분선
    • HTML
    • 이미지
    • 제목 - 이 구성 요소를 사용하는 것은 이메일 디자이너에서 텍스트 구성 요소를 사용하는 것과 비슷합니다. 자세히 알아보기
    • 단락 - 이 구성 요소를 사용하는 것은 이메일 디자이너에서 텍스트 구성 요소를 사용하는 것과 비슷합니다. 자세히 알아보기
    • 링크

  2. 페이지에서 마우스를 가져간 후 다음 항목 앞에 삽입 또는 다음 항목 뒤에 삽입 단추를 클릭하여 구성 요소를 페이지의 기존 요소에 추가하십시오.

    note note
    NOTE
    구성 요소의 선택을 취소하려면 캔버스 위에 표시된 파란색 상황에 맞는 배너에서 ESC 단추를 클릭합니다.
  3. 페이지 콘텐츠에서 필요에 따라 구성 요소를 바로 편집합니다.

  4. 배경, 텍스트 색상, 테두리, 크기, 위치 등과 같이 오른쪽에 있는 상황별 창에서 표시되는 스타일을 조정합니다. - 선택한 구성 요소에 따라 다릅니다.

개인화 추가

개인화를 추가하려면 컨테이너를 선택하고 표시되는 상황별 메뉴 모음에서 개인화 아이콘을 선택합니다. 개인화 편집기를 사용하여 변경 사항을 추가합니다. 자세히 알아보기

웹 디자이너 탐색 navigate-web-designer

이 섹션에서는 웹 디자이너를 탐색할 수 있는 다양한 방법에 대해 자세히 설명합니다. 웹 경험에 추가된 수정 사항을 보고 관리하려면 이 섹션을 참조하세요.

탐색 표시 사용 breadcrumbs

  1. 캔버스에서 요소를 선택합니다.

  2. 선택한 요소에 대한 정보를 빠르게 표시하려면 화면 왼쪽 하단의 이동 경로 확장/축소 단추를 클릭합니다.

  3. 이동 경로를 마우스로 가리키면 편집기에서 해당 요소가 강조 표시됩니다.

  4. 이를 사용하여 시각적 편집기 내에서 상위 요소, 동위 요소 또는 하위 요소로 쉽게 이동할 수 있습니다.

찾아보기 모드로 전환 browse-mode

전용 단추를 사용하여 기본 디자인 모드에서 찾아보기 모드로 전환할 수 있습니다.

찾아보기 모드에서 개인화할 선택한 표면에서 정확한 페이지로 이동할 수 있습니다.

이 메서드는 인증이 지연되거나 특정 URL에서 처음부터 사용할 수 없는 페이지를 처리할 때 특히 유용합니다. 예를 들어, 원하는 페이지에서 변경을 수행하기 위해 인증하고, 계정 페이지 또는 장바구니 페이지로 이동한 다음, 디자인 모드로 다시 전환할 수 있습니다.

찾아보기 모드를 사용하면 단일 페이지 응용 프로그램을 작성할 때 웹 사이트의 모든 보기를 탐색할 수도 있습니다. 자세히 알아보기

장치 크기 변경 change-device-size

웹 디자이너 디스플레이의 장치 크기를 태블릿 또는 모바일 가로 ​와 같이 미리 정의된 크기로 변경하거나 원하는 픽셀 수를 입력하여 사용자 지정 크기를 정의할 수 있습니다.

확대/축소 포커스를 25%에서 400%로 변경할 수도 있습니다.

장치 크기를 변경하는 기능은 다양한 장치, 창 및 화면 크기에서 잘 렌더링되는 반응형 사이트를 위해 설계되었습니다. 반응형 사이트는 데스크탑, 노트북, 태블릿 또는 휴대폰을 포함하여 모든 화면 크기를 자동으로 조정하고 적응합니다.

CAUTION
특정 장치 크기로 웹 경험을 편집할 수 있습니다. 그러나 선택기가 동일한 한 이러한 변경 사항은 작업 중인 장치 크기뿐만 아니라 모든 크기와 장치에 적용됩니다. 마찬가지로, 일반 데스크탑 보기에서 경험을 편집하면 데스크탑 보기뿐만 아니라 모든 화면 크기에 변경 사항이 적용됩니다.
현재 Journey Optimizer은(는) 장치 크기별 페이지 변경을 지원하지 않습니다. 즉, 별도의 사이트 구조를 사용하는 별도의 모바일 웹 사이트가 있는 경우 다른 캠페인에서 모바일 사이트별로 변경해야 합니다.

방법 비디오 video

아래 비디오에서는 Journey Optimizer 캠페인에서 웹 디자이너를 사용하여 웹 경험을 만드는 방법을 보여 줍니다.

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76