Geppetto

2D 이미지 기반 레이어 구성

PNG 형식의 텍스처 파일을 불러와 여러 레이어로 분리하고, 이를 합성하여 캐릭터나 일러스트 형태의 이미지를 구성할 수 있습니다. 단일 텍스처에서 다양한 부위(예: 팔, 눈썹, 머리 등)를 추출해 독립적으로 제어하는 것이 핵심 동작 방식입니다.

변형(Mutation)과 모션 정의

레이어 트리에 변형 값을 추가하여 움직임을 부여할 수 있습니다. Animation 섹션에서 ArmRightTop, Eyebrows, HeadTilt 같은 파라미터를 슬라이더로 조절하며, Frame Info 영역에는 Eye blink, Look around, Talking 같은 트랙 단위로 애니메이션을 정의합니다.

타임라인 기반 애니메이션 편집

중앙 미리보기 영역에서 캐릭터의 동작을 확인하면서 하단 타임라인의 시간 축 위 각 트랙 프레임을 점으로 편집할 수 있습니다. 여러 트랙의 프레임을 조합해 시퀀스를 구성하고, 이를 JSON 파일로 내보내는 흐름을 제공합니다.

웹 임베드용 플레이어 연동

생성된 애니메이션은 텍스처 PNG와 함께 geppetto-player 라이브러리를 통해 웹사이트나 Electron 앱에서 재생할 수 있습니다. 스튜디오와 플레이어가 분리되어 있어 제작 결과물을 다양한 환경에 손쉽게 삽입할 수 있습니다.

설치 및 기본 사용

Windows에서는 winget을 통해 설치할 수 있습니다.

• winget 설치 명령: winget install --id MatthijsGroen.Geppetto --exact
• 스튜디오 자체는 브라우저 기반 앱으로 동작하며, geppetto.js.org/app에서 바로 사용할 수 있습니다.
• 소스 저장소에서 개발 모드로 실행하려면 저장소를 클론한 뒤 yarn studio-dev 명령으로 개발 서버를 시작하고, yarn build로 프로덕션 빌드를 생성할 수 있습니다.

기본적인 사용 흐름은 다음과 같습니다.

1. 텍스처로 사용할 PNG 파일을 준비하여 스튜디오에 불러옵니다.
2. 텍스처를 여러 레이어로 분리하고 이미지를 구성합니다.
3. 레이어 트리에 변형(mutation)을 추가해 모션을 정의합니다.
4. 타임라인에서 트랙별 프레임을 편집해 애니메이션 시퀀스를 만듭니다.
5. 결과물(JSON + 텍스처 PNG)을 geppetto-player로 웹사이트나 Electron 앱에 임베드합니다.

활용 예시

제공된 증거에 기반한 활용 시나리오는 다음과 같습니다.

• 웹사이트의 일러스트 캐릭터에 깜빡임, 시선 이동, 말하기 동작을 부여해 인터랙티브 랜딩 페이지를 구성하는 용도.
• 2D 아트 자산에 모션을 더해 포트폴리오나 마케팅 페이지의 시각적 요소를 강화하는 용도.
• Electron 기반 데스크톱 앱에 가벼운 WebGL 애니메이션을 내장해 UI의 생동감을 높이는 용도.

버전 및 업데이트

현재 winget 패키지 매니페스트 기준 최신 버전은 1.3.1이며, 2021-12-16에 릴리스되었습니다. 이 릴리스의 주요 변경점은 애니메이션 화면에서 발생하던 주요 오류를 수정한 것입니다. 저장소는 기본 브랜치를 next로 운영하며, 기존 Electron 앱 버전은 main 브랜치에 보존되어 있습니다.

제한 및 라이선스 확인 사항

Geppetto는 MIT 라이선스로 배포되는 오픈소스 프로젝트이므로 소스 코드를 자유롭게 활용할 수 있습니다. 다만 공식적인 기술 지원 채널은 제공되지 않으며, 재생 결과물은 geppetto-player 라이브러리와 텍스처 PNG를 함께 사용해야 웹에서 동작합니다. 또한 WebGL을 지원하지 않는 브라우저에서는 애니메이션을 재생할 수 없으며, 텍스처 입력 형식은 PNG가 기본으로 사용됩니다.

화면으로 보는 주요 기능

애니메이션 제어 및 타임라인

왼쪽에는 'Animation' 섹션에 'ArmRightTop', 'Eyebrows', 'HeadTilt' 등의 파라미터를 조절하는 슬라이더가 있고, 그 아래에는 'Frame Info' 영역에 'Eye blink', 'Look around', 'Talking' 등의 애니메이션 트랙이 나열되어 있다. 중앙에는 애니메이션 캐릭터가 보이며, 하단에는 시간 축이 표시된 타임라인에서 각 애니메이션 트랙의 프레임이 점으로 표시되어 있다.

애니메이션 제어 및 타임라인

왼쪽에는 'Animation' 섹션에 'ArmRightTop', 'Eyebrows', 'HeadTilt' 등의 파라미터를 조절하는 슬라이더가 있고, 그 아래에는 'Frame Info' 영역에 'Eye blink', 'Look around', 'Talking' 등의 애니메이션 트랙이 나열되어 있다. 중앙에는 애니메이션 캐릭터가 보이며, 하단에는 시간 축이 표시된 타임라인에서 각 애니메이션 트랙의 프레임이 점으로 표시되어 있다.