Codex 에게 이미지를 요청했을 때, 실제 일러스트 대신 평평한 SVG 스타일의 그림이 나오는 이유가 무엇일까요?
사진이나 일러스트를 기대했지만, 실제로 받은 것은 단순한 기하학적 도형들의 모음이었습니다.
"이게 Codex 이미지 생성의 한계인가?"
처음에는 저도 그렇게 생각했습니다. 'icon'이나 'logo' 같은 단어를 사용해서 Codex 가 실제 이미지 생성 대신 SVG, HTML, CSS 로 그림을 그리도록 선택한 것이 원인이라고 의심했습니다.
그래서 직접 Codex 를 실행해 테스트해 보았습니다.
Claude Code 에서 Codex 를 호출하여 다음 Before/After 결과를 비교했습니다.
- Before: 단순히 "Create a simple cat icon." 이라고 요청
- After: 이미지 생성 도구, 주제, 색상, 질감, 금지 사항, 저장 위치를 명시
결과는 제 예상을 확인해 주었습니다.
짧은 요청은 PNG 확장자였지만 실제로는 SVG 를 래스터화한 평평한 고양이 아이콘을 반환했습니다.
반면, 이미지 생성 도구와 완료 조건을 명시적으로 지정한 요청은 마이크를 든 고양이, 파란색 원형 프레임, 노란색 배경, 보케 효과까지 포함된 풍부한 이미지를 생성했습니다.
요약하면, 이 검증을 통해 다음 사실을 알 수 있었습니다.
주제뿐만 아니라 이미지 생성 모델 사용, SVG 대체 회피, 색상 및 질감과 같은 세부 사항을 전달함으로써 Codex 가 이미지를 만드는 방식 자체를 바꿀 수 있습니다.
이 글에서는 공식 OpenAI 정보와 2026년 7월 13일 실제 측정 결과를 바탕으로 Codex 에서 원하는 이미지를 만드는 방법을 정리하겠습니다.
결론 먼저
핵심 포인트는 다음과 같습니다.
- Codex 는 사진과 일러스트를 생성할 수 있지만, SVG, HTML, CSS 를 사용하여 시각 자료를 만들 수도 있습니다.
- 확장자가 PNG 라도 내용은 SVG 에서 변환된 이미지일 수 있습니다.
- 사진이나 일러스트를 원할 때는 프롬프트에
$imagegen을 추가하여 이미지 생성 스킬을 명시적으로 호출합니다. - 품질 차이는 프롬프트 길이보다는 "목적, 주제, 스타일, 구성, 제약 조건"에서 비롯됩니다.
- 세부 사양의 가치는 단순히 멋져 보이게 하는 것이 아니라, 의도된 용도에 맞게 구성을 더 쉽게 재현할 수 있도록 하는 데 있습니다.
- 한 번에 완벽을 목표로 하지 말고, 변경할 사항과 유지할 사항을 지정하여 요소를 하나씩 수정하세요.
바로 시도해 보고 싶다면, 요청 시작 부분에 다음 문장을 추가하세요.
──────── 복사하여 붙여넣기용 ────────
$imagegen 을 사용하여 이미지 생성 모델로 래스터 이미지를 생성하세요. SVG, HTML, CSS, canvas 로 대체하지 마십시오.
──────────────────────
하지만 이 한 문장만으로 되는 것은 아닙니다. "이미지의 용도"와 "합격 기준"을 전달해야 Codex 가 마침내 동일한 기준으로 이미지를 확인할 수 있습니다.
이미지 대신 SVG 를 출력하는 이유는?
Codex 는 전용 이미지 생성 서비스가 아닙니다. 코드를 작성하고, 기존 파일을 읽고, 웹사이트를 수정하고, 필요에 따라 SVG, HTML, CSS, canvas 를 처리합니다. 이것은 큰 장점입니다.
예를 들어, 웹사이트에 기존 SVG 아이콘 세트가 있고 동일한 선 두께, 색상, 크기로 아이콘을 하나 더 추가하려는 경우, 이미지 생성 모델로 PNG 를 만드는 것보다 기존 SVG 를 편집하는 것이 더 정확합니다.
반면, 기사 헤더 이미지, 사진 스타일의 비주얼, 질감이 있는 캐릭터, 광고 배너는 코드보다 이미지 생성에 더 적합합니다.
현재 Codex 의 imagegen 스킬도 이 두 가지를 구분합니다.
- 사진, 일러스트, 질감, 스프라이트, 목업과 같이 비트맵 이미지에 적합한 작업에는 이미지 생성을 사용합니다.
- 기존 SVG, 벡터 또는 코드 에셋을 편집하는 것이 더 나은 작업에는 해당 방식을 우선시합니다.
중요한 점은 이것이 단순히 "icon" 또는 "logo"라는 단어에 의해 기계적으로 결정되지 않는다는 것입니다.
동일한 아이콘이라도 두 가지 용도가 있습니다.
- UI 에서 사용되는 확장 가능한 벡터 컴포넌트
- SNS 에서 사용되는 질감과 음영이 있는 장식용 단일 이미지
요청이 모호하면 Codex 는 프로젝트의 기존 파일이나 주변 컨텍스트를 기반으로 사용자가 원하는 것을 추측합니다. 그 추측이 사용자의 의도와 어긋날 때 "사진을 원했는데 SVG 같은 것을 얻는" 현상이 발생합니다.
따라서 문제의 본질은 "icon이라는 단어가 금지되어 있다"는 것이 아닙니다. Codex 에게 원하는 출력 형식이 전달되지 않았다는 것입니다.
공식 정보에서 확인할 수 있는 것
Codex 이미지 생성에는 세 가지 비슷한 이름이 등장하지만, 의미는 다릅니다.
$imagegen: Codex 의 이미지 생성 스킬을 명시적으로 호출하는 이름image_gen: Codex 에 내장된 이미지 생성 도구의 이름gpt-image-2: API 또는 폴백 CLI 를 통해 모델을 직접 지정할 때의 모델 ID- "Image 2.0" 또는 "GPT Image 2 equivalent": 런타임 시 공식 모델 ID 가 아닌, 고품질 이미지를 전달하기 위해 사용되는 용어
일반적인 이미지 생성의 기본 접근 방식은 $imagegen 으로 스킬을 호출하고 내장된 image_gen 도구를 사용하는 것입니다. 이 경로에서는 별도의 OPENAI_API_KEY 가 필요하지 않습니다.
모델 ID 로 gpt-image-2 를 직접 지정하는 것은 API 나 폴백 CLI 를 명시적으로 사용할 때입니다. 이 경로에는 OPENAI_API_KEY 가 필요합니다.
또한 효과적인 이미지 프롬프트는 다음 원칙을 따릅니다.
- 목적, 주제, 배경, 구성, 스타일, 제약 조건을 구체적으로 전달합니다.
- "아름다운", "세련된"과 같은 추상적인 용어보다는 빛의 방향과 배치와 같은 구체적인 세부 사항을 작성합니다.
- 수정 시에는 한 번에 하나의 요소만 변경하고 유지하려는 조건을 반복합니다.
- 이미지 내의 텍스트는 따옴표로 묶고 서체, 색상, 크기, 배치를 지정합니다.
이를 통해 알 수 있는 것은 $imagegen 이 공식적으로 제공되는 스킬 호출의 명시적인 방법이라는 점입니다. 이것이 없으면 "절대 이미지를 만들 수 없다"는 의미는 아닙니다. 그러나 우리의 "Before" 사례에서는 이미지 생성 대신 SVG 를 만드는 경로가 선택되었습니다. $imagegen 의 역할은 자동 판단에 맡기지 않고 이미지 생성 의도를 명확히 하는 것입니다.
실제 Before/After
다음은 실제 측정 결과입니다. Claude Code 에서 Codex 를 호출했습니다. 사용된 Codex CLI 버전은 0.144.1 이며, API 키를 추가하지 않고 ChatGPT 계정에 로그인하여 실행했습니다.
명확히 말씀드리면, 이는 단 하나의 조건만 변경한 엄격한 비교 실험이 아닙니다. "Before"에서는 만들고 싶은 것을 간략하게만 언급했습니다. "After"에서는 생성 도구, 저장 형식, 주제, 색상, 구성, 금지 사항, 품질을 지정했습니다.
즉, 실패를 경험한 후 요청 사항을 구체화했을 때 결과가 얼마나 달라지는지 보여주는 Before/After 입니다.
Before: "간단한 고양이"만 요청
Claude Code 에 보낸 초기 요청은 이것뿐이었습니다.
──────── 복사하여 붙여넣기용 ────────
Create a simple cat icon
──────────────────────
이미지 생성 모델, PNG, SVG, 색상, 질감, 배경, 저장 위치를 지정하지 않았습니다.
그리고 돌아온 결과는 다음과 같습니다.
파일을 검사한 결과는 다음과 같습니다.
- 파일명:
cat-icon.png - 형식: PNG, RGBA
- 크기: 1024x1024 픽셀
- 비트 심도: 16-bit
- 파일 크기: 약 121KB
- 외관: 겹쳐진 단순한 모양으로 이루어진 평평한 갈색 얼룩 고양이 얼굴
밝은 노란색 원형 배경 위에 큰 고양이 얼굴이 있는 구성입니다. 표정은 귀엽고 "simple cat icon" 요청을 따랐습니다.
즉, Codex 가 지시를 무시한 것이 아닙니다. 오히려 문제는 제가 기대한 "이미지 생성 모델에 의한 질감이 있는 완성된 일러스트"를 전달하기에는 요청이 너무 짧았다는 점입니다.
같은 폴더에 cat-icon.svg 도 생성되었습니다. 또한 PNG 메타데이터에는 svg:title 이 "Cute brown tabby cat face icon"으로, svg:comment 에는 "background", "ears", "face", "eyes", "collar"와 같은 SVG 구성 요소가 포함되어 있었습니다.
이는 Codex 가 "simple icon"을 벡터 자료 요청으로 해석하여 SVG 를 만들고 이를 PNG 로 변환했음을 의미합니다.
"Before"는 실패가 아니라 너무 문자 그대로 해석된 것입니다. 단순히 "simple"이라고만 말했기 때문에 Codex 는 편집하기 쉬운 기하학적 도형으로 간단하게 만들었습니다.
After: 생성 방법 및 최종 이미지 수정
다음으로 Claude Code 에서 Codex 를 호출할 때 다음 내용을 전달했습니다.
──────── 복사하여 붙여넣기용 ────────
mkdir -p ./images
codex exec -C "$(pwd)" -s workspace-write --skip-git-repo-check \
"이미지 생성 도구(image_gen / gpt-image-2)를 사용하여 마이크를 든 고양이의 귀여운 일러스트를 PNG 로 생성하고 ./images/cat-mic.png 에 저장하세요. 평평하고 귀여운 색감, 부드러운 그림자와 하이라이트, 파란색 원형 프레임, #FDE68A 배경에 작은 별과 보케, 포인트 색상 #2563EB, 고양이는 크림색에서 주황색으로 해주세요. 단일 일러스트로 생성하고 SVG 나 HTML/CSS 로 대체하지 마십시오. 텍스트나 워터마크를 포함하지 마십시오. 품질은 높음입니다."
──────────────────────
이것이 실제 사용된 명령입니다. 그러나 image_gen 과 gpt-image-2 는 동일한 것의 별칭이 아닙니다. Codex 내장 기능을 사용하는 경우 현재 권장되는 작성 방법은 다음과 같습니다.
──────── 복사하여 붙여넣기용 ────────
mkdir -p ./images
codex exec -C "$(pwd)" -s workspace-write --skip-git-repo-check \
'$imagegen 을 사용하여 내장 image_gen 도구로 마이크를 든 고양이의 귀여운 일러스트를 PNG 로 생성하세요. 평평하고 귀여운 색감, 부드러운 그림자와 하이라이트, 파란색 원형 프레임, #FDE68A 배경에 작은 별과 보케, 포인트 색상 #2563EB, 고양이는 크림색에서 주황색으로 해주세요. SVG 나 HTML/CSS 로 대체하지 마십시오. 텍스트나 워터마크를 포함하지 마십시오. 완료 후 생성된 이미지를 ./images/cat-mic.png 에 저장하세요. 높은 품질로 마무리하세요.'
──────────────────────
전체 프롬프트를 작은따옴표로 묶은 이유는 $imagegen 의 $가 셸 변수로 확장되는 것을 방지하여 Codex 에 직접 전달하기 위함입니다.
"Before"와의 차이점은 단순히 텍스트가 더 길어졌다는 것뿐만이 아닙니다.
- 이미지 생성 도구를 명시적으로 언급
- PNG 로 저장
- SVG 나 HTML/CSS 로 대체하지 않음
- 주제는 마이크를 든 고양이
- 평평하고 귀여운 색감, 부드러운 그림자와 하이라이트
- 파란색 원형 프레임 포함
- 배경색 #FDE68A 로 설정
- 별과 보케 포함
- 포인트 색상 #2563EB 로 설정
- 고양이 색상을 크림/주황색으로 설정
- 텍스트나 워터마크 없음
- 품질 높음으로 설정
- 저장 위치를
./images/cat-mic.png로 고정
다음은 생성된 이미지입니다.
실제 파일은 다음과 같았습니다.
- 파일명:
cat-mic.png - 생성 경로: Codex 내장 이미지 생성 도구
- 형식: PNG, RGB
- 크기: 1254x1254 픽셀
- 비트 심도: 8-bit
- 파일 크기: 약 1.74MB
이미지는 크림색에서 주황색 고양이가 마이크를 들고 있고, 파란색 원형 프레임, 노란색 배경, 파란색 별, 보케를 반영하고 있습니다. 털과 마이크에는 부드러운 그림자와 하이라이트가 있어 "Before" 버전에 비해 완성된 일러스트로서 훨씬 더 많은 정보를 제공합니다. 텍스트나 워터마크는 없습니다.
두 결과를 비교하여 배운 점
동일한 PNG 확장자라도 내용은 완전히 다릅니다.
Before 와 After 모두 .png 확장자를 가지고 있습니다. 그러나 Before 는 SVG 를 PNG 로 변환한 이미지인 반면, After 는 이미지 생성 도구가 직접 만든 래스터 이미지입니다. "PNG 로 전달되었다"는 사실만으로 예상된 생성 방법인지 판단할 수 없습니다.
Before 결과는 프롬프트에 대해 정확했습니다.
Before 에서 요청한 것은 "simple cat icon"이었습니다. 나온 것은 실제로 단순한 고양이 아이콘이었습니다. Codex 의 능력이 낮았던 것이 아니라, 제 말이 최종 이미지를 제한하지 못한 것입니다.
After 는 생성 경로를 지시했습니다.
After 에서 효과를 본 것은 "더 예쁘게 만들어 줘"와 같은 모호한 요청이 아니었습니다. 이미지 생성 도구 사용, SVG 대체 금지, 색상, 주제, 배경, 질감, 저장 위치를 지정한 것이 효과를 보았습니다.
품질 차이는 오로지 image_gen 때문이라고 볼 수 없습니다.
After 에서는 생성 도구와 함께 주제, 색 구성표, 음영, 배경, 품질을 동시에 변경했습니다. 따라서 시각적 개선을 image_gen 이라는 단어 하나의 효과로 분리할 수는 없습니다. 그러나 적어도 "SVG 에서 PNG 로 변환하는 경로"를 피하고 이미지 생성 모델로 진행하겠다는 의도를 명확히 했습니다.
원하는 것이 무엇인지뿐만 아니라, 어떻게 만들 것인지도 전달하세요. 이것이 이번 Before/After 에서 얻은 가장 큰 교훈입니다.
$imagegen 을 추가하는 목적은 무엇인가?
이러한 결과를 보면 "PNG 가 나왔는데 $imagegen 이 필요 없는 것 아닌가?"라고 생각할 수 있습니다.
사진이나 일러스트에 대한 요청이 명확하다면 Codex 가 자동으로 이미지 생성을 선택할 수도 있습니다. 그러나 명시적으로 표현해야 하는 세 가지 이유가 있습니다.
- 경로 혼동 줄이기 기존 SVG 또는 UI 에셋이 많은 프로젝트에서는 Codex 가 코드 편집이 적절하다고 판단할 수 있습니다. 단일 이미지가 필요한 경우 이미지 생성을 명시적으로 언급하면 의도 차이가 줄어듭니다.
- 팀 내 요청 표준화 "image", "icon", "banner"의 의미가 사람마다 다르면 출력도 달라집니다.
$imagegen과 목적을 공통 규칙으로 만들면 요청하는 사람이 바뀌어도 동일한 경로를 선택하기 쉬워집니다.
- 실패 원인 분리 용이 이미지 생성을 명시적으로 언급했는데 결과가 좋지 않다면 다음으로 살펴볼 것은 구성, 스타일, 제약 조건입니다. 경로를 알 수 없으면 "이미지 생성 모델이 나쁘다", "SVG 로 만들었다", "프롬프트가 모호하다" 중 무엇이 원인인지 알 수 없습니다.
$imagegen 을 이미지 품질을 높이는 마법의 주문으로 생각하지 말고, 실행 방식을 고정하는 스위치로 생각하세요.
사용 가능한 최단 프롬프트
먼저 이 형식을 복사하여 붙여넣으세요.
──────── 복사하여 붙여넣기용 ────────
$imagegen 을 사용하여 이미지 생성 모델로 다음 이미지를 만드세요. SVG, HTML, CSS, canvas 로 대체하지 말고 단일 래스터 이미지로 생성하세요.
목적: X 프로필 사진
주제: 마이크를 든 고양이
스타일: 친근감 있고 깊이감이 있는 3D 일러스트
구성: 정사각형, 중앙 정렬, 원형으로 잘라도 주제가 유지됨
제약 조건: 텍스트, 로고, 워터마크 없음
──────────────────────
모든 것을 상세히 작성할 필요는 없습니다. OpenAI 공식 가이드에서도 이미지 프롬프트는 명확한 1-3 문장이면 충분한 경우가 많다고 설명합니다. 중요한 것은 길이가 아니라 성공을 결정짓는 조건을 포함하는 것입니다.
이미지 품질을 안정화하는 5가지 항목
프롬프트가 막막하다면 다음 5가지만 작성하세요.
- 목적 이미지가 사용될 위치를 작성합니다. 예: X 게시물, 프로필 사진, 블로그 헤더, LP 히어로 이미지, 제품 소개. 목적을 쓰면 Codex 가 필요한 구성과 여백을 더 쉽게 판단할 수 있습니다.
- 주제 무엇을, 어떤 상태로 그릴지 작성합니다. 예: 마이크를 든 갈색 얼룩 고양이, 노트북으로 작업하는 여성, 책상 위에 놓인 커피.
- 스타일 사진, 일러스트, 3D 등 원하는 질감을 지정합니다. 예: 자연광이 있는 사실적인 사진, 잡지 스타일의 에디토리얼 일러스트, 부드러운 수채화, 깊이감 있는 3D.
- 구성 종횡비, 주제의 위치, 필요한 여백을 작성합니다. 예: 가로, 사람은 왼쪽, 오른쪽에 헤드라인을 위한 넓은 여백 확보. After 예시에서 "파란색 원형 프레임" 지시는 고양이와 마이크가 원 안에 들어가는 구성을 만들었습니다.
- 제약 조건 포함하지 않을 사항과 따라야 할 조건을 작성합니다. 예: 텍스트 없음, 로고 없음, 워터마크 없음, 배경을 복잡하게 만들지 않음.
이 5가지 항목이 있으면 Codex 는 단순히 "그림을 그리는" 것뿐만 아니라 "목적에 맞는지 확인"할 수 있습니다.
목적별 복사하여 붙여넣기 예시
기사 헤더 이미지
──────── 복사하여 붙여넣기용 ────────
$imagegen 을 사용하여 블로그 게시물의 가로 헤더 이미지를 생성하세요. 나무 책상 위에 놓인 노트북과 커피를 부드러운 아침 자연광으로 촬영한 사실적인 사진으로 만들어 주세요. 주제를 왼쪽에 배치하고 오른쪽에 헤드라인을 위한 넓은 여백을 남겨 주세요. 텍스트, 로고, 워터마크를 포함하지 마십시오. SVG, HTML, CSS 로 대체하지 마십시오.
──────────────────────
X 게시물 정사각형 이미지
──────── 복사하여 붙여넣기용 ────────
$imagegen 을 사용하여 X 게시물용 정사각형 일러스트를 생성하세요. AI 와 사람이 같은 책상에서 협력하여 계획을 세우는 장면을 친근한 에디토리얼 일러스트로 표현해 주세요. 사람과 AI 기기를 중앙에 배치하고, 스마트폰 타임라인에서 봐도 주제가 선명하게 보이는 구성으로 해주세요. 기본 색상은 파란색과 주황색을 사용하고, 텍스트, 로고, 워터마크를 포함하지 마십시오.
──────────────────────
LP 히어로 이미지
──────── 복사하여 붙여넣기용 ────────
$imagegen 을 사용하여 온라인 비즈니스 도구 LP 의 히어로 이미지를 생성하세요. 밝은 사무실에서 소규모 팀이 큰 화면을 보며 이야기하는 자연스러운 사진으로 만들어 주세요. 가로 방향으로 사람들을 오른쪽에 배치하고 왼쪽에 헤드라인과 버튼을 위한 여백을 남겨 주세요. 지나치게 미래지향적인 표현, 텍스트, 회사 로고, 워터마크를 포함하지 마십시오.
──────────────────────
일본어 텍스트가 포함된 이미지
──────── 복사하여 붙여넣기용 ────────
$imagegen 을 사용하여 X 게시물용 정사각형 이미지를 생성하세요. "AIで仕事が変わる" (AI 가 일을 바꾼다) 텍스트만 상단 중앙에 크고 굵은 흰색 고딕체로 배치하세요. 텍스트는 한 줄, 중앙 정렬로 해주세요. 다른 텍스트, 로고, 워터마크는 추가하지 마십시오. 배경은 진한 파란색에서 보라색으로 그라데이션 처리하고, 비즈니스용 차분한 디자인으로 해주세요.
──────────────────────
이미지에 텍스트를 넣을 때는 다음 세 가지를 따르세요.
- 표시할 텍스트를 따옴표로 묶습니다.
- 서체, 색상, 크기, 위치를 지정합니다.
- 다른 문자를 추가하지 않도록 지시합니다. 생성 후 게시 전에 모든 문자를 확인하세요.
수정 시에는 "변경할 사항"과 "유지할 사항"을 작성하세요
첫 번째 이미지가 거의 만족스러울 때는 프롬프트 전체를 처음부터 다시 작성할 필요가 없습니다. 사실, 한 번에 너무 많이 변경하면 마음에 들었던 부분이 바뀔 수 있습니다. 한 번에 하나의 요소씩 수정하세요.
- 구성을 그대로 유지하고 배경을 더 밝게 만듭니다.
- 사람과 책상을 유지하고 머그잔을 실내 식물로 교체합니다.
- 색상과 조명을 유지하고 오른쪽 여백을 넓힙니다.
- 고양이의 표정과 털 색상을 유지하고 마이크를 약간 작게 만듭니다.
OpenAI 공식 가이드에서도 편집 시 "변경할 사항"과 "유지할 사항"을 명확히 할 것을 권장합니다. 다음은 사용 가능한 형식입니다.
──────── 복사하여 붙여넣기용 ────────
첨부된 이미지를 편집해 주세요. 배경만 변경하세요. 배경을 밝은 회색으로 만드세요. 사람, 옷, 표정, 구성, 조명, 색조는 그대로 유지하세요. 텍스트나 로고를 추가하지 마십시오.
──────────────────────
"이것만 변경하고, 다른 것은 건드리지 마세요"라고 작성하면 전체 이미지의 변화를 줄일 수 있습니다.
매번 작성하기 번거롭다면 규칙을 고정하세요
Claude Code 에서 Codex 를 호출할 때마다 동일한 내용을 입력하는 것은 번거롭습니다. 이러한 작업에서는 먼저 프로젝트의 CLAUDE.md에 이미지 생성 규칙을 배치하는 것이 좋습니다. Claude Code 는 CLAUDE.md 를 읽기 때문에 "이미지 요청 시 Codex 에게 어떻게 요청할지"를 여기에 고정합니다.
Codex 를 직접 사용하는 프로젝트라면 동일한 내용을 AGENTS.md 에 넣으세요. AGENTS.md 는 Codex 측에서 읽는 프로젝트 규칙입니다.
──────── 복사하여 붙여넣기용 ────────
이미지 생성 규칙
- 사진, 일러스트, 배너, 히어로 이미지, SNS 게시물 이미지를 만들 때는
$imagegen을 사용합니다. - 래스터 이미지가 요청된 경우 SVG, HTML, CSS, canvas 로 대체하지 않습니다.
- 생성 전에 목적, 주제, 스타일, 구성, 제약 조건을 정리합니다.
- 기존 SVG 아이콘 세트에 추가할 때만 기존 형식에 맞게 SVG 를 편집합니다.
- 완성된 이미지는 프로젝트 내에 저장하고 저장 위치를 보고합니다.
──────────────────────
이 규칙의 목적은 항상 SVG 를 금지하는 것이 아닙니다. 목적에 따라 선택하는 것입니다. UI 컴포넌트에는 SVG, 완성된 단일 이미지에는 이미지 생성을 사용합니다.
스킬(Skill)로 만들어야 할까요?
이미지를 생성하기 위해 새 스킬을 만들 필요는 없습니다. Codex 에는 이미 imagegen 스킬이 있습니다. 사용자 지정 스킬을 만드는 것은 여러 프로젝트에서 절차를 표준화하려는 경우에 가치가 있습니다. 예를 들어:
- 매번 브랜드 색상이나 아트 스타일을 적용합니다.
- X, 기사, LP 등 용도에 따라 구성을 자동으로 선택합니다.
- 생성 후 텍스트, 여백, 크기, 금지 사항을 확인합니다.
- 파일 이름과 저장 위치를 통일합니다.
- 실패 시 동일한 기준으로 수정을 적용합니다.
판단은 간단합니다.
- 단일 프로젝트에서 사용하는 규칙:
CLAUDE.md - Codex 가 직접 따라야 할 프로젝트 규칙:
AGENTS.md - 여러 프로젝트에서 "생성 -> 확인 -> 저장"을 재사용하는 메커니즘: 사용자 지정 스킬
처음부터 스킬을 구축할 필요는 없습니다. CLAUDE.md 로 시작하고, 동일한 절차를 세 번 이상 반복하게 되면 스킬로 만드는 것을 고려하세요.
SVG 가 정답인 상황
이미지 생성 호출 방법을 설명했지만, SVG 자체가 나쁜 것은 아닙니다. SVG 는 다음 용도에 더 적합합니다.
- 기존 UI 아이콘 세트에 새 아이콘을 추가합니다.
- 확장해도 선이 선명하게 유지됩니다.
- CSS 로 색상을 변경할 수 있습니다.
- 숫자 값으로 모양과 선 두께를 정확하게 관리할 수 있습니다.
- 차이점을 코드로 검토할 수 있습니다.
반대로, 이미지 생성은 다음에 적합합니다.
- 사진 스타일의 비주얼
- 털, 천, 금속과 같은 질감이 필요한 일러스트
- 광고나 기사의 시선을 끄는 요소
- 캐릭터나 스토리텔링이 있는 단일 이미지
- 분위기나 감정을 전달하는 비주얼
기준은 "SVG 또는 PNG"가 아닙니다. "결정적으로 관리해야 할 컴포넌트인가, 아니면 표현력을 우선시하는 단일 이미지인가?" 입니다. Codex 에게 요청하기 전에 이것을 결정하면 경로 불일치가 줄어듭니다.
이 검증을 통해 바로잡은 3가지 오해
마지막으로, 직접 시도해 봄으로써 바로잡을 수 있었던 점들을 정리합니다.
오해 1: PNG 면 이미지 생성 모델로 만든 것이다.
이번 초기 이미지는 PNG 였지만 메타데이터에 SVG 제목과 구성 요소가 포함되어 있었습니다. 외관도 단순한 도형의 조합이어서 SVG 를 PNG 로 변환한 이미지로 판단되었습니다. 확인해야 할 것은 확장자뿐만 아니라 어떤 경로로 생성되었는지와 실제 외관입니다.
오해 2: `$imagegen` 을 추가하면 이미지 품질이 향상된다.
이번 "After"는 "Before"보다 훨씬 더 많은 정보를 가진 외관이었습니다. 그러나 동시에 마이크, 색 구성표, 음영, 배경, 구성, 품질을 지정했습니다. 이미지 생성 도구를 명시적으로 언급하면 생성 경로는 고정되지만, 그것만으로 원하는 마무리가 보장되지는 않습니다. 목적에 맞는지 판단할 외관 결정 조건과 합격 기준도 필요합니다.
오해 3: 프롬프트가 길수록 좋다.
"After"가 더 좋아진 이유는 단어 수가 늘어났기 때문이 아닙니다. 이미지 생성 도구, SVG 금지, 주제, 색 구성표, 배경, 질감, 저장 위치와 같이 결과를 결정짓는 조건이 포함되었기 때문입니다. 길이가 아니라 판단에 필요한 조건을 작성하세요.
요약
Codex 가 단순한 이미지를 반환할 때, 가장 먼저 의심해야 할 것은 이미지 생성 모델의 성능이 아닙니다. 코드용 벡터 컴포넌트를 원하는지, 사진이나 일러스트와 같은 완성된 단일 이미지를 원하는지, 사용자의 의도가 전달되었는지 확인하세요.
단일 이미지를 원한다면 먼저 다음 문장을 추가하세요.
──────── 복사하여 붙여넣기용 ────────
$imagegen 을 사용하여 이미지 생성 모델로 래스터 이미지를 생성하세요. SVG, HTML, CSS, canvas 로 대체하지 마십시오.
──────────────────────
그 위에 목적, 주제, 스타일, 구성, 제약 조건을 작성하세요.
이번 실제 측정에서 Claude Code 에게 단순히 "고양이 아이콘" 만 요청했을 때, Codex 는 이를 벡터 자료 요청으로 해석하여 SVG 에서 파생된 평면 PNG 를 만들었습니다. 반면, $imagegen 으로 이미지 생성 스킬을 호출하고, 내장된 image_gen 도구를 사용하며, SVG 로 대체하지 않고, 주제, 색 구성표, 질감, 배경, 품질을 지정하면 이러한 사양을 반영한 완성도 높은 일러스트레이션을 더 쉽게 만들 수 있습니다.
이미지 품질을 결정하는 것은 프롬프트의 길이가 아닙니다. 무엇을 만들지뿐만 아니라, 그것이 무엇을 위한 것인지, 어떤 상태가 합격점인지를 공유했는지 여부입니다. 이 정도를 전달하면 Codex 는 단순한 이미지 생성기를 넘어 목적에 따라 이미지를 만들고 확인하는 제작 파트너가 됩니다.
시작하려면 평소 이미지 요청에 "목적" 하나와 "합격 조건" 하나를 추가해 보세요. 그것만으로도 운에 맡기는 이미지 생성에서 의도한 결과를 재현하는 이미지 제작으로 한 걸음 더 가까워질 수 있습니다.
참고 자료:
