포토샵 몰라도 AI가 제품 상세페이지 PSD 이미지를 만들어줄까?

포토샵을 못 다뤄도 AI한테 시켜서 이런 배너를 만들 수 있을까요?

결론부터 보여드리는 게 빠르겠네요. 아래 이미지가 이번에 만든 결과물입니다.

 

 

어도비 크리에이티브 클라우드 시작하기

 

이 글에는 어필리에이트 링크가 포함되어 있습니다. 링크를 통해 구매하시면 운영에 도움이 됩니다. 추가 비용은 발생하지 않습니다.

 

 

 

커피백에 로고와 라벨이 인쇄돼 있고, 오른쪽에 브랜드 패널이 붙은 제품 히어로 배너입니다.  봉투 위에 지난번에 일러스트레이터로 만든 (ai에게 지시해서) 불꽃 로고, 워드마크, 라벨 박스는 원래 사진에 없던 걸 포토샵으로 합성한 거구요. 오른쪽 타이포그래피까지 포함해서 전 과정을 클로드 코드가 데스크톱 포토샵을 직접 구동해서 처리했습니다. 제가 포토샵에서 마우스로 클릭한 작업은 없습니다. 결과물은 PNG 한 장이 아니라 레이어 15개가 살아 있는 PSD로 남아서, 문구든 색이든 포토샵에서 바로 고칠 수 있어요.

이 글은 작업 과정을 단계별로 정리한 것입니다. 포토샵을 몰라도 따라 할 수 있게 실제로 쓴 지시와 스크립트를 그대로 담았고, 포토샵을 쓸 줄 아는 분이라면 반복 작업을 AI한테 어떻게 넘기는지 관점으로 봐주시면 됩니다.

 

입력 재료

재료는 딱 두 개입니다.

  • 제품 사진 한 장: AI로 생성한 커피백 목업 컷입니다. 직접 찍은 제품 사진이어도 과정은 동일해요.
  • 로고 PNG 한 장: 지난 편에서 만든 불꽃 속 원두 로고입니다. 흰 배경이 깔린 상태 그대로 시작합니다. (누끼도 알아서 따게 할 거예요)

 

 

나머지는 전부 에이전트가 만들거나 처리합니다. 스크립트도 제가 짠 게 아니라 클로드 코드가 전부 작성했습니다.

 

 

이 작업에서 진짜 어려운 지점

이미지를 하나 뽑는 것 자체는 요즘 AI로 어렵지 않습니다. 다만, psd로 만든 최종 작업물이 포토샵에서 직접 수작업하는 것과 어느 정도 퀄리티를 내줘야 합니다. 따라서,

합성이 사실적이어야 합니다. 로고를 봉투 위에 그냥 얹으면 스티커를 붙인 것처럼 뜹니다. 종이 질감이 로고 위로 비치고, 봉투의 그림자가 로고에도 떨어져야 인쇄된 것처럼 보이거든요.

디자인 판단이 필요합니다. 텍스트를 몇 픽셀로 할지, 화면을 어떻게 나눌지, 로고를 어디까지 키울지는 정답이 없는 문제라서 기준이 없으면 밋밋한 결과가 나옵니다. 이번 작업에서도 첫 결과물은 텍스트가 소심하게 작고 공간이 비어 보였고, 몇 차례 지적하면서 고쳤습니다. 이 보정 과정도 아래에 그대로 담았어요.

결과물이 편집 가능해야 합니다. 납품이든 재사용이든, 평탄화된 이미지 한 장은 다음 작업으로 이어지지 않습니다. 레이어가 살아 있는 PSD로 남기는 게 이 워크플로우의 목표였습니다.

 

전체 워크플로우 개요

  1. 코덱스(gpt-image)로 레이아웃 레퍼런스 시트 생성
  2. 레퍼런스에서 비율과 위계를 수치로 추출
  3. 로고 배경 제거 (파이썬, 내부 흰 선 보존)
  4. 클로드 코드가 ExtendScript를 작성해 포토샵 구동
  5. 봉투에 로고 락업과 라벨 박스 합성 (곱하기 블렌딩으로 명암 전이)
  6. 오른쪽 패널 타이포그래피 조판 (전부 편집 가능한 텍스트 레이어)
  7. 레이어 살린 PSD와 PNG 저장

에이전트가 포토샵을 구동하는 방식은 맥 기준으로 osascript입니다. 클로드 코드가 .jsx 스크립트를 만들고, 아래 한 줄로 포토샵에 실행을 지시합니다.

osascript -e 'tell application "Adobe Photoshop 2026" to do javascript file "/tmp/script.jsx"'

이 명령조차 직접 칠 필요가 없습니다. 클로드 코드한테 "포토샵으로 이거 해줘"라고 하면 스크립트 작성부터 실행, 결과 확인까지 알아서 돌리거든요.

 

