GPT 이미지로 사이트 이미지 14장을 한 톤으로 만든 방법
이 사이트의 이미지 14장은 모두 GPT 이미지 생성으로 만들었습니다. 톤을 맞춘 프롬프트 구조, 실제로 쓴 명령, 용량을 줄인 방법을 수치와 함께 공개합니다.
AI로 이미지를 한 장 만드는 일은 쉽습니다. 어려운 것은 여러 장을 같은 사이트의 이미지처럼 보이게 만드는 일입니다. 이 사이트의 대표 이미지 4장과 글 표지 10장은 모두 GPT 이미지 생성으로 만들었고, 14장 모두 처음 생성한 결과를 그대로 썼습니다. 그렇게 할 수 있었던 방법을 적습니다.
2026년 10월 8일과 9일에 이 사이트의 이미지를 만든 실제 작업입니다. 프롬프트, 명령, 파일 크기는 그때 쓴 것과 측정한 것입니다. 사용한 도구는 Codex CLI 0.160.0의 내장 이미지 생성 기능입니다.
공통 아트 디렉션을 한 문단으로 고정했다
이미지마다 따로 설명을 쓰면 장마다 조명과 색이 달라집니다. 그래서 모든 이미지에 똑같이 붙는 문단을 먼저 만들었습니다.
Shared art direction for all images: editorial still-life
photograph on a warm off-white paper backdrop (#f4f2ec),
soft natural daylight from the left, long soft shadows,
matte charcoal-black objects (#11110f), exactly one small
vivid orange accent (#ff4d00), generous empty space, minimal,
calm, premium magazine look, slight film grain.
Absolutely no text, no letters, no numbers, no logos,
no UI screenshots, no people's faces, no robots.이 문단에는 여섯 가지가 들어 있습니다.
| 요소 | 지정한 내용 | 이유 |
|---|---|---|
| 형식 | 정물 사진 | 일러스트와 사진이 섞이지 않게 |
| 배경 | 사이트 배경색과 같은 색상 코드 | 이미지가 페이지에 자연스럽게 붙게 |
| 조명 | 왼쪽에서 드는 자연광, 긴 그림자 | 그림자 방향이 장마다 달라지지 않게 |
| 소재 | 무광 검정 오브젝트 | 사이트의 글자색과 맞추려고 |
| 포인트 | 주황색을 정확히 하나만 | 사이트의 강조색 규칙과 같게 |
| 금지 | 글자, 숫자, 로고, 화면 캡처, 얼굴, 로봇 | 아래에서 설명 |
색을 "따뜻한 흰색"처럼 말로만 쓰지 않고 사이트에서 쓰는 색상 코드를 그대로 넣었습니다. 생성된 이미지의 배경이 페이지 배경과 거의 구분되지 않는 것은 이 때문입니다.
장마다 바꾼 것은 피사체 한 줄뿐
공통 문단 뒤에 이미지별 설명을 붙였습니다. 각 설명은 무엇이 놓여 있는지와 그것이 무엇을 뜻하는지, 두 문장입니다.
automation.png — landscape 3:2. A row of matte black
dominoes and small paper envelopes arranged along a curved
conveyor-like paper track, flowing in order, one orange
envelope. Suggests repetitive office tasks handled
automatically."업무 자동화"를 그려 달라고 하면 톱니바퀴나 로봇 팔이 나옵니다. 저희는 추상적인 주제를 직접 말하지 않고, 그 주제를 떠올리게 하는 구체적인 물건을 지정했습니다. 자동화는 트랙 위에 차례로 놓인 봉투, 교육은 계단처럼 쌓인 블록과 노트, 광고는 확성기와 빈 포스터입니다.
금지 목록이 한 일
금지 목록의 항목마다 이유가 있습니다.
- 글자와 숫자: 이미지 생성 모델이 만든 글자는 틀리거나 뭉개지는 일이 잦습니다. 한글은 더 그렇습니다. 글자가 필요한 자리는 이미지가 아니라 웹페이지의 글자로 처리했습니다.
- 로고와 화면 캡처: 실제 제품의 상표나 화면처럼 보이는 것이 생기면 안 됩니다. 존재하지 않는 화면을 실제 화면처럼 보이게 하고 싶지 않았습니다.
- 얼굴: 실존 인물과 닮은 얼굴이 나올 가능성을 없애려고 사람 자체를 뺐습니다.
- 로봇: AI 관련 이미지의 가장 흔한 상투를 피하려는 것입니다.
표지 10장 가운데 주판과 동전이 나오는 이미지가 있습니다. 주판알과 동전에 숫자나 무늬가 새겨질 수 있어서, 그 이미지의 설명에는 "무늬 없는 동전"이라고 따로 적었습니다.
실제로 쓴 명령
Codex CLI에는 이미지 생성 기능이 내장되어 있습니다. 기능 목록에서 켜져 있는지 확인할 수 있습니다.
codex features list | grep image
# image_generation stable true생성은 비대화형 실행으로 했습니다. 저장할 폴더를 작업 폴더로 지정하고, 프롬프트 안에 파일 이름까지 적었습니다.
codex exec --skip-git-repo-check -s workspace-write -C "$PWD" \
"Use your built-in image generation tool (not code, not SVG,
not Python drawing) to generate exactly 4 images and save
them as PNG files into ./assets with these exact filenames.
[공통 아트 디렉션]
1) assets/hero.png — landscape 3:2. ...
2) assets/automation.png — landscape 3:2. ..."프롬프트 첫 문장의 괄호가 중요합니다. 코딩 에이전트에게 "이미지를 만들어 줘"라고만 하면 코드로 도형을 그려 SVG 파일을 만드는 경우가 있습니다. 내장 이미지 도구를 쓰라고 명시하고, 코드로 그리지 말라고 적었습니다.
결과와 용량
| 묶음 | 장수 | 생성 크기 | PNG 한 장 | 변환 | 변환 후 한 장 |
|---|---|---|---|---|---|
| 대표 이미지 | 4 | 1536×1024 | 1.8~2.0MB | JPEG 품질 82 | 178~220KB |
| 글 표지 | 10 | 1536×1024 | 1.8~2.3MB | 가로 1200으로 축소, JPEG 품질 80 | 100~157KB |
생성된 PNG를 그대로 올리면 14장이 약 28MB입니다. JPEG로 바꾸니 약 2.1MB가 됐습니다. 변환에는 macOS에 기본으로 들어 있는 명령을 썼습니다.
# 형식만 변환
sips -s format jpeg -s formatOptions 82 hero.png --out hero.jpg
# 긴 변을 1200px로 줄이면서 변환
sips -Z 1200 -s format jpeg -s formatOptions 80 cover.png --out cover.jpg원본 PNG는 지우지 않고 별도 폴더에 두었고, 배포할 때는 그 폴더를 제외했습니다. 제외하는 방법은 정적 사이트를 Cloudflare에 배포한 기록에 있습니다.
표지 10장을 만드는 데는 약 6분이 걸렸습니다. 명령을 실행한 시각과 마지막 파일이 저장된 시각의 차이입니다.
웹페이지에 넣을 때 한 일
- 대체 텍스트를 썼습니다. 이미지를 볼 수 없는 방문자를 위해 무엇이 놓여 있는지 한 문장으로 적었습니다. 글 목록의 작은 이미지는 제목과 내용이 겹쳐서 대체 텍스트를 비워 두었습니다.
- 가로세로 크기를 적었습니다. 이미지가 늦게 뜰 때 글이 밀려 내려가지 않게 하려는 것입니다.
- 첫 화면 밖의 이미지는 늦게 불러오게 했습니다.
- AI로 만들었다고 표시했습니다. 사이트 맨 아래에 "이 사이트의 이미지와 영상은 AI로 생성했습니다"라고 적었습니다.
한계
- 정물 사진이라는 형식을 골랐기 때문에 잘된 면이 있습니다. 사람이 등장하는 장면이나 실제 제품이 정확히 나와야 하는 이미지는 이 방법으로 같은 결과를 기대하기 어렵습니다.
- 14장을 처음 결과 그대로 썼다는 것은 저희 기준에서 쓸 만했다는 뜻입니다. 자세히 보면 장마다 그림자의 세기와 배경의 밝기가 조금씩 다릅니다.
- 같은 프롬프트로 다시 생성하면 다른 이미지가 나옵니다. 나중에 한 장만 다시 만들면 나머지와 톤이 어긋날 수 있습니다.