AI 활용이 이미지 생성에서 도구 제어로 넘어가고 있습니다. 이번에 그 변화를 상세페이지 제작으로 직접 확인했습니다. 가상의 핸드크림 브랜드 ONDO의 상세페이지를 만들면서, 이미지는 코덱스(gpt-image)가 생성하고, 배경 제거부터 PSD 조립까지는 AI 에이전트인 클로드코드가 포토샵·일러스트레이터를 제어해 진행했습니다. 사람은 방향 결정과 컷 선택을 맡았습니다. 이 글은 그 제작 방식이 기존 작업과 어떻게 다른지 단계별로 정리합니다.
ONDO(온도)는 시연용 가상 브랜드입니다. 시어버터·화이트 머스크·50ml 설정이며, 화면 속 가격과 후기는 디자인 예시입니다.
상세페이지 제작 구성
| 단계 | 수행 | 도구 | 산출물 |
|---|---|---|---|
| 구조·카피 설계 | 클로드코드 | — | 9개 구간 레이아웃 |
| 소재 생성 | 코덱스 | gpt-image | 제품컷·모델컷·텍스처·아이콘 밑그림 |
| 누끼·합성 | 클로드코드 | 포토샵 | 배경 분리 제품, 히어로 합성 |
| PSD 조립 | 클로드코드 | 포토샵 스크립트 | 1080×12,280px 레이어 PSD |
| 아이콘 벡터화 | 클로드코드 | 일러스트레이터 | 벡터 아이콘 |
| 방향·선별·검수 | 사람 | — | 채택 컷, 수정 지시 |
표에서 사람이 수행한 행은 하나입니다. 나머지 단계는 에이전트가 도구를 제어해 진행했습니다.
AI 이미지 생성과 제품 레퍼런스 지정
시각 소재는 코덱스가 생성했습니다. 제품 히어로컷, 성분 스틸, 크림 텍스처, 한국인 모델 사용컷, 아이콘 밑그림까지 프롬프트로 만들었습니다. 프롬프트 설계에서 채택률을 높인 요소는 세 가지였습니다. 배경과 제품의 대비 명시, 헤드라인이 들어갈 여백의 사전 예약, 라벨 철자의 정확한 지정입니다. 히어로컷 프롬프트에서 해당 부분은 다음과 같습니다.
a deep, rich, dark FOREST GREEN backdrop … so the LIGHT product stands out with strong contrast … a small gold-foil “ONDO” wordmark … leave the ENTIRE TOP HALF as calm empty deep-green negative space (reserved for a headline)
여백을 미리 예약해두면 포토샵 단계에서 헤드라인 텍스트를 얹을 때 이미지를 재작업할 필요가 없어집니다.
모델컷은 텍스트 지시만으로 정확도가 나오지 않아, 제품 이미지를 레퍼런스로 제공하며 다음과 같이 지정했습니다.
You are given a REFERENCE PRODUCT IMAGE … Use it as the exact product reference (match its shape, color, cap, and label) … with THAT EXACT ONDO tube from the reference image standing beside her
글로만 “핸드크림을 바르는 장면”을 지시했을 때는 실제 제품과 다른 용기가 장면에 생성됐고, 위와 같이 레퍼런스를 지정한 뒤에야 동일한 제품이 들어왔습니다. 엄지 방향이나 두 손의 각도가 어긋난 컷은 폐기하고 재생성했습니다. 이 선별과 재지시가 이미지 단계에서 사람이 개입한 전부입니다.
포토샵 제어와 PSD 조립
클로드코드는 포토샵을 스크립트로 제어합니다. 배경 제거로 제품을 분리해 딥 그린 배경에 합성하고, 설계한 레이아웃에서 요소별 위치·크기·폰트·색을 추출해 포토샵 스크립트를 생성한 뒤 실행합니다. 결과물은 1080×12,280px의 PSD 한 벌로, 히어로·성분·향·텍스처·모델·사용법·후기·구매 구간별 레이어 그룹, 스마트 오브젝트로 배치된 사진, 편집 가능한 텍스트 레이어로 구성됩니다. 타이포는 헤드라인을 세리프(나눔명조·Didot), 본문을 고딕(Pretendard)으로 나누고, 모바일 가독 기준으로 본문 28px 안팎·헤드라인 64px 이상의 위계를 적용했습니다.
이 구성은 수정 비용을 바꿉니다. 생성형 이미지로 페이지를 통째로 만들면 문구 하나를 바꿀 때도 재생성과 재검수를 반복해야 합니다. PSD에서는 해당 텍스트 레이어만 수정하면 되고, 사진 교체도 스마트 오브젝트 원본 교체로 끝납니다. 상세페이지는 가격·프로모션·용량 표기가 수시로 바뀌는 문서라, 이 수정 방식이 운영 단계의 작업량을 직접 줄여줍니다.
조립 이후의 보정도 같은 방식으로 진행됩니다. 점선 연결선이 원형 뱃지 위를 지나는 문제, 후기 아바타 이니셜이 원의 중앙에서 벗어난 문제 같은 세부 지적을 말로 전달하면, 에이전트가 스크립트를 수정해 PSD를 다시 조립합니다. 수정 왕복에 포토샵 조작 지식이 필요하지 않다는 점도 이 방식의 특징입니다.
일러스트레이터 벡터 자산
베네핏 구간의 아이콘 세 종(물방울·시어버터·머스크 꽃)은 코덱스가 밑그림을 생성하고, 클로드코드가 일러스트레이터의 이미지 트레이스로 벡터화했습니다. 벡터화된 아이콘은 원형 뱃지 안에 배치했고, 색은 페이지 팔레트인 딥 그린과 골드 계열로 맞췄습니다.
비트맵 아이콘은 확대할 때마다 품질이 떨어지고 색을 바꾸려면 재생성이 필요합니다. 벡터 자산은 해상도 제약 없이 확대와 색 변경이 가능해, 상세페이지의 다른 구간은 물론 배너·썸네일 같은 파생 작업에도 같은 파일을 그대로 재사용합니다. 한 번 만든 브랜드 자산을 여러 매체 규격으로 전개하는 작업에서 이 차이가 누적됩니다.
사람이 맡는 영역
이번 제작에서 사람의 개입은 세 지점이었습니다. 방향 결정(딥 그린 배경, 한국인 모델, 구간 구성), 생성 결과 선별(손 해부학 오류, 제품 일치 여부), 최종 품질 판정입니다. 프롬프트 작성, 포토샵 스크립트 작성과 실행, 벡터화는 전부 에이전트가 수행했습니다.
한계도 있습니다. 완성본은 구조와 톤은 갖췄지만, 상업 상세페이지 수준의 장식 그래픽과 정보 그래픽 밀도에는 아직 못 미칩니다. 이 부분은 다음 작업에서 채울 예정입니다.
기존 제작 방식과의 비교
외주 제작은 시안과 수정이 담당자와의 왕복 커뮤니케이션으로 진행되고, 원본 파일 제공 여부는 계약 조건에 따라 다릅니다. 직접 제작은 원본을 갖는 대신 도구 숙련에 시간이 필요합니다. 에이전트 방식은 지시와 선별로 진행하면서 편집 가능한 원본이 기본으로 남습니다.
다만 품질 기준을 세우고 결과를 판정하는 역할은 사람에게 그대로 남습니다. 이번 작업에서도 딥톤 배경 전환, 모델 교체, 세부 정렬 수정은 모두 사람의 판정에서 나왔고, 이 기준이 낮으면 결과물도 그 수준에서 멈춥니다.
마치며
이 방식에서 상세페이지 제작은 지시 → 생성 → 조립 → 수정을 반복할 수 있는 공정이 됩니다. 산출물이 편집 가능한 PSD와 벡터로 남기 때문에, 다음 수정부터는 공정 전체를 다시 돌릴 필요 없이 필요한 레이어만 고치면 됩니다. 에이전트가 다루는 도구인 포토샵과 일러스트레이터는 어도비 크리에이티브 클라우드 플랜에 포함되어 있습니다.
이 글에는 어필리에이트 링크가 포함되어 있습니다. 링크를 통해 구매하시면 운영에 도움이 됩니다. 추가 비용은 발생하지 않습니다.