Experience Modernation Agent 시작하기 getting-started

Experience Modernation Agent 및 Experience Modernation Console 사용을 시작하기 위한 첫 번째 단계를 알아봅니다.

NOTE
Experience Modernation Console 사용에 관심이 있는 경우 계정 관리자를 통해 액세스를 요청하여 원활한 온보딩 경험을 보장할 수 있습니다.

Edge Delivery GitHub 저장소 준비 prepare-repo

NOTE
AEM Sites 및 유니버설 편집기 프로젝트를 사용하시겠습니까? AEM Sites/유니버설 편집기 시작하기 설치 단계를 따르십시오.
  1. Experience Modernation Console에 사용할 Edge Delivery Services 리포지토리를 선택하십시오.

    • 이 프로젝트는 기존 Edge Delivery Services 프로젝트이거나 🔗표준 리포지토리를 사용하여 개발자 자습서에 따라 새 프로젝트를 만들 수 있습니다.
  2. AEM 코드 커넥터가 저장소에 설치되어 있는지 확인하십시오.

    • 이렇게 하면 콘솔에서 코드를 검사할 수 있습니다.
  3. AEM 코드 동기화 GitHub 앱이 저장소에 설치되어 있는지 확인하십시오.

    • 이렇게 하면 Edge Delivery Services에서 코드를 동기화할 수 있습니다.
    • 보고서가 자습서를 기반으로 한다면 이 단계는 이미 완료된 것입니다.

Experience Modernation Console 열기 open-console

  1. aemcoder.adobe.io.​(으)로 이동
  2. Adobe ID으로 로그인합니다.

데모 모드 demo-mode

처음 로그인할 때 콘솔이 데모 모드에서 실행됩니다. 이 모드를 사용하면 추가 페이지 마이그레이션을 시도할 수 있는 기존 사이트를 탐색할 수 있습니다. 화면 하단의 배너는 사용자가 데모 모드에 있음을 나타냅니다.

데모 모드

사이트 연결 connect-repo

자신의 사이트에서 작업을 시작할 준비가 되면 자신의 프로젝트에 연결하여 데모 모드를 종료할 수 있습니다.

  1. 데모 모드 배너에서 사이트 전환​을 클릭합니다.
  2. GitHub 자격 증명을 사용하여 AEM 코드 커넥터 앱을 인증하라는 메시지가 표시됩니다. AEM 코드 커넥터 승인​을 클릭합니다.
  3. 콘솔로 돌아가서 사이트의 미리보기 URL을 지정합니다. 미리보기 URL은 사이트에서 문서를 미리 보거나 분기, 사이트 이름 및 조직에서 구성하여 가져올 수 있습니다. 시스템에서 연결된 Github 프로젝트를 자동으로 검색합니다. 또는 승인된 GitHub 프로젝트를 검색하여 사이트를 찾을 수 있습니다.
    GitHub 프로젝트에 연결
  4. 사이트가 확인되면 작업 영역에 체크 아웃​을 클릭합니다.
  5. 기존 작업 영역 바꾸기​를 묻는 메시지가 표시되면 작업 영역 바꾸기​를 클릭합니다.
    기존 작업 영역 바꾸기

이제 GitHub 프로젝트 및 사이트가 콘솔에 연결됩니다.

데모 모드가 종료되었지만 새 프로젝트가 연결되지 않은 경우 경험 현대화 에이전트를 다시 방문하면 사이트가 먼저 연결됩니다.

사이트 연결

콘솔 홈 console-home

aemcoder를 방문하면 채팅 대화가 시작될 때까지 홈 페이지가 표시됩니다. 홈 페이지에서는 첫 번째 프롬프트를 입력하거나 제안된 프롬프트 중 하나를 선택하여 채팅을 시작할 수 있습니다.

콘솔 홈

메시지 표시 시작 start-prompting

이제 콘솔에서 코드에 액세스할 수 있으므로 메시지를 시작할 준비가 되었습니다.

  1. 시작하려면 사이트의 콘텐츠를 가져올 수 있습니다.

    • https://wknd-trendsetters.site 페이지를 마이그레이션합니다.”
  2. 사이트의 콘텐츠를 가져옵니다.

    • 이 콘솔은 문제 분리를 관찰하고 콘텐츠와 프레젠테이션을 개별적으로 처리합니다.
    • 사이트 콘텐츠를 처음 가져오는 데 몇 분 정도 걸릴 수 있습니다.
    • 콘솔은 계획된 단계의 개요를 포함하여 작업을 시작할 때 지속적인 피드백을 제공합니다.
      콘텐츠 가져오기
  3. 사이트를 가져오면 Workspace 패널에 페이지가 표시됩니다. 오른쪽 패널에서 미리 볼 페이지를 선택합니다.
    콘텐트 가져옴

  4. 이제 콘텐츠가 있으므로 동일한 소스에서 스타일을 가져오라는 메시지를 표시할 수 있습니다.

    • https://wknd-trendsetters.site에서 일반 스타일을 가져옵니다.”
  5. 초기 콘텐츠 가져오기와 마찬가지로 가져오기에도 몇 분 정도 걸릴 수 있으며, 콘솔에서 요청을 처리하고 스타일을 가져올 때 피드백을 제공합니다. 작업이 완료되면 오른쪽 패널에서 미리 보기 새로 고침​을 클릭하여 스타일이 지정된 콘텐츠를 봅니다.
    스타일 가져옴

