GWD 배너 애니메이션

GWD 배너 애니메이션은(는) 무엇을 하나요?

제공된 디자인을 유지하면서 모션을 추가하는 편집 가능한 Google Web Designer 소스 프로젝트를 만듭니다. 모든 요청은 하나의 입력과 하나의 모션 모드 조합입니다.

입력	사용 시기
A. 레이어가 있는 GWD 폴더	사용자가 GWD 프로젝트(HTML + assets/ + gwd_workspace.json)를 제공하는 경우
B. Illustrator 아트보드	사용자가 Illustrator에서 디자인을 열어 놓았거나 .ai 파일을 가리키며 GWD 프로젝트를 원하는 경우

모션 모드	사용 시기
템플릿	사용자가 동일 세트의 샘플 GWD 배너를 제공하고 동일한 효과를 원하는 경우("giống hiệu ứng mẫu", 세트의 다른 크기)
자유	샘플이 없거나 사용자가 새/사용자 정의 모션을 요청하는 경우("tự làm hiệu ứng", "hiệu ứng tùy ý")

요청에서 모드를 선택하세요: 제공된 샘플이 있으면 템플릿 모드, 그렇지 않으면 자유 모드입니다. 유사한 브랜딩, 자산, 폴더 또는 크기만으로는 템플릿 모드를 암시하지 않습니다. 요청이 명확하게 모호한 경우에만 질문하세요.

도구

• scripts/inspect_gwd_banner.py <project>: 캔버스, 레이어, 소스, 클래스 목록 확인.
• scripts/prepare_layers.py, scripts/derive_light_layers.py: Illustrator 내보내기 → 정리된 2x 자산 + layout.json (references/illustrator-export.md).
• scripts/extract_gwd_motion.py <project> -o spec.json: GWD 프로젝트 → 스펙.
• scripts/adapt_template_motion.py: 템플릿 스펙 + 새 레이아웃 → 새 크기용 스펙 (references/template-mode.md).
• scripts/build_gwd_project.py spec.json <out>/<Name>: 스펙 → 편집 가능한 GWD 프로젝트(런타임은 assets/gwd-runtime, Advanced 모드 워크스페이스). 스펙 형식: references/spec-format.md.
• scripts/apply_half_scale.py <project>: 2x 이미지 → 자연 크기 요소, 배율 0.5 적용 (GWD 규칙 참조).
• scripts/validate_gwd_banner.py <project>, scripts/package_gwd_banner.py <project> [zip].

Python 스크립트는 Pillow와 numpy가 필요합니다 (python3 -m pip install --user pillow numpy).

워크플로우

1. 소스 보호. 제공된 GWD 폴더와 샘플은 읽기 전용으로 취급하고, 쓰기 가능한 출력 폴더에서 작업합니다. Illustrator에서는 사용자의 아트워크를 절대 수정하지 마세요. 임시 GWD_* 레이어에 복제한 후 작업이 끝나면 삭제합니다.
2. 레이어 획득.
   • 입력 A: 프로젝트를 복사하고 inspect_gwd_banner.py를 실행한 후, 의미(배경, 레이블, 헤드라인, 지원 카피, 오퍼, CTA, 일러스트레이션, 제품, 글로우, 악센트 라인…)에 따라 레이어를 매핑하고 시각적으로 확인합니다.
   • 입력 B: references/illustrator-export.md의 절차를 따릅니다. 모든 레이어를 2x 크기의 전체 아트보드로 투명 배경에 내보내고, prepare_layers.py를 실행한 후, 블렌드 모드를 사용하는 글로우에는 derive_light_layers.py를 실행합니다. 완성된 아트워크의 _ref2x.png도 내보냅니다.
3. 모션.
   • 템플릿 모드: references/template-mode.md를 참조하여 샘플을 추출하고 새 레이아웃에 맞게 조정한 후 스펙을 검토합니다. 샘플의 시퀀스, 타이밍, 이징, 루프는 변경하지 않습니다.
   • 자유 모드: references/motion-design-guide.md를 읽습니다. 키프레임을 작성하기 전에 한 문장의 콘셉트, 계층 구조, 하나의 시그니처 모션, 진입 시퀀스, 강조 및 읽을 수 있는 멈춤을 이 구성에서 선택하여 정의합니다. 컨텍스트 내 최근 작업과 비교하고 이전의 시그니처 모션이나 시퀀스를 반복한다면 재설계합니다. 스펙(입력 B)을 작성하거나 아래 GWD 규칙을 따라 복사된 HTML(입력 A)을 편집합니다.
4. 빌드. 입력 B(또는 모든 스펙): build_gwd_project.py를 실행합니다. 입력 A를 제자리에서 편집하는 경우: HTML, 자산, 런타임 파일을 유지하고 gwd_workspace.json에 "timeline.animationMode":"proMode"가 있는지 확인합니다.
5. 검증. validate_gwd_banner.py를 실행하고 모든 오류를 수정합니다.
6. 미리보기. 폴더를 HTTP로 서빙하고 브라우저에서 HTML을 엽니다. document.getAnimations().length가 예상 개수에 도달할 때까지 기다립니다(광고가 시작되지 않으면 document.getElementById('gwd-ad').initAd()를 호출하세요. GWD의 폴리트 로드는 불안정한 로컬 서버에서 WebComponentsReady를 놓칠 수 있습니다). 모든 애니메이션을 일시 중지하고 탐색하여 다음을 확인합니다: 초기 상태, 중요한 리빌, 시그니처 모션, CTA, 나중 멈춤, 루프 경계, 최종 상태. 입력 B의 경우 마지막 프레임을 _ref2x.png와 비교하고, 템플릿 모드에서는 동일한 시간에 샘플과 단계를 비교합니다. 숨겨진 브라우저 창은 실시간 재생을 멈출 수 있으므로 기다리지 말고 루프 이벤트 구조를 확인하세요.
7. 전달. package_gwd_banner.py를 실행하고, 프로젝트에 HUONG-DAN.txt(콘셉트 또는 "same as sample", 타임라인, 블렌드 모드가 포함된 레이어 매핑, 수동 편집 노트)와 짧은 검증 요약을 포함합니다.

GWD 규칙 (모든 모드)

• 각 애니메이션 요소는 고유한 gwd-gen-...gwdanimation 클래스와 일치하는 고유한 @keyframes ..._gwd-keyframes(또는 _gwd-mask-keyframes) 규칙을 가지며, #page1.gwd-play-animation .CLASS { animation: ...; }를 통해 적용됩니다.
• 키프레임 규칙당 하나의 백분율 선택자. 0%, 8%와 같이 선택자를 그룹화하지 마세요. GWD가 타이밍을 유한하지 않은 것으로 처리하여 문서를 열지 못할 수 있습니다.
• 중복 키프레임 이름, 무한 지속 시간 또는 지연이 없어야 합니다.
• 마지막 키프레임은 요소의 완전한 기본 변환을 유지하며, 필수 콘텐츠가 끝날 때 숨겨지지 않아야 합니다.
• 기본 스타일은 0% 키프레임과 동일해야 GWD 스테이지가 타임라인 시작과 일치합니다.
• 요청하지 않는 한 클릭스루 URL, 광고 환경, Enabler 통합, 카피, 레이어 순서 또는 캠페인 자산을 변경하지 마십시오. 축소된 GWD 런타임 라이브러리를 편집하지 마십시오.
• derive_light_layers.py가 생성한 라이트 레이어는 mix-blend-mode: screen을 사용해야 합니다.
• 2x 이미지: 요소는 PNG의 자연 크기를 유지하고 0.5배율로 조정됩니다(GWD 패널: Scale 0.5, 0.5, 0.5). 절반 크기 상자에 2x PNG를 늘려 넣지 마세요. 로컬에서는 올바르게 렌더링되지만 Google Ads / DV360 미리보기에서 너무 크게 표시됩니다. build_gwd_project.py가 자동으로 수행합니다. 기존 프로젝트(입력 A)의 경우 scripts/apply_half_scale.py <project>를 실행하고(다시 실행해도 안전함) 스펙 값은 1x CSS px로 유지하세요.
• 애니메이션 이미지의 모든 키프레임은 완전한 변환을 전달합니다(스크립트가 추가합니다). 키프레임이 불투명도만 유지하는 레이어는 기본 스타일에서 배율을 가져오므로, 나중에 GWD 스테이지에서 Scale을 변경하면 끝에 고정되어 라이트 레이어가 잘못 정렬됩니다. 사용자가 편집한 프로젝트를 확인할 때, 다른 것보다 먼저 각 레이어의 최종 변환을 의도된 0.5 배율과 비교하세요.

출력 기대치

• 소스는 변경되지 않으며, 임시 Illustrator 레이어는 제거됩니다.
• 출력물은 assets/ 폴더가 있는 편집 가능한 GWD 프로젝트(Advanced 모드)로 열리며, 자산은 2x입니다.
• 템플릿 모드: 모션은 샘플의 모션을 확실히 알아볼 수 있어야 하며, 거리가 새 구성에 맞게 조정됩니다.
• 자유 모드: 프로젝트에는 고유한 콘셉트와 시그니처 효과가 있습니다.
• 최종 프레임은 완전한 메시지(CTA가 있는 경우 포함)를 보여주며 소스 아트워크와 일치합니다.