설명서AEM사용 안내서

경험 현대화 에이전트에 대한 안내 메시지 표시 prompting-guide

마지막 업데이트: 2026년 11월 12일
  • 적용 대상:
  • Experience Manager as a Cloud Service

작성 대상:

  • 사용자
  • 관리자
  • 개발자

Experience Modernation Agent는 자연어 요청에서 작동합니다. 페이지 마이그레이션 또는 블록 스타일링 등 각 유형의 작업에 대해 스킬이라는 내장된 워크플로우를 따릅니다. 요청에서 기술을 선택하므로 이름을 지정할 필요가 없습니다. 일부 기술은 선택적 기능에 속하며, 요청에 필요할 때 에이전트가 프로젝트에 대해 이 기능을 사용하도록 설정합니다.

이 안내서에서는 계획, 마이그레이션, 확인, 크기 조정 및 개발 유지 순서로 예제 프롬프트를 제공합니다. 전체 마이그레이션 절차를 보려면 프로덕션 사이트 마이그레이션을 따르십시오. 섹션, 기본 콘텐츠, 블록 및 변형은 콘텐츠 구조 모양에 설명되어 있습니다. 프롬프트의 예제 URL 및 경로를 고유한 URL과 경로로 바꿉니다.

에이전트 컨텍스트 제공 context

에이전트는 Edge Delivery Services을 알고 프로젝트의 코드를 읽습니다. 사용자가 말하기 전까지는 사이트가 작동하는 비즈니스, 브랜드 규칙 또는 기타 시스템을 알 수 없으며, 상황에 맞는 각 요청이 일련의 수정 사항을 저장합니다. 작업에 필요한 사항 공유:

  • 목표와 확인 방법: 원하는 항목, 대상, 완료된 결과 표시.
  • 범위 및 대상: 원본 페이지 또는 디자인, 대상 경로, 콘텐츠가 저장된 위치, 저장소 및 분기, 변경되지 않아야 하는 사항, 에이전트가 업로드, 푸시 또는 게시할 수 있는지 여부.
  • 요구 사항: 사양, 브랜드 및 접근성 규칙.
  • 예: 이미 올바르게 표시된 페이지, 스크린샷, 그림 링크 또는 샘플 API 응답.
  • 설명서: 에이전트가 웹에서 읽거나 로그인이 필요할 때 문서 자체를 읽는 공개 설명서에 대한 링크입니다. 파일 첨부​에서 PDF 파일을 허용하지 않으므로 해당 파일에서 관련 텍스트를 복사하십시오. 프롬프트 입력을 참조하십시오.
  • 이미 결정한 사항: AGENTS.md에서 동의한 규칙과 해당 규칙에 나열된 파일을 유지하므로 모든 요청에서 해당 규칙을 반복하지 않습니다. 프로젝트 지침 및 메모리를 참조하세요.

모든 것이 아니라 작업에 필요한 것을 공유하고 AI 도구에 포함될 수 있는 사항에 대한 조직의 정책을 따릅니다.

Edge Delivery Services 개념, 프로젝트 코드 및 접근 방식 간의 장단점에 대해 질문할 수도 있습니다. 방법을 잘 모를 경우 에이전트에게 작업을 요청하기 전에 Edge Delivery Services에서 작업을 어떻게 수행하는지 확인하거나 계획 모드로 전환하여 접근 방식을 검토하십시오. 에이전트에게 질문과 가정을 나열하도록 요청합니다. 이러한 질문에 답변하는 것이 결과를 수정하는 것보다 빠릅니다.

채팅에서 비밀 유지 secrets

CAUTION
채팅에서 암호, API 키, 액세스 토큰 또는 기타 비밀을 입력, 붙여넣기 또는 첨부하지 마십시오. 콘솔의 설정​에서 에이전트에 필요한 자격 증명을 입력하십시오. 이미 암호를 공유한 경우 지금 취소하거나 바꿉니다.

그 채팅은 비밀로 하기 위한 안전한 장소가 아니다. 당신이 입력하거나 첨부하는 모든 내용은 AI 모델로 전송되어 대화에 남습니다. 에이전트는 값을 프로젝트의 파일(예: 스크립트 또는 구성 파일)에 복사할 수 있으므로 다른 텍스트와 비슷합니다. 해당 파일이 푸시되면 값은 저장소의 기록에 유지되며 저장소의 모든 항목이 사이트 방문자의 브라우저에 전달됩니다. 설정​에 입력한 자격 증명이 에이전트에 도달하지 않습니다. 자격 증명을 참조하세요.

채팅, 첨부 파일 및 프로젝트 파일 외부에 보관하십시오.

  • 테스트 계정 및 자체 Adobe ID 또는 Git 계정의 암호를 포함한 암호
  • API 키, 액세스 토큰 및 개인 액세스 토큰
  • 개인 키 및 인증서
  • 연결 문자열, 세션 쿠키 및 서명된 URL과 같이 액세스 권한을 자체적으로 부여하는 링크
  • .env개 파일 및 비밀을 포함하는 기타 구성의 내용
  • 실제 고객 또는 직원의 개인 데이터. 대신 구성 샘플 데이터 사용
  • 조직의 정책이 AI 도구를 사용하지 않는 기타 모든 항목

