josemidev/piezas-graficas

광고 그래픽 제작

이 스킬은 광고 캠페인의 전체 사이클을 다룹니다: 에이전시 자료 읽기, 실제 리소스(사진, 로고, 글꼴, 텍스트) 추출, 각 포맷 조합, 내보내기, 그리고 모든 결과물을 한눈에 보여주는 HTML 리뷰 갤러리 제공. 클라이언트의 수정 사항은 여러 라운드로 들어오므로, 모든 작업은 편집 가능한 원본에서 빠르게 재생성할 수 있어야 합니다.

핵심 규칙: 항상 HTML 리뷰 갤러리

모든 전달물(수정 라운드 포함)은 내보낸 모든 그래픽을 보여주는 index.html 파일로 마무리되며, export/ 폴더와 함께 사용자에게 전달됩니다(또는 Finder에서 열림). 이를 통해 사용자는 포맷을 한눈에 비교하고, 낱개 파일에서는 보이지 않는 오류를 발견하며, 실제 피드백이 오는 방식인 특정 부분을 캡처하여 응답할 수 있습니다({"여기 글자가 겹침", "160x600에서는 이 혜택 제거"}).

갤러리는 다음을 충족해야 합니다:

• 패밀리별로 그룹화(Homepage / Display / Post / Story…)하고 각 그래픽을 실제 크기로 표시하되 변형 없이 크기 조정
• 각 그래픽 아래에 크기, 파일명, JPG 용량, PNG 및 @2x 버전 링크 표시
• 안전 영역이 있는 포맷(스토리, 캐러셀 배경)에는 안전 영역과 예약 영역을 오버레이하는 체크박스 제공
• 라이트/다크 모드 지원, 더블 클릭으로 열림(export/에 대한 상대 경로 사용)

scripts/gallery.py를 사용하며, 그래픽이 변경될 때마다 갤러리를 재생성합니다.

작업 흐름

1. 프로젝트 폴더. 브랜드나 캠페인당 폴더 생성(<브랜드>-<캠페인>/)하며, 아래에 src/(편집 가능한 원본, 에셋, 스크립트), export/<패밀리>/, index.html 포함. 브랜드를 섞지 마세요: 한 번에 두 브랜드가 들어오면 각각 별도 폴더에 배치(사용자가 요청하면 별도 세션으로 진행).
2. 자료 읽기. references/extraccion.md 참조:
   • 공개 Google Slides: /export/pptx 및 /export/pdf 다운로드, 슬라이드 렌더링하여 키 비주얼 확인, .rels에서 편집 가능한 링크 추출({"EDITABLE", "DESCARGAR", "IMÁGENES"}).
   • Illustrator PDF: 마스크가 있는 사진(smask), 벡터 로고(get_drawings → SVG), 포함된 글꼴, 실제 법적 텍스트.
   • PSD: psd-tools로 아트보드와 레이어 추출, 각 요소를 레이어에서 개별 조합.
3. 조합 전 인벤토리. 각 그래픽의 모델, 가격, 혜택, 법적 문구, 로고를 나열하고 각 데이터의 출처를 표시. 두 슬라이드가 충돌할 경우(같은 모델에 두 가격), 가장 최근 편집 가능 파일을 사용하고 표시할 것; 조용히 선택하지 마세요.
4. 조합. 가장 적합한 원본 사용:
   • HTML + CSS (assets/banners-template.html): 그래픽당 div.ad[data-name], 절대 위치, 추출된 글꼴 및 SVG 사용. 라운드별 수정에 가장 빠름.
   • Python (PIL) 레이어 기반: 원본이 PSD이고 이미 래스터화된 요소를 재배치해야 할 때.
5. 내보내기. scripts/export_pieces.mjs (Playwright)가 각 .ad를 @1x 및 @2x PNG로 캡처; scripts/to_jpg.py가 전체 색상 및 패밀리별 용량 제한으로 JPG 생성. references/formatos.md 참조.
6. 전달 전 개별 검토. 각 내보낸 그래픽(특히 중요 영역에서 확대)을 확인, references/checklist-revision.md 참조. 수정하고 반복할 것; 보지 않은 것은 전달하지 마세요.
7. 전달. 갤러리 + Finder에서 폴더 열림 + 간단한 요약: 무엇을 했는지, 어떤 결정을 내렸는지, 확인이 필요한 것.

조합 원칙

• 명시적 계층 구조. 우선순위를 묻거나 추론하여 모든 포맷에서 유지. 일반적인 프로모션 순서: 1) 제안(가격 또는 할인율), 2) 상점/브랜드 로고, 3) 동등한 수준의 나머지(캠페인 로고, 혜택, 제품).
• 공간 활용. 각 포맷은 고유한 조합을 가짐; 단순히 크기 조절만으로는 안 됨. 제품이 넓으면 전체 너비를 주고 정보를 행으로 배치; 높으면 텍스트 옆에 열로 배치. 큰 빈 공간이나 매우 작은 요소가 남지 않도록 확인.
• 제품 재생성 금지. 차량이나 제품의 실제 사진 사용, 색상, 타이어, 디자인 변경 금지. 새 포맷에 장면이 부족하면 하늘, 바다, 땅을 자연스럽게 확장(references/extraccion.md의 "배경 확장" 참조).
• 사진 내 번호판 및 텍스트. 번호판 텍스트를 변경해야 하면, 실제 윤곽선 위에 원근감 있게 다시 그리고, 평평한 직사각형 절대 올리지 마세요.
• 대비. 사진 위 흰색 텍스트: 텍스트 블록 전체에서 최소 4.5:1 비율이 되도록 부드러운 그라데이션 사용, 측정할 것.
• 줄 간격. 편집 가능 파일에서 줄 간격을 측정하여 복제; 좁은 줄 간격의 응축 글꼴은 줄이 서로 닿게 함.

수정 라운드

수정 사항은 클라이언트의 캡처나 이메일로 전달됩니다. 각 수정에 대해:

• 변경 사항을 원본에 적용(PNG를 직접 수정하지 말 것)하고 영향을 받는 모든 그래픽 재내보내기
• 요청이 "X 크기의 모든 그래픽"이면 프로젝트의 모든 브랜드에서 해당 크기를 찾고, 수정한 것과 해당되지 않는 것을 알림
• 시각적으로 수정된 그래픽 재검토(텍스트 변경은 좁은 포맷에서 줄 바꿈을 깨트릴 수 있음)
• 갤러리 업데이트

이미 발생한 오류 및 예방: 모델명 불완전(키 비주얼에 포함된 버전 누락), 다른 버전의 가격, 클라이언트가 원하지 않는 버튼(홈페이지는 버튼 없음, 디스플레이는 버튼 포함), 포함되지 않아야 할 포맷의 혜택, 문단 마지막에 단독 단어({"LLENO"만, "90%"만).

이 스킬의 파일

• references/extraccion.md: PDF, PSD, Slides에서 사진, 벡터, 글꼴, 텍스트 추출 방법; 배경 확장; 번호판.
• references/formatos.md: 일반적인 크기, 안전 영역, 용량 제한, 선명한 내보내기.
• references/checklist-revision.md: 전달 전 각 그래픽에서 확인할 사항.
• scripts/export_pieces.mjs: HTML의 각 .ad를 @1x/@2x PNG로 내보내기.
• scripts/to_jpg.py: PNG → JPG sRGB 4:4:4, 용량 제한.
• scripts/gallery.py: 리뷰용 index.html 갤러리 생성.
• scripts/pdf_assets.py: Illustrator PDF에서 마스크가 있는 이미지, 글꼴, 벡터(SVG) 추출.
• scripts/psd_elements.py: PSD의 아트보드와 레이어 목록, 각 레이어 그룹을 투명 PNG로 추출.
• assets/banners-template.html: 그래픽별 레이아웃 템플릿.