레퍼런스부터 만드는 이유

처음부터 배너를 그리라고 하면 평범한 결과가 나옵니다. 실제로 이번 작업의 첫 버전이 그랬습니다. 텍스트는 폭에 비해 작고, 요소들이 균등한 간격으로 떠 있어서 벙벙했어요.

그래서 순서를 바꿨습니다. 먼저 코덱스한테 "스페셜티 커피 브랜드의 제품 히어로 배너 레이아웃 4종"을 한 장의 시트로 생성하게 했습니다. 코덱스에서 레퍼런스 이미지를 클로드 코드가 이해하고 작업하게 하는 것이 결과물을 더 좋게 만듭니다.

클로드 코드가 프롬프트를 어떻게 줬는지 모르겠지만 브랜드 명을 멋대로 만들어서 제작한 것은 좀 아쉽고, 모두 영문으로 되어 있어서 또 한번 아쉬웠습니다만, 한편으론 오히려 그게 레퍼런스 역할로서는 테스트해볼 만 하다 싶기도 합니다.

 

 

이렇게 레퍼런스 시트를 만들면 여기서 클로드 코드가 수치를 뽑아서 작업하기 쉽습니다. 브랜드명(워드마크)는 고대비 세리프에 패널 폭의 80% 수준으로 크게, 가격은 두 번째 앵커로 강조, 브랜드와 스펙 사이는 얇은 룰 하나로 구분, 제품은 자기 절반을 꽉 채울 것. 이 숫자들이 스크립트의 설정값이 됩니다.

레퍼런스 생성에 쓴 프롬프트 전문은 글 아래 스크립트 목록에 있습니다. 핵심은 "구도 4종을 한 장에, 위계 대비를 극적으로"라고 요구 사항을 구체적으로 지정하는 겁니다.

 

로고 배경 제거

로고 PNG는 흰 배경이 깔린 상태였습니다. 문제는 이 로고의 원두 분리선과 외곽선도 흰색이라는 점이에요. 단순히 "흰색을 전부 투명하게" 처리하면 로고 내부까지 뚫립니다.

해결은 바깥에서부터 채워 들어가는 방식입니다. 이미지 모서리 여덟 곳에서 flood fill로 연결된 흰 영역만 배경으로 판정하면, 로고 안쪽의 흰 선은 바깥과 연결돼 있지 않아서 그대로 남습니다. 파이썬 몇 줄이면 되고, 이 스크립트도 아래에 있습니다.

 

 

봉투 합성과 곱하기 블렌딩

이번 작업의 기술적인 핵심입니다. 로고와 라벨을 봉투에 "인쇄된 것처럼" 보이게 만드는 방법이요.

포토샵 레이어를 이렇게 쌓습니다.

  1. 봉투 사진 위에 로고 레이어를 배치합니다.
  2. 봉투 사진을 복제해서 채도를 빼고, 레벨 보정으로 중간톤을 흰색 쪽으로 밀어냅니다. 종이의 밝은 면은 거의 흰색이 되고 주름과 그림자만 남아요.
  3. 이 레이어를 로고에 클리핑 마스크로 물리고 블렌드 모드를 곱하기(Multiply)로 바꿉니다.

곱하기 모드에서 흰색은 아무 영향이 없고 어두운 부분만 아래 레이어를 어둡게 만듭니다. 결과적으로 봉투의 주름과 그림자가 로고 위에만 그대로 얹히는 거죠. 라벨 박스도 같은 원리로 불투명도를 90%로 낮추고 곱하기를 걸어서, 크래프트지 질감이 박스 위로 은은하게 비치게 했습니다. 스티커가 아니라 인쇄로 보이는 이유가 이 두 가지입니다.

 

 

봉투 위 요소도 전부 살아 있는 레이어입니다. 워드마크와 라벨 텍스트는 편집 가능한 텍스트 레이어고, 라벨 박스는 도형 레이어라서 문구 교체나 색 변경이 포토샵에서 바로 됩니다.

 

부딪힌 문제 세 가지

이 과정이 한 번에 매끄럽게 된 건 아닙니다. 세 번 정도 큰 문제가 발생했는데요. 세 번 다 원인을 찾아 해결했습니다. 같은 작업을 하실 분들에게는 이 대목이 제일 유용할 거예요.

 

한글 텍스트 깨짐. 스크립트로 넣은 한글이 전부 이상한 한자와 네모로 깨져 나왔습니다. 영문과 숫자는 멀쩡했는데 한글만 깨졌어요. 이게 단서였습니다. 포토샵의 ExtendScript는 BOM 없는 UTF-8 파일을 시스템 레거시 인코딩으로 읽습니다. ASCII 문자는 어느 인코딩이든 같아서 살아남고, 한글 바이트만 잘못 해석된 거죠. 해결은 한글을 전부 \uXXXX 유니코드 이스케이프로 바꿔 파일 자체를 순수 ASCII로 만드는 겁니다. 이러면 파일이 어떤 인코딩으로 읽히든 깨질 여지가 없습니다.

 

