2026.07.09 / 동준상.넥스트플랫폼
(AWS SAA, AWS AIF, GCP GenAI Leader)

Cursor’s GenerateImage Features Hands-on Guide

GenerateImage란 무엇인가

NXP Cursor GenerateImage User Guide by NextPlatform

GenerateImage는 Cursor AI 에이전트(채팅의 코딩 어시스턴트)가 대화 중에 호출할 수 있는 내장 이미지 생성 도구입니다.

텍스트 설명(description)을 입력하면 이미지 파일(PNG 등)이 생성되고, 워크스페이스 또는 Cursor 프로젝트 경로에 저장됩니다.

프로젝트 코드와의 관계

구분	설명
GenerateImage	개발 과정에서 에셋을 만드는 에이전트 도구
앱 런타임 API	서비스가 사용자에게 실시간으로 이미지를 제공하는 별도 API (예: Gemini Image API)
웹 프로젝트	생성된 정적 이미지를 `<img src="assets/...">`로 표시

GenerateImage는 npm install이나 API 키 설정 없이, 채팅에서 에이전트에게 이미지 생성을 요청하면 사용됩니다. 프로젝트 소스 코드에 포함되는 기능이 아닙니다.

언제 쓰고, 언제 쓰지 말아야 하는가

적합한 용도

UI 목업, 랜딩 히어로 이미지
캐릭터 / 일러스트 / 아이콘 / 배경 에셋
브랜드 비주얼 시안
참조 이미지 기반 시리즈 확장 (같은 스타일의 에셋 여러 장)

부적합한 용도

차트, 표, 데이터 시각화 (코드로 생성하는 것이 적합)
명시적 요청 없이 에이전트가 임의로 생성하는 경우 (도구 규칙상 지양)
CSS/SVG로 충분한 단순 도형·아이콘

중요한 전제

에이전트는 사용자가 이미지 생성을 명시적으로 요청했을 때만 GenerateImage를 호출합니다.

“랜딩페이지 만들어줘”만으로는 이미지가 자동 생성되지 않을 수 있습니다. 아래처럼 구체적으로 요청하세요.

픽셀아트 스타일 히어로 캐릭터 이미지를 GenerateImage로 생성해줘.

핵심 파라미터 레퍼런스

에이전트가 GenerateImage를 호출할 때 사용하는 주요 파라미터입니다. 채팅 요청 시 이 항목들을 직접 지정하면 결과 품질이 크게 올라갑니다.

파라미터	역할	실전 팁
`description`	생성 프롬프트 (가장 중요)	주제·스타일·색·구도·배경·금지사항을 구체적으로
`reference_image_paths`	스타일/캐릭터 일관성 유지	1~N개 파일 경로. 시리즈 확장의 핵심
`aspect_ratio`	이미지 비율	`1:1`, `4:3`, `3:4`, `16:9`, `9:16` 중 선택
`filename`	저장 파일명	`kebab-case.png`, 의미 있는 이름 권장

aspect_ratio 선택 가이드

비율	적합한 용도
`1:1`	캐릭터, 아이콘, 앱 스크린샷 목업
`16:9`	히어로 배너, 와이드 일러스트
`9:16`	모바일 스크린샷, 세로 포스터
`4:3` / `3:4`	카드형 일러스트, 세로/가로 콘텐츠

참조 이미지 워크플로우

참조 이미지(reference_image_paths)는 스타일이 중요한 프로젝트에서 가장 강력한 기능입니다. 매번 프롬프트만으로 스타일을 맞추는 것보다, 확정된 이미지를 기준으로 확장하는 편이 훨씬 안정적입니다.

전체 흐름

flowchart LR
  anchor[AnchorImage생성] --> review[스타일검토및승인]
  review --> refPath[reference_image_paths지정]
  refPath --> series[시리즈에셋확장]
  series --> organize[assets폴더정리]
  organize --> integrate[프로젝트반영]

Step 1 — Anchor 이미지 생성

시리즈의 기준(마스터) 이미지 1장을 먼저 만듭니다.

가장 대표적인 주제로 생성 (예: 메인 캐릭터, 핵심 UI 목업)
스타일·팔레트·배경 톤을 이 단계에서 확정
만족할 때까지 반복 생성 후 1장을 anchor로 채택

파일 예시: assets/anchor-character.png

Step 2 — Reference 기반 시리즈 확장

이후 모든 변형 생성 시 anchor를 참조로 지정합니다.

reference_image_paths: ["assets/anchor-character.png"]

프롬프트에서는 바뀌는 요소만 기술합니다.

바꿀 것: 캐릭터 종류, 포즈, 소품, 표정
고정할 것: 아트 스타일, 색감, 배경 톤, 선 굵기, 구도

Step 3 — 점진적 참조 체인 (Reference Chain)

품질이 좋은 결과물을 다음 생성의 참조로 승격시키는 전략입니다.

