Stretchy Studio: PSD,PNG->2D 캐릭터로 변경

정적인 PSD나 PNG를 가져와서, 복잡한 리깅 작업 없이 빠르게 2D 캐릭터 애니메이션으로 바꾸는 흐름을 설명합니다. 특히 이 도구가 단순한 편집기가 아니라, 레이어 분해된 캐릭터를 실제 애니메이션 파이프라인으로 연결하는 데 초점을 둔 이유를 다룹니다. (GitHub)

기존 2D 캐릭터 애니메이션 도구는 크게 두 가지 불편이 있었습니다. 하나는 본 세팅과 파라미터 설계가 무겁다는 점이고, 다른 하나는 AI가 분해해 준 레이어를 실제 애니메이션 가능한 구조로 옮기는 과정이 생각보다 수작업 중심이라는 점입니다. Stretchy Studio는 이 사이를 메우기 위해, 타임라인 중심 편집과 메쉬 변형을 결합하는 방향으로 설계되었습니다. (GitHub)

이 글을 끝까지 읽으면 세 가지가 잡힙니다. 왜 이 도구가 기존 Live2D식 접근과 다른지, 어떤 구조로 동작하는지, 그리고 실제로 어떤 팀이나 프로젝트에서 유리한지입니다. 동시에 아직 부족한 부분과 당장 쓰기 전에 알아야 할 주의점도 함께 정리합니다. (GitHub)

왜 이 문제가 중요한가

2D 캐릭터 애니메이션 제작은 생각보다 비용이 큽니다. 레이어를 정리하고, 본을 잡고, 변형 포인트를 설계하고, 타임라인을 세팅하는 과정이 모두 사람 손을 탑니다. 캐릭터 수가 늘어나면 작업량은 거의 선형이 아니라 관리 복잡도까지 포함해 더 가파르게 증가합니다.

성능 문제도 있습니다. 단순 이미지 레이어만 다룰 때는 가볍지만, 리깅과 변형 시스템이 들어가면 렌더링과 편집 상태 관리가 복잡해집니다. 특히 계층 구조, 드로우 오더, 메시 편집, 키프레임 보간이 한 화면 안에서 같이 돌아가야 해서 툴 구조가 금방 무거워집니다. (GitHub)

유지보수 관점에서도 어려움이 큽니다. 파라미터 기반 툴은 기능이 늘수록 상태 조합이 폭발하고, 디버깅 포인트도 많아집니다. 어떤 포즈가 왜 그렇게 나왔는지 추적하기 어렵고, 애니메이션 결과가 추상 파라미터에 묶이면 수정 비용도 올라갑니다. (GitHub)

개발 경험도 문제입니다. 구조가 복잡해질수록 “가져오기 → 리깅 → 수정 → 애니메이션 → 저장”의 전체 흐름을 끝까지 작동시키기가 어려워집니다. Stretchy Studio는 이 문제를 의식해, 각 마일스톤마다 끝에서 끝까지 동작하는 얇은 기능 조각을 만드는 방식으로 발전해 왔습니다. (GitHub)

stretchystudio/PROJECT_STATUS.md at master · MangoLion/stretchystudio

 

Stretchy Studio란 무엇인가

Stretchy Studio는 정적인 2D 레이어 이미지를 가져와, 메쉬 변형과 스켈레톤 기반 조작을 통해 빠르게 애니메이션 가능한 캐릭터로 바꾸는 웹 기반 2D 애니메이션 툴입니다. (GitHub)

비유하면 이 도구는 “포토샵 레이어를 바로 만질 수 있는 경량 애니메이션 스튜디오”에 가깝습니다. 그림을 가져오고, 필요한 부분만 메쉬를 만들고, 관절을 잡고, 타임라인 위에서 바로 움직이는 방식입니다.

기술적으로는 전통적인 본 회전 중심 방식만 쓰지 않습니다. 필요한 부위에는 스켈레톤을 얹고, 더 유기적인 움직임이 필요한 부위에는 메시 정점 변형을 직접 적용합니다. 그래서 단순 회전보다 더 부드러운 머리카락, 눈, 팔다리 움직임을 만들 수 있습니다. (GitHub)

기존 방식과 가장 큰 차이는 철학입니다. 이 프로젝트는 원래 Live2D 스타일의 파라미터 시스템을 고려했지만, 이후 이를 버리고 타임라인 우선 구조로 방향을 틀었습니다. 즉, 추상 파라미터를 설계하는 도구가 아니라, 애니메이터가 바로 키프레임을 찍는 도구에 더 가깝습니다. (GitHub)

