kdyimageanti - 이미지 분석 및 Antigravity 프롬프트 생성

프로젝트의 이미지 요구사항을 분석하고, 관리 체계를 수립하며, Antigravity AI를 위한 상세 이미지 생성 프롬프트를 작성합니다.

실행 단계

Phase 1: 프로젝트 분석 - 이미지 참조 검색

프로젝트 전체에서 이미지를 참조하는 모든 코드를 검색합니다.

# 이미지 참조 패턴 검색
grep -rn "\.png\|\.jpg\|\.jpeg\|\.svg\|\.webp\|\.gif" --include="*.tsx" --include="*.jsx" --include="*.ts" --include="*.js" --include="*.css" --include="*.scss" --include="*.html" .

# Next.js Image 컴포넌트 사용 검색
grep -rn "Image.*src=" --include="*.tsx" --include="*.jsx" .

# CSS 배경 이미지 검색
grep -rn "background.*url\|background-image" --include="*.css" --include="*.scss" --include="*.tsx" .

# OG/메타 이미지 검색
grep -rn "og:image\|twitter:image\|meta.*image" --include="*.tsx" --include="*.jsx" --include="*.html" .

Phase 2: 기존 이미지 현황 파악

# 현재 이미지 파일 목록
find . -type f \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" -o -name "*.svg" -o -name "*.webp" -o -name "*.gif" \) -not -path "*/node_modules/*" -not -path "*/.next/*"

# 이미지 디렉토리 구조
ls -laR public/images/ 2>/dev/null || echo "이미지 디렉토리 없음"

Phase 3: 이미지 관리 체계 수립

프로젝트 타입에 맞는 이미지 관리 체계를 설계합니다.

3.1 디렉토리 구조 템플릿

Next.js / React 프로젝트:

public/
└── images/
    ├── icons/        → 아이콘, 파비콘, 로고
    ├── og/           → OG 이미지 (소셜 공유용)
    ├── hero/         → 히어로 섹션 배경
    ├── ui/           → UI 요소 (empty state, 로딩, 일러스트)
    ├── content/      → 콘텐츠용 이미지
    └── backgrounds/  → 배경 패턴, 텍스처

일반 웹 프로젝트:

assets/
└── images/
    ├── icons/
    ├── banners/
    └── content/

3.2 파일명 규칙

[카테고리]-[설명]-[크기].[확장자]

예시:
- icon-logo-512.png
- og-default-1200x630.jpg
- hero-main-1920x1080.jpg
- ui-empty-cart-400x300.png
- bg-pattern-tile-200x200.png

3.3 확장자 선택 기준

Phase 4: CLAUDE.md 또는 docs/rules/에 기록

이미지 관리 규칙을 docs/rules/image-files.md에 작성하고, CLAUDE.md에 참조 추가:

## 필수 참조
- 이미지 파일 관리 → docs/rules/image-files.md

Phase 5: 필요 이미지 목록 작성

분석 결과를 바탕으로 필요한 이미지 목록을 정리합니다:

## 필요 이미지 목록

| # | 용도 | 파일명 | 크기 | 확장자 | 저장위치 | 상태 |
|---|------|--------|------|--------|----------|------|
| 1 | 파비콘 | icon-favicon-512.png | 512x512 | PNG | public/images/icons/ | 🔴 없음 |
| 2 | OG 기본 | og-default-1200x630.jpg | 1200x630 | JPG | public/images/og/ | 🔴 없음 |
| 3 | 히어로 배경 | hero-main-1920x1080.jpg | 1920x1080 | JPG | public/images/hero/ | 🔴 없음 |

Phase 6: Antigravity 프롬프트 생성

프롬프트 템플릿

각 이미지에 대해 아래 형식으로 완전한 프롬프트를 생성합니다:

📷 이미지 #[번호]: [용도]

파일 정보:

Antigravity 프롬프트:

[상세한 이미지 생성 프롬프트]

스타일: [스타일 지정]
색상 팔레트: [주요 색상 코드]
무드: [분위기]
참고: [추가 지시사항]

생성 후 체크리스트:

• 위 경로에 파일 저장
• 파일명 정확히 일치 확인
• 크기 조정 (필요시)
• 용량 최적화 (JPG: 80%, PNG: 압축)
• 코드에서 경로 연결 확인

프롬프트 작성 가이드

6.1 아이콘/로고

A minimalist [브랜드명] logo icon, simple geometric design,
single color on transparent background,
suitable for favicon and app icon,
clean edges, scalable vector style,
colors: [주요 색상 hex 코드]

6.2 OG 이미지 (소셜 공유용)

Open Graph social share image for [서비스명],
[서비스 핵심 비주얼 요소],
text overlay area on [left/right] side,
brand colors: [색상 팔레트],
professional, modern look,
dimensions: 1200x630 pixels,
high contrast for small preview

6.3 히어로 배경

Hero section background for [서비스 유형] website,
[주제/컨셉 설명],
[밝은/어두운] theme with [그라데이션/패턴/사진],
subtle, non-distracting,
space for overlay text,
colors: [색상 팔레트],
wide format 1920x1080

6.4 UI 일러스트 (Empty State 등)

Friendly illustration for [상황: empty cart, no results, error 등],
flat design style,
[캐릭터/오브젝트] in [상황],
soft pastel colors matching [브랜드 컬러],
transparent background,
dimensions: 400x300 pixels,
suitable for light/dark mode

6.5 배경 패턴/텍스처

Seamless tileable pattern for website background,
[패턴 유형: geometric, organic, abstract],
subtle and minimal,
colors: [배경색과 패턴색],
low contrast for readability,
tile size: 200x200 pixels

출력 형식

skill 실행 결과는 아래 형식으로 출력합니다:

# 이미지 분석 및 Antigravity 프롬프트

## 1. 프로젝트 이미지 현황
- 기존 이미지: X개
- 참조되지만 없는 이미지: X개
- 새로 필요한 이미지: X개

## 2. 이미지 관리 체계
[docs/rules/image-files.md 작성 완료]

## 3. 필요 이미지 목록
[테이블 형식 목록]

## 4. Antigravity 프롬프트
### 이미지 #1: [용도]
[완전한 프롬프트 블록]

### 이미지 #2: [용도]
[완전한 프롬프트 블록]

...

## 5. 다음 단계
1. Antigravity에서 각 프롬프트로 이미지 생성
2. 지정된 경로에 정확한 파일명으로 저장
3. 크기/용량 최적화
4. 코드에서 이미지 경로 연결

사용 예시

# 전체 분석 및 프롬프트 생성
/kdyimageanti

# 특정 페이지만 분석
/kdyimageanti src/app/landing/

# OG 이미지만 분석
/kdyimageanti --og-only

# 아이콘만 분석
/kdyimageanti --icons-only

주의사항

1. 기존 이미지 보존 - 이미 있는 이미지는 분석만, 삭제하지 않음
2. 브랜드 일관성 - 프로젝트의 기존 색상/스타일 파악 후 프롬프트 반영
3. 크기 정확성 - 용도별 권장 크기 엄격 준수
4. 경로 정확성 - 절대 경로와 상대 경로 구분하여 명시
5. 파일명 규칙 - 소문자, 하이픈, 영문만 사용

색상 팔레트 추출

프로젝트의 기존 색상을 분석하여 프롬프트에 반영:

# Tailwind config에서 색상 추출
grep -A 20 "colors:" tailwind.config.* 2>/dev/null

# CSS 변수에서 색상 추출
grep -rn "--.*color\|--primary\|--secondary" --include="*.css" .

추출된 색상을 프롬프트의 colors: 섹션에 hex 코드로 포함합니다.

관련 스킬

• /kdygenesis — 메타 오케스트레이션에서 이미지 필요 시 조건 발동
• /kdyweb — 웹 페이지 구조 관리 (디자인 시스템 분석 결과를 kdyweb init에서 참조 가능)