캠페인 포스터 디자인은(는) 무엇을 하나요?

사용자: 메시지를 하나 보내세요. 예를 들어:

https://github.com/greatopomu/claude-assets 에서 poster-design 스킬을 사용해 [브랜드]의 인스타그램 포스터 5개를 디자인해 줘. 여기 그들의 웹사이트 / 기존 전단지가 있어: [링크 또는 파일].

그게 전부입니다. Claude가 필요한 것이 있으면 추가로 물어볼 거예요.

Claude: 이 파일은 전체 작업을 어떻게 실행할지 알려줍니다. 처음부터 끝까지 따르세요. 사용자의 노력을 최소화하세요: 한 번 물어보고 작업을 진행하세요.

0부: 설정 (먼저 조용히 수행)

도우미 도구는 같은 저장소의 tools/ 디렉토리에 있습니다. 아래 tools/export_png.py와 같은 경로는 저장소 루트를 기준으로 합니다.

도구를 가져옵니다. 명령어를 실행할 수 있고 저장소가 아직 이 컴퓨터에 없으면: git clone --depth 1 https://github.com/greatopomu/claude-assets.git git을 사용할 수 없으면 https://github.com/greatopomu/claude-assets/archive/refs/heads/main.zip 을 다운로드하여 압축을 풉니다.
설치 및 확인: python -m pip install -r tools/requirements.txt 그런 다음 python tools/check_setup.py를 실행합니다. 이 컴퓨터에서 무엇이 작동하는지 알려줍니다. 모든 도구가 작동하는지 확인하려면 python tools/selftest.py를 실행하세요.
템플릿에서 시작: skills/poster-design/template/index.html을 프로젝트 폴더에 복사합니다. 이미 브랜드 토큰, 미리보기 페이지(Fit / Phone / 100%) 및 ?solo=pN 내보내기 모드가 포함되어 있습니다.

대체 방법. 다음 중 해당하는 사항을 사용자에게 명확히 알리세요.

이것이 없으면	대신 이렇게 하세요
코드를 실행할 방법이 없음 (일반 채팅)	템플릿을 사용하여 포스터를 하나의 HTML 파일(또는 아티팩트)로 빌드합니다. 내보내려면 사용자가 Chrome에서 파일을 열고 주소창에 `?solo=p1`을 추가한 후, 개발자 도구(F12 / Cmd+Opt+I) → 명령 메뉴(Ctrl/Cmd+Shift+P) → "전체 크기 스크린샷 캡처"를 실행합니다. 각 포스터마다 반복합니다.
Python은 작동하지만 브라우저가 없음	Google Chrome 또는 Edge를 설치하고 `CHROME_PATH`를 Chromium 기반 브라우저로 설정하거나, `pip install playwright` 후 `python -m playwright install chromium`을 실행합니다. 그렇지 않으면 위의 수동 내보내기를 사용합니다.
Higgsfield CLI 또는 크레딧이 없음	스톡 사진(경로 A) 또는 ChatGPT(경로 B)를 사용합니다.
ChatGPT용 내장 브라우저(Claude 데스크톱)가 없음	사용자에게 ChatGPT에서 이미지를 생성하고 다운로드한 후 파일을 공유하도록 요청합니다.
인터넷에서 다운로드할 수 없음	사용자에게 선택한 스톡 사진을 다운로드하여 공유하도록 요청합니다.

이미지 도구는 선택적 도우미입니다. 하나를 실행할 수 없으면 동일한 단계를 다른 방식으로(예: 직접 사진 선택) 수행하고 계속 진행하세요.

무엇을 만드는지

시니어 그래픽 디자이너가 만든 것처럼 보이는 디자인된 캠페인 포스터입니다. 텍스트가 있는 AI 이미지가 아닙니다.

