1.Photopea API란

Photopea는 브라우저에서 도는 무료 포토샵 호환 편집기다. 설치가 필요 없고, 외부 페이지/서버가 스크립트를 보내 PSD·이미지를 자동으로 편집하고 내보낼 수 있다. 스크립트 문법은 포토샵 .jsx와 거의 같다.

2.무엇을 자동화할 수 있나

핵심은 “디자인은 PSD에, 변하는 데이터만 스크립트로”다. 한 번 잘 만든 템플릿에 값만 갈아끼워 무한 양산한다.

• 썸네일 — 제목·숫자만 바꿔 글마다 자동 생성(블로그·유튜브)
• 카드뉴스 — 슬라이드 템플릿에 문구 교체로 8장 한 번에
• 배너·상세페이지 이미지 — 상품·가격만 교체
• 캐릭터·필터 합성 — PIL 같은 단순 도구가 못 하는 그림자·효과까지

3.3가지 실행 방식

처음엔 iframe으로 감을 잡고, 대량으로 갈 때 헤드리스를 자동화 도구에 연결하는 순서를 추천한다.

4.스크립트 기초 (포토샵 .jsx 문법)

// 1280x720 문서 생성
app.documents.add(1280,720,72,"thumb",NewDocumentMode.RGB,DocumentFill.WHITE);
var d = app.activeDocument;

// 배경·포인트 바 채우기
function fillRect(x1,y1,x2,y2,hex){ var c=new SolidColor(); c.rgb.hexValue=hex;
  d.selection.select([[x1,y1],[x2,y1],[x2,y2],[x1,y2]]); d.selection.fill(c); d.selection.deselect(); }
fillRect(0,0,1280,720,"0D1220");   // 배경
fillRect(0,0,20,720,"D8491C");     // 포인트 바

// 텍스트 레이어
function txt(s,size,hex,x,y){ var L=d.artLayers.add(); L.kind=LayerKind.TEXT;
  var t=L.textItem; t.contents=s; t.size=size; t.position=[x,y];
  var c=new SolidColor(); c.rgb.hexValue=hex; t.color=c; }
txt("제목을 여기에", 78, "FFFFFF", 84, 210);

// PNG로 내보내기 → 부모로 회신
app.activeDocument.saveToOE("png");

PSD 템플릿을 쓸 땐 config의 files로 PSD를 로드하고, 레이어 이름으로 텍스트를 찾아 .textItem.contents만 교체한 뒤 export한다.

5.PSD 템플릿 워크플로 (정교한 자동화의 핵심)

1. Photopea/포토샵으로 템플릿 PSD를 한 번 만든다(배경·포인트·이미지 레이어 + 텍스트 레이어).
2. 텍스트 레이어 이름을 규칙화: title·number·tag.
3. 자동화: config로 PSD 로드 → 스크립트가 이름으로 레이어를 찾아 내용만 교체 → 이미지 export.
4. → 디자인 품질은 PSD가 보장, 변하는 값만 자동 주입. 그림자·필터까지 포토샵급으로 양산.

6.실무 팁 3가지 (자동화 성패를 가른다)

7.가벼운 도구(PIL 등)와 어떻게 다른가

전략: 단순한 건 가벼운 코드 도구로 빠르게, 브랜드·캐릭터·필터가 필요한 플래그십 비주얼은 Photopea PSD 템플릿으로. 둘 다 무료이고, 한 번 세팅하면 사람 손 없이 양산된다 — 1인·소규모 운영에 특히 강력하다.

8.자주 묻는 질문 (FAQ)

9.참고 출처

Photopea 공식 API 문서