스크린샷, 로그, 내보낸 파일 또는 오류 메시지를 첨부하기 전에 스크린샷을 확인하고 마스크합니다.

자격 증명이 대신 사용되는 위치 credential-settings

에이전트에게 필요한 사항
자격 증명을 입력할 위치
Git 저장소에 액세스
연결 흐름: AEM 코드 커넥터 승인 또는 토큰으로 로그인. 사이트 연결을 참조하세요.
콘텐츠 푸시, 풀 또는 읽기 권한
설정 > 에이전트 권한. 기본적으로 Adobe 또는 Git 로그인을 사용하므로 자격 증명을 입력하지 않습니다. 에이전트에 더 좁은 액세스 권한을 부여하려면 자체 토큰을 입력하십시오. Git용 세분화된 개인 액세스 토큰 또는 Adobe용 서비스 계정 토큰. 설정 페이지를 참조하세요.
Figma 디자인
Figma 개인 액세스 토큰에 대한 설정 > 자격 증명. 그림 디자인에서 작업을 참조하세요.
로그인이 필요한 소스 사이트
설정 > 보호된 사이트 인증 또는 자동 모드의 인증 필드. 보호된 사이트 인증을 참조하세요.
테스트 API 또는 알림 서비스와 같이 에이전트가 작동 중에 호출하는 API 또는 기타 서비스
설정 > 보호된 사이트 인증(서비스 호스트 이름에 대한 항목 포함). 다른 서비스에 대한 자격 증명을 참조하세요.
라이브 사이트에서 사용하는 API 키
콘솔이 아닙니다. 서버측 서비스는 팀이 배포하고 사이트를 호출하는 Adobe App Builder 또는 API Mesh와 같은 키를 유지합니다. 서비스 및 응용 프로그램 연결을 참조하세요.

작업에 키가 필요한 경우 붙여 넣어 작업을 완료하지 마십시오. 테이블에 표시되는 위치를 입력하고 에이전트에게 프로덕션 엔드포인트가 아닌 샌드박스 또는 테스트 엔드포인트를 제공합니다.

암호를 공유한 경우 secret-shared

  1. 즉시 발급한 서비스에서 암호를 취소하거나 바꿉니다. 채팅을 지우더라도 이미 전송된 것은 되돌릴 수 없으며, 작업 영역을 재설정할 때까지 에이전트 세션의 성적 증명서가 채팅을 유지합니다.
  2. 암호가 포함된 파일의 변경 내용 보기를 확인하고 푸시하기 전에 해당 변경 내용을 취소하십시오.
  3. 암호가 있는 파일이 이미 푸시된 경우 암호를 바꾸면 문제가 해결됩니다. 나중에 커밋하면 파일이 제거되지만 저장소의 내역에서는 제거되지 않습니다.
  4. 조직의 정책에 따라 보안 팀에 알립니다.

상담원은 채팅에 붙여 넣는 암호를 사용하지 말고 바꾸라고 지시합니다. 거기에 의존하지 마십시오: 답변할 때까지, 비밀은 이미 AI 모델에 도달했습니다.

결과 세부 조정 general-tips

블록의 배경색이 잘못되는 등 문제가 발생했을 때 에이전트를 다시 시작하지 말고 해당 문제를 수정하도록 요청하십시오. 소스 URL, 출력 경로, 표시되는 항목 및 예상한 항목의 이름을 지정합니다. 자세한 정보는 확인 팁을 참조하세요.

  • 마이그레이션된 페이지에서 템플릿의 모든 페이지에 도달하도록 블록 또는 가져오기 스크립트에 수정 사항을 요청합니다. 에이전트가 규모에 맞게 마이그레이션하는 방법을 참조하세요.
  • 수정 사항을 적용하기 위해 페이지를 다시 가져오기 전에 작성자가 편집했는지 확인합니다. 새 가져오기로 편집 내용이 바뀝니다. 일괄 가져오기를 참조하십시오.
  • 소스 페이지 및 첨부된 디자인을 요청을 재정의하는 지침이 아닌 작업할 자료로 처리합니다.
  • 긴 대화에서 대리인은 이전의 결정을 놓칠 수 있다. 중요 사항을 상기시키거나 프로젝트 파일에 기록하고 새 대화를 시작하도록 합니다. 새 대화 시작을 참조하세요.

사이트 생성 및 마이그레이션 프롬프트 site-migration

마이그레이션은 다음 순서로 진행됩니다. 사이트 카탈로그, 각 템플릿의 샘플 페이지 마이그레이션, 디자인 마이그레이션, 결과를 비평으로 확인, 템플릿의 다른 페이지를 가져오기. 전체 사이트에 대해 머리글, 탐색 및 바닥글이 한 번 설정됩니다. 전체 절차는 프로덕션 사이트 마이그레이션을 참조하십시오.