anchor.png
  → char-fox.png (fox 생성, anchor 참조)
  → char-fox-winter.png (fox-winter 생성, char-fox.png 참조)

같은 캐릭터의 시즌 변형, 표정 변형, 소품 추가 등에 유용합니다.

Step 4 — 실패 시 대응

증상	대응
스타일이 anchor와 다름	참조 이미지를 더 좋은 결과물로 교체
원하지 않는 요소가 추가됨	프롬프트에 `no text`, `no watermark`, `simple background` 명시
캐릭터가 너무 달라짐	변경 요소를 1~2개로 축소, anchor 재참조
전체적으로 품질 불안정	anchor부터 재생성

프롬프트 작성 템플릿

기본 템플릿

[아트 스타일] of [주제],
[포즈/구도],
[색상 팔레트],
[배경 설명],
[분위기/레퍼런스],
no text

예시 (일반 일러스트)

Flat vector illustration of a small coffee shop,
front view, centered composition,
warm beige and terracotta palette,
clean cream background,
cozy minimalist aesthetic,
no text

참조 기반 확장 템플릿

Same art style as reference.
[새 주제 또는 변경점만 기술].
Keep [고정 요소: palette, background, line weight, composition].
no text

예시 (캐릭터 시리즈)

Same art style as reference.
A small orange fox sitting, friendly expression.
Keep 16-bit pixel art style, warm ivory cream background (#F0EEE6), crisp pixel edges, centered character.
no text

시리즈 통일용 고정 문구 (복사해서 재사용)

프로젝트마다 Style Block을 문서에 적어 두고, 모든 생성 프롬프트 끝에 붙이면 일관성이 올라갑니다.

픽셀아트 예시 (Pixel Grug에서 검증)

16-bit pixel art,
crisp pixel edges,
warm ivory cream background (#F0EEE6),
cozy Stardew Valley / Pokemon aesthetic,
centered character,
soft pastel colors,
no text

UI 목업 예시

clean modern UI mockup,
Anthropic light theme,
warm ivory background (#F0EEE6),
soft rounded corners,
subtle shadow,
no text, no watermark

에이전트에게 요청하는 방법

아래 문장을 복사해 채팅에 붙여 넣으면 됩니다. Agent 모드에서 실행하세요.

1) 첫 Anchor 이미지 생성

GenerateImage로 프로젝트의 기준(anchor) 이미지를 만들어줘.

- 스타일: 16-bit pixel art, warm ivory background (#F0EEE6)
- 주제: 꽃을 든 아기 용, 친근한 표정
- 비율: 1:1
- 파일명: anchor-dragon.png
- 저장: assets/ 폴더

이 이미지를 이후 시리즈의 reference로 쓸 거야.

2) 참조 기반 시리즈 5종 생성

assets/anchor-dragon.png 를 reference_image_paths로 사용해서
같은 스타일의 픽셀 캐릭터 5종을 GenerateImage로 생성해줘.

캐릭터: 여우, 우주 고양이, 로봇 가드너, 슬라임, 구름 고래
비율: 1:1
배경/스타일은 anchor와 동일하게 유지
파일명: char-fox.png, char-spacecat.png, char-robot.png, char-slime.png, char-cloudwhale.png

3) 기존 에셋과 톤 맞추기

assets/hero-dragon.png 스타일을 reference로 삼아
같은 톤의 픽셀 오브젝트 이미지 2종을 생성해줘.

오브젝트: 마법 포션 + 행운의 동전 / 꽃 + 버섯
비율: 1:1
파일명: obj-items.png, obj-nature.png

4) 비율·저장 위치까지 지정

GenerateImage로 랜딩 히어로용 와이드 일러스트를 만들어줘.

- reference: assets/anchor-character.png
- aspect_ratio: 16:9
- filename: hero-banner.png
- assets/ 폴더에 저장 후 index.html 히어로 섹션에 연결해줘

파일 관리 & 프로젝트 통합

권장 폴더 구조

project/
├── assets/              # GenerateImage 결과물 (권장)
│   ├── anchor-*.png     # 기준 이미지
│   ├── char-*.png       # 캐릭터
│   ├── obj-*.png        # 오브젝트
│   └── hero-*.png       # 히어로/배너
└── ref/
    └── GUIDE GenerateImage by Jun v260709.md

네이밍 규칙

접두어	용도	예시
`anchor-`	기준(마스터) 이미지	`anchor-dragon.png`
`hero-`	히어로/대표 이미지	`hero-dragon.png`
`char-`	캐릭터	`char-fox.png`
`obj-`	오브젝트/아이템	`obj-items.png`
`bg-`	배경	`bg-forest.png`

kebab-case 사용 (소문자 + 하이픈)
의미 있는 이름으로 검색·참조가 쉽게

프로젝트 반영 체크