HTML, CSS 및 SVG로 모든 포스터를 빌드한 다음 헤드리스 브라우저(tools/export_png.py)를 사용하여 PNG로 내보냅니다.
이미지(사람, 제품, 장소)는 재료일 뿐입니다. 세 가지 경로(4부) 중 하나에서 가져옵니다. 이미지 도구가 완성된 포스터를 만들지 않습니다.
각 브랜드는 고유한 스타일을 갖습니다. 방법은 동일하게 유지되지만 아트 디렉션은 매번 새롭게 선택됩니다. 다른 브랜드의 레이아웃을 재사용하지 마세요.

1부: 먼저 물어보기 (한 메시지, 누락된 것만)

사용자의 메시지와 파일 또는 링크를 읽습니다. 그런 다음 하나의 짧은 메시지를 보내며 여전히 답변이 필요한 질문만 합니다. 각 질문에 대해 합리적인 기본값을 제공하여 사용자가 "기본값으로 괜찮습니다"라고 답할 수 있도록 합니다.

다음 사항을 이 순서대로 물어보되, 이미 답변된 것은 건너뜁니다.

브랜드 기본 정보: 이름, 판매 제품, 도시 또는 국가, 고객층.
브랜드 자산: 로고 파일, 브랜드 색상(또는 샘플을 추출할 수 있는 웹사이트나 전단지), 브랜드 폰트.
크기 및 용도: 인스타그램용 기본 1080 × 1350. 기타 옵션: 1080 × 1080, 1080 × 1920 스토리, A4 또는 A3 인쇄.
포스터 수 및 각각의 문구: 예: 서비스, 제안, 이벤트 또는 "선택에 맡김".
필수 포함 세부 정보: 가격, 날짜, 전화번호, 주소, 웹사이트 또는 행동 유도. 제공되지 않은 것은 플레이스홀더로 표시됩니다.
사람 규칙: 기본값은 6부의 규칙입니다.
이미지: 기본값은 사용 가능한 모든 것을 이 순서대로 사용하는 것입니다. 스톡 사진(무료), 내장 브라우저의 ChatGPT(무료, 제한적), 그다음 Higgsfield(유료 크레딧). 유료 크레딧을 사용해도 되는지 물어보세요.
저장 위치: 기본값은 브랜드 이름을 딴 새 폴더입니다.

디자인 선택(스타일, 레이아웃 또는 효과 등)에 대해 묻지 마세요. 그것은 당신의 임무입니다. 2부에서 방향을 보여줄 것입니다.

2부: 계획을 세우고 하나의 체크포인트 보여주기

이 모든 것을 직접 수행한 다음 사용자에게 승인을 받을 하나의 짧은 계획을 보여줍니다.

브랜드 색상 샘플링 스크립트(tools/sample_colours.py)를 사용하여 파일에서 추출합니다. 추측하지 마세요. 로고를 깨끗한 SVG로 다시 그릴 계획을 세우고, 흐릿하게 잘라낸 부분은 사용하지 마세요.
카테고리 조사: 3~4개의 선도 브랜드가 광고하는 방식(레이아웃, 유형, 이미지, 톤)과 지역 경쟁사 1곳을 조사합니다. 사고 방식은 차용하되 자산은 절대 차용하지 마세요. 메모와 출처를 RESEARCH.md에 저장하세요.
지역 진실 수집: 실제 장소, 일상적인 습관, 사람들이 실제로 사용하는 단어 및 지역적 세부 정보. 지역적 세부 정보의 예: 해당 주의 일반적인 차량 색상 또는 지역 복장.
아트 디렉션 선택: 3부 표의 각 행에서 이 브랜드와 대상 고객에게 맞는 옵션 하나를 선택합니다. 또한 글꼴(Google Fonts)과 색상 사용 방법(어느 것이 주도하고, 어느 것이 악센트이며, 배경은 무엇인지)을 선택합니다.
포스터 아이디어 작성: 각 포스터에 대해 하나의 아이디어, 8단어 미만의 헤드라인, 고객이 얻는 이점으로 시작하는 하나의 서브라인, 행동 유도, 필요한 이미지 및 스토리 요소를 작성합니다. 두 포스터가 레이아웃이나 스토리 요소를 공유하지 않도록 합니다.

