Experience 현대화 에이전트를 사용하여 시각적 변경 수행 visual-changes
이 안내서는 색상, 글꼴, 간격 및 블록 레이아웃 등 사이트의 디자인을 변경하는 설계자와 다른 사용자를 위한 것입니다. Experience Modernation Console의 Experience Modernation Agent 변경 사항에 대해 설명하고 미리 보기에서 확인한 다음 개발자에게 보내어 검토합니다. 에이전트가 코드를 작성하므로 CSS나 JavaScript을 작성할 필요가 없습니다. 하지만 변경 사항은 Git 저장소를 통해 사이트에 도달하므로 기본 사항이 필요합니다. 작업을 분기로 푸시하고 가져오기 요청으로 넘깁니다. 이 용어가 새로운 경우 이 안내서에서 사용되는 단어를 참조하세요.
시작하기에 앞서 before-you-start
프로젝트를 이끄는 사람에게 다음 사항을 질문합니다.
- 콘솔에 액세스합니다. Adobe ID으로 로그인합니다. 경험 현대화 콘솔 열기를 참조하십시오.
- 작업할 사이트입니다. 사이트의 Git 저장소를 콘솔 작업 공간에 연결하며, 이렇게 하려면 저장소에 대한 쓰기 액세스 권한이 필요합니다. 사이트 연결을 참조하세요.
- 귀하의 작업 부분입니다. 다른 사람이 동일한 파일을 동시에 변경하지 않도록 자신의 블록, 페이지 또는 스타일에 동의하십시오. 한 사람으로 시작, 작업 나누기를 참조하세요.
- 양도하는 방법. 대부분의 팀은 개발자가 모든 변경 사항을 검토하도록 주 분기를 보호합니다. 새 PR 만들기를 푸시할지 여부를 묻습니다. 검토를 위해 전달을 참조하세요.
- Figma 디자인의 경우 파일을 읽을 수 있는 Figma 시트입니다. 그림 디자인에서 작업을 참조하세요.
작업은 푸시할 때까지 자체 콘솔 작업 영역에 유지됩니다. 미리 보기에서 시도한 어떤 것도 라이브 사이트에 단독으로 도달하지 않습니다.
변경할 수 있는 사항 what-you-can-change
Edge Delivery Services 사이트에서 작성자는 콘텐츠를 작성하고 코드는 그 모양을 결정합니다. 따라서 시각적으로 변경하면 사이트의 코드(대부분 CSS)가 변경되고 작성자가 입력한 콘텐츠는 그대로 유지됩니다. 페이지를 다시 가져오거나 업로드할 필요가 없습니다.
코드의 각 부분은 사이트의 다른 부분에 도달합니다. 변경을 요청하기 전에 해당 범위가 어디까지인지 결정하십시오.
--link-color과(와) 같이 지정됩니다.변형, 섹션 스타일 및 템플릿은 작성자가 적용하는 경우에만 적용됩니다. 에이전트에게 작업 중인 페이지에 하나를 적용하여 볼 수 있도록 요청하고 작성자에게 사용 시기를 알려 주십시오.
일부 요청은 사이트의 수준을 벗어납니다. 작성자가 채우는 필드를 추가하거나 블록 콘텐츠가 구조화되는 방식을 변경하거나 회전판과 같은 동작을 추가하면 블록의 콘텐츠 모델 또는 논리가 변경됩니다. 필요한 사항을 설명하고 이러한 결정을 개발자에게 맡기십시오. 블록 만들기, 업데이트 및 리팩터링을 참조하세요.
일부 페이지에 대한 변경 사항 제한 impact
블록 또는 전역 스타일을 변경하면 해당 스타일을 사용하는 모든 페이지가 변경됩니다. 요청을 하기 전에 에이전트에게 블록이나 스타일이 사용되는 위치를 물어보십시오. 예: “내 작업 영역에서 카드 블록을 사용하는 페이지는 무엇입니까?”
변경 사항이 일부 페이지에만 적용되어야 하는 경우 대신 다음 중 하나를 요청합니다.
- 블록의 일부 인스턴스만 다르게 표시되어야 하는 경우 블록 변형입니다.
- 섹션 스타일은(는) 강조 표시된 영역과 같이 페이지의 일부가 고유한 모양이 필요할 때 사용합니다.
- 페이지 템플릿은(는) 모든 제품 페이지와 같은 페이지 유형에 고유한 모양이 필요할 때 사용합니다.
의미 표시 references
그림이 묘사보다 더 정확한 경우가 많다. 첨부할 프롬프트에서 파일 첨부(paperclip 아이콘)를 사용합니다.
- 살펴볼 문장과 함께 원하는 결과 또는 문제의 스크린샷입니다.
- 브랜드 스타일 안내서의 페이지(이미지 또는 Word 또는 PowerPoint 파일)입니다.
또한 올바르게 보이는 사이트의 페이지를 가리킬 수도 있습니다. “/adventures의 카드가 /magazine의 카드처럼 보이도록 합니다.” 팀이 사용할 수 있는 디자인과 참조 사이트만 사용하십시오.
상담원은 대화 사이의 브랜드 규칙을 기억하지 못합니다. 단추 스타일 또는 제목 크기와 같이 규칙이 확정되면 모든 대화에서 규칙을 따르도록 에이전트에게 프로젝트의 지침 파일에 규칙을 작성하도록 요청합니다. 프로젝트 지침 및 메모리를 참조하세요.
Figma 디자인에서 작업 figma
에이전트는 Figma 가져오기 추가 기능을 통해 Figma의 디자인을 읽을 수 있습니다. 디자인의 색상, 타이포그래피, 간격 및 변수를 사이트의 디자인 토큰으로 전환하고, 구성 요소를 블록 또는 블록 변형으로 변환합니다.
- Figure에서 콘솔의 🔗자격 증명 설정에 나열된 읽기 전용 범위를 사용하여 개인 액세스 토큰을 만들기합니다.
- 콘솔에서 설정을 열고 자격 증명에 토큰을 입력한 다음 저장을 선택합니다. 새 토큰이 적용되는 데 2분 정도 걸릴 수 있습니다.
- 그림에서 하나의 구성 요소 또는 프레임을 선택하고 해당 링크를 복사합니다. 링크는 선택 항목을 식별하는
node-id을(를) 포함합니다. - 콘솔에서 "이 그림 구성 요소와 일치하도록 티저 블록 업데이트:
{Figma link}“와 같은 링크가 포함된 메시지를 보냅니다. 기존의 디자인 토큰을 재사용합니다.”
알아 두어야 할 사항:
- 한 번에 하나의 구성 요소 또는 프레임입니다. 에이전트는 구성 요소에서 한 블록을 빌드하거나 프레임에서 한 페이지를 빌드합니다. 다음 링크를 보내기 전에 각 결과를 확인하십시오. Figure에서 블록 만들기 및 Figure에서 새 페이지 만들기를 참조하십시오.
- 토큰, 파일 개인 액세스 토큰은 사용자가 열 수 있는 모든 Figma 파일을 읽으며 그 외에는 아무 것도 읽지 않습니다. Figma는 문제를 해결하고 제한을 설정합니다. 각 사용자는 자신의 토큰을 저장합니다. 이는 에이전트가 디자인에서 읽는 디자인 토큰, 색상 및 간격과는 아무런 관련이 없습니다.
- Figma의 좌석입니다. 개발 또는 전체 Figma 시트가 필요합니다. Figma 및 디자인 시스템을 참조하세요. 콘솔에서 상태 429의 Figma API 오류를 보고하면 토큰이 Figma의 속도 제한에 도달했습니다.
- 추가 기능입니다. 그림 가져오기는 선택적 기능입니다. 프로젝트에 대해 켜져 있지 않으면 에이전트가 켤 수 있도록 합니다.
- 디자인 토큰. 새 토큰을 기존 토큰과 비교합니다. Figure 값이 기존 토큰과 약간 다를 경우 둘 다 유지하지 않고 둘 중 하나를 유지하십시오.
사람들이 Figma를 에이전트와 함께 사용하기 전에 조직에서 승인하는 내용은 Figma 및 디자인 시스템을 참조하십시오.
첫 번째 변경 first-change
- 콘솔의 미리 보기 패널에서 페이지를 엽니다.
- 뷰포트 메뉴에서 확인할 너비를 선택합니다. 데스크톱, 태블릿 또는 모바일.
- 미리 보기 패널에서 선택 아이콘을 사용하여 검사 모드를 켭니다.
- 제목, 이미지 또는 단추와 같이 변경할 요소를 선택합니다. 요소가 프롬프트에 추가됩니다. 에이전트는 HTML 및 페이지에서의 위치를 수신하고 변경 사항을 해당 요소로 제한합니다.
- 변경 사항과 해당 변경 사항이 도달하는 거리를 설명한 다음 프롬프트를 보냅니다. 예: “여기 및 모든 페이지에서 이 버튼에 기본 스타일을 사용하십시오.”
- 에이전트가 완료되면 미리 보기가 업데이트되지 않은 경우 미리 보기 새로 고침을 선택하십시오. 각 뷰포트 크기에서 결과를 확인하십시오.
- 무언가가 올바르지 않은 경우, "모바일에서 텍스트가 이미지에 닿습니다."와 같이 표시되는 것을 말합니다. 한 번에 한 번씩만 바꿔달라고 하고, 다음 것을 물어보기 전에 확인해 봐.
변경 내용을 실행 취소하려면 에이전트에게 되돌리도록 요청하십시오. 푸시되지 않은 변경 내용을 모두 삭제하려면 변경 내용 보기를 열고 파일 옆에 있는 취소를 선택합니다. 작업 변경을 참조하세요.
몇 번 시도해도 에이전트가 계속 변경되지 않으면 개발자에게 문의하거나 메뉴 표시줄에서 지원 요청을 선택하고 요청한 내용과 표시되는 내용을 설명합니다. 요청이 에이전트를 빌드하는 팀에 전달됩니다. 대화가 잘 진행되지 않을 때 콘솔은 도움이 필요하십니까?에 도움말도 제공할 수 있습니다. 지원 요청을 참조하세요.
프롬프트 예 example-prompts
- “모든 제목에 첨부된 스타일 안내서의 제목 글꼴을 사용하도록 합니다.”
- “카드 블록의 카드 높이가 같도록 하고 단추를 맨 아래에 정렬하십시오.”
- “어두운 브랜드 색상에 흰색 텍스트가 있는 티저 블록의
dark변형을 추가하고/adventures의 두 번째 티저에 적용합니다.” - “배경이 밝고 위와 아래에 더 많은 공간이 있는
highlight섹션 스타일을 추가하고 홈 페이지의 뉴스레터 섹션에 사용하십시오.” - “모바일에서 열을 스택하고 이미지를 텍스트 위에 놓습니다.”
- “내 작업 영역에서 히어로 블록을 사용하는 페이지는 무엇입니까? 이 변경 후 각 항목이 어떻게 표시되는지 보여 주십시오.”
- “프로젝트의 지침 파일에 동의했던 단추 스타일을 작성하십시오.”
인계하기 전에 확인 check
- 모든 뷰포트 크기(특히 모바일)를 확인하세요.
- 작업한 페이지뿐만 아니라 동일한 블록, 스타일 또는 템플릿을 사용하는 다른 페이지를 확인합니다.
- 디자인이 긴 제목, 짧은 제목, 누락된 이미지, 많은 항목이 있는 목록 등 실제 콘텐츠를 처리하는 방법을 확인합니다.
- 텍스트가 배경에서 읽을 수 있는지 확인합니다. 에이전트에게 "WCAG AA와 비교하여 티저 블록의 텍스트 색상 대비를 확인합니다."라고 요청할 수 있습니다.
- 푸시 후 끌어오기 요청에 나열된 미리보기 URL을 열고 해당 페이지를 확인합니다. 콘솔 미리 보기가 사이트와 다릅니다.
리뷰를 위해 양도 hand-over
- 코드 변경 푸시에 설명된 대로 새 PR 만들기로 코드를 푸시합니다. 변경 내용에 속하는 파일만 스테이징하고 "카드용 둥근 모서리 및 그림자"와 같은 일반 문장으로 설명합니다.
- 알림에서 PR 보기를 선택하고 끌어오기 요청의 링크를 검토한 개발자에게 보냅니다.
검토자가 요청하는 내용을 변경하려면 동일한 분기에서 계속 작업한 다음 현재 분기로 푸시를 사용하여 푸시합니다. 가져오기 요청이 업데이트됩니다.
개발자가 콘텐츠를 병합하면 변경 내용이 라이브 사이트에 도달합니다. 페이지에서 텍스트나 이미지를 변경한 경우, 즉 콘텐츠 변경 사항은 페이지가 업로드되고 게시될 때만 사이트에 도달합니다. 이를 수행하는 작성자의 의견에 동의합니다. 콘텐츠 변경 조정을 참조하십시오.
이 안내서에 사용된 단어 glossary
--link-color)으로 저장된 색상, 글꼴 또는 간격에 대해 이름이 지정된 값입니다.main 분기를 사용합니다.섹션, 블록 및 기본 콘텐츠는 콘텐츠 구조 모양에서 자세히 설명합니다.