경험 현대화 콘솔 console-reference

경험 현대화 콘솔 인터페이스 및 기능에 대한 참조 안내서

NOTE
Experience Modernation Console 사용에 관심이 있는 경우 원활한 온보딩 경험을 위해 액세스를 요청할 수 있습니다.

개요 overview

Experience Modernation Console은 aemcoder.adobe.io에서 웹 인터페이스로 노출되는 Edge Delivery Services의 호스팅 AI 지원 개발 환경입니다. 해당 GitHub 프로젝트에 연결한 후 추가 설정이나 로컬 환경 구성 없이 자연어로 변경 내용을 즉시 확인할 수 있습니다.

TIP
콘솔을 바로 시작하려면 문서 Experience 현대화 에이전트 시작하기를 확인하십시오.

기능 capabilities

콘솔의 핵심 기능:

  • 에이전트 및 해당 기술이 포함된 대화형 채팅 패널
  • 변경 사항에 대한 즉각적인 시각적 피드백을 위한 라이브 AEM 미리보기
  • 컨텐츠 파일 브라우저 및 Markdown 뷰어
  • 문서 작성과(와) 콘텐츠 동기화
  • 변경 사항을 검토하기 위한 코드 브라우저 및 비교 뷰어
  • 변경 사항에서 가져오기 요청을 만드는 기능과 GitHub 통합

개발자들은 어떤 선박을 운항할 것인가에 대한 완전한 통제권을 보유한다. 콘솔을 통해 모든 변경 사항을 적용하려면 배포 전에 검토하고 승인해야 하며 거버넌스, 브랜드 일관성 및 보안이 보장됩니다.

탐색 navigation

aemcoder.adobe.io,에서 콘솔에 로그인한 후 콘솔의 홈 페이지에 도착합니다. 채팅을 시작하면 이후에 Experience Modernation 에이전트를 방문할 때 채팅 페이지로 바로 이동합니다.

콘솔의 홈 화면

메뉴 바 menu-bar

상단 메뉴 모음에는 다음이 포함되어 있습니다.

  • 클릭하면 홈 페이지로 연결되는 왼쪽의 Adobe Experience Manager 제목
  • 발생한 문제에 대한 세부 정보를 보낼 수 있는 지원 요청 단추
  • 어두운 모드로 전환하고 콘솔에서 로그아웃하기 위한 오른쪽의 계정 단추

홈 페이지 home-page

홈 페이지는 콘솔 사용을 위한 시작점입니다.

  • 맨 위에는 콘솔의 요청을 수행하기 위한 프롬프트 입력이 있습니다.
  • 프롬프트 패널 아래에 프로젝트를 시작하기 위한 제안 프롬프트가 표시됩니다.
  • 채팅 페이지(으)로 이동하는 채팅 시작 단추.
  • 프로젝트 설정 페이지에 액세스하기 위한 설정 단추

프롬프트 입력 prompt-input

프롬프트 입력은 AI와 상호 작용하기 위한 컨트롤을 제공합니다.

  • 계획/실행 모드(전구 및 자동 선택 아이콘): 계획 모드와 실행 모드 간을 각각 전환합니다.

    • 플랜 모드: AI가 요청을 분석하고 변경 없이 접근 방식을 간략하게 설명합니다. 이는 커밋하기 전에 전략을 이해하는 데 유용합니다.
    • 실행 모드: AI가 계획을 수행하고 실제 파일을 변경합니다.
  • 파일 첨부(paperclip icon): 추가 컨텍스트(예: 참조 디자인, 스크린샷, 사양)를 위해 파일을 업로드하고 프롬프트에 첨부합니다.

  • 프롬프트 큐(시계 아이콘): 현재 프롬프트가 완료되면 추가 프롬프트가 자동으로 실행되도록 대기열에 추가할 수 있습니다.

채팅 페이지 chat-page