핵심 특징

• 타임라인 우선 편집 구조
  파라미터를 설계하는 대신 키프레임 중심으로 움직입니다. 그래서 처음 쓰는 사람도 상태 모델보다 결과 화면에 집중하기 쉽습니다. (GitHub)
• 메쉬 온디맨드 생성
  가져온 모든 레이어에 즉시 무거운 메쉬를 만들지 않습니다. 처음에는 단순 쿼드로 렌더링하고, 필요한 파트만 나중에 메쉬를 생성해 비용과 복잡도를 줄입니다. (GitHub)
• PSD 기반 다층 가져오기와 자동 정리
  PSD 레이어를 유지한 채 가져오고, 특정 캐릭터 태그 패턴을 인식해 머리·눈·상체·하체 같은 구조로 자동 그룹화합니다. 초기 세팅 시간을 줄이는 데 중요한 기능입니다. (GitHub)
• 휴리스틱 리깅과 AI 리깅을 함께 지원
  빠른 시작이 필요하면 경계 상자 기반 휴리스틱 리깅을, 정확도가 더 필요하면 DWPose 기반 ONNX 추정을 사용할 수 있습니다. 즉시성와 정확도 사이에서 선택할 수 있습니다. (GitHub)
• 정점 변형 기반의 유기적 움직임
  회전만으로는 부족한 부위에 정점 단위 변형을 적용할 수 있습니다. 그래서 숨쉬기, 머리카락 흔들림, 미세한 표정 변화 같은 표현에 유리합니다. (GitHub)
• 프로젝트 저장/불러오기 구조가 이미 들어가 있음
  현재 기준으로 .stretch 포맷 저장과 로드가 구현되어 있습니다. 실험용 프로토타입을 넘어서, 작업 지속성을 염두에 둔 구조라는 점이 중요합니다. (GitHub)

실제로 어떤 효과가 있는가

공개된 자료 기준으로 보면, Stretchy Studio의 효과는 “세팅 시간 단축”과 “전체 흐름 일체화”에 가깝습니다. PSD를 가져온 뒤 그룹 정리, 리깅, 타임라인 편집, 저장/불러오기까지 한 툴 안에서 이어지기 때문에, 툴 사이를 오가며 자산을 다시 맞추는 비용이 줄어듭니다. (GitHub)

전후 비교로 보면 차이가 더 선명합니다. 기존 방식은 레이어 정리 후 별도 리깅과 별도 애니메이션 세팅이 필요했다면, 이 프로젝트는 가져오기 직후 자동 그룹화와 리깅 보조를 제공하고 바로 타임라인 작업으로 넘어갑니다. 특히 see-through 방식처럼 이미 분해된 캐릭터 자산이 있을수록 효과가 커집니다. (GitHub)

성능 측면에서는 현재 프로젝트 상태 문서 기준으로, 리깅된 캐릭터와 애니메이션 재생에서 60fps를 목표로 하고 있으며 저장은 200~500ms, 불러오기는 500ms~2초 수준으로 정리되어 있습니다. 또한 저장 포맷은 base64 JSON 방식 대비 파일 크기를 40~60% 수준으로 줄였다고 설명합니다. (GitHub)

그래서 이 도구는 특히 작은 팀, AI 레이어 분해 결과를 바로 움직여야 하는 팀, 프로토타입을 빠르게 만들어야 하는 캐릭터 애니메이션 작업에 잘 맞습니다. 반대로 정교한 장편 제작 파이프라인 전체를 대체하는 도구로 보기에는 아직 이릅니다. (GitHub)

동작 원리 / 구조

1. 입력 자산을 가져옵니다
   PNG 또는 PSD를 불러오고, PSD라면 레이어 이름과 순서를 유지한 채 분해합니다. 이 단계에서 이미지 데이터와 알파 정보가 이후 선택, 메시 생성, 렌더링의 기초가 됩니다. (GitHub)
2. 프로젝트 트리와 그룹 구조를 만듭니다
   각 파트는 part 또는 group 노드로 프로젝트 트리에 들어갑니다. 부모-자식 관계, 가시성, 불투명도, 변환 정보가 이 트리에 모이고, 이후 모든 편집은 이 구조를 기준으로 이뤄집니다. (GitHub)
