AIFreeAPI Logo

GPT Image 2 이미지로 편집 가능한 PSD 만들기

A
6 min readAI 이미지 생성

광고 문구와 상품을 나중에 바꾸려면 PSD 확장자만으로는 부족합니다. 평면 이미지에서 다시 만들어야 할 부분을 구분하고, 실제 수정이 가능한 문서로 저장하는 과정을 따라가세요.

상품 이미지를 레이어 PSD와 반응형 웹 화면으로 구성하는 과정을 보여 주는 그림.

GPT Image 2로 만든 홍보 이미지를 PSD로 납품할 수는 있습니다. 다만 이미지 모델이 PSD를 직접 출력하는 것과, 생성한 재료를 편집 도구에서 PSD로 만드는 것은 다른 작업입니다. OpenAI Image API가 제공하는 형식은 PNG·JPEG·WebP이며, 문서에 PSD 출력 옵션은 없습니다. 이미지 응답은 base64로 인코딩된 이미지 데이터입니다. OpenAI 출력 형식 안내

예를 들어 행사 배너에서 다음 달에 가격과 상품을 바꿔야 한다면, 필요한 것은 ‘열리는 PSD’가 아니라 ‘가격을 다시 입력하고 상품을 따로 움직일 수 있는 PSD’입니다. 완성 PNG를 Photoshop에 넣어 저장하면 PSD 파일은 생기지만, 그림에 찍힌 글자와 상품이 자동으로 분리되지는 않습니다.

먼저 어떤 수정을 남길지 정합니다

전체 그림을 무조건 많은 레이어로 쪼개기보다, 실제로 바뀔 요소를 정하면 작업량을 줄일 수 있습니다.

이후에 할 일파일 안에 필요한 구성확인 방법
완성 이미지를 그대로 게시최종 PNG·JPEG·WebP게시할 크기에서 표시 확인
가격·날짜·제목 수정직접 입력한 텍스트 레이어문자 도구로 글자를 선택하고 변경
상품 교체 또는 위치 이동상품 레이어와 상품이 없는 배경상품을 숨겼을 때 원래 상품이 남지 않는지 확인
특정 부분의 색만 보정필요한 선택 영역, 마스크 또는 조정 레이어다른 부분은 유지되는지 확인
웹페이지로 구현이미지 자산, 실제 문구, HTML/CSS와 동작화면 크기를 바꾸고 버튼·폼을 조작

이미 레이어가 있는 PSD에서 파일을 추출하는 일은 기존 구조를 읽는 작업입니다. PNG 한 장을 레이어로 나누는 일은 경계를 추정하고 가려진 부분을 다시 만드는 작업입니다. 자동 분리 도구를 사용하더라도 후자의 결과를 원본 디자인 파일의 복원본으로 취급해서는 안 됩니다.

Photopea에서 배경·상품·문구를 묶어 PSD로 저장하기

이미지 자산, Photoshop 레이어 구성, HTML/CSS 구현의 관계와 문구 수정 및 상품 교체 예시.
이미지 자산, Photoshop 레이어 구성, HTML/CSS 구현의 관계와 문구 수정 및 상품 교체 예시.

아래 과정은 완성된 상품 배너의 문구와 상품을 교체할 수 있게 만드는 예입니다. Photoshop에서도 같은 구성 원리를 적용할 수 있습니다. 완성 시안을 참고용으로 보관하고, 실제 편집할 문서는 별도로 만듭니다.

1. 상품과 글자가 없는 배경을 준비합니다

원래 배너 위에 분리한 상품만 얹으면, 새 레이어를 옮겼을 때 밑에 남은 상품이 드러납니다. 먼저 앞으로 움직일 상품과 바꿀 문구를 제거한 배경이 필요합니다. 원본 배경 재료가 있으면 그것을 사용하고, 없으면 편집 도구나 이미지 편집 요청으로 빈 부분을 채웁니다.

상품 뒤에 가려져 있던 무늬와 글자 아래의 배경은 평면 이미지에 저장되어 있지 않습니다. 이 부분을 채우는 결과는 새로 만든 내용입니다. 배경의 직선, 패턴, 그림자처럼 이어져야 하는 부분을 확인하고 다음 단계로 넘어갑니다. 바뀌지 않을 장식은 굳이 모두 분리하지 않아도 됩니다.

2. 상품을 투명 이미지로 준비합니다