이제 콘솔에 콘텐츠와 스타일을 모두 가져왔습니다.

TIP
에이전트에게 메시지를 보내는 방법과 에이전트의 기술을 확인할 수 있는 방법에 대한 자세한 내용은 확인 가이드를 확인하십시오.

콘텐츠 업로드 upload-content

콘텐츠를 문서 작성에 업로드하려면:

  1. 콘텐츠 보기에 있는지 확인한 다음 오른쪽 상단의 콘텐츠 업로드 단추를 클릭합니다.

    • 콘솔에 들어갈 때는 기본적으로 콘텐츠 보기에 있습니다.
    • 보기는 콘솔의 작업 영역 영역에서 선택한 보기 선택기 항목으로 표시됩니다.
  2. 프로젝트 설정에서 미리 채워진 대상 조직 및 저장소와 함께 콘텐츠 업로드 대화 상자가 열립니다.

    • fstab.yaml이(가) 연결된 저장소에 없는 경우 조직저장소​를 수동으로 입력해야 합니다.
    • 상용구를 사용한 경우 fstab.yaml이(가) 제공됩니다.
  3. 업로드할 파일을 선택하고 업로드​를 클릭합니다.
    콘텐츠 업로드 대화 상자

  4. 콘솔은 업로드 단추를 사용하지 않도록 설정하여 업로드 프로세스를 나타냅니다.

  5. 완료되면 콘솔 하단에 알림이 표시됩니다.
    AEM에서 보기

문서 작성에서 업로드된 콘텐츠에 액세스하려면 업로드가 완료되면 알림에서 AEM에서 보기​를 클릭하거나 https://da.live/#/{organization}/{repository}(으)로 이동하십시오.

문서 작성의 콘텐츠

가져온 콘텐츠는 이제 문서 작성 중입니다.

TIP
AEM Sites 및 유니버설 편집기 프로젝트에서 작업하는 경우 AEM에 콘텐츠를 업로드하는 것은 약간 다르게 작동합니다. 구체적인 업로드 지침은 AEM Sites/유니버설 편집기 프로젝트용 Experience Modernation Agent 시작하기를 참조하십시오.

푸시 코드 변경 push-code-changes

코드에 적용한 변경 사항이 만족하면 GitHub 리포지토리에 푸시할 수 있습니다.

  1. 변경 보기(보기 선택기의 분기 아이콘)로 전환합니다.
    코드 보기
  2. 변경된 파일 목록에서 일부 파일이 추적되지 않은 것으로 표시되면 + 단추를 클릭하여 준비합니다.
  3. 오른쪽 상단의 푸시 단추를 클릭합니다.
  4. 변경 내용 푸시 대화 상자에서 변경 내용을 새 PR(기본값) 또는 현재 분기에 푸시하도록 선택하고 확인​을 클릭하여 푸시합니다.
    • 확실하지 않은 경우 현재 분기로 푸시하여 상황을 단순화할 수 있습니다.
  5. 완료되면 콘솔 하단에 알림이 표시됩니다.
    PR 보기

GitHub에서 푸시된 변경 사항에 직접 액세스하려면 푸시가 완료되면 알림에서 PR 보기​를 클릭하십시오.

GitHub의 코드

이제 코드가 GitHub에 있습니다.

사이트 미리보기 preview-site

미리보기 환경에서 변경 사항을 보려면 다음과 같이 하십시오.

  1. 문서 작성으로 돌아갑니다.

    • 콘텐츠를 업로드한 후 AEM에서 보기​를 클릭한 후 연 브라우저 탭에서 열려 있을 수 있습니다.
    • 또는 https://da.live/#/{organization}/{repository}(으)로 이동
  2. 이전에 AEM에 업로드한 페이지 중 하나를 엽니다.

  3. 종이 비행기 아이콘(오른쪽 상단)을 클릭하고 미리 보기​를 선택합니다.
    미리보기에 게시

축하합니다! 마이그레이션된 컨텐츠 및 스타일이 이제 AEM 미리보기 환경에 라이브로 표시됩니다.

게시된 미리 보기 콘텐츠

코드를 main 이외의 분기로 푸시한 경우 문서 작성에서 연 미리 보기에 스타일이 표시되지 않습니다. 미리 보기의 URL을 업데이트하여 분기로 변경하면 스타일을 볼 수 있습니다.

문제 해결 troubleshooting

IP 주소 allowlist-ip-addresses

사이트가 방화벽 또는 액세스 제한 뒤에 있는 경우 백엔드 서비스가 사이트를 스크랩할 수 있도록 다음 IP 주소를 허용 목록 할 수 있습니다.

  • 34.228.136.112
  • 54.90.51.39
  • 3.224.194.242

추가 리소스 additional-resources

다음 문서는 경험 현대화 에이전트 및 해당 콘솔을 계속 탐색할 때 유용할 수 있습니다.

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