채팅 페이지는 Experience 현대화 에이전트와 상호 작용하는 기본 인터페이스입니다. 이 페이지는 크기 조정 가능한 채팅 패널 및 작업 영역 패널로 분할됩니다.

채팅 패널 chat-panel

채팅 패널에서 Experience 현대화 에이전트와 대화를 보고 계속할 수 있습니다. 채팅 패널에는 채팅 메시지 기록 및 콘솔의 추가 요청을 위한 프롬프트 입력이 포함됩니다.

채팅 패널 헤더에는 Home 및 설정 보기 및 채팅 작업으로 이동하는 링크가 포함되어 있습니다.

  • 채팅 작업

    • 채팅 지우기: 대화를 재설정하고 AI의 컨텍스트 창을 지웁니다. 이전 대화와 관련이 없는 새 작업을 시작할 때 이 옵션을 사용합니다.
    • 채팅 다운로드: 대화 기록을 Markdown 파일로 다운로드합니다.

Workspace 패널 workspace-panel

작업 영역 패널에는 사이트의 모든 콘텐츠와 코드가 표시됩니다. 패널 맨 위의 헤더에는 포커스를 둘 특정 보기를 선택하는 선택기가 포함되어 있습니다. 작업 영역 헤더에서 사용할 수 있는 작업은 현재 선택한 보기에 따라 변경됩니다.

컨텐츠 보기 content-view

콘텐츠 보기​에는 선택한 페이지 콘텐츠를 표시하는 여러 모드가 포함되어 있습니다. 축소 가능한 파일 브라우저에는 사이트에 대해 사용 가능한 모든 페이지 콘텐츠가 표시됩니다.

  • 렌더링된 HTML 컨텐츠를 보려면 미리 보기(돋보기 아이콘이 있는 문서)
  • 기본 문서 작성 콘텐츠 구조를 보려면 문서 보기(문서 아이콘)를 각각 클릭하세요
  • 원시 일반 html을 보려면 HTML 보기(코드 아이콘)
  • 기본 Markdown 콘텐츠 구조를 보기 위한 Markdown 보기(AEM 작성)(단락 아이콘)
  • 결과 JCR XML 콘텐츠 구조를 보기 위한 JCR XML 보기(AEM 작성)(데이터 아이콘)

컨텐츠 보기

컨텐츠 보기에서 다음 작업을 사용할 수 있습니다.

  • 미리 보기 패널 렌더링을 업데이트하려면 새로 고침 아이콘을 클릭하세요.
  • 데스크톱, 태블릿 또는 모바일 보기에서 렌더링된 HTML 콘텐츠를 보려면 응답형 모드
  • 검사 모드(선택 아이콘)를 사용하여 추가 컨텍스트를 확인하는 프롬프트에 페이지 요소를 추가합니다.
  • 새 창(아이콘으로 열기)을 사용하여 새 탭에서 미리 보기 URL을 엽니다(전체 데스크톱 미리 보기).
  • 삭제​은(는) 작업 영역에서 선택한 페이지를 제거합니다. 미리 보거나 게시된 콘텐츠는 삭제되지 않습니다.
  • 오류 단추(AEM 작성)는 선택한 페이지에서 오류를 볼 수 있는 모달 창을 엽니다.
  • 콘텐츠 업로드 단추를 클릭하면 AEM에 파일을 업로드할 수 있는 모달 창이 열립니다.

콘텐츠 업로드

코드 보기 code-view

코드 보기​에서는 프로젝트 파일을 탐색하고 코드 변경 내용을 관리하는 도구를 제공합니다. 이 보기에는 코드 파일 또는 변경 사항에 대한 개요를 볼 수 있는 파일 브라우저와 선택한 파일 또는 변경 사항을 볼 수 있는 미리 보기 영역이 포함되어 있습니다.

  • 현재 작업 영역에서 코드 파일을 찾아보려면 파일
  • 변경 내용 - 프로젝트에서 작업에 의해 생성된 여러 파일 변경 내용을 볼 수 있습니다.

코드 보기

파일 작업 file-actions

  • 채팅에 추가 선택한 파일(또는 파일에서 선택한 줄)을 컨텍스트를 위해 채팅 패널에 추가합니다.
  • 다운로드 선택한 파일을 로컬 파일 시스템에 다운로드합니다.

변경 작업 changes-actions

  • 변경된 파일을 스테이징하려면 추가(+ 아이콘)
  • 변경된 파일을 삭제하려면 Discard(화살표 아이콘)
  • 준비되지 않은 파일을 삭제하려면 삭제(휴지통 아이콘)
  • 변경 내용 목록을 새로 고치려면 새로 고침(새로 고침 아이콘)
  • 분기 전환: 동일한 저장소 내에서 분기를 전환합니다.
  • 동기화: 원격 원본에서 최신 변경 내용을 가져옵니다.
  • 푸시: GitHub에 작업 영역 변경 사항을 푸시하기 위한 모달을 엽니다.

변경 사항을 푸시할 때 푸시에 포함하려면 먼저 스테이징된 변경 사항이 있어야 합니다. 푸시할 때 새 PR을 만들거나 현재 분기에 직접 푸시하도록 선택할 수 있습니다

변경 내용 푸시

추가 GitHub 프로젝트 작업은 설정 페이지에서 수행할 수 있습니다.

프로젝트 보기 project-view

프로젝트 보기​를 통해 기존 사이트의 마이그레이션을 계획할 수 있습니다.

자세한 내용은 사이트 계획 UI를 참조하십시오.

설정 페이지 settings-page

설정 페이지를 사용하면 콘솔의 기본 설정을 관리할 수 있으며 다음 섹션으로 분류됩니다.

설정 보기

섹션의 값을 변경하는 경우 저장​을 클릭하여 해당 변경 사항을 개별 섹션에 저장합니다. 이전 보기로 돌아가려면 뒤로 아이콘을 클릭합니다.

  • 프로젝트​를 사용하면 GitHub 연결 관리 및 라이브러리 URL 사용자 지정과 같은 프로젝트 설정을 보고 편집할 수 있습니다.

    • 연결/다시 연결: GitHub 인증을 시작합니다.
    • 저장소 전환: 작업 영역을 다른 저장소로 바꿉니다. 커밋되지 않은 모든 작업은 손실됩니다.
    • 로그아웃: GitHub에서 연결 끊기
    • 라이브러리 URL - 이 URL은 사용 가능한 블록, 해당 변형 및 예제 콘텐츠를 정의하는 library.json 파일을 가리킵니다.
    • 사이트 기본 URL - 마이그레이션 중인 웹 사이트의 원본 URL
  • 에이전트 권한 - 에이전트가 구성 옵션에 액세스하도록 허용

    • LLM에서 나를 대신하여 admin.hlx.page에 액세스하도록 허용 - 활성화되면 AI 도우미가 IMS 자격 증명을 사용하여 Adobe Experience Manager에서 사이트 구성 및 메타데이터를 가져올 수 있습니다.
    • 사용자 지정 IMS 토큰 - 기본 세션 토큰 대신 사용할 사용자 지정 IMS 토큰을 제공할 수 있습니다.
  • 자격 증명​을(를) 사용하면 콘솔에서 프로젝트의 디자인 블록에 액세스할 수 있도록 Figma에 대한 개인 액세스 토큰을 지정할 수 있습니다.

    • 토큰에는 다음과 같은 읽기 전용 범위가 필요합니다.

      • file_content:read
      • file_metadata:read
      • library_assets:read
      • library_content:read
      • team_library_content:read
      • file_dev_resources:read
      • projects:read
    • 개인 액세스 토큰 설정에 대한 자세한 내용은 Figma 설명서를 참조하십시오.

  • 보호된 사이트 인증​을 사용하면 에이전트가 보호된 소스 웹 사이트에 액세스하고 스크랩할 수 있도록 사용자 지정 헤더, HTTP 기본 인증 또는 전달자 인증을 구성할 수 있습니다. 설치 지침은 보호된 사이트 인증을 참조하세요.

  • 지원​은(는) 지원 요청을 할 때 Adobe 지원 팀과 공유한 정보를 요약합니다.

    • 지원 요청 - 콘솔을 종료하지 않고 Adobe의 지원 요청을 시작하려면 클릭하세요.
  • 위험 영역​에 작업 영역을 되돌릴 수 있는 설정이 있습니다.

    • 작업 영역 재설정 - 작업 영역을 초기 상태로 재설정하려면 클릭하세요. 이 작업은 취소할 수 없습니다.

