전문 사진 그래픽 디자이너 & 아트 디렉터 스킬
이 스킬은 일반 사진을 스튜디오급 소셜 미디어 그래픽, 엽서, 기념 포스터로 변환합니다. 사진 위에 AI 이미지 생성을 사용하는 방식(얼굴을 왜곡하고, 하늘을 바꾸며, 태국어 타이포그래피를 깨뜨리는) 대신, 이 워크플로우는 HTML5 + CSS3 + 사용자 정의 SVG 벡터 아트워크 + Google Fonts를 사용하며, Headless Chrome을 통해 4K Retina 해상도(--force-device-scale-factor=2) 로 렌더링하고 Python Pillow(subsampling=0)로 합성합니다.
핵심 워크플로우 (6단계)
1단계: 사진 검사 및 자동 시각 분석
- 대상 사진 보기: 먼저 항상
read_file을 호출하여 대상 이미지의 피사체, 분위기, 조명 및 장애물(예: 얼굴, 텐트 폴, 가이 라인, 수평선, 나무)을 시각적으로 이해합니다. - 사진 분석기 스크립트 실행:
대상 이미지에서 analyze_photo.py를 실행하여 다음을 추출합니다:
- 정확한 픽셀 치수, 종횡비, EXIF 메타데이터.
- 3×3 그리드 휘도 및 네거티브 공간 맵 (어둡고, 중간 톤이며, 밝은 영역과 타이포그래피에 적합한 세부 정보가 적은 영역을 식별).
- 추출된 색상 팔레트 (지배적인 배경 헥스 색상 + 권장되는 대비가 강한 악센트 헥스 색상).
python ".agents/skills/photo-graphic-designer/scripts/analyze_photo.py" "<image_path>"
2단계: 대화형 스타일 및 방향 탐색
그래픽을 생성하기 전에 style_catalog.md를 참조하고 ask_question을 사용하여 사용자가 사진에 맞는 큐레이팅된 디자인 방향을 선택하도록 합니다:
- 디자인 스타일 선택 (12개 이상의 스타일 중에서 가장 적합한 3~5개 스타일을 제시하고, 여러 스타일을 생성하여 비교할 수 있는 옵션 제공):
- 천체 & 별빛 로맨스 (럭셔리 골드 세리프, 별자리 선, 반짝이는 별빛, 아스트롤라베 테두리)
- 미니멀 에디토리얼 / 매거진 엽서 (Kinfolk / GO OUT / NatGeo 레이아웃, 헤어라인 그리드, 메타데이터 헤더, 위치 스탬프)
- 따뜻하고 귀여운 손그림 낙서 (아늑한 페어리 라이트, 스케치된 점선 테두리, 떠다니는 하트, 곡선 포인터 화살표, 손글씨체)
- 빈티지 필름 & 아날로그 코닥크롬 (할레이션 글로우, 필름 테두리 프레임, 날짜 스탬프, 레트로 세리프)
- 모던 글라스모피즘 & 플로팅 UI (프로스트 글라스 카드, 뮤직 플레이어 / 메모리 바, 세련된 산세리프)
- 야외 모험 & 레트로 배지 (국립공원 / 캠핑 엠블럼, 지형도 선, 나침반 & 소나무 벡터)
- 일본 미니멀리스트 포스터 (Zakka / Muji 분위기) (세로/비대칭 타이포그래피, 넉넉한 여백, 섬세한 라인 아트)
- 시네마틱 레터박스 & 스토리 자막 (아나모픽 바, 영화 제목 크레딧 블록, 시적인 이중 언어 자막)
- 종횡비 및 출력 형식:
- 원본 종횡비 (예: 3:2 가로
3600×2400) - 세로 소셜 피드 (4:5
2400×3000) - 정사각형 (1:1
2800×2800) 또는 스토리/릴 (9:162160×3840)
- 원본 종횡비 (예: 3:2 가로
3단계: 멀티톤 카피라이팅 워크숍 (중요!)
일반적이거나 지나치게 진부한 인용문은 종종 부자연스럽게 느껴집니다 ("ไม่ใช่ตัวเอง"). 텍스트를 확정하기 전에, 또는 사용자가 문구 아이디어를 요청할 때, copywriting_tones.md를 읽고 ask_question을 사용하여 사용자가 섹션별로 그리고 성격 톤별로 문구를 선택하거나 혼합하여 사용할 수 있도록 합니다:
- 텍스트를 모듈식 슬롯으로 나누기:
- 상단 배지 / 아이브로우 (예: 영어 제목 또는 행사 태그)
- 메인 헤드라인 (주요 태국어/영어 인사말)
- 서브타이틀 / 핵심 앵커 (따뜻한 핵심 문구)
- 본문 메시지 / 인용문 상자 (2줄 진심 메시지 — 또는 더 깔끔한 외관을 위해 생략 가능)
- 피사체 콜아웃 / 포인터 노트 (손그림 화살표 옆에 있는 사람/피사체를 가리키는 짧고 귀여운 레이블 — 또는 생략 가능)
- 슬롯당 5~6개의 개성 톤 제공:
- สายลุย-ชิลล์ๆ (Outdoor / Chill Partner): 자연스럽고, 편안하며, 모험 동료 분위기.
- แมนๆ จริงใจ ไม่เลี่ยน (Sincere & Grounded): 정직하고, 따뜻하며, 전혀 부담스럽지 않음.
- อบอุ่น-เรียบง่าย (Warm & Classic): 부드럽고, 감사하며, 시대를 초월함.
- กวนนิดๆ กันเอง (Playful & Teasing): 애정이 담긴 진짜 커플 농담.
- โรแมนติก-ลึกซึ้ง (Poetic & Romantic): 별빛, 운명, 깊은 감정.
- สั้นกระชับ-มินิมอล (Short & Punchy): 미니멀한 임팩트.
4단계: 구성, 방향 흐름 및 색 이론 규칙
HTML/CSS/SVG 오버레이를 작성할 때 composition_and_color.md를 참조하십시오. 항상 다음 황금률을 적용하십시오:
- 피사체 및 장애물 보호 영역:
- 얼굴, 신체, 구조적 선(예: 텐트 폴 또는 대각선 가이 라인 로프)의 정확한 경계 좌표
(x, y)를 매핑합니다. - 텍스트, 떠다니는 하트, 별 또는 화살표가 얼굴을 가로지르거나 가이 라인과 어색하게 교차하지 않도록 합니다. 로프/라인의 한쪽으로 콜아웃 요소를 깔끔하게 이동시킵니다.
- 얼굴, 신체, 구조적 선(예: 텐트 폴 또는 대각선 가이 라인 로프)의 정확한 경계 좌표
- 방향성 시선 흐름 (시각적 벡터링):
- 시청자의 시선을 기본 타이포그래피 블록(열린 네거티브 공간에 위치) -> 보조 장식 / 콜아웃 화살표를 따라 -> 인간 피사체의 얼굴/미소로 직접 유도합니다.
- 피사체를 향하거나 텍스트를 안쪽으로 프레임하는 곡선 SVG 경로(
<path d="M ... Q ...">), 초승달 방향, 또는 별똥별 각도를 사용하며, 시선이 캔버스 가장자리 밖으로 나가지 않도록 합니다.
- 색상 조화 및 적응형 가독성:
- 60-30-10 색상 규칙:
60%기본 사진 주변 톤 (예: 딥 미드나잇 네이비#0A1530또는 포레스트 그린).30%기본 타이포그래피 색상 (고대비 웜 아이보리#FFFAF0또는 순수 크리스피 화이트#FFFFFF).10%장면에서 샘플링되거나 조화를 이루는 악센트 강조 색상 (예: 웜 페어리-라이트 골드#FFE299, 샴페인#F0CA86, 또는 소프트 코랄 하트#FF7B93).
- 항상 본문 텍스트 뒤에 미묘하고 보이지 않는 가장자리의 방사형/선형 그라데이션(
rgba(8, 16, 38, 0.38)) 또는 프로스트 글라스 컨테이너(backdrop-filter: blur(4px))를 배치하여 별, 구름 또는 잎사귀 위에서도 타이포그래피가 100% 읽기 가능하도록 합니다.
- 60-30-10 색상 규칙:
- 태국어 타이포그래피 완벽성:
- 여러 문장의 태국어 인용문 줄에서는
white-space: nowrap을 사용하거나 자연스러운 구문 경계에 명시적인<br>줄 바꿈을 사용하여 태국어 단어(예: "ฉัน" 또는 "วัน")가 절대로 단독으로 고아 줄로 넘어가지 않도록 합니다. - 큰 태국어 표시 텍스트(키가 큰 상위 모음/성조 표시
ั ิ ี ึ ื ่ ้ ๊ ๋ ์및 하위 모음ุ ู포함)와 주변 SVG 별, 달 또는 테두리 사이에 최소35px–50px의 명확한 패딩을 남깁니다.
- 여러 문장의 태국어 인용문 줄에서는
5단계: 4K Retina 렌더링 파이프라인
render_graphic.py를 사용하여 대상 사진 위에 HTML/CSS/SVG 템플릿을 4K 해상도로 렌더링합니다:
python ".agents/skills/photo-graphic-designer/scripts/render_graphic.py" `
--photo "DSC03461.jpg" `
--html "path/to/design.html" `
--output "DSC03461_Output.jpg" `
--width 1800 --height 1200 --scale 2
--scale 2와--virtual-time-budget=3000이 중요한 이유:1800×1200CSS 픽셀로 디자인하고--force-device-scale-factor=2를 사용하면 초고해상도3600×2400Retina 출력물이 생성됩니다.--virtual-time-budget=3000은 Chrome이 프레임을 캡처하기 전에 Google Fonts 다운로드 및 적용이 완료되도록 보장합니다(시스템 글꼴 대체 방지).quality=96, subsampling=0으로 저장하면 컬러 텍스트와 가는 벡터 선의 100% 선명한 가장자리가 보존됩니다.
6단계: 필수 시각적 QA 검증
모든 이미지를 렌더링한 후에는 반드시 read_file을 사용하여 생성된 .jpg 파일을 검사하고 사용자에게 보여주기 전에 다음 체크리스트를 확인해야 합니다:
- 글꼴 확인: 의도한 Google Fonts가 제대로 로드되었습니까 (Tahoma/Arial 대체 없음)?
- 고아 단어 줄바꿈 없음: 모든 태국어 문장이 의도된
<br>지점에서 깔끔하게 끊어졌으며 마지막에 단일 단어가 남지 않았습니까? - 충돌 없음 확인: 별, 달, 하트, 테두리 또는 화살표가 태국어 모음/성조 표시, 사람 얼굴 또는 텐트 로프에 닿거나 겹칩니까?
- 시각적 균형 및 대비: 모든 텍스트 줄이 썸네일 보기와 전체 화면 모두에서 쉽게 읽을 수 있습니까?
read_file 검사 중에 문제가 발견되면 즉시 CSS/SVG 좌표를 조정하고 결과를 제시하기 전에 다시 렌더링하십시오.
참조 템플릿 및 문서
- 스타일 카탈로그 및 글꼴 페어링: references/style_catalog.md
- 구성, 방향 흐름 및 색상 가이드: references/composition_and_color.md
- 태국어 및 영어 카피라이팅 매트릭스: references/copywriting_tones.md
- 바로 사용 가능한 HTML/SVG 참조 템플릿: