경험 현대화 콘솔 console-reference
경험 현대화 콘솔 인터페이스 및 기능에 대한 참조 안내서
개요 overview
Experience Modernation Console은 aemcoder.adobe.io에서 웹 인터페이스로 노출되는 Edge Delivery Services의 호스팅 AI 지원 개발 환경입니다. 해당 GitHub 프로젝트에 연결한 후 추가 설정이나 로컬 환경 구성 없이 자연어로 변경 내용을 즉시 확인할 수 있습니다.
기능 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 프로젝트 작업은 설정 페이지에서 수행할 수 있습니다.
설정 페이지 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:readfile_metadata:readlibrary_assets:readlibrary_content:readteam_library_content:readfile_dev_resources:readprojects:read
-
개인 액세스 토큰 설정에 대한 자세한 내용은 Figma 설명서를 참조하십시오.
-
-
지원은(는) 지원 요청을 할 때 Adobe 지원 팀과 공유한 정보를 요약합니다.
- 지원 요청 - 콘솔을 종료하지 않고 Adobe의 지원 요청을 시작하려면 클릭하세요.
-
위험 영역에 작업 영역을 되돌릴 수 있는 설정이 있습니다.
- 작업 영역 재설정 - 작업 영역을 초기 상태로 재설정하려면 클릭하세요. 이 작업은 취소할 수 없습니다.