kdyimagemid - Midjourney 이미지 분석 / 프롬프트 생성 / 최적화 / 자동 배치

프로젝트 페이지를 분석하여 이미지가 필요한 지점을 찾고, Midjourney 프롬프트를 생성하고, 생성된 이미지를 최적화하여 코드에 자동 배치하는 end-to-end 스킬입니다.

전체 워크플로우 요약

Phase 1: 프로젝트 분석 (페이지/컴포넌트 스캔)
    ↓
Phase 2: 이미지 필요 지점 정리 (목록 + 사양)
    ↓
Phase 3: Midjourney 프롬프트 생성 (기본: 지브리 수채화)
    ↓
Phase 4: 프롬프트 파일을 docs/assets/에 저장
    ↓
Phase 5: 사용자에게 Midjourney 이미지 생성 요청 → 대기
    ↓
Phase 6: 이미지 확인 + 파일명으로 자동 매칭
    ↓
Phase 7: 사용 방식 문의 (랜덤픽 vs AI 단일 선택)
    ↓
Phase 8: sharp 최적화 (리사이즈 + WebP 변환)
    ↓
Phase 9: public/에 배치 + 컴포넌트 코드 업데이트

Phase 1: 프로젝트 분석

1.1 프로젝트 기본 정보 수집

# CLAUDE.md에서 프로젝트 성격/색상/스타일 파악
cat CLAUDE.md

# 페이지 라우트 구조 파악 (Next.js App Router)
find src/app -name "page.tsx" -o -name "page.jsx" | sort

# 주요 컴포넌트 파악
find src/components -name "*.tsx" -o -name "*.jsx" | sort

# 기존 이미지 현황
find public/images -type f 2>/dev/null | sort

1.2 색상 팔레트 추출

프로젝트의 주요 색상을 파악하여 프롬프트에 반영합니다.

# Tailwind config 색상
grep -A 30 "colors" tailwind.config.* 2>/dev/null

# CSS 변수 색상
grep -rn "var(--" --include="*.css" src/ | head -20

# globals.css 주요 색상
cat src/app/globals.css | grep -i "color\|background\|--"

1.3 기존 이미지 스타일 확인

# 이미 사용 중인 이미지 파일 확인 (스타일 일관성)
ls -la public/images/ 2>/dev/null
find docs/assets -type f -name "*.png" -o -name "*.jpg" -o -name "*.webp" 2>/dev/null

Phase 2: 이미지 필요 지점 정리

각 페이지/섹션을 분석하여 아래 카테고리별로 이미지 필요 지점을 정리합니다.

2.1 분석 대상 카테고리

2.2 필요 이미지 목록 형식

정리 결과를 아래 형식으로 사용자에게 제시합니다:

## 이미지 필요 지점 분석 결과

| # | 페이지/섹션 | 위치 | 용도 | 권장 크기 | 비율 | 스타일 | 매수 |
|---|-------------|------|------|-----------|------|--------|------|
| 1 | 메인 > 철학 섹션 | CategoriesSection 아래 | 섹션 일러스트 | 600x450 | 4:3 | 지브리 수채화 | 1장 |
| 2 | 가이드 > 등급 안내 | 히어로 배너 | 페이지 대표 이미지 | 1200x600 | 2:1 | 지브리 수채화 | 4장(랜덤) |
| ... | ... | ... | ... | ... | ... | ... | ... |

사용자에게 확인: 목록을 보여주고 추가/제거/수정 요청을 받습니다.

Phase 3: Midjourney 프롬프트 생성

3.1 기본 스타일 (지브리 수채화)

모든 프롬프트의 기본 스타일 suffix:

Studio Ghibli watercolor illustration style, soft warm tones,
delicate brushstrokes, nostalgic and comforting atmosphere,
gentle lighting

3.2 프롬프트 구조

[주제 + 장면 묘사], [인물/오브젝트 상세], [환경/배경],
[조명/분위기], [색감 지정 (프로젝트 팔레트 기반)],
Studio Ghibli watercolor illustration style, [추가 스타일 키워드]
--ar [비율] --raw --v 6.1

3.3 스타일 변형 옵션

사용자가 지브리 외 스타일을 원할 경우:

3.4 비율(Aspect Ratio) 가이드