클리핑 마스크 상속. 어느 순간 오른쪽 패널과 텍스트가 통째로 사라졌습니다. 원인은 클리핑 마스크를 만든 뒤에 새 레이어를 추가하면, 새 레이어가 그 클리핑 그룹에 흡수된다는 포토샵의 동작이었어요. 패널이 로고 영역에 클리핑되니 로고 밖에서는 안 보였던 겁니다. 해결은 순서 재배치입니다. 독립 요소를 전부 먼저 만들고, 클리핑 마스크는 맨 마지막에 겁니다.

 

Displace 필터 크래시. 이게 제일 많이 발생한 문제예요. 클로드 코드가 봉투 주름을 따라 로고를 휘게 하려고 Displace 필터를 걸었었는데. 이걸 할 때마다 포토샵이 죽었습니다. macOS 크래시 리포트를 확인하니까 세그먼테이션 폴트였고, 죽은 지점이 포토샵 내부의 파일 열기 코드였어요. 스크립트 경유로 Displace가 변위 맵 파일을 여는 순간 크래시가 재현됩니다. 필터 하나에 계속 매달리는 대신 방향을 바꿨습니다. 위에서 설명한 곱하기 명암 전이만으로도 정면 봉투에서는 인쇄 질감이 충분히 나오거든요. 자동화에서는 이렇게 불안정한 경로를 우회하는 판단도 필요합니다. (이건 직접 수작업으로 좀 Displace를 작업하면 해결될 수는 있습니다만 전 작업을 클로드 코드에게 맡기는 게 목표라 다른 방법을 쓰도록 했습니다.

 

 

디자인 보정 과정

솔직히 말씀드리면, 스크립트가 돌아간 첫 결과물은 디자인이 아쉬웠습니다. 문제를 지적하고 고치는 반복이 몇 차례 있었어요. 어떤 지적이었는지가 중요해서 남깁니다.

  • 텍스트가 공간에 비해 작았습니다. 브랜드명을 한 줄로 두면 폭에 갇혀서 못 키우는 구조였고, 두 줄로 쌓는 방식으로 바꾸니 글자 크기를 키우면서 세로 공간도 채워졌습니다.
  • 제품 사진의 좌우 여백이 넓어서 봉투가 화면을 지배하지 못했습니다. 봉투 중심으로 타이트하게 잘라내니 해결됐어요.
  • 봉투 위 로고가 지퍼 실링 부분까지 올라가 있었습니다. 실제 파우치라면 인쇄가 안 되는 영역이라, 로고를 인쇄 가능면 안으로 내리고 크기도 전면 폭의 28% 수준으로 줄여서 워드마크, 라벨과의 위계를 맞췄습니다.

이 지적들은 사람이 했고, 반영은 매번 에이전트가 스크립트를 고쳐서 다시 돌리는 식이었습니다. 수정 한 번에 걸리는 시간이 1분 안쪽이라, 사람은 판단만 하고 손은 대지 않는 분업이 됩니다. 디자인 감각을 AI한테 통째로 맡기기보다, 사람이 기준을 주고 AI가 빠르게 반영하는 구조가 현재로서는 제일 낫다고 봅니다.

 

설정값

스크립트에서 조절하게 되는 값들입니다. 문구와 함께 이 숫자들만 바꾸면 다른 제품, 다른 브랜드로 그대로 재사용됩니다.

항목 변수 이번 값
봉투 위 로고 폭 EMB 132px (전면 폭의 약 28%)
로고 상단 위치 EMB_TOP 392px (지퍼 실링 아래)
오른쪽 패널 폭 panelW 900px
워드마크 폭 WMW 패널 폭의 80%
가격 텍스트 폭   패널 폭의 52%
명암 전이 불투명도   82~90%

이런 것들은 다 클로드 코드가 알아서 합니다. 

사람이 할 일은 최종 결과물을 확인하고 피드백하는 것 뿐이에요.

따라서,

코드 수정은 AI에게 맡기면 됩니다

위 표의 값을 직접 고칠 필요도 사실 없습니다. 클로드 코드한테 "로고를 조금 더 작게", "라벨 문구를 과테말라로 바꿔줘"라고 말하면 스크립트를 고쳐서 다시 실행합니다. 이 글의 스크립트를 통째로 복사해서 주고 "이거 내 사진으로 돌려줘"라고 해도 되구요. 스크립트를 읽을 줄 몰라도 되는 이유가 이겁니다.

 

포토샵이 그럼 없어도 되나?

그건 아닙니다. 이 워크플로우가 실행되려면 데스크톱 포토샵이 있어야 해요. 생성 AI만으로 이미지 한 장을 뽑을 수는 있지만, 로고가 종이 질감을 입고 인쇄된 것처럼 붙는 블렌딩, 문구 하나만 바꿔서 다시 뽑는 반복성, 그리고 레이어 15개가 살아 있는 PSD로 남아 다음 작업자에게 넘길 수 있는 편집 가능성이 생기죠. 이렇게 만들어 놓은 템플릿이 있으면 다음 작업은 훨씬 수월해질 수 있고 시간도 단축될 수 있겠죠.

심지어 포토샵을 다루지 못하는 분들도 ai 에이전트가 손 역할을 해주니 포토샵 구독하고 설치만 하면(?) 나머지는 ai에게 지시해서 만들 수 있다는 것이죠. 이미 쓰는 분이라면 반복 조판을 넘길 수 있으니 시간이 남습니다. 현재 요금과 플랜 구성은 어도비 공식 페이지에서 확인할 수 있어요.

 

어도비 크리에이티브 클라우드 플랜 확인하기

 

한계

그래도 이건 염두에 둬야합니다. 첫째, 디자인 판단은 아직 사람 몫입니다. 클로드 코드 디자인이 좋아졌다고해도 진짜 그냥하면 실망하기 싶상이에요. 레퍼런스 없이, 지적 없이 나온 첫 결과물은 디자인했다기 보다는 요소들을 배치했다 수준입니다. 기준을 주면 좋아지지만 말로만 설명하는 건 한계가 있고 시간도 많이 걸립니다.  둘째, 스크립트 경유로는 일부 필터가 불안정합니다. 이번에 Displace가 그랬고, 대체 기법으로 우회했습니다. 포토샵을 직접 열어 쓰는 경우에는 해당 없는 얘기입니다.

마치며

오늘 작업 워크플로우는 레퍼런스는 코덱스가 생성했고, 로고 누끼는 파이썬으로, 합성과 조판과 PSD 저장은 클로드 코드가 포토샵을 구동해서 처리했습니다. 그런데, 코덱스가 생성하는 것도, 파이썬으로 누끼 따는 것도 - 일러스트파일에서 내보내기 안하고 png를 이용 - 전부다 클로드 코드가 오케스트레이션 했습니다. 사람이 한 일은 방향 제시와 디자인 지적이었고, 마우스로 보정한 것 하나도 없습니다.

하지만 이 과정이 온전히 AI가 다 했다고 하긴 어렵습니다. AI에게 지시하고 관리하면서 AI가 도구를 다루고 사람이 판단하는 분업이라고 할 수 있죠. 대신 저는 다른 작업들을 하면서 최종 결과물을 만들어 낼 수 있었다는 것이 크다고 할 수 있을 거 같아요. 이렇게 분업이  가능하게 한 것엔 포토샵이 메인 툴로서 작용했던 것이구요. 디스플레이스 같은 건 다른 레이아웃 도구들로는 안되니까요.

 

 

어도비 크리에이티브 클라우드 시작하기

 

이 글에는 어필리에이트 링크가 포함되어 있습니다. 링크를 통해 구매하시면 운영에 도움이 됩니다. 추가 비용은 발생하지 않습니다.

전체 스크립트

1) 포토샵 합성 스크립트 (ExtendScript, 클로드 코드 작성)

