muhdaliyan/zeer

목표

Google의 Imagen 4 모델을 사용하여 전문적이고 고품질의 이미지를 생성하고, 이를 웹 프로젝트, 애플리케이션 또는 창작 워크플로우에 원활하게 통합합니다. 생성된 이미지는 자동으로 적절한 프로젝트 디렉토리에 저장됩니다.

기능

이미지 생성

• 텍스트 설명에서 사실적인 이미지 생성
• 웹사이트용 로고, 일러스트레이션 및 그래픽 생성
• 히어로 이미지, 배경 및 시각적 자산 생성
• 여러 종횡비(1:1, 4:3, 16:9, 9:16) 지원
• 요청당 1-4개 이미지 생성
• SynthID 워터마크가 포함된 고해상도 출력

통합

• 이미지를 프로젝트 디렉토리에 자동 저장
• 콘텐츠 기반의 적절한 파일명 생성
• 웹 프로젝트(HTML, React 등)를 위한 이미지 자산 생성
• 논리적인 폴더 구조로 이미지 구성

지원 스타일

• 사진(인물, 풍경, 제품 사진)
• 일러스트레이션(디지털 아트, 스케치, 페인팅)
• 로고 및 브랜딩 자료
• UI 요소 및 배경
• 역사적 예술 스타일(인상주의, 아르데코 등)

절차

사용자가 이미지가 포함된 웹사이트/프로젝트를 요청할 때

1. 이미지 요구사항 파악

   • 프로젝트 요구사항 분석
   • 필요한 이미지 결정(히어로, 로고, 아이콘, 배경)
   • Imagen을 사용한 AI 생성 이미지 사용 여부 사용자에게 문의

2. 이미지 생성 확인

   • "Google의 Imagen AI 모델을 사용하여 맞춤 이미지를 생성하시겠습니까?" 옵션 제시
   • 사용자가 동의하면 생성 진행
   • 사용자가 거절하면 플레이스홀더 이미지 사용 또는 건너뜀

3. 이미지 생성

   • 프로젝트 컨텍스트 기반의 상세하고 구체적인 프롬프트 작성
   • 각 사용 사례에 적합한 종횡비 사용
   • generate_image 도구를 사용하여 이미지 생성

4. 저장 및 통합

   • 이미지를 프로젝트 디렉토리에 저장(예: website-name/images/)
   • 설명적인 파일명 사용(예: hero-background.png, logo.png)
   • 생성된 이미지를 참조하도록 HTML/CSS/React 코드 업데이트
   • 코드에 이미지 경로 제공

직접 이미지 생성 요청

사용자가 직접 이미지 생성을 요청할 때:

1. 요구사항 이해

   • 사용자 요청에서 주제, 스타일 및 컨텍스트 추출
   • 적절한 종횡비 결정
   • 모호한 세부 사항 명확히 함

2. 상세 프롬프트 작성

   • Imagen 모범 사례를 따른 포괄적인 프롬프트 작성
   • 주제, 컨텍스트, 스타일 및 품질 수식어 포함
   • 프롬프트를 명확하고 설명적으로 유지

3. 생성 및 저장

   • 작성한 프롬프트로 generate_image 도구 사용
   • 적절한 디렉토리에 저장
   • 저장된 이미지 경로를 사용자에게 표시

Imagen 프롬프트 가이드라인

프롬프트 구조

[스타일] of [주제] [컨텍스트/배경] [추가 설명]

사진 프롬프트

• "A photo of..." 또는 "A photograph of..."로 시작
• 카메라 세부 정보 추가: "35mm portrait", "wide angle 10mm", "macro lens 60mm"
• 조명 포함: "golden hour", "dramatic lighting", "natural light"
• 필름 유형 추가: "black and white film", "film noir", "polaroid"

일러스트레이션 프롬프트

• 아트 스타일 지정: "digital art", "watercolor painting", "pencil sketch"
• 예술 사조 참조: "impressionist style", "art deco", "minimalist"
• 품질 수식어 추가: "highly detailed", "professional", "award-winning"

로고 프롬프트

• 형식 사용: "A [스타일] logo for a [업계] company on a solid color background. Include the text [이름]."
• 스타일: minimalist, modern, traditional, geometric, abstract
• 텍스트는 25자 미만으로 유지

품질 수식어

더 나은 결과를 위해 다음을 추가:

• "highly detailed"
• "professional"
• "award-winning"
• "high resolution"
• "photorealistic"
• "4K quality"

종횡비

사용 사례에 따라 선택:

• 1:1 (정사각형) - 소셜 미디어, 프로필 이미지, 아이콘
• 4:3 (전체 화면) - 일반 사진, 제품 사진
• 3:4 (세로) - 세로 레이아웃, 모바일 화면
• 16:9 (와이드스크린) - 히어로 이미지, 배너, 풍경
• 9:16 (세로) - 모바일 우선 디자인, 스토리

