# Photoshop 애니메이션 레이어를 SVG로 자동 변환하기

> https://bookfactory.kr/board/qna/12727
> 게시판: 자유게시판
> 작성자: tachikoma43
> 작성일: 2026-09-15T11:56:08.624Z

---

https://a9press.com/t/photoshop-svg/2497

Photoshop 애니메이션 레이어를 SVG로 자동 변환하기

Photoshop 애니메이션 레이어를 SVG로 자동 변환하기 Photoshop에서 작업한 애니메이션 레이어를 SVG 파일로 자동 변환하는 방법을 소개합니다. 이 방법을 통해 웹 애니메이션 제작 workflow를 개선할 수 있습니다. // @target photoshop // 현재 열린 PSD 파일의 레이어를 애니메이션 가능한 SVG로 변환 // SVG 헤더와 푸터 템플릿 var SVG_HEADER = '\n' + '\n' +
 '\n' +
 '\n' +
 '';

var svgFile = new File(outputFolder + "/" + layer.name + ".svg");
 svgFile.open('w');
 svgFile.write(svgContent);
 svgFile.close();

// 임시 파일 삭제
 tempFile.remove();

// 레이어 정보 저장
 layerInfos.push({
 name: layer.name,
 base64: base64
 });

// 레이어 상태 복원
 layer.allLocked = wasLocked;
 }

return layerInfos;
}

function createAnimatedSVG(layerInfos, outputFolder, width, height, docName) {
 var duration = 0.5; // 각 레이어당 표시 시간(초)
 var totalDuration = duration * layerInfos.length;

var svgContent = SVG_HEADER + 
 'width="' + width + '" height="' + height + '">\n' +
 '\n' +
 '@keyframes fadeIn {\n' +
 ' from { opacity: 0; }\n' +
 ' to { opacity: 1; }\n' +
 '}\n' +
 '\n';

// 각 레이어 이미지 추가
 for (var i = 0; i < layerInfos.length; i++) {
 var layer = layerInfos[i];
 var delay = i * duration;

svgContent += '\n';
 }

svgContent += '';

// 애니메이션 SVG 저장
 var animFile = new File(outputFolder + "/" + docName + "_animated.svg");
 animFile.open('w');
 animFile.write(svgContent);
 animFile.close();
}

function hideAllLayers(layers) {
 for (var i = 0; i < layers.length; i++) {
 var layer = layers[i];
 if (layer.typename === "LayerSet") {
 hideAllLayers(layer.layers);
 }

주요 기능

레이어 자동 추출

모든 레이어를 개별 SVG 파일로 변환

숨겨진 레이어와 잠긴 레이어도 처리 가능

원본 레이어 이름 유지

애니메이션 SVG 생성

모든 레이어를 하나의 애니메이션 SVG로 결합

페이드인 효과로 순차적 표시

타이밍 조절 가능

사용 방법

스크립트 설치

JSX 파일을 Photoshop 스크립트 폴더에 복사

Windows: C:\Program Files\Adobe\Adobe Photoshop [버전]\Presets\Scripts

Mac: /Applications/Adobe Photoshop [버전]/Presets/Scripts

실행하기

Photoshop에서 PSD 파일을 엽니다

File > Scripts > ‘PSD to SVG’ 선택

원본 PSD와 같은 위치에 ‘_svg’ 폴더가 생성됨

활용 사례

웹 애니메이션

SVG 애니메이션을 웹사이트에 바로 적용

CSS 애니메이션으로 추가 커스터마이징 가능

인터랙티브 콘텐츠

프레젠테이션 자료 제작

인포그래픽 애니메이션

모션 그래픽

배너 광고 제작

SNS 모션 콘텐츠

장점

시간 절약: 수동으로 레이어를 추출하고 변환하는 시간 단축

일관성: 모든 레이어가 동일한 설정으로 변환

유연성: SVG 형식으로 변환되어 웹 환경에서 활용도 높음

품질 유지: 벡터 기반으로 화질 저하 없음

---
원문: https://cafe.naver.com/ca-fe/cafes/12093390/articles/173047
작성자: 덴디 · 2025-01-01 05:25:55