사이트 카탈로그로 계획 site-catalog

이러한 프롬프트를 사용하여 마이그레이션하기 전에 사이트의 크기, 템플릿 및 블록을 확인하십시오. 카탈로그를 시작하려면 사이트 카탈로그로 마이그레이션 계획을 참조하세요.

  • “https://www.example.com에서 템플릿 찾기”
  • “https://www.example.com에 페이지 유형이 몇 개나 있습니까?”

Source 페이지 캡처 scraping-webpages

페이지 마이그레이션은 소스 페이지를 캡처하여 시작됩니다. 마이그레이션하기 전에 페이지를 분석하도록 직접 요청합니다.

  • “분석을 위해 https://www.example.com/products을(를) 캡처합니다.”
  • “모바일 및 데스크톱 너비의 https://www.example.com/product에서 콘텐츠 및 메타데이터를 추출합니다.”

알아 두어야 할 사항:

  • 에이전트는 브라우저에 페이지를 로드하고 스크롤하여 지연 로드된 이미지가 로드되도록 합니다. 스크립트가 삽입하거나 CSS가 숨기는 콘텐츠와 숨길 수 없는 콘텐츠를 포함하여 캡처한 내용에 대해서는 제한 사항을 참조하십시오.
  • 페이지 제목, 설명, Open Graph 태그, JSON-LD 구조화된 데이터 및 표준 URL을 추출합니다.
  • 스크린샷과 이미지 사본을 저장하고 링크 및 이미지 참조를 표준화합니다. 응답형 이미지, 배경 및 SVG 이미지를 포함하여 소스를 기준으로 이미지를 확인하고 각 링크가 여전히 위치를 가리키는지 확인합니다.
  • 모바일 또는 데스크탑 등 특정 화면 너비를 요청합니다. 각 추가 너비는 더 오래 걸립니다.

페이지 마이그레이션 migrate-a-site

기존 웹 사이트에서 페이지를 가져오려면 이 프롬프트를 사용하십시오. 첫 번째 페이지를 단계별로 가져오려면 단계별로 페이지 가져오기를 참조하거나 Experience Manager 작성에 저장된 콘텐츠의 경우 사이트 연결 및 페이지 가져오기를 참조하십시오.

  • “https://www.example.com/products/hiking, https://www.example.com/products/climbing 페이지를 마이그레이션합니다. 기존 블록을 재사용합니다. 업로드, 푸시 또는 게시하지 마십시오.”

알아 두어야 할 사항:

  • 에이전트는 각 페이지의 섹션, 기본 콘텐츠, 블록 및 변형을 결정하고 새 블록을 생성하기 전에 프로젝트의 블록을 재사용합니다. 첫 페이지에서 이 구조를 확인합니다. 작성자가 편집하면 일괄 가져오기가 반복됩니다. 콘텐츠 구조 셰이프를 참조하십시오.
  • 콘텐츠와 디자인은 별개의 단계입니다. 콘텐츠를 가져온 후 에이전트는 디자인 마이그레이션 시작​을 제안합니다. 해당 항목을 선택하거나 원본 스타일을 지정하십시오. 새 디자인을 보려면 마이그레이션하는 동안 스타일 변경을 참조하세요.
  • 페이지 가져오기로 인해 머리글, 탐색 및 바닥글이 지워집니다. 머리글, 탐색 및 바닥글 설정을 참조하십시오.
  • 각 마이그레이션은 페이지의 템플릿에 대한 가져오기 스크립트를 작성하며, 이 스크립트는 템플릿의 다른 페이지에서 일괄 가져오기를 실행합니다.
  • Dynamic Media에서 제공된 이미지를 포함하여 이미지가 이동하는 위치에 대해서는 이미지 및 문서를 참조하십시오.

디자인 마이그레이션 design-migration

가져온 콘텐츠에서 소스 사이트의 디자인을 다시 작성하려면 이 프롬프트를 사용하십시오.

  • “https://www.example.com에서 디자인 마이그레이션”
  • “디자인 토큰 추출”
  • “히어로 블록 스타일 지정”
  • “모든 블록의 스타일 지정”

알아 두어야 할 사항:

  • 에이전트는 먼저 전체 사이트의 스타일을 지정합니다. 글꼴, 색상, 간격 및 제목 크기와 같은 디자인 토큰을 styles/brand.css에 CSS 사용자 지정 속성으로 씁니다. styles/styles.css은(는) 해당 파일과 스타일(제목, 단락, 단추, 링크 및 섹션 배경)을 기본 컨텐츠로 가져옵니다.
  • 그런 다음 각각 blocks/{name}/{name}.css에 있는 토큰의 블록을 나란히 스타일을 지정합니다. 따라서 블록 스타일링에는 사이트 전체 스타일이 먼저 필요합니다.
  • 프로젝트에 이미 brand.css 또는 다른 토큰 파일이 있는 경우 에이전트에게 소스에서 두 번째 집합을 추출하지 말고 해당 파일을 사용하도록 요청하십시오.
  • 요청이 전역적인지 또는 한 블록에 대한 요청인지 여부와 소스에 충실해야 하는지 또는 새 디자인을 따라야 하는지 여부를 설명합니다. 데스크탑 및 모바일 너비의 실제 페이지에서 결과를 확인합니다.

디자인 닫기 design-fidelity

에이전트는 소스 디자인을 다시 생성합니다. 디자인 토큰을 추출하고, 각 블록을 스타일링한 다음, 각 블록을 소스와 비교하여 발견한 차이점을 수정합니다. 사이트 평론을 참조하세요. 결과는 첫 번째 패스에서 원본에 가까워지며, 확인 메시지를 표시하여 남아 있는 내용을 수정합니다.

동일한 복사본은 보장할 수 없습니다. 글꼴, 이미지 압축 및 브라우저 렌더링은 소스와 약간 다를 수 있으며 "동일함"은 프로젝트마다 다른 것을 의미합니다. 한 팀은 픽셀 간격을 측정하고, 다른 팀은 브랜드가 동일하게 읽는지 확인합니다. 소스에도 동일한 템플릿의 두 페이지 간에 간격이 달라지는 등 자체적인 결함이 있으며 이러한 결함을 다시 만드는 것은 새 사이트에 도움이 되는 경우가 거의 없습니다.

의도한 디자인을 목표로 합니다.

  1. 페이지, 화면 너비 및 변경 사항에 대해 나머지 각 차이점을 설명하고 미리보기에서 결과를 확인합니다. 복잡한 설계는 여러 라운드를 수행할 수 있습니다.
  2. 모든 페이지에 적용되도록 전역 스타일 또는 블록의 CSS에서 반복되는 차이점을 수정합니다.
  3. 규모를 조정하기 전에 사이트에서 충분히 가까운 것으로 간주되는 항목에 대해 사인오프하는 사람과 동의하고 샘플 페이지에서 확인합니다.

피그마에서 블록 만들기 figma-block-migration

이러한 프롬프트를 사용하여 Figma 구성 요소에서 한 블록을 빌드합니다. Figure 디자인에서 작업은 액세스 토큰, 필요한 시트 및 한 번에 하나의 구성 요소를 사용하는 이유를 다룹니다.

  • “이 그림 구성 요소에서 블록을 만듭니다. {Figma link}. 디자인 토큰을 재사용합니다.”
  • “Figma 파일 {fileKey}에서 pricing-card 구성 요소를 마이그레이션합니다.”

알아 두어야 할 사항:

  • 그림에서 구성 요소를 선택하고 해당 링크를 복사하여 해당 링크에 https://www.figma.com/design/{fileKey}?node-id={nodeId}을(를) 식별하는 node-id이(가) 포함되도록 합니다. 또는 파일 키와 구성 요소의 이름을 지정합니다.
  • 에이전트는 먼저 구성 요소의 구조를 읽어 큰 Figma 파일을 관리할 수 있게 한 다음 디자인 세부 사항을 확인합니다. CSS를 작성하기 전에 해당 블록별 토큰을 사용하여 색상, 타이포그래피 및 간격을 디자인 토큰으로 styles/styles.css에 추가합니다. 구성 요소를 프로젝트에서 가장 가까운 블록에 매핑하여 변형을 만들고, 토큰에서 변형의 CSS를 쓰고, 콘솔 작업 영역에 이미지와 아이콘을 저장하고, 샘플 콘텐츠를 만듭니다. 그런 다음 블록을 미리 보고 Figma 디자인과 비교합니다.

Figma의 블록을 사용하여 재디자인 figma-redesign-migration

마이그레이션 중에 사이트가 새 디자인을 받을 때 다음 메시지를 사용합니다. Figma는 디자인과 블록을 제공하고 라이브 사이트는 콘텐츠를 제공합니다. 절차 및 비교할 내용은 마이그레이션 중 스타일 다시 지정을 참조하십시오.

  1. “Figure 구성 요소 {Figma link}에서 블록 컬렉션을 만드십시오.”
  2. “이 페이지를 마이그레이션하고 해당 콘텐츠를 Figma에서 만든 블록에 매핑합니다. https://www.example.com/adventures, https://www.example.com/magazine”

Figma의 블록이 소스 콘텐츠를 나타낼 수 없는 경우에만 새 변형을 요청하십시오.

그림에서 새 페이지 만들기 figma-new-page-from-figma

소스 사이트에 페이지가 없고 그림 프레임 또는 페이지가 새 페이지가 되어야 하는 경우 이 프롬프트를 사용합니다.

  • “이 그림 페이지를 /events의 새 페이지로 마이그레이션: {Figma link}”