기존 이미지를 기준으로 누끼를 따거나, 필요한 피사체를 별도 자산으로 만듭니다. 제품 외형을 그대로 유지해야 한다면 새로 생성한 유사 상품보다 보유한 제품 사진을 활용하는 편이 적절합니다. 투명 영역이 있는 PNG나 WebP를 사용해야 배경 위에 자연스럽게 배치할 수 있습니다.

GPT Image 2 API로 투명 배경을 만들 때는 background="transparent"와 PNG 또는 WebP 출력을 사용합니다. 이 기능은 현재 preview입니다. PNG 출력에서는 output_compression을 생략하고, 저장·변환 과정에서도 알파 채널을 유지합니다. JPEG는 투명도를 보존하지 못합니다. OpenAI 투명 배경 안내

흰 배경 이미지의 흰 픽셀을 전부 지우는 방법은 흰색 제품이나 반사광까지 지울 수 있습니다. 또 이미지 편집용 마스크는 모델이 편집할 곳을 안내하는 수단이며, 경계를 정확히 따르는 선택 영역과 같지 않습니다. 누끼 가장자리와 필요한 제품 디테일을 직접 확인합니다.

3. 한 문서 안에 자산을 넣고 위치를 맞춥니다

Photopea에서 File > Open으로 준비한 배경을 엽니다. 이어서 상품 이미지를 열린 문서의 가운데 작업 영역으로 끌어다 놓습니다. Photopea 공식 설명에 따르면 이렇게 넣은 이미지는 스마트 오브젝트 레이어가 됩니다. 상단 문서 탭 쪽에 놓아 별도 문서로 여는 것과 구분하세요. Photopea 파일 열기와 저장

상품 크기와 위치를 시안에 맞추고, 배경·상품·장식처럼 알아볼 수 있는 이름을 붙입니다. 원본과 같은 캔버스 크기로 준비한 자산은 위치를 맞추기 쉽지만, 생성된 결과의 좌표가 자동으로 일치한다는 뜻은 아닙니다. 그림자도 상품과 함께 움직여야 한다면 별도로 관리하거나 상품과 묶어 둡니다.

4. 바뀔 문구는 문자 도구로 다시 입력합니다

이미지에 그려진 한글은 텍스트 레이어가 아닙니다. 가격, 행사 기간, 제목처럼 수정할 문구를 문자 도구로 새로 입력합니다. Photopea에서는 레이어 썸네일의 T 표시로 텍스트 레이어를 구분할 수 있으며, 문자 도구로 내용을 편집합니다. Photopea 텍스트 레이어 안내

OCR로 글자를 읽었더라도 원래 글꼴, 자간, 행간과 배치까지 복원되는 것은 아닙니다. 실제 사용할 글꼴과 줄바꿈을 지정하고, 다음에 들어갈 문구가 더 길어져도 들어갈 자리를 남깁니다. 원래 가격이 배경에 남아 있으면 새 가격과 겹치므로 배경 정리가 먼저 끝나 있어야 합니다.

5. PSD로 저장한 뒤 다시 열어 수정합니다

Photopea의 File > Save as PSD로 문서 구조를 저장합니다. PSD는 만들어 둔 레이어와 효과를 보존하는 형식입니다. 저장 버튼이 평면 이미지 안에 없던 구조를 대신 만들어 주지는 않습니다. Adobe PSD 형식 설명

저장한 파일을 닫고 납품받는 사람이 사용할 편집기에서 다시 엽니다. 다음 세 동작이 가능하면 이 배너의 핵심 수정 목적을 확인할 수 있습니다.

  • 상품을 숨기고 옮겨도 배경에 원래 상품이나 빈 구멍이 남지 않습니다.
  • 가격을 문자 도구로 변경할 수 있고, 이전 가격이 밑에서 비치지 않습니다.
  • 새 상품을 넣고 저장한 뒤 다시 열어도 위치, 글꼴, 필요한 효과가 유지됩니다.

파일이 열려도 필요한 글꼴이 없거나 편집기 사이에서 효과가 달라질 수 있습니다. PSD와 함께 최종 확인용 이미지, 사용 글꼴 정보, 별도 자산을 전달하면 받는 사람이 차이를 알아보기 쉽습니다.

ChatGPT에서 시작할 때는 현재 Adobe 플러그인을 확인합니다

기존 Photoshop 연결 안내를 그대로 따라가면 현재 화면과 다를 수 있습니다. 2026년 8월 6일 갱신된 Adobe 안내는 Photoshop 플러그인이 Adobe 플러그인으로 대체되었다고 설명합니다. 현재 안내 경로는 ChatGPT 사이드바의 Plugins → Adobe → Install plugin이며, 이전 사용자는 다시 연결하라는 안내가 있습니다. 실제 메뉴와 제공 도구는 사용 환경에 따라 확인해야 합니다. Adobe for ChatGPT 공식 안내