도구: generate_image

중요: 이는 데모를 위한 시뮬레이션 도구입니다. 실제 구현에는 다음이 필요합니다:

1. Imagen 액세스 권한이 있는 Google Cloud API 키
2. google.genai Python 라이브러리와의 통합
3. 적절한 API 구성

사용법

generate_image(
    prompt="A modern minimalist logo for a tech startup on a solid blue background",
    aspect_ratio="1:1",
    number_of_images=1,
    output_dir="website/images",
    filename="logo.png"
)

매개변수

• prompt (필수): 이미지에 대한 상세한 텍스트 설명
• aspect_ratio (선택 사항): "1:1", "4:3", "3:4", "16:9", "9:16" (기본값: "1:1")
• number_of_images (선택 사항): 1-4 (기본값: 1)
• output_dir (선택 사항): 이미지를 저장할 디렉토리 (기본값: "generated_images")
• filename (선택 사항): 사용자 정의 파일명 (기본값: 자동 생성)

예제

예제 1: 웹사이트 히어로 이미지

사용자: "커피숍 랜딩 페이지를 만들어 줘"

AI: "커피숍 랜딩 페이지를 만들어 드리겠습니다. Google의 Imagen AI를 사용하여 맞춤 히어로 이미지를 생성하시겠습니까?"

사용자: "네, 생성해 주세요"

AI: [다음 프롬프트로 이미지 생성]
"A professional photograph of a cozy coffee shop interior, warm lighting, wooden tables, espresso machine in background, inviting atmosphere, 16:9 aspect ratio"

[coffee-shop/images/hero-background.jpg에 저장]
[이미지를 사용하도록 HTML 업데이트]

예제 2: 로고 생성

사용자: "FitTrack이라는 피트니스 앱 로고를 생성해 줘"

AI: [다음 프롬프트로 생성]
"A modern minimalist logo for a fitness company on a solid color background. Include the text FitTrack. Geometric shapes, energetic, professional"

[generated_images/fittrack-logo.png에 저장]

예제 3: 여러 자산

사용자: "포트폴리오 웹사이트를 만들고 이미지를 생성해 줘"

AI: "포트폴리오 웹사이트를 만들어 드리겠습니다. Imagen AI를 사용하여 맞춤 이미지(히어로 배경, 프로필 사진 자리 표시자, 프로젝트 썸네일)를 생성하시겠습니까?"

사용자: "네, 생성해 주세요"

AI: [여러 이미지 생성]
1. 히어로 배경: "Abstract geometric pattern, modern, professional, muted colors, 16:9"
2. 프로젝트 썸네일 1: "Minimalist tech illustration, clean lines, blue and white, 4:3"
3. 프로젝트 썸네일 2: "Creative design mockup, modern interface, professional, 4:3"

[모두 portfolio/images/에 저장]
[이미지 참조로 HTML/CSS 업데이트]

모범 사례

1. 항상 허락 구하기 - 이미지를 생성하기 전에 AI 생성 이미지 사용 여부를 사용자에게 문의
2. 컨텍스트 인식 프롬프트 - 프로젝트의 스타일과 목적에 맞게 프롬프트 조정
3. 적절한 종횡비 - 사용 사례에 맞는 비율 선택
4. 설명적인 파일명 - 명확하고 의미 있는 파일명 사용 (hero-bg.png, image1.png 아님)
5. 구성된 구조 - 논리적인 디렉토리에 이미지 저장 (images/, assets/ 등)
6. 품질 우선 - 전문적인 결과를 위해 품질 수식어 사용
7. 필요시 반복 - 사용자가 만족하지 않으면 프롬프트를 수정하고 재생성

프론트엔드 프로젝트와의 통합

이 스킬로 웹사이트를 구축할 때:

1. 먼저 이미지 디렉토리 생성
2. HTML/CSS를 작성하기 전에 이미지 생성
3. 코드에서 상대 경로 사용: <img src="images/hero.jpg">
4. 생성된 이미지를 설명하는 alt 텍스트 추가
5. 여러 크기의 반응형 이미지 고려

제한 사항

• Imagen은 영어 프롬프트만 지원
• 이미지 내 텍스트는 25자로 제한
• 생성된 이미지에는 SynthID 워터마크가 포함
• Google Cloud API 액세스 필요
• API 등급에 따라 속도 제한 적용

참고

이 스킬은 다음 스킬과 함께 사용할 때 가장 효과적입니다:

• 완전한 웹사이트 생성을 위한 frontend-design 스킬
• 프로젝트 설정을 위한 code-helper 스킬
• 자산 구성을 위한 file-operations 스킬