체크포인트, 빌드 전 유일한 것. 사용자에게 다음을 보여줍니다.

색상
2~3줄의 아트 디렉션
글꼴
헤드라인이 포함된 포스터 목록

"진행할까요, 아니면 변경할 사항이 있나요?"라고 물어보세요. 짧게 유지하세요.

3부: 아트 디렉션 선택

브랜드별로 선택하세요. 다른 브랜드는 여러 행에서 달라야 합니다.

선택	옵션
라이트	다크하고 무드 있는 · 밝고 경쾌한 · 어스니 미드톤 · 흑백에 한 가지 색상
색상 사용	한 가지 색상이 주도하고 악센트 있음 · 듀오톤 사진 · 대담한 색상 블록 · 브랜드 악센트가 있는 뉴트럴
유형	헤비 그로테스크 · 콘덴스되고 키가 큰 · 둥근 기하학적 · 에디토리얼 세리프와 산세리프 · 손글씨 악센트
형태	유기적인 블롭과 웨이브 · 하드 기하학적 각도 · 가는 선과 그리드 · 종이 오려내기 · 원과 아크
사진 처리	모양 위에 오려내기 · 컬러 오버레이로 전체 면적 · 형태 안의 사진 · 넓은 사진 밴드 · 틴트 · 콜라주
텍스처와 빛	글로우와 라이트 트레일 · 플랫하고 깔끔한 · 그레인 · 하프톤 도트 · 소프트 섀도우만
레이아웃	헤드라인 상단, 이미지 하단 · 분할 화면 · 이미지 중앙, 주변에 텍스트 · 텍스트 중심 · 대각선 · 패널 그리드
스토리 요소	앱 또는 인터페이스 카드 · 스티커 또는 배지 · 티켓 또는 영수증 · 지도 또는 경로 · 큰 숫자 또는 차트 · 인용문 · 전후 비교

어두운 배경에 빛나는 악센트를 기본값으로 사용하지 마세요. 브랜드가 요구할 때만 사용하세요.

4부: 이미지 가져오기 (세 가지 경로)

각 포스터에 맞는 경로를 사용하세요. 사용하기 전에 모든 이미지를 사람 규칙(6부)에 대해 확인하세요. 출처와 라이선스를 RESEARCH.md에 기록하세요.

A. 스톡 사진 (Pexels, Unsplash, Pixabay). 무료, 실제 사람과 장소.

여러 지역 검색어로 검색합니다.
하나의 콘택트 시트(tools/contact_sheet.py)에서 20~30개의 썸네일을 비교합니다.
다음 사진은 거부합니다:
- 잘못된 장소나 사람
- 규칙 위반
- 읽을 수 있는 번호판 또는 개인 정보
- 메시지를 약화시키는 손상이나 지저분함
- 텍스트를 위한 공간 부족
1600~2000px 너비로 다운로드합니다.
필요한 경우 지역 세부 정보를 수정합니다. tools/recolour.py는 영역 내의 한 가지 색상을 변경합니다.
사진의 모양이 레이아웃을 결정하도록 합니다: 인물 사진은 전체 면적에 적합하고, 풍경 사진은 밴드나 프레임 안에 적합합니다.

B. 내장 브라우저의 ChatGPT. 무료; 전체 장면에 가장 적합.

사용자가 로그인해야 합니다. 자세한 프롬프트 입력: 주제, 규칙을 따르는 의상, 설정, 빛, "세로 4:5, 텍스트 없음, 로고 없음".
세부 사항 하나를 변경하려면 동일한 ChatGPT 채팅에 유지: "동일한 이미지, 다음만 변경: …".
제한: 무료 플랜은 하루에 약 3개의 이미지를 허용합니다.
파일 가져오기: ChatGPT의 다운로드는 브라우저 창에서 작동하지 않습니다.
- 최선: 사용자에게 다운로드를 클릭하고 파일 이름을 알려달라고 요청합니다.
- 대체: 이미지를 실제 크기로 전체 화면 표시하고, 2 × 2 스크린샷 타일로 캡처한 후 tools/stitch_tiles.py로 결합합니다.