알아 두어야 할 사항:

  • 전체 파일이 아닌 프레임 또는 페이지를 한 개 선택하고 페이지 섹션을 지웁니다.
  • 에이전트는 각 섹션을 기존 블록, 기본 콘텐츠 또는 새 변형에 매핑합니다. 텍스트와 이미지는 피그마에서 왔다.
  • 그림 프레임은 데이터의 출처나 동작 방식이 아니라 기능의 모습을 보여 줍니다. 검색, 계산기, 개인화 또는 스토어 로케이터의 경우 Figure 마이그레이션이 레이아웃을 만듭니다. 그런 다음 에이전트에게 동작을 동적 블록(으)로 빌드하도록 요청하고 API 또는 데이터 소스를 제공합니다.

머리글, 탐색 및 바닥글 설정 navigation-setup

바닥글 이미지를 포함하여 머리글, 탐색 및 바닥글에 대해 이러한 프롬프트를 사용합니다. 페이지 가져오기를 수행하면 모든 페이지가 하나의 머리글과 하나의 바닥글을 공유하므로 둘 다 제외됩니다.

  • “https://www.example.com에서 탐색 설정”
  • “https://www.example.com에서 바닥글 마이그레이션”
  • “탐색 메뉴 수정”

AEM 상용구의 머리글과 바닥글을 사용하는 프로젝트의 경우 알아야 할 사항:

  • 페이지의 nav 또는 footer 메타데이터가 다른 페이지의 이름을 지정하지 않는 한 헤더는 콘텐츠 루트에서 nav 페이지를 로드하고 바닥글은 footer 페이지를 로드합니다. 문서 기반 프로젝트에서 에이전트는 콘솔 작업 영역에 탐색을 nav.md(으)로 기록합니다.
  • 탐색 페이지에는 ---(으)로 구분된 세 개의 섹션이 있습니다. 브랜드, 로고 및 홈 페이지 링크, 기본 메뉴 및 로그인 또는 구독 링크와 같은 도구.
  • 중첩된 목록이 포함된 메뉴 항목이 드롭다운이 됩니다.
  • 브랜드 링크를 제외한 다른 페이지에서처럼, 단락에 굵게 또는 기울임꼴 링크만 있으면 버튼이 됩니다. 헤더에서는 버튼 스타일이 제거됩니다. 예: 원자 블록이 없는 유연한 티저를 참조하십시오.
  • 프로젝트가 header.js 또는 footer.js을(를) 변경한 경우 에이전트에게 먼저 확인하도록 요청하십시오.
  • Experience Manager 작성의 경우 탐색 페이지가 저장되는 위치와 사용 중인 모델을 확인합니다.

사이트 비평 site-critique

디자인 마이그레이션 후 이러한 메시지를 사용하여 마이그레이션된 모든 템플릿을 소스와 비교하고 차이점을 한 번에 수정합니다.

  • “비평 사이트”
  • “마이그레이션된 사이트의 모든 블록 유효성 검사”

알아 두어야 할 사항:

  • 머리글 또는 링크가 누락되거나 행 수가 잘못된 것과 같은 구조적 차이는 가져오기 스크립트에서 수정되고 페이지가 다시 가져오기됩니다. 색상, 간격 및 타이포그래피와 같은 스타일 차이는 CSS에서 수정됩니다.
  • 에이전트는 레이어별로 작동합니다. 전역 스타일, 섹션, 콘텐츠 차단, CSS 차단. 각 레이어가 끝난 후 결과를 다시 확인합니다.
  • 동일한 블록을 사용하는 여러 페이지에 동일한 문제가 나타나면 에이전트는 모든 페이지에 대해 블록을 한 번 수정합니다.
  • brand.css이(가) 없으면 에이전트에서 구조만 수정합니다.
  • 이 비평은 페이지가 어떻게 표시되는지 비교합니다. 작성자가 편집할 수 있는지, 상호 작용이 작동하는지, 상호 작용에 액세스할 수 있는지 별도로 확인하십시오. 제한 사항을 참조하십시오. 평론이 보고하는 적용 범위와 해결되지 않은 문제를 검토하십시오.

페이지 비평 page-critique

이러한 프롬프트를 사용하여 예를 들어 사이트 평가 후 하나의 마이그레이션된 페이지를 확인하십시오.

  • “정보 페이지 비평”
  • “https://www.example.com/about에 대해 마이그레이션된 페이지 /about의 유효성 검사”

에이전트에는 소스 URL과 마이그레이션된 경로가 필요하며, 이 URL은 사이트 설명과 동일한 계층을 통해 작동합니다. 미리보기의 나머지 차이점을 확인합니다.

블록 비판 block-critique

이러한 프롬프트를 사용하여 디자인 마이그레이션 후 한 블록을 확인합니다.

  • “영웅 블록 비평”
  • “사용자 정의 카드 블록의 유효성 검사”

블록은 페이지 마이그레이션으로부터 가져와야 합니다. 에이전트는 사이트 비평과 같이 수정합니다.

