YAML로 Live2D용 PSD 템플릿을 생성하는 도구를 만들었다
YAML에 레이어 구조를 적어 두면 Live2D용 PSD를 자동 생성하는 도구. Clip Studio Paint의 템플릿으로 등록해 두면 새 캐릭터를 만들 때마다 '계층을 짜는' 작업이 필요 없어진다.
PSD의 계층을 매번 만드는 게 귀찮다
Live2D에 쓰이는 PSD는 일반적인 일러스트와 다르다. 파츠가 세밀하게 레이어로 나뉘어 있어야 한다. 앞머리·뒷머리·눈·눈썹·입·얼굴 베이스·몸 … 이렇게 관절 단위로 분리되어 있지 않으면, Live2D Cubism에 불러와도 움직일 수 없다.
완성된 1장의 그림을 나중에 파츠별로 나누는 것은 현실적이지 않다. 그리기 시작하는 단계부터 레이어를 나누어 두어야 한다.
그런데 여기서 알아차리게 된다. 이 레이어 계층 자체는 캐릭터마다 바뀌지 않는다.
- 앞머리, 얼굴 파츠, 얼굴 베이스, 뒷머리, 몸
- 눈은 「눈동자 하이라이트·눈동자·흰자위·윗눈꺼풀·아랫눈꺼풀」
- 입은 「닫기」와 「열기」 두 가지 상태
캐릭터 디자인은 달라도 움직일 수 있는 구조의 뼈대는 공통이다. 매번 처음부터 폴더와 레이어를 짜는 것은 쓸데없는 수작업이 된다.
Clip Studio Paint(CSP)에는 「템플릿에서 새로 만들기」가 있다. 한 번 만들어서 .clip으로 저장해 두면 불러올 수 있다. 하지만 구조 자체는 YAML로 관리하고 싶다. 버전 관리가 되고, 변경 이력도 따라갈 수 있다.
YAML → PSD → .clip 파이프라인
3단계 변환을 만들었다.
- YAML: 레이어 구조를 정의
- Node.js 스크립트: YAML을 읽고 PSD를 생성
- CSP: PSD를 열어
.clip으로 저장 → 템플릿 등록
Node.js 쪽에서는 ag-psd로 PSD를 직접 써낸다. 각 레이어는 투명한 1×1 픽셀의 빈 레이어이고, 의미를 가지는 것은 폴더 계층·레이어 이름·레이어 색상뿐이다.
structure:
- { type: layer, name: 前髪, color: blue }
- type: folder
name: 顔パーツ
color: red
children:
- type: folder
name: 右目
children:
- { type: layer, name: 瞳ハイライト }
- { type: layer, name: 黒目 }
- { type: layer, name: 白目 }
- { type: layer, name: 上まぶた }
- { type: layer, name: 下まぶた }
CSP에서 열면 폴더 구조도 레이어 이름도 색상도 유지된 상태로 읽힌다.
레이어 이름은 일본어로 통일되어 있다. Live2D 튜토리얼·커뮤니티 자료의 상당수가 일본어이고, 부위 이름도 일본어 쪽이 간결하기 때문이다. 자신의 YAML에서는 한국어나 영어로 바꿔도 된다.
3단계 템플릿
Live2D는 단계적으로 키워 나가는 것을 전제로, 3가지를 준비했다.
| Phase | 레이어 수 | 대응하는 움직임 |
|---|---|---|
| 1 (최소) | 약 15 | 깜빡임·립싱크·끄덕임 |
| 2 (표준) | 약 35 | 표정·머리 XYZ·기본적인 흔들림 |
| 3 (풀) | 약 65 | 머리카락 물리·호흡·팔·의상 베리에이션 |
처음에는 Phase 1만으로 충분하다. 깜빡임·립싱크·끄덕임이 가능하면 아바타로서 성립한다. 익숙해지면 Phase 2 → 3으로 키워 간다.
처음부터 풀세트를 노리면 길을 잃는다.
구조를 바꾸고 싶어졌을 때
레이어 구성은 YAML에 일원화되어 있으므로 변경이 쉽다.
templates/phase2-standard.yaml편집npm run generate:phase2로 PSD 재생성- CSP에서 다시 열어
.clip으로 저장
구조의 변화가 git에 남는 것도 좋다. 「예전에는 어땠지?」를 따라갈 수 있다.
이런 종류의 도구의 성질
만들고 나서 깨달았지만, 이런 도구는 만들어서 손해 볼 일이 없는 성질을 지닌다.
- 캐릭터를 만들 때마다 쓴다 → 이용 횟수가 자연스럽게 늘어난다
- 다른 사람도 쓸 수 있는 구조이므로, 공개하면 누군가에게 도움이 된다
- 나중에 자신이 다시 볼 때, YAML이 그대로 사양서가 된다
공개했다
소스 코드는 GitHub에 공개했다. Node.js 기반, MIT 라이선스.
Live2D 입문자를 위한 최소 구성부터 본격적인 운용을 위한 풀 구성까지, 3단계 템플릿을 함께 담았다. Clip Studio Paint로 템플릿화하는 절차도 README에 적어 두었다.