3. 필요하면 자동 정리와 리깅을 수행합니다
   레이어 이름이 특정 패턴을 만족하면 머리, 눈, 몸통 같은 그룹으로 자동 정리됩니다. 리깅은 빠른 휴리스틱 방식이나 DWPose 기반 AI 추정으로 진행되며, 마지막에는 캔버스에서 관절을 직접 조정합니다. 이 설계는 자동화와 수동 제어의 균형을 맞추기 위한 선택입니다. (GitHub)
4. 렌더링 전에 월드 변환을 계산합니다
   렌더러는 먼저 트리를 깊이 우선으로 순회하며 부모 행렬과 로컬 행렬을 합성해 각 노드의 월드 행렬을 만듭니다. 이렇게 해야 그룹 이동이나 회전이 자식 파트에 자연스럽게 전파됩니다. (GitHub)
5. 드로우 오더 기준으로 실제 그립니다
   그 다음 패스에서는 드로우 오더에 따라 각 파트를 GPU에 올린 버퍼와 함께 렌더링합니다. 메쉬가 없다면 단순 쿼드로, 메쉬가 있다면 삼각형 메시로 그립니다. 즉, 단순한 파트와 변형이 필요한 파트를 같은 시스템 안에서 다루기 위한 구조입니다. (GitHub)
6. 애니메이션은 타임라인 상태에서 보간됩니다
   애니메이션 스토어가 현재 시간, 재생 상태, 포즈 오버라이드, 키프레임을 관리합니다. 중요한 점은 선택과 편집도 저장된 원본 좌표가 아니라 “현재 시점에 계산된 유효 포즈”를 기준으로 해야 한다는 점인데, 실제로 관련 버그를 수정한 기록도 있습니다. (GitHub)
7. 메쉬 생성은 별도 알고리즘으로 처리됩니다
   메시 생성은 알파 마스크를 만들고, 경계를 추적하고, 내부를 샘플링한 뒤 삼각분할을 수행하는 파이프라인으로 구성됩니다. 경계보다 약간 바깥으로 확장하는 dilation을 두는 이유는, 변형 시 이미지 가장자리가 찢어져 보이는 현상을 줄이기 위해서입니다. (GitHub)

설치 / 사용 방법

현재 문서 기준으로 로컬 개발 환경은 Node.js 18 이상과 pnpm을 권장합니다. 프레임워크는 React와 Vite를 기반으로 하고, UI는 Shadcn UI와 Tailwind CSS 조합 위에 올라가 있습니다. (GitHub)

설치와 실행 흐름은 아래처럼 이해하면 됩니다.

git clone <repository>
cd stretchystudio
pnpm install
pnpm dev

실행 후에는 로컬 개발 서버에서 에디터를 열고, PSD 또는 PNG를 드래그해 가져옵니다. 그 다음 리깅 마법사로 뼈대를 잡고, Animation 모드로 전환해 키프레임을 추가하는 흐름입니다. 문서상 빠른 시작은 “가져오기 → 오토 리깅 → 애니메이션”의 3단계에 가깝게 정리되어 있습니다. (GitHub)

최소 실행 예시는 이렇게 볼 수 있습니다.

pnpm install
pnpm dev

1) PSD 또는 PNG 가져오기
2) 필요하면 자동 리깅 또는 수동 리깅 선택
3) 관절 위치 보정
4) Animation 모드로 전환
5) 키프레임 추가 후 재생
6) 프로젝트 저장

자주 쓰는 예시 / 활용 시나리오

AI로 분해된 캐릭터 PSD를 바로 움직여야 하는 경우

이미 레이어가 나뉜 캐릭터를 갖고 있지만, 이를 애니메이션 가능한 구조로 바꾸는 작업이 남아 있을 때 적합합니다. see-through 계열 자산을 바로 이어서 다루도록 설계된 점이 강점입니다. (GitHub)

VTuber 스타일의 간단한 리깅 프로토타입이 필요한 경우

정교한 수작업 리깅 전에 빠르게 뼈대를 추정하고 테스트해 볼 수 있습니다. 휴리스틱 방식은 빠르고, DWPose 방식은 더 정밀한 시작점을 줍니다. (GitHub)

레이어 회전만으로는 부족한 미세 표정이 필요한 경우

눈동자, 머리카락, 호흡 같은 부위는 단순 회전보다 메시 정점 변형이 더 자연스럽습니다. Stretchy Studio는 이 지점을 위해 만들어진 도구에 가깝습니다. (GitHub)

게임용 2D 자산 애니메이션을 빠르게 실험하는 경우

