8. 버추얼 캐릭터 개발 정리 (Live2d) (작성중)

해당 프로젝트의 얼굴이 되어줄 버추얼 캐릭터를 만들어 내는데 상당한 어려움이 있었다.

 

우선 가장 흔하게 사용하는 Live 2D를 이용해보려고 Live2D WEB SDK를 건들여봤는데 상당히 쉽지 않았다.

일단 주석이 일본어로 되어있기도 했고 자습서(Document)가 필자가 생각하기에 그다지 친절하지 않았다.

 

하지만 별다른 대안이 없지 않다라고 생각 한 부분이 다른 라이브러리나 프레임워크는 무료 정책이 아니거나, 구현 난이도가 매우 높거나, 언어가 까다롭거나 중 하나였다.

 

Live2D가 뭔가?

Live2D가 생소한 사람을 위해 알게된 내용만 간단하게 정리하자면 2D일러스트를 머리카락, 눈동자, 눈썹, 윗입술, 아랫입술, 머리, 목, 어깨 등등 부분 부분을 나누고 그러한 일러스트들이 자연스럽게 움직여서 마치 2D의 캐릭터가 살아움직이는 것 과 같은 효과를 내게 하는 엔진이다. 일반적으로 SDK형식으로 유니티랑 호환이 되기에 게임개발에 많이 사용이 되어왔었지만, 요근래 버추얼 유튜버, 버추얼 휴먼등의 유명세로 게임이 아닌 다른 용도로도 많이 이용되고 있다.

다음이 Live2D를 이용한 캐릭터 모델링의 사례라고 볼 수 있다. 대부분 Live2D를 사용하는 모양새이다.

 

 

소개는 이정도로 하고 우선 Live2D SDK, 개발에 대한 정리부터 시작하겠다.

Live2D SDK, 개발

live2d sdk를 이용하여 개발을 하려고 한다. sdk를 이용하는 이유는 표정과 행동 입모양을 내 맘대로 컨트롤 하기 위함이다.

다양한 환경에서 돌릴 수 있는 SDK들이 있다.

 

웹 호환성

우선 가장 먼저 눈에 들어왔던것은 유니티, 웹, 자바 이 3개다. 유니티 SDK가 가장 보편적으로 사용되는 것 같은데 필자는 유니티를 능숙하게 다루지 못하는 편이라 유니티로 잘 만들수는 있겠지만, 여러 모듈들을 엮어서 만들어야하는 프로젝트이니만큼 이해도가 있는 환경을 사용하고 싶었다. 웹이 가장 적당하다고 생각이 들었는데, 우선 웹으로 만들면 이후 방송에 적용할때 OBS에도 바로 띄울 수 있고. http프로토콜을 이용하여 표정, 행동, 입모양을 컨트롤 할 수 있게 되기 때문이다.

 

그러므로 여러가지 편의성 때문에 WEB SDK를 이용하려고 한다.

live2d sdk 호환성

 

 

다음은 Live2D SDK와 Live2D 개발사가 직접 제공하는 웹SDK 공식 가이드 코드이다.

SDK와 공식 가이드 코드는 Typescript로 되어있고 Canvas에 WebGL을 이용하여 일러스트를 올린다.

 

Live2D Cubism SDK | Live2D Cubism

GitHub - Live2D/CubismWebSamples

 

 

필자는 WebGL을 배워본적 없기에 상당한 노가다를 통해 공식 가이드 코드를 분석했다. 주석의 대부분이 일본어로 되어있어 상당히 불친절 하다고 느꼈다. 몇번이고 다른거 찾아볼까라는 생각때문에 이런 저런 캐릭터 모델링 라이브러리를 찾아봤지만 돌고돌아 Live2d였다.

 

공식 가이드코드를 어떻게든 요리해서 다음과 같이 웹에 올리고 방송에 띄우는 것을 성공했다.

웹과 OBS(인터넷 방송 도구) 캡처 사진

 

 

Live2D SDK, 립싱크

Live2D SDK에는 음성파일에 맞게 입을 움직이는 립싱크 기능이 있는데 해당 기능을 이용해보려고 공식 문서를 뒤졌다.

 

wav 파일의 음량을 기반으로 립싱크(Web) | SDK 자습서 | Live2D Manuals & Tutorials

립싱크 | Cubism SDK Manual | Live2D Manuals & Tutorials