C. Higgsfield. 유료 크레딧; 오려내기에 가장 적합.

잔액과 가격을 먼저 확인합니다(higgsfield account status, higgsfield generate cost …).
--background transparent와 함께 GPT Image 2.6을 사용하면 오려낸 이미지를 얻을 수 있습니다. 사람에게는 중간 품질을 사용하고 물체에는 낮은 품질을 사용합니다. 기본 플랜은 한 번에 약 4개의 작업을 실행합니다.
각 오려낸 이미지 주변의 희미한 글로우를 tools/clean_cutout.py로 정리합니다.
이미지의 세부 사항 하나를 변경하려면 --image와 함께 다시 전달하고 변경 사항만 설명합니다.

모든 이미지 프롬프트는 다음을 명시합니다: 주제와 행동, 사람 규칙을 따르는 의상, 포스터의 분위기와 일치하는 조명, 프레임, "포토리얼리스틱, 텍스트 없음, 로고 없음, 워터마크 없음", 전체 장면일 때 유형을 위한 공간.

5부: 포스터 빌드

먼저 설정 (skills/poster-design/template/index.html에서 시작):

색상 토큰, 글꼴 및 SVG 심볼로 된 로고가 있는 하나의 index.html
아트 디렉션에 맞는 공유 사인오프(로고 + 행동 유도 스타일)
Fit / Phone (390px 너비) / 100% 버튼이 있는, 모든 포스터를 실제 비율로 표시하는 미리보기 페이지
내보내기용 ?solo=pN 모드
로컬 서버(file:// 아님)에서 폴더를 제공하고 브라우저 창에서 엽니다

모든 포스터:

하나의 아이디어: 헤드라인, 서브라인, 행동 유도.
최소 4개의 레이어, 피사체 앞에 교차하는 요소가 하나 이상 있어야 함.
스토리 요소 제품이 작동하는 모습을 보여주는 요소(예: 실제 앱 카드, 티켓, 트래커, 지도 또는 배지).
사용자 정의 모양, 그라데이션 및 빛, 템플릿 상자가 아님.
시그니처 효과를 세트 전체에 다양하게 적용하면서 공유 시스템을 유지.

디자인 원칙 (필수). 다음은 포스터를 기계가 만든 것처럼 보이게 만드는 실수입니다. 최종 점검 때뿐만 아니라 빌드하는 동안에도 계획하세요.

숨 쉴 공간. 텍스트는 모든 모양 가장자리, 링, 선, 배지 및 이미지로부터 최소 24px(40px가 더 좋음)의 여유 공간을 확보합니다. 원이나 링이 텍스트를 따라, 통과하거나 가까이 있어서는 안 됩니다.
근접 금지. 두 요소는 명확하고 의도적으로 겹치거나(작은 요소의 1/4 이상) 잘 떨어져 있어야 합니다. 거의 닿거나 우연히 정렬된 가장자리는 실수처럼 보입니다. 예: 제품 상단이 뒤의 원 상단과 정렬되거나 스티커가 상자 모서리를 스치는 경우.
원과 패널이 명확하게 만나야 함. 바닥글이나 밴드에 닿는 원은 그 앞에서 충분히 멈추거나(24px 이상) 명확히 그 아래로 들어가야 합니다(40px 이상). 가장자리를 스치면 안 됩니다.
명확한 패키징. 포스터의 실제 배경색에서 모든 오려낸 부분을 확인하고, 흰색과 검은색에서만 확인하지 마세요. 남은 배경, 톱니 모양 가장자리 및 단색 "서리 낀" 영역은 실제 색상에서만 나타납니다.
장식 줄이기. 각각의 추가 링, 윤곽선 또는 잎은 텍스트를 혼잡하게 만들 수 있는 또 하나의 요소입니다. 의미를 더하지 않으면 생략하세요.
시각적 위계. 읽기 순서를 결정합니다: (1) 헤드라인 또는 제품, (2) 서브라인, (3) 스토리 요소, (4) 사인오프. 크기, 두께 및 색상은 그 순서를 따라야 합니다. 오직 한 가지 요소만 강조되어야 합니다.
페어링 및 그룹화. 모든 아이콘은 레이블이 지정된 하나의 항목 바로 옆에 위치하며, 각 쌍의 간격이 동일합니다. 각 연락처 세부 정보에는 자체 아이콘이 있습니다: WhatsApp은 번호 옆, Instagram은 핸들 옆. 관련 항목을 하나의 작은 제목 아래 그룹화합니다("지금 주문", "가능한 곳"). 관련 없는 그룹은 명확한 공간으로 분리합니다.
정렬.
- 로고, 헤드라인, 본문 및 바닥글에 대해 하나의 왼쪽 여백.
- 바닥글 블록은 상단에 정렬되어 작은 제목이 한 줄을 공유합니다.
- 배지의 행과 열은 균일하고 측정된 간격을 갖습니다.
줄 바꿈.
- 실행 중인 텍스트는 짧은 단어 하나로 끝나서는 안 됩니다. 헤드라인과 본문 텍스트에 text-wrap: balance를 사용한 다음 각 줄을 읽으세요.
- 줄 바꿈은 구절 사이에 있어야 하며 구절 내부에 있으면 안 됩니다("귀리 위에, / 수수"는 틀렸습니다; "위에 / 귀리, 수수 및 콩펄프"가 맞습니다).
- 헤드라인은 의미에 따라 <br>로 나누세요.
한 가지 이름. 세트의 모든 포스터에서 동일한 제품 또는 맛 이름, 성분 목록 및 주장을 사용하세요. 게시하기 전에 모든 주장(예: "설탕 무첨가" 또는 "100% 천연")을 클라이언트가 확인하도록 나열하세요.
바닥글도 디자인되었습니다. 히어로와 동일한 관리(위계, 페어링, 정렬 및 최소 36px 패딩)를 받습니다.

기술 메뉴 (포스터별로 선택; 모두 사용하지 마세요):

깊이:
- 레이어 순서: 배경 → 텍스처 → 글로우 또는 색상 필드 → 모양 → 피사체 → 전경 요소 → 스토리 요소 → 가독성을 위한 오버레이 → 유형 → 사인오프
- 피사체를 가로지르는 전경 선, 모양 또는 카드
- 카드나 프레임에서 벗어나는 피사체
- 피사체 뒤에 배치된 카드로 손이 겹치도록 함
빛과 색상:
- 피사체 뒤의 흐릿한 방사형 글로우
- 포스터와 일치하도록 이미지 프롬프트에서 요청된 림 라이트
- 라이트 트레일(두 번 그린 SVG 경로: 흐릿한 글로우 + 선명한 코어)
- text-shadow 대신 filter: drop-shadow를 쌓은 윤곽선 또는 네온 유형
- 사진 위의 브랜드 색상 오버레이: 피사체 위는 투명하게, 텍스트 뒤는 단색으로
- 스크립트로 이미지 리그레이딩(낮에서 밤으로, 더 따뜻하게)
모양 및 텍스처:
- 얇은 악센트 선이 있는 블롭 또는 웨이브
- 곡선 또는 각진 사진 가장자리
- 희미한 그리드, 점 또는 패턴
- 링과 레이
- 경로에 텍스트가 있는 원형 배지 (textLength가 있는 <textPath>)
유형:
- 하나의 헤비 디스플레이 서체와 하나의 깔끔한 텍스트 서체
- 헤드라인 행간 0.85~0.92, 약간 타이트한 t

… [번역을 위해 잘림]

캠페인 포스터 디자인