보호된 사이트 인증 protected-site-authentication

보호된 사이트 인증​을 사용하여 Experience 현대화 에이전트가 사용자 지정 요청 헤더, HTTP 기본 인증 또는 전달자 인증을 필요로 하는 소스 웹 사이트에 액세스할 수 있도록 합니다. 에이전트의 호스팅 환경에서 소스 웹 사이트에 연결할 수 있어야 하며 사용자가 제공하는 인증 방법을 수락하도록 구성해야 합니다. 이 기능은 VPN을 통해 액세스하거나 방화벽을 무시하지는 않습니다.

IMPORTANT
이 기능은 PII(개인 식별 정보) 또는 실제 최종 사용자 데이터와 함께 사용하기 위한 것이 아닙니다. 이 데이터를 포함하지 않는 소스 콘텐츠를 사용합니다.

액세스 권한을 구성하려면:

  1. Experience Modernation Console에서 설정​을 열고 보호된 사이트 인증​을 찾습니다.

  2. 사이트 추가​를 클릭합니다.

  3. 사이트 호스트 이름(예: staging.example.com)을 입력하십시오. https:// 또는 URL 경로 없이 호스트 이름만 입력하십시오.

  4. 인증 유형​을(를) 선택하고 해당 값을 입력하십시오.

    table 0-row-2 1-row-2 2-row-2 3-row-2
    인증 유형 입력할 값
    사용자 정의 헤더 소스 웹 사이트에서 필요한 경우 헤더 이름 및 헤더 값. 예를 들어 헤더 이름은 X-API-Key일 수 있습니다.
    기본(사용자 이름 및 암호) HTTP 기본 인증용 사용자 이름 및 암호.
    전달자 인증 소스 웹 사이트에서 수락한 전달자 토큰.
  5. 보호된 사이트 인증 섹션에서 저장​을 클릭합니다.

  6. 에이전트에게 평소대로 URL을 사용하여 소스 웹 사이트를 스크랩하거나 마이그레이션하도록 요청합니다.

사용자 지정 헤더 및 HTTP 기본 인증 항목 예제를 사용한 보호된 사이트 인증 설정

저장되면 자격 증명이 일치하는 호스트 이름에 대한 아웃바운드 요청에 삽입되고 AI 모델과 공유되지 않습니다. 채팅 프롬프트가 아닌 이러한 설정에서만 자격 증명을 입력합니다. 소스 웹 사이트에서 검색된 콘텐츠는 요청된 작업에 대해 에이전트가 사용합니다.

범위, 최소 권한 자격 증명을 사용합니다. 소스 콘텐츠에 대한 읽기 전용 액세스 권한이 있는 것이 좋습니다. 각 호스트 이름은 한 번만 구성할 수 있습니다. 소스 웹 사이트에서 다른 호스트의 보호된 콘텐츠에 액세스해야 하는 경우 추가 호스트 이름을 별도로 구성합니다.

액세스 권한을 제거하려면 항목에 대해 사이트 제거​를 클릭한 다음 저장​을 클릭합니다.

recommendation-more-help
experience-manager-cloud-service-help-main-toc