GPT Image 2로 만든 디자인을 PSD나 HTML로 받고 싶다면 먼저 한 가지를 정해야 합니다. 파일을 열 수 있기만 하면 되는지, 아니면 다음 사람이 실제로 수정하고 운영할 수 있어야 하는지입니다. PNG 한 장을 Photoshop에 넣고 저장하면 .psd가 되고, 화면 이미지를 <img>에 넣으면 .html이 됩니다. 그러나 둘 다 제대로 된 인수인계라고 보기는 어렵습니다.
실무에서는 세 가지 결과를 나눠 생각하는 편이 안전합니다.
| 필요한 결과 | GPT Image 2가 직접 만드는 부분 | 추가로 필요한 작업 | 완료 판단 |
|---|---|---|---|
| 최종 이미지 | PNG·JPEG·WebP 이미지 | 필요하면 압축과 간단한 보정 | 크기, 투명도, 내용, 텍스트 확인 |
| 편집 가능한 PSD | 바탕 이미지 또는 분리용 이미지 자산 | Photoshop 등에서 레이어·마스크·텍스트 구성 | 주요 요소 교체와 텍스트 수정이 가능 |
| 동작하는 웹 화면 | 목업과 이미지 자산 | Codex 등이 실제 코드 작성 | 반응형, 의미 구조, 접근성, 상태와 상호작용 확인 |
모델 출력과 최종 파일을 분리해야 하는 이유
OpenAI의 gpt-image-2 모델 문서는 이 모델을 이미지 생성 및 편집 모델로 설명합니다. Image API의 출력 형식 문서에 적힌 형식은 기본 PNG와 선택 가능한 JPEG, WebP입니다. 결과는 base64로 인코딩된 이미지 데이터입니다.
PSD나 HTML은 이 출력 형식에 포함되지 않습니다. Photoshop 레이어 목록, HTML DOM, CSS 중단점, 컴포넌트 상태도 이미지 응답 안에는 없습니다. 따라서 GPT Image 2를 사용한 작업이 PSD나 웹페이지를 만들었다면, 모델 주변에서 실행된 앱·에이전트·스크립트가 파일을 구성한 것입니다.
이 구분은 모델을 낮게 평가하려는 것이 아닙니다. 이미지 생성과 편집은 디자인 작업의 중요한 시작점입니다. 투명 배경을 요청하면 제품이나 인물 같은 자산을 다음 단계로 옮기기 쉬워집니다. 다만 gpt-image-2의 투명 배경은 현재 preview 기능이며 PNG 또는 WebP가 필요합니다. 투명 이미지 한 장은 여러 Photoshop 레이어와 같은 결과가 아닙니다.
마스크를 사용할 때도 경계를 점검해야 합니다. OpenAI는 마스크가 편집할 영역을 안내하지만 그 모양을 완전히 정확하게 따르지 않을 수 있다고 명시합니다. 머리카락, 얇은 테두리, 작은 글자, 로고처럼 오차가 눈에 띄는 요소는 생성 후 확대해서 확인해야 합니다.
레이어가 많은 PSD보다 수정이 쉬운 PSD가 낫다
Adobe는 PSD를 Photoshop의 레이어와 효과, 편집 기능을 보존하는 기본 형식으로 설명합니다. 따라서 좋은 PSD의 기준은 레이어 개수가 아닙니다. 무엇을 바꿀 수 있는지와 구조를 이해할 수 있는지가 핵심입니다.
예를 들어 광고 이미지라면 배경, 모델, 제품, 카피, 장식, 색 보정을 역할별 그룹으로 정리할 수 있습니다. 바뀔 문구는 텍스트 레이어로 남기고, 부분 보정은 원본을 지우는 대신 마스크나 조정 레이어를 사용합니다. 자동 분리된 수십 개의 작은 래스터 조각은 이름과 목적이 없다면 오히려 수정 시간을 늘립니다.
Adobe는 Photoshop for ChatGPT에서 시작한 결과를 Photoshop 웹으로 열어 레이어와 마스크를 더 다듬는 방법을 안내합니다. 예시에서는 색상 보정이 별도 조정 레이어와 마스크로 유지됩니다. 이 흐름을 “ChatGPT가 PSD를 만들었다”고 짧게 말할 수는 있지만, 편집 가능한 내부 구조를 제공하는 도구는 Photoshop입니다.
연결 기능과 제공 범위는 바뀔 수 있으므로 먼저 연결된 Photoshop에 현재 가능한 작업을 물어보는 것이 좋습니다. 그다음 단순히 “레이어로 나눠 줘”가 아니라 납품 후 작업을 적습니다.
text이 캠페인 이미지를 계속 수정할 수 있는 Photoshop 문서로 정리해 주세요. 배경, 인물, 제품, 카피, 장식, 색 보정을 역할별로 묶고 이름을 붙입니다. 변경할 문구는 가능한 한 텍스트로 유지하고, 부분 수정에는 마스크를 사용합니다. 저장 후 파일을 다시 열어 제품 교체, 제목 수정, 주요 그룹 숨기기가 가능한지 확인해 주세요.
파일을 받으면 복사본에서 주요 그룹을 하나씩 숨겨 봅니다. 제목을 바꾸고 제품을 교체하며 마스크 가장자리를 이동합니다. 닫았다가 다시 열었을 때 글꼴, 색, 효과, 이름이 유지되는지도 확인합니다. 객체를 숨기자 배경에 구멍이 생기거나 모든 글자가 픽셀이라면, 확장자가 PSD여도 편집 가치는 낮습니다.
웹 개발자에게는 PSD 전체보다 정리된 자산이 유용할 수 있습니다. Photoshop은 File > Export > Layers to Files로 레이어마다 별도 파일을 내보낼 수 있습니다. 자산 이름, 글꼴, 색상, 간격, 모바일에서 달라지는 동작을 함께 전달하면 추측이 줄어듭니다.
이미지에서 HTML로 갈 때 코딩 에이전트가 새로 결정하는 것
UI 목업은 한 화면 크기의 한 상태만 보여 줍니다. 행이 Grid인지 Flexbox인지, 긴 문구가 들어오면 어떻게 늘어나는지, 로딩과 오류 때 무엇을 보여 주는지, 키보드 포커스가 어디로 이동하는지는 보이지 않습니다.
Codex는 스크린샷과 시각 자료를 이미지 입력으로 받을 수 있습니다. OpenAI의 이미지 입력 안내는 이미지가 무엇인지, 중요한 영역이 어디인지, 원하는 결과와 제약이 무엇인지 함께 적으라고 권합니다. 즉, 이미지는 압축된 HTML이 아니라 코딩 작업을 위한 참고 자료입니다.
다음 코드는 브라우저에서 보이지만 웹 화면을 구현한 것은 아닙니다.
html<main> <img src="page.webp" alt="페이지 전체 디자인 이미지" /> </main>
실제 구현에서는 제목을 제목 요소로, 클릭 동작을 버튼과 링크로, 반복 정보를 목록이나 적절한 컴포넌트로 만듭니다. 사진·일러스트·질감처럼 픽셀이어야 하는 것만 이미지로 남깁니다.
Codex에는 그림만 던지기보다 프로젝트 조건을 함께 전달합니다.
text첨부한 제품 페이지 목업을 현재 저장소에 구현해 주세요. 전체 스크린샷을 페이지 이미지로 넣지 말고 기존 컴포넌트와 디자인 토큰을 재사용합니다. 본문과 조작 요소는 의미 있는 HTML로 만들고 기존 기능은 바꾸지 않습니다. 실제 문구와 데이터를 사용하며 필요한 hover, focus, loading, empty, error, disabled 상태를 처리합니다. 로컬에서 실행한 뒤 1440px, 768px, 390px에서 줄바꿈과 넘침을 확인하고, 키보드 조작, 자산 404, 콘솔 오류까지 점검해 주세요.
같은 이미지도 화면과 해상도에 따라 다른 파일이 필요할 수 있습니다. MDN은 브라우저가 적절한 자산을 고르도록 srcset, sizes, <picture>를 사용하는 방법을 설명합니다. 목업의 픽셀만 따라 그려서는 이런 전달 규칙이 생기지 않습니다.
결과를 받았을 때 확인할 순서
PSD는 텍스트 수정, 객체 교체, 그룹 숨기기, 마스크 이동, 저장 후 다시 열기를 확인합니다. HTML은 좁은 화면과 넓은 화면, 실제 길이의 문구, 키보드, 로딩·오류 상태, 네트워크와 콘솔을 봅니다. 마지막에 구현 화면과 원본 이미지를 나란히 비교하되, 픽셀 차이와 기능 오류를 구분합니다.
API 마스크 편집 자체가 목적이라면 사이트의 OpenAI 이미지 편집 마스크 안내에서 요청 방식과 주의점을 더 확인할 수 있습니다.
가장 짧은 판단법은 이렇습니다. 시각 재료는 GPT Image 2가 만들고, 편집 가능한 Photoshop 구조는 Photoshop이 만들며, 운영할 웹 화면은 코딩 에이전트가 코드로 구현하고 브라우저에서 검증합니다. 이 세 역할을 요청서와 검수표에 나눠 적으면 “레이어 PSD”와 “이미지 HTML 변환”이 실제로 재사용할 수 있는 납품물이 됩니다.
