스킬 자체의 표현으로
소셜 미디어 커버, 광고 캠페인, 웹사이트 히어로, 인쇄물을 위한 배너를 HTML/CSS로 여러 아트 디렉션 옵션을 생성하여 디자인합니다. 구조화된 질문(플랫폼, 콘텐츠, 브랜드, 스타일, 수량)을 통해 요구사항을 수집하고, 번들로 제공되는 크기 및 안전 영역 가이드를 참조하며, 정확한 플랫폼 치수로 픽셀 퍼펙트한 PNG를 내보냅니다.
미니멀리즘, 그래디언트, 볼드 타이포그래피, 사진 기반, 지오메트릭, 글래스모피즘, 네온을 포함한 22가지 아트 디렉션 스타일을 지원합니다. Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display 및 사용자 지정 형식을 처리합니다. 요청당 기본 3개 옵션을 제공합니다. 사용자 제공 에셋, CSS로 구성된 시각 요소, 또는 선택적으로 생성된 배경을 사용하며, 브랜드 규칙을 임의로 만들어내지 않습니다. 동영상 편집, 전체 웹사이트 디자인, 인쇄 제작은 다루지 않습니다.
산출물
- 정확한 플랫폼 치수의 PNG 이미지 파일을 kebab-case 명명 규칙으로 assets/banners/{campaign}/에 내보냅니다
- 이미지 캡처가 불가능한 경우 각 배너 변형에 대한 HTML/CSS 소스 코드
작동 방식
- 01구조화된 질문을 통한 요구사항 수집
목적(소셜 커버, 광고, 히어로, 인쇄), 플랫폼 또는 사용자 지정 치수, 콘텐츠(헤드라인, 서브텍스트, CTA, 로고), 브랜드 가이드라인, 스타일 선호도, 수량(기본 3개 옵션)을 수집합니다.
- 02아트 디렉션 및 안전 영역 조사
대상 형식, 안전 영역, 적합한 스타일을 위해 번들로 제공되는 banner-sizes-and-styles.md 참조 문서를 읽습니다.
- 03HTML/CSS로 각 옵션 디자인
최대 2종의 서체, 단일 CTA, 4.5:1 텍스트 대비를 사용하여 안전 영역 규칙(중심 70~80%에 핵심 콘텐츠 배치)에 맞춰 정확한 플랫폼 치수로 배너를 제작합니다.
- 04옵션별 시각 소스 선택
사용자 제공 에셋을 우선시하며, 의존성 없는 결과를 위해 CSS로 구성된 시각 요소(그래디언트, 지오메트릭 형태)를 사용하거나, 런타임이 지원하는 경우 선택적으로 대상 종횡비에 맞춰 배경을 생성합니다.
- 05배너를 PNG 이미지로 내보내기
각 배너를 정확한 뷰포트로 브라우저에서 미리 보고, 표준 스크린샷 기능으로 PNG로 캡처하며, 픽셀 치수, 안전 영역 크롭, 폰트 로딩, 이미지 품질을 검증합니다.
- 06근거와 함께 옵션 제시
내보낸 모든 이미지를 아트 디렉션 스타일 이름, 미리보기, 핵심 디자인 근거, 파일 경로, 치수와 함께 나란히 보여줍니다.