생성된 파일이 워크스페이스 assets/에 있는지 확인
HTML/CSS에서 경로 연결: <img src="assets/char-fox.png" alt="...">
픽셀아트는 CSS image-rendering: pixelated 고려
alt 텍스트 작성 (접근성)
파일 크기 확인 (PNG가 500KB~1MB대면 최적화 검토)

Pixel Grug 사례

이 저장소의 랜딩페이지 제작에서 GenerateImage를 실제로 사용한 사례입니다.

생성된 에셋 (8종)

파일	내용
`assets/hero-dragon.png`	꽃을 든 아기 용 (히어로)
`assets/char-fox.png`	작은 여우
`assets/char-spacecat.png`	우주 고양이
`assets/char-robot.png`	로봇 가드너
`assets/char-slime.png`	모험 슬라임
`assets/char-cloudwhale.png`	구름 고래
`assets/obj-nature.png`	꽃 + 버섯
`assets/obj-items.png`	포션 + 동전

당시 사용한 방법

참조 이미지 없이 공통 Style Block 키워드로 1차 시리즈 생성
모든 프롬프트에 동일한 배경·스타일 문구 반복:
16-bit pixel art, warm ivory cream background (#F0EEE6), crisp pixel edges, no text
랜딩 CSS에 image-rendering: pixelated 적용

회고 — 다음에 더 잘하는 방법

hero-dragon.png를 anchor로 확정한 뒤, 나머지 7종은 reference_image_paths로 생성했으면 스타일 편차가 더 줄었을 것
캐릭터 시리즈와 오브젝트 시리즈는 anchor를 분리 (캐릭터용 / 오브젝트용)
만족하는 결과가 나오면 즉시 assets/로 복사하고 파일명을 확정해 reference chain 시작

체크리스트 & 안티패턴

생성 전 체크리스트

[ ] 이미지 용도가 정해졌는가? (히어로 / 아이콘 / 캐릭터 시리즈 등)
[ ] aspect_ratio가 용도에 맞는가?
[ ] anchor + reference 전략을 정했는가?
[ ] Style Block(고정 문구)을 문서화했는가?
[ ] 금지 요소를 명시했는가? (no text, no watermark 등)
[ ] filename과 저장 폴더를 지정했는가?

안티패턴

안티패턴	왜 문제인가	대안
“예쁜 캐릭터 만들어줘”처럼 추상적 요청	결과가 매번 달라짐	스타일·색·구도·배경을 구체적으로
매번 Style Block을 바꿈	시리즈 불일치	고정 문구를 문서에 적어 재사용
참조 없이 10장 한꺼번에 요청	품질 편차 큼	anchor 1장 확정 → reference로 순차 확장
마음에 안 드는 결과를 reference로 사용	불량이 증폭됨	좋은 결과만 reference로 승격
차트/그래프를 GenerateImage로 시도	도구 목적에 맞지 않음	코드/CSS/SVG로 생성
생성 후 파일 정리 안 함	참조 경로 혼란	`assets/` + 네이밍 규칙 즉시 적용

한계와 팁

알아두면 좋은 한계

생성 결과는 호출마다 약간씩 다를 수 있음
참조 이미지가 있어도 100% 동일 복제는 보장되지 않음
생성 PNG가 고해상도로 클 수 있음 (웹 최적화 별도 검토)

실전 팁

Anchor에 시간을 쓸 가치가 있다 — 이후 모든 시리즈의 품질을 좌우함
프롬프트는 짧게, 변경점만 — reference가 있을 때는 특히
좋은 결과만 골라 reference로 승격 — Reference Chain 전략
Style Block을 ref 문서에 보관 — 이 가이드처럼 프로젝트별 고정 문구 기록
한 번에 1~3장씩 생성 후 검토 — 대량 일괄 생성보다 안정적
Agent 모드에서 실행 — Ask 모드에서는 파일 생성이 되지 않음

빠른 참조 카드

[요청 공식]
"GenerateImage로 [주제] 이미지를 생성해줘.
 reference: assets/anchor.png
 aspect_ratio: 1:1
 filename: char-fox.png
 Style Block: [고정 문구]
 no text"

[워크플로우]
Anchor 확정 → reference 지정 → 시리즈 확장 → assets 정리 → 프로젝트 연결

[핵심 파라미터]
description | reference_image_paths | aspect_ratio | filename

작성: 2026-07-09 · Cursor GenerateImage 유저 가이드 v1

마크다운(Markdown, .md), AI 시대의 기본 문서 형식

Cursor의 ‘GenerateImage’로 앱 빌드를 위한 애셋 이미지, UI 요소 생성하기

타이탄트레일 모닝노트: 7월 들어 AI 인프라에서 AI 플랫폼으로 주도권 변화 감지

AI Native의 시대, Software 3.0

바이브코딩 디스커버리 (구름)