현재 기준으로는 스프라이트시트 내보내기 단계가 다음 마일스톤으로 남아 있지만, 구조적으로는 그 방향을 분명히 보고 있습니다. 따라서 게임 자산용 실험 도구로는 충분히 흥미롭습니다. (GitHub)

내부 툴이나 연구 프로젝트에서 애니메이션 편집기 구조를 참고하는 경우

프로젝트 스토어, 애니메이션 스토어, WebGL 렌더러, 메시 생성 파이프라인이 비교적 명확하게 분리돼 있어, 에디터 아키텍처 사례로 읽기 좋습니다. (GitHub)

한계 / 주의할 점

문서상 확인되는 범위에서, 이 프로젝트는 아직 완성형 상용 제작 파이프라인이라고 보긴 어렵습니다. 현재 기준으로 M6는 완료됐지만, 스프라이트시트 내보내기와 GIF·비디오 출력, 물리 시뮬레이션, undo/redo 통합, 블렌드 모드 같은 기능은 다음 단계로 남아 있습니다. (GitHub)

적용이 어려운 경우도 분명합니다. PSD의 CMYK, 스마트 오브젝트, 복잡한 레이어 효과, 특수 블렌드 모드는 아직 충분히 검증되지 않았다고 적혀 있습니다. 즉, 일러스트 원본이 복잡할수록 바로 가져와서 완벽히 동작한다고 기대하면 안 됩니다. (GitHub)

오해하기 쉬운 부분도 있습니다. 이 도구는 “무조건 AI가 전부 해주는 자동 애니메이션 툴”이 아닙니다. 자동 리깅과 보조 기능은 있지만, 실제 결과 품질은 그룹 구조, 관절 보정, 메시 밀도 조절, 키프레임 설계에 여전히 많이 좌우됩니다. (GitHub)

현재 기준으로는 특히 대규모 팀의 정교한 아트 파이프라인 전체를 대체하기보다, 빠른 제작·실험·프로토타이핑에 더 잘 맞습니다. 반대로 이미 성숙한 전용 툴체인과 자동화가 갖춰진 스튜디오라면 도입 이득이 제한적일 수 있습니다. 이 점은 기대치를 맞추는 데 중요합니다. (GitHub)

마무리

Stretchy Studio의 핵심 가치는 복잡한 2D 캐릭터 애니메이션 제작을 “리깅 시스템 설계”가 아니라 “편집 가능한 작업 흐름”으로 다시 묶어낸 데 있습니다. PSD 가져오기, 그룹 구조, 리깅, 메시 변형, 타임라인, 저장까지 한 흐름으로 연결하려는 점이 분명합니다. (GitHub)

특히 이 도구는 스타트업, AI 기반 캐릭터 생성 파이프라인을 다루는 팀, VTuber·게임용 2D 캐릭터를 빠르게 움직여 봐야 하는 개발자와 아티스트에게 잘 맞습니다. 반대로 정교한 최종 제작 파이프라인을 즉시 대체할 도구를 찾고 있다면, 아직은 실험적 성격을 함께 감안해야 합니다. (GitHub)

핵심 요약

• 핵심 개념
  정적인 2D 레이어 이미지를 메시 변형과 스켈레톤, 타임라인 편집으로 바로 애니메이션 가능한 구조로 바꾸는 웹 기반 도구입니다. (GitHub)
• 차별점
  Live2D식 파라미터 중심 접근보다, 타임라인에서 직접 키프레임과 변형을 다루는 방향으로 설계됐다는 점이 가장 큰 차이입니다. (GitHub)
• 언제 쓰면 좋은지
  AI로 분해된 PSD를 빠르게 움직이고 싶을 때, 캐릭터 리깅 프로토타입을 빠르게 만들고 싶을 때, 메시 기반 미세 변형이 필요한 2D 캐릭터 작업에 적합합니다. (GitHub)
• 언제 쓰면 안 되는지
  복잡한 PSD 기능까지 완전 호환되는 상용급 파이프라인 대체재가 필요한 경우, 혹은 GIF·비디오·물리 시뮬레이션 같은 후속 기능이 필수인 경우에는 아직 맞지 않을 수 있습니다. (GitHub)
• 한 줄 요약
  Stretchy Studio는 “AI로 분해된 2D 캐릭터를, 무거운 파라미터 설계 없이 바로 움직이기 위한 타임라인 중심 애니메이션 툴”로 이해하면 가장 정확합니다. (GitHub)