3.5 프로젝트 색상 반영

프롬프트에 프로젝트의 주요 색상을 자연스럽게 녹입니다:

예) 프로젝트 primary가 teal인 경우:
"warm amber and golden tones with soft teal-green accents"

예) primary가 blue인 경우:
"soft sky blue and warm ivory tones"

Phase 4: 프롬프트 파일 저장

4.1 폴더 구조

docs/assets/
├── [카테고리명]/              ← 용도별 폴더
│   ├── _prompts.md           ← 해당 카테고리의 모든 프롬프트
│   └── [미드저니 이미지들]     ← 사용자가 여기에 저장

예시:

docs/assets/
├── mainpage-philosophy/
│   ├── _prompts.md
│   └── (미드저니 이미지 저장 위치)
├── mainpage-collections/
│   ├── _prompts.md
│   └── u5724496951_*.png
├── guide-hero/
│   ├── _prompts.md
│   └── (미드저니 이미지 저장 위치)
└── empty-states/
    ├── _prompts.md
    └── (미드저니 이미지 저장 위치)

4.2 _prompts.md 파일 형식

# [카테고리명] - Midjourney 프롬프트

> 생성일: YYYY-MM-DD
> 프로젝트: [프로젝트명]
> 기본 스타일: 지브리 수채화

## 이미지 #1: [용도 설명]

**배치 위치**: `src/components/[경로]` 또는 `src/app/[경로]`
**파일 저장 경로**: `public/images/[경로]/[파일명].webp`
**권장 크기**: [가로]x[세로]
**Midjourney 비율**: --ar [비율]

### 프롬프트
\```
[완전한 Midjourney 프롬프트]
\```

### 생성 후 작업
- [ ] Midjourney에서 이미지 생성
- [ ] docs/assets/[카테고리]/ 에 원본 저장
- [ ] `/kdyimagemid` 재실행하여 최적화 + 배치

---

## 이미지 #2: [용도 설명]
...

Phase 5: 사용자에게 이미지 생성 요청

프롬프트 저장 후 사용자에게 안내합니다:

## Midjourney 이미지 생성 요청

위 프롬프트로 Midjourney에서 이미지를 생성해주세요.

### 생성 순서
1. 각 프롬프트를 Midjourney에 입력
2. 생성된 이미지(보통 4장씩)를 다운로드
3. 아래 폴더에 저장:

| 카테고리 | 저장 폴더 |
|----------|-----------|
| [카테고리1] | `docs/assets/[폴더1]/` |
| [카테고리2] | `docs/assets/[폴더2]/` |

### 파일명 안내
- Midjourney가 자동 생성하는 파일명 그대로 저장하세요
- 파일명에 프롬프트가 포함되어 AI가 자동 인식합니다
- 예: `u5724496951_A_warm_scene_of_elderly_care_...._0.png`

### 완료 후
이미지를 모두 저장했으면 "이미지 저장 완료" 라고 알려주세요.

이 단계에서 대기합니다. 사용자가 "이미지 저장 완료"라고 할 때까지 다음 단계로 넘어가지 않습니다.

Phase 6: 이미지 확인 + 파일명 자동 매칭

사용자가 이미지 저장 완료를 알리면:

6.1 이미지 파일 스캔

# docs/assets 하위의 새 이미지 파일 검색
find docs/assets -type f \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" -o -name "*.webp" \) -newer [마지막_스캔_시점] | sort

6.2 파일명 기반 자동 매칭

Midjourney 파일명 패턴:

u[사용자ID]_[프롬프트_일부]_[UUID]_[인덱스].png

매칭 로직:

1. 파일명에서 프롬프트 키워드 추출
2. _prompts.md의 프롬프트와 키워드 매칭
3. 폴더 위치로 카테고리 확인
4. 같은 UUID를 공유하는 파일들을 하나의 그룹(4장)으로 묶음

예) 파일명: u5724496951_A_warm_scene_of_elderly_...._abcd1234_0.png
→ UUID: abcd1234
→ 인덱스: 0, 1, 2, 3 (4장 그룹)
→ 키워드: "warm", "elderly" → 매칭: 철학 섹션 이미지

6.3 매칭 결과 표시

## 이미지 매칭 결과

| 그룹 | 프롬프트 매칭 | 파일 수 | 배치 대상 |
|------|--------------|---------|-----------|
| A | 철학 섹션 이미지 | 4장 | PhilosophySection |
| B | 가이드 히어로 | 4장 | GuidePage hero |

매칭에 실패한 이미지가 있으면 사용자에게 수동 매칭을 요청합니다.

Phase 7: 사용 방식 문의

Midjourney는 기본적으로 4장씩 생성하므로, 각 그룹별로 사용 방식을 문의합니다:

7.1 AskUserQuestion 으로 문의

각 이미지 그룹에 대해:

이미지 그룹: [용도 설명]
4장의 변형이 있습니다. 어떻게 사용할까요?

1. 랜덤픽 (추천) - 4장 모두 사용, 접속할 때마다 랜덤으로 표시
2. AI 선택 - AI가 가장 적합한 1장을 선택하여 사용
3. 직접 선택 - 이미지를 보여드릴테니 직접 선택

7.2 선택지별 처리

Phase 8: 이미지 최적화 (sharp)

8.1 최적화 스크립트

sharp 코드 패턴은 references/code-patterns.md 참조

8.2 파일명 규칙

랜덤픽 모드 (4장):

public/images/[카테고리]/[이름]-1.webp
public/images/[카테고리]/[이름]-2.webp
public/images/[카테고리]/[이름]-3.webp
public/images/[카테고리]/[이름]-4.webp

단일 선택 모드 (1장):

public/images/[카테고리]/[이름].webp

8.3 최적화 결과 리포트

## 최적화 결과

| 파일 | 원본 | 최적화 후 | 감소율 |
|------|------|-----------|--------|
| philosophy-1.webp | 2.1MB | 73KB | 96.5% |
| philosophy-2.webp | 1.9MB | 68KB | 96.4% |
| ... | ... | ... | ... |

총: XX MB → XX KB (XX% 감소)

Phase 9: 코드 배치 + 컴포넌트 업데이트

9.1-9.2 코드 패턴

랜덤픽/단일 이미지 모드 코드는 references/code-patterns.md 참조

9.3 배치 시 주의사항

1. 기존 코드 패턴 준수 - 프로젝트의 기존 Image 사용 패턴을 따름
2. sizes prop 필수 - 반응형 이미지 최적화를 위해 적절한 sizes 지정
3. hydration-safe - SSR/클라이언트 불일치 방지 (isMounted 또는 useEffect 패턴)
4. alt 텍스트 - 접근성을 위해 의미 있는 alt 텍스트 작성
5. lazy loading - below-the-fold 이미지는 loading="lazy" 적용

Phase 10: 완료 리포트

리포트 형식은 references/code-patterns.md 참조

사용 예시

# 전체 프로젝트 분석 → 프롬프트 생성 → 대기
/kdyimagemid

# 특정 페이지만 분석
/kdyimagemid src/app/guides/

# 이미지 저장 완료 후 최적화 + 배치만 실행
/kdyimagemid --deploy

# 프롬프트만 생성 (배치하지 않음)
/kdyimagemid --prompts-only

# 특정 스타일 지정
/kdyimagemid --style=수묵화

주의사항

1. 기존 이미지 보존 - 이미 배치된 이미지는 덮어쓰지 않음 (확인 후 진행)
2. 브랜드 일관성 - 프로젝트 색상 팔레트를 프롬프트에 반영
3. 파일 크기 관리 - 최적화 후 이미지당 100KB 이하 목표
4. Git 용량 - docs/assets의 원본은 .gitignore 추가 고려 (큰 파일)
5. Next.js Image 호환 - fill 모드 사용 시 부모에 relative + 크기 지정 필수
6. Midjourney 파일명 의존 - 파일명을 변경하면 자동 매칭 불가 → 원본 파일명 유지

스타일 커스터마이징

프로젝트 CLAUDE.md 또는 docs/rules/에 아래 설정을 추가하면 기본 스타일을 변경할 수 있습니다:

## kdyimagemid 설정

- 기본 스타일: 지브리 수채화
- 색상 키워드: warm amber and golden tones with soft teal-green accents
- 분위기: nostalgic, comforting, peaceful
- Midjourney 버전: --v 6.1
- 기본 옵션: --raw

관련 스킬