연결한 뒤에는 이미지 편집, Photoshop으로 열기, PSD 파일 저장 중 현재 가능한 작업을 확인합니다. Adobe의 4월 Photoshop 튜토리얼은 색상 보정이 별도 조정 레이어와 마스크로 유지되는 사례를 보여 줍니다. 이 사례가 사진 속 모든 물체와 글자를 원래 레이어로 복원해 준다는 뜻은 아닙니다.

요청할 때는 ‘레이어를 많이 만들어 달라’보다 ‘가격은 다시 입력하고, 상품은 배경과 별도로 교체할 수 있어야 한다’처럼 수정할 내용을 적습니다. 현재 연결에서 실제 PSD 파일을 만들거나 내려받을 수 없다면 필요한 자산을 받아 위의 편집기 과정으로 이어갑니다. 특정 모드나 JSON 지시만으로 레이어 수, 작업 시간, 수정 가능한 한글 텍스트를 보장할 수는 없습니다.

디자인을 HTML/CSS로 넘길 때 함께 전달할 것

PSD 작업을 마쳤다고 웹페이지 코드가 생기는 것은 아닙니다. 웹 개발이 목적이라면 정리된 이미지 자산과 실제 문구가 먼저 필요합니다. Photoshop에서는 File > Export > Layers to Files레이어를 개별 파일로 내보낼 수 있습니다. 파일 이름, 글꼴, 색상, 간격과 함께 모바일에서 요소가 어떻게 배치될지도 전달합니다.

Codex는 스크린샷 등 이미지 자료를 참고할 수 있습니다. OpenAI의 이미지 입력 안내도 이미지에서 중요한 영역, 원하는 결과와 제약을 함께 설명하도록 안내합니다. 상품 페이지라면 다음처럼 구현 조건을 구체화합니다.

  • 기존 프로젝트의 컴포넌트와 스타일을 사용하고, 제목·가격·설명은 수정 가능한 HTML로 만듭니다.
  • 구매 버튼은 실제 버튼이나 링크로 구현하고, 이동할 주소 또는 실행할 기능을 정합니다.
  • 좁은 화면에서는 상품과 설명의 배치가 어떻게 바뀌는지, 긴 상품명이 어디서 줄바꿈되는지 정합니다.
  • 폼이나 데이터 요청이 있다면 입력 오류, 로딩, 빈 결과, 비활성 상태까지 구현합니다.

완성 시안 전체를 <img> 하나로 넣으면 모양은 보이지만, 그 안의 가격은 텍스트가 아니고 구매 버튼도 작동하지 않습니다. 사진과 일러스트만 이미지로 남기고 문구와 조작 요소를 코드로 구현해야 합니다. 자산 크기가 여러 개라면 srcset·sizespicture를 사용해 화면에 맞는 이미지를 전달할 수 있습니다.

구현 후에는 넓은 화면과 실제 사용할 휴대전화 폭에서 페이지를 열어 봅니다. 예를 들어 1,440px·768px·390px을 점검 지점으로 삼되, 그 사이에서 창 너비를 바꿔 넘침과 줄바꿈도 확인합니다. 실제 길이의 문구를 넣고 키보드로 버튼과 입력칸을 이동하며, 이미지 누락과 브라우저 오류도 살핍니다. 시안과의 모양 비교에 더해 이런 동작을 확인해야 웹페이지 전달이 끝납니다.

수정할 수 있는 파일인지 빠르게 판별하기

PSD의 문구와 상품을 바꾸는 예시, 웹페이지 동작 확인과 전달 파일 구성을 정리한 그림.
PSD의 문구와 상품을 바꾸는 예시, 웹페이지 동작 확인과 전달 파일 구성을 정리한 그림.

레이어 수보다 다음 수정 한 번이 더 분명한 기준입니다. PSD는 제목을 바꾸고 상품을 이동한 뒤 다시 저장해 봅니다. HTML은 좁은 화면에서 문구를 읽고 실제 버튼을 눌러 봅니다. 할 수 없는 동작이 있다면 파일 확장자를 다시 바꾸기보다 텍스트 재입력, 배경 정리, 자산 분리 또는 코드 구현 중 빠진 작업으로 돌아가면 됩니다.

생성 이미지를 API에서 부분 수정하는 방법이 필요하다면 OpenAI 이미지 편집 마스크 사용법에서 요청 방식과 마스크 조건을 이어서 확인할 수 있습니다.