한글 문자열은 유니코드 이스케이프 처리된 상태입니다. 원문은 주석에 적었습니다.

// scripts/ps-hero-logo.jsx — 전문은 첨부 파일 참고
// 구조: 로고 배치 -> 봉투 인쇄 요소(워드마크/라벨) -> 크롭 -> 패널 조판 -> 명암 클리핑 -> PSD/PNG 저장
// 실행: osascript -e 'tell application "Adobe Photoshop 2026" to do javascript file "<경로>/ps-hero-logo.jsx"'

2) 로고 배경 제거 (파이썬)

# scripts/logo-cutout.py 참고 — flood fill로 바깥 흰 배경만 제거, 내부 흰 선 보존

3) 레퍼런스 생성 프롬프트 (코덱스 gpt-image)

# scripts/codex-reference-prompt.txt 참고 — 히어로 배너 레이아웃 4종을 2x2 시트로 생성

ps-hero-logo.jsx
0.00MB
logo-cutout.py
0.00MB
codex-reference-prompt.txt
0.00MB

 

포토샵 스크립트, 누끼 작업용 파이썬 파일, 그리고 코덱스로 이미지를 만들 때 사용한 프롬프트를 공유드립니다. 참고해보시고 도움이 되었음 좋겠습니다.

 

고맙습니다.

반응형

댓글

Designed by JB FACTORY