Ⅲ. 산출물 ① 이미지 (Images)

1️⃣ 최종 상세 이미지

파일 포맷

• WebP (기본)
  • 가볍고 화질 좋음
• PNG (옵션)
• JPG (옵션)

파일 종류

용도	파일
전체 미리보기	preview.webp
섹션별 이미지	section_xxx.webp

---

저장 위치

/outputs/JOB-2025-0001/images/

---

UI에서 보여주는 방식

• 웹에서는 CDN URL로 즉시 렌더링
• 다운로드 버튼:
  • “전체 이미지 다운로드”
  • “섹션별 이미지 다운로드”

---

💡 중요한 포인트

• 미리보기 = 합성된 단일 이미지
• 실사용 = 섹션별 이미지
  → 쇼핑몰마다 쓰기 편함

---

Ⅳ. 산출물 ② 텍스트 (Text)

1️⃣ 포맷: JSON (정답)

이유

• 사람이 읽을 수 있음
• 다시 AI에 넣을 수 있음
• CMS / 쇼핑몰 자동 업로드 가능

---

예시: copy.json

{
  "language": "ko",
  "sections": {
    "empathy": {
      "headline": "실내에 오래 있다 보면, 공기가 먼저 변합니다",
      "body": "사무실이나 집 안에서 하루를 보내다 보면 건조함을 느끼게 됩니다."
    },
    "cta": {
      "headline": "필요한 만큼만, 부담 없이",
      "body": "큰 가습기가 부담스럽다면 이 정도 크기부터 시작해도 좋습니다."
    }
  }
}

---

UI 제공 방식

• 텍스트 복사 버튼
• 섹션별 수정 가능 인풋
• “다시 생성” 버튼 (프롬프트 재실행)

---

Ⅴ. 산출물 ③ 스토리 구조 (Story Structure)

왜 분리해야 하느냐?

상세페이지의 진짜 IP는 문장이 아니라 구조이기 때문

---

포맷: JSON

{
  "story_version": "v1.0",
  "flow": [
    {
      "section": "empathy",
      "goal": "건조한 환경에 대한 공감"
    },
    {
      "section": "experience",
      "goal": "실사용 체감 전달"
    },
    {
      "section": "cta",
      "goal": "부담 없는 선택 유도"
    }
  ]
}

---

활용

• A/B 테스트
• 다른 상품에 재사용
• 브랜드 템플릿화

---

Ⅵ. 산출물 ④ PSD (디자이너용 핵심)

1️⃣ PSD 생성 방식 (현실적 접근)

AI가 직접 PSD를 “그린다” ❌
👉 PSD 구조를 생성하고
👉 렌더링된 이미지 + 메타데이터를 조합 ⭕

---

PSD 구성 원칙

- Background
- Section_01
   ├ Image
   ├ Headline
   └ Body
- Section_02
   ├ Image
   └ Text

---

저장 위치

/outputs/JOB-2025-0001/psd/product_detail.psd

---

다운로드 방식

• “PSD 다운로드” 버튼
• 설명 툴팁: 모든 텍스트와 이미지는 레이어 분리되어 있습니다

---

Ⅶ. job_manifest.json (숨은 핵심)

이 파일이 모든 것을 연결한다.

{
  "job_id": "JOB-2025-0001",
  "created_at": "2025-12-22T14:20:00Z",
  "outputs": {
    "preview": "preview/preview.webp",
    "images": ["images/section_empathy.webp"],
    "text": "text/copy.json",
    "story": "story/storyline.json",
    "psd": "psd/product_detail.psd"
  },
  "versions": {
    "story": "v1.0",
    "copy": "v1.0",
    "images": "v1.0"
  }
}

👉 나중에 버전 관리 & 재생성 가능

---

Ⅷ. 사용자 UI에서의 최종 경험

사용자는 이렇게 받는다

1. 생성 완료 화면
2. 큰 미리보기 이미지
3. 탭:
   • 이미지
   • 텍스트
   • 스토리
   • PSD
4. 각 탭에:
   • 미리보기
   • 다운로드
   • 수정 / 재생성 버튼

---

Ⅸ. 이 구조의 결정적 장점

1. SaaS + API 둘 다 가능
2. 쇼핑몰 자동 연동 쉬움
3. 디자이너/마케터 충돌 없음
4. AI 결과물의 재사용성 극대화
5. “자동 생성인데 수정도 쉬움”