일괄 페이지 가져오기 bulk-import

샘플 페이지가 마이그레이션되고 선택된 후 템플릿의 다른 페이지를 가져오려면 이 프롬프트를 사용하십시오.

  • “https://www.example.com/blog/first-post, https://www.example.com/blog/second-post 페이지에서 대량 가져오기를 실행합니다.”
  • “모든 제품 페이지를 일괄 가져옵니다.”

알아 두어야 할 사항:

  • 일괄 가져오기는 에이전트가 템플릿의 샘플 페이지를 마이그레이션할 때 작성했던 가져오기 스크립트를 실행하므로 해당 페이지를 먼저 마이그레이션합니다. 에이전트가 규모에 맞게 마이그레이션하는 방법을 참조하세요.
  • 가져오기 스크립트는 해당 템플릿의 구조를 위해 작성되므로 각 실행은 한 템플릿의 페이지를 다룹니다.
  • 전체 목록을 가져오기 전에 먼저 몇 개의 페이지를 가져와서 확인하고 가져오기 스크립트를 수정합니다. 일괄 가져오기 및 일괄 가져오기 워크플로우를 참조하십시오.

개발 프롬프트 차단 block-development-capabilities

이러한 프롬프트는 마이그레이션 도중이나 프로젝트에서 블록을 만들고 변경합니다. 절차 및 검사에 대해서는 블록 만들기, 업데이트 및 리팩터링을 참조하십시오.

콘텐츠 모델 디자인 content-modeling

이러한 프롬프트를 사용하여 작성자가 블록에 채우는 테이블을 디자인합니다. 콘텐츠 기반 개발은 블록을 만들 때 이 단계를 실행합니다. 옵션을 비교하도록 직접 요청하십시오.

  • “추천 차단을 위한 콘텐츠 모델 디자인”
  • “이 회전판에 가장 적합한 콘텐츠 모델은 무엇입니까?”

알아 두어야 할 사항:

  • 네 가지 패턴이 대부분의 블록을 커버합니다.

    • 독립 실행형: 단일 테이블에서 영웅 또는 따옴표와 같은 고유한 요소 하나.
    • 컬렉션: 카드나 회전 슬라이드 같은 반복 항목에서 항목당 하나의 행이 있습니다.
    • 구성: API 또는 데이터 원본(예: 블로그 목록 또는 검색 결과)에서 콘텐츠를 가져오는 블록이며, 표시되는 내용을 제어하는 키 값 행이 있습니다. 동적 블록 빌드를 참조하십시오.
    • 작성자가 섹션 또는 기본 콘텐츠로 쓰고 코드가 탭 또는 YouTube과 같은 블록으로 바뀌는 자동 차단: 콘텐츠입니다.

  • 작성자가 채울 수 있도록 각 표를 몇 개의 셀과 관련 요소에 자연스럽게 유지합니다. 이는 작성자를 위한 것입니다. 블록 코드는 모든 테이블 구조를 읽을 수 있습니다.

  • 스타일의 차이점에 대해서는 구성 셀보다 블록 변형을 선호합니다.

  • Postel의 법칙에 따라 유연한 입력 수락: 히어로 블록은 콘텐츠가 하나의 셀에 있는지, 두 개의 셀에 있는지, 별도의 행에 있는지 여부를 확인해야 합니다.

  • Experience Manager 작성의 경우 블록에는 유니버설 편집기에 대한 모델도 필요합니다. 블록 만들기를 참조하세요.

참조 블록 찾기 reference-blocks

이러한 프롬프트를 사용하여 시작할 기존 구현을 찾으십시오.

  • “가격 테이블과 유사한 블록 찾기”
  • “어떤 블록을 추천에 사용할 수 있습니까?”
  • “탭 구현을 위한 차단 파티 검색”

알아 두어야 할 사항:

  • 컬렉션 차단​(으)로 시작합니다. Adobe은 이 기능을 유지 관리하고 각 블록에서 콘텐츠 모델링, 성능 및 접근성을 확인합니다. 일반적으로 필요한 블록을 포함합니다.
  • 필요한 항목이 없으면 파티 차단을 검색하세요. 커뮤니티는 실험 접근 방식, AEM Sidekick용 플러그인, 빌드 도구 및 통합을 포함하는 광범위한 범위로 유지 관리합니다. 승인된 항목만 반환합니다. AEM Sidekick은 페이지를 미리 보고 게시하는 브라우저 확장 프로그램입니다.
  • 다른 이름으로 검색: FAQ의 경우 아코디언, 갤러리의 경우 회전판 또는 슬라이드 쇼, 탐색의 경우 메뉴 또는 헤더.

블록 개발 block-development

이러한 프롬프트를 사용하여 블록을 만들거나 기존 블록을 변경합니다.

  • “추천 차단 만들기”
  • “히어로 블록에 비디오 배경 변형 추가”

알아 두어야 할 사항:

  • 에이전트는 콘텐츠 모델과 함께 테스트 콘텐츠를 만듭니다. 차단 확인을 참조하십시오. 테스트 콘텐츠를 사용하여 블록을 확인하고 끌어오기 요청에 PageSpeed Insights로 테스트할 페이지를 제공하며 작성자에게 블록 사용 방법을 보여 줍니다.
  • CSS만 변경하는 경우 에이전트는 콘텐츠 모델을 건너뛰지만 여전히 테스트 콘텐츠를 사용하여 결과를 확인합니다.
  • 블록을 만들기 전에 재사용할 블록을 찾습니다. 기존 블록 재사용을 참조하십시오.

설명서 검색 searching-documentation

이러한 프롬프트를 사용하여 Edge Delivery Services 기능 및 구현에 대한 지침을 찾으십시오.

  • “Edge Delivery Services에서 이미지를 느리게 로드하려면 어떻게 합니까?”
  • “문서에서 섹션 메타데이터 검색”

에이전트는 aem.live에서 설명서 및 블로그 게시물을 검색합니다. “웹 사이트” 또는 "빌드 방법"과 같은 일반적인 키워드가 아닌 “블록 장식”, “사이드 킥 플러그인” 또는 "메타데이터"와 같은 특정 키워드를 사용합니다. 코드를 시작하려면 참조 블록을(를) 대신 요청하세요. 프로젝트의 코드에서 찾은 내용과 해당 콘텐츠가 저장된 위치를 확인합니다.

변경 사항 테스트 testing

끌어오기 요청을 열기 전에 이러한 프롬프트를 사용하여 변경 사항을 테스트합니다.

  • “새 카드 블록 테스트”
  • “가져오기 요청을 열기 전에 테스트 실행”

에이전트는 값이 유지 관리 비용을 초과할 때 테스트를 기록합니다. 유틸리티, 데이터 처리 및 API 통합과 같이 논리가 많은 코드에 대한 단위 테스트를 유지합니다. 이는 재사용된 코드에서 속도가 빠르고 회귀를 포착하기 때문입니다. 브라우저 검사는 블록이 페이지, 상호 작용 및 모양을 변경하는 방법을 다룹니다. 끌어오기 요청 전에 확인할 내용은 확인 및 배달을 참조하십시오.

문제 디버그 debugging

블록, 이미지, 스타일 또는 미리 보기가 예상대로 작동하지 않을 때 이 프롬프트를 사용합니다. 더 자세한 검사를 위해 에이전트는 Edge Delivery Services 문제 해결 선택적 기능을(를) 켤 수 있습니다.

  • “이미지가 :error(으)로 표시되는 이유 디버그”
  • “렌더링되지 않는 히어로 블록을 수정합니다.”
  • “내 변경 사항이 미리보기에 표시되지 않는 이유는 무엇입니까?”

알아 두어야 할 사항:

  • 에이전트는 소스 파일, 렌더링된 페이지, 블록 코드 및 브라우저 콘솔을 순서대로 확인합니다. 콘솔의 미리 보기를 사용하므로 로컬 서버를 실행할 필요가 없습니다.

  • 일반적인 원인:

    • 그림에 about:error: 블록의 JavaScript에서 createOptimizedPicture을(를) 호출하지 않거나 블록의 태그를 재구성하기 전에 호출합니다.
    • 블록이 렌더링되지 않습니다. 콘텐츠의 블록 이름이 blocks/의 해당 폴더와 일치하지 않거나 폴더에 .js 또는 .css 파일이 없습니다.
    • CSS가 로드되지 않습니다. 파일 경로가 잘못되었습니다. 브라우저의 개발자 도구에 있는 네트워크 탭을 확인합니다.
    • 변경 내용이 표시되지 않습니다. 표시: 변경 내용이 없습니다. 및 콘솔 미리 보기가 사이트와 다릅니다..

  • 실패한 URL 및 오류 세부 정보를 유지하고 원인을 해결한 후 영향을 받는 가장 작은 범위를 다시 시도하십시오. 작업을 덮어쓰거나 재설정하기 전에 릴리스, 복구 및 인계하기를 참조하십시오.

Edge Delivery Services을 넘어 작업 beyond-eds

에이전트의 스킬과 지침은 페이지 마이그레이션, 블록 작성 및 스타일링, 프로젝트의 규칙 준수 등 Edge Delivery Services에 중점을 둡니다. 에이전트 자체는 범용 코딩 에이전트이므로 여기에 국한되지 않습니다. 사이트를 상거래 플랫폼, 마케팅 자동화 플랫폼, 검색 또는 지도 서비스 또는 자체 API에 연결하거나, 팀이 React로 빌드한 애플리케이션을 조정하거나, 팀이 배포하는 서버측 서비스의 코드를 작성할 수 있습니다. 다른 코딩 에이전트와의 통합에 적합한 기능은 설명서 우선, 코드 전 계획, 테스트한 작은 단계 및 여기에 적혀있는 의사 결정과 같습니다.

소스 사이트가 통합하는 내용을 확인하려면 에이전트에게 요청하여 분석, 태그 관리, 동의, 맵, 비디오, 채팅, 검색 및 양식과 같이 샘플 페이지가 로드되는 서드파티 서비스를 나열하십시오. 그런 다음 새 사이트에서 각 팀이 어떻게 작동하는지 팀과 결정합니다.

다른 시스템의 경우 상담원은 기술이 없고 일반적인 지식만 있으며, 이는 시대에 뒤쳐질 수 있습니다. 시스템의 자체 설명서를 통해 작업을 신뢰할 수 있으므로 함께 작업하십시오.

  1. 설명서를 먼저 읽도록 합니다. 에이전트에게 시스템의 개발자 설명서에 대한 링크를 제공하거나 첨부합니다. 코드를 작성하기 전에 통합 작동 방식, 서버에서 실행해야 하는 사항 및 관련된 비밀에 대해 설명하도록 요청합니다. 이 단계에서 이해도를 수정하십시오.
  2. Edge Delivery Services 방식으로 요청하세요. 통합이 블록에 속하는지, 위젯에 속하는지, 프로젝트의 스크립트에 속하는지, 페이지를 빠르게 유지하는 방법을 묻습니다. 대리인은 접근 방법을 제안하고 무엇을 알아야 하는지 묻는다.
  3. 시스템에 필요한 것을 제공합니다. 끝점, 필드 이름, 예제 요청 및 응답, 샌드박스 또는 테스트 계정 에이전트가 작동하는 동안 필요한 키를 보려면 자격 증명이 대신 이동하는 위치를 참조하십시오.
  4. 작은 단계로 빌드합니다. 미리 보기의 각 단계를 비프로덕션 끝점에 대해 테스트합니다.
  5. 결과를 기록합니다. 다음 대화가 시작되도록 에이전트에게 프로젝트의 지침 파일에 선택한 접근 방식과 설명서 링크를 작성하도록 요청합니다.

예:

https://developer.example.com/store-locator에서 스토어 로케이터 서비스, 특히 검색 API에 대한 개발자 설명서를 참조하십시오. 브라우저에서 실행되는 항목, 서버가 필요한 항목 및 관련된 비밀과 같은 Edge Delivery Services 지침에 따라 사이트에서 /stores에 가장 가까운 스토어를 표시하는 방법에 대해 설명합니다. 질문을 나열합니다. 아직 파일을 변경하지 마십시오.

예제 서비스, URL 및 경로를 고유한 URL로 바꿉니다.

다른 시스템을 설정하고, 서버측 서비스를 배포하고, 그 비밀을 저장하는 것은 팀과 해당 시스템 관리자에게 계속 유지됩니다. 통합 패턴은 서비스 및 응용 프로그램 연결을 참조하십시오.

예: Slack 업데이트(고급) slack-updates

설정​의 자격 증명, 프로젝트 스킬 및 AGENTS.md의 줄을 통해 팀이 이미 사용하고 있는 도구에 에이전트를 연결할 수 있습니다. 에이전트를 빌드하는 팀의 한 개발자는 해당 에이전트가 작업을 완료할 때마다 변경 내용과 함께 Slack에 요약을 게시하고 추가 지침으로 해당 설명을 읽도록 설정합니다. 그는 콘솔을 열어 두지 않고 긴 작업을 따르고 조종할 수 있습니다.

  1. 보트 토큰에 메시지를 게시하고 읽는 범위만 있는 Slack 앱을 만듭니다. 하나의 비공개 채널에 보트를 추가하거나 쪽지를 사용합니다.
  2. 설정 > 보호된 사이트 인증​에서 전달자 인증과 봇 토큰이 있는 호스트 이름 slack.com에 대한 항목을 추가하십시오. 다른 서비스에 대한 자격 증명을 참조하세요.
  3. 에이전트에게 Slack 웹 API를 사용하여 메시지를 게시하고 읽는 방법과 푸시 방법에 대해 설명하는 프로젝트 스킬을(를) 작성하도록 요청하세요.
  4. AGENTS.md에서 에이전트에게 slack.com에 대한 자격 증명이 설정되었는지, 사용할 채널과 게시할 시기(예: 각 차례가 끝날 때)를 알려 주십시오.

에이전트는 채널에서 읽은 내용을 채팅과 동일하게 지침으로 처리합니다. 귀하와 보트만 포함된 채널을 비공개로 유지하여 귀하만 에이전트에 지시할 수 있습니다. 게시하는 요약은 Slack용 콘솔을 떠나므로 표시되는 항목에 대한 조직의 정책을 따르십시오. 더 이상 사용하지 않을 경우 설정​에서 항목을 제거하십시오. 고정 헤더를 허용하는 HTTP API를 사용하는 다른 도구에 대해서도 동일한 패턴이 작동합니다.

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