라이브투디 강의 #2 Hello, cubism!(Part.1)

• Live2D Tutorial. #1 시작을 위한 준비.
• Live2D Tutorial. #2 Hello, cubism! (Part.1) (현재 포스트)
  
• Live2D Tutorial. #3 Hello, cubism! (Part.2)

 

---

 

Live2D를 입문하는 초보자를 위한 안내서

 

[오리엔테이션]
안녕하세요, 하즈란입니다.

Live2D 강의 2편으로 찾아뵙게 되었습니다.

1편을 통해 어떤 과정을 거쳐 애니메이션을 만들고 버추얼들이 제작되는지 대략적으로나마 파악에 도움이 되셨는지 모르겠네요.

이번 강의는 Hello, cubism! 라는 챕터명을 가지고 진행을 합니다.

여러분들과 함께 Cubism Editor 를 설치해보고 에디터를 둘러보고 에디터에 어떤 기능들이 있는지 파악을 하고 간단하게 움직임을 만들어보는 거 까지 함께 해보도록 하겠습니다.

 

---

 

[Live2D 큐비즘 에디터 설치.]

먼저 강의 진행에 있어서 필요한 Cubism Editor를 설치를 진행해보도록 하겠습니다.

www.live2d.com/kr Live2D 홈페이지를 접속해주도록 하겠습니다.

 

홈페이지에 접속했을 때 페이지가 한국어로 나오지 않는다면 상단 메뉴 중 지구본 버튼을 눌러 사이트 언어 설정을 한국어로 변경 후 따라와 주세요.

 

사이트 상단 메뉴 - 제품 - 다운로드 - Live2D Cubism Editor를 선택해줍니다.

 

라이선스 계약에 동의 후 '최신 릴리스 버전을 다운로드'를 클릭 후 인스톨러를 다운로드합니다.

강의를 제작한 기준으로 현재 최신 버전은 5.0.04 버전이며 이보다 최신 버전을 사용하는 것은 문제없습니다.

 

인스톨러를 실행 후 Cubism Editor 설치를 진행해 줍니다.

 

[큐비즘 에디터 둘러보기.]

설치를 완료하셨다면 Cubism Editor를 실행 시켜 본격적으로 Cubism Editor 를 둘러보도록 하겠습니다.

처음부터 너무 자세하게 에디터를 둘러볼 생각은 없고 여러분들이 강의를 보면서 따라 하면서 정말 필요한 것들 위주로 가볍게 알아볼 예정입니다.

자세히 알아보는 건 본격적으로 작업을 하면서 함께 알아보도록 하죠.

 

첫 설치 시 라이선스를 선택하는 창이 뜰 텐데

이미 라이선스를 구매하신 분들은 첫 번째 버튼을 눌러 정품 인증을 진행하고

라이선스 구매를 원하시는 분들은 두 번째 버튼을

 

무료 평가판 실행을 원하시는 분은 세 번째 버튼을(체험판을 실행 시 42일 카운트 다운이 진행이 되며 도중에 멈출 수 없습니다.)

체험판을 다 쓰셨거나 체험판 사용을 원치 않으시는 분들은 네 번째 버튼을 눌러 진행하시면 됩니다.

 

실행 시 첫 레이아웃입니다.

강의 진행 편의를 위해 샘플 .psd를 하나 불러온 상태이다 보니 여러분들도 준비하신 PSD 데이터를 불러와 보시길 바랍니다.

PSD 데이터를 불러오는 방법은 다양한 방법이 있는데요.

에디터에 드래그 앤 드롭을 하는 방법과

컨트롤 + O 단축키 사용과

상단 메뉴 파일 - 파일 열기를 통해 불러오는 방법이 있습니다.

 

기본적으로 보이시는 화면이 모델링을 진행하는 '모델링 워크스페이스'입니다.

해당 워크스페이스의 레이아웃은 여러분들이 원하시는 대로 수정이 가능합니다.

 

좌측 상단의 녹색 점선의 드롭다운 버튼을 눌러보겠습니다.

 

드롭다운 버튼을 눌러 '애니메이션 워크스페이스'로 전환을 한걸 보실 수 있습니다.

해당 워크스페이스에서는 모델링을 완료한 데이터를 가지고 애니메이팅 작업을 진행을 할 수 있습니다.

하지만 당분간은 '모델링 워크스페이스'에서 강의를 쭈욱 진행해 나갈 예정입니다.

 

다시 드롭다운 버튼을 눌러 '모델링 워크스페이스'로 전환을 하도록 하겠습니다.

 

녹색 점선이 처진 부분들이 팔레트 영역입니다.

해당 팔레트들은 드래그를 통해 레이아웃 재 정렬이 가능하고 워크스페이스 좌측이나 우측 혹은 별도의 탭으로 분리해서 사용 가능하니 에디터를 사용하면서 본인에게 적절한 레이아웃을 구성해 보시길 바랍니다.

자, 그러면 팔레트들에 대해서 하나씩 알아보도록 하겠습니다.

 

기본값 레이아웃에서 가장 좌측 상단에 바로 보이는 '파츠 팔레트'부터 알아보도록 하겠습니다.

'파츠 팔레트'는 말 그대로 파츠를 관리하는 팔레트입니다.

여기서 의미하는 파츠는 불러온 PSD 데이터에서 부위별로 나뉘어 정리된 걸 의미합니다.(눈/눈썹/입 같은)

 

그림 프로그램에서의 레이어와 유사한 느낌이라 생각하시면 되고

실제로도 레이어에서 정리된 순서와 폴더대로 '파츠 팔레트'에서 표시됩니다.

 

'파츠 팔레트'는 작업 도중 특정 오브젝트를 빠르게 찾거나 레이어 순서등을 정리할 때 사용합니다.

 

두 번째는 파츠 팔레트와 세트로 있는 '프로젝트 팔레트'입니다.

'프로젝트 팔레트'는 여러분들이 파일을 처음 생성해서 불러온 PSD 데이터와 실제 작업에 사용되는 모델용 이미지 등을 관리하는 팔레트입니다.

불러온 PSD 데이터의 레이어와 현재 여러분이 작업 중인 모델용 이미지와 링크가 이상하게 된 경우 혹은 PSD 데이터를 편집해야 하는 경우에 해당 '프로젝트 팔레트'에서 관리 및 수정이 가능합니다.

 

다음은 '인스펙터 팔레트'입니다.

현재 선택한 오브젝트의 다양한 정보 등을 표시하거나 옵션등을 제어할 수 있습니다.

 

다음은 '툴 상세 팔레트'입니다.

이름이 참 이상하지만 에디터를 사용하면서 다양한 툴을 다루게 되는데 해당 툴에서 사용할 수 있는 기능이나 옵션등을 보여주는 팔레트입니다.

 

작업 영역입니다.

작업 영역은 여러분들이 불러온 PSD 데이터의 해상도에 맞게 캔버스 영역이 생성이 되며 PSD 데이터 내부의 이미지 오브젝트들이 표시가 됩니다.

이곳에서 다양한 작업과 편집등을 진행하게 됩니다.

 

작업 영역 내에서 우클릭을 하게 되면 컨텍스트 메뉴가 뜨게 되는데 컨텍스트 메뉴를 통해서 조금 더 다양한 설정과 제어가 가능합니다.

 

작업 영역을 제어하는 방법입니다.

더 다양한 제어 방법 등이 있지만 이 정도만 숙지하셔도 진행에 큰 무리가 없고 지금도 복잡하실 거라 생각합니다.

 

대부분의 기본적인 제어는 단축키 보다도 마우스를 통해 제어를 한다 생각하심이 편합니다.

 

다음은 상단에 있는 툴바에 대해서 살펴보도록 하겠습니다.

다양한 도구들이 있다 보니 입문에 있어서 필요한 정보들 위주로 정리를 해 보았습니다.

 

첫 번째는 편집 레벨 제어입니다.

레벨 1,2,3에 따라 작업 영역에서 표시되는 오브젝트에 대한 정보량이 달라지게 됩니다.

 

두 번째는 텍스쳐 아틀라스 편집입니다.

'텍스쳐 아틀라스'란 정말 간단히 말해서 모든 레이어들을 하나의 이미지에 전부 펼쳐둔 전개도라고 생각하시면 됩니다.

임베디드 모델 출력 시 제작이 필요한 요소이며 강의를 배우는 현재 단계에서는 그런 친구가 있구나 정도로만 생각하고 넘어가시면 됩니다.

 

아트 메쉬 편집 도구입니다.

'아트 메쉬' 란 이미지 오브젝트(텍스쳐)에 폴리곤(메쉬)을 씌운 에디터에서 다루는 오브젝트의 일종입니다.

 

아트 메쉬 편집 도구는 수동 편집 도구와 자동 생성 도구 2가지가 있는데 해당 도구는 조금 있다가 아트 메쉬에 대해 다룰 때 알아보겠습니다.

 

디포머 생성 도구입니다.

'디포머'는 방금 본 아트 메쉬라는 오브젝트를 효율적으로 제어, 편집하도록 도와주는 오브젝트라고 보시면 됩니다.

 

디포머 생성 도구는 워프 디포머 생성, 회전 디포머 생성, 회전 디포머 생성 툴 이렇게 3가지가 있는데 사실 회전 디포머 생성 이 두 가지는 사실 거의 비슷한 도구이므로 사실상 2가지가 있다고 보시면 됩니다.

해당 도구 또한 조금 있다가 디포머에 대해 다룰 때 더 알아보도록 하겠습니다.

 

다음은 기본적인 제어 도구인 선택, 편집과 관련된 도구입니다.

 

화살표 툴(A)은 가장 기본적인 커서입니다.

올가미 선택 툴(L)은 올가미로 범위를 지정 후 오브젝트를 선택하고 편집하는 도구입니다.

브러시 선택 툴(B)은 에어 브러쉬 같은 느낌으로 가중치 범위로 오브젝트를 선택하는 도구입니다.

 

마지막으로 변형 도구입니다.

 

변형 패스 툴은 아트 메쉬와 함께 묶여 사용되는 툴인데요.

변형 패스 라인을 그어 아트 메쉬의 대략적인 형태를 잡을 때 사용하는 도구입니다.

 

변형 브러시 도구는 아까 본 브러쉬 선택 툴과 다르게 선택과 변형이 동시에 이루어지는 도구입니다.

즉 지정한 가중치 범위만큼 선택과 변형이 동시에 이루어져서 퀵 커서처럼 사용할 수도 있습니다.

아트 메쉬를 비롯해 디포머들도 함께 편집할 수 있습니다.

 

---

 

[아트 메쉬 수정해 보기.]

에디터에 대해 알아보는 건 이쯤으로 하고 실전으로 들어가 보도록 하겠습니다.

작업의 가장 기초가 되는 아트 메쉬를 실제로 작업을 할 수 있도록 변형을 해보도록 하겠습니다.

먼저 수정을 원하는 오브젝트를 선택 후 메쉬 편집 모드로 진입을 해야 합니다.

방법은 3가지가 있습니다.

• 오브젝트 선택 후 상단 툴바 - 메쉬 편집 버튼 사용
• 오브젝트 더블 클릭
• 오브젝트 선택 후 단축키 컨트롤 + E

오래 사용해 본 경험으로 상단 툴바는 번거롭고 더블 클릭은 클릭 과정에서 미세하게 오브젝트의 위치가 틀어진 경험이 있어 단축키를 가장 선호하고 있습니다.

 

 

메쉬 편집 모드로 진입 시

작업 영역이 선택된 오브젝트에 포커싱이 되며 비어있던 툴 상세 팔레트에 메쉬 편집과 관련된 기능이 생긴 걸 볼 수 있습니다.

 

툴 상세 팔레트에 생성된 도구들에 대해 알아보겠습니다.

파란색은 선택과 관련된 도구

녹색은 버텍스 수정과 제거와 관련된 도구

그 외 색깔은 특수 도구입니다.

 

파란색과 녹색 도구를 이용해 수동으로 메쉬 편집을 할 수 있습니다.

 

조금 더 빠르게 편집하는 방법도 있습니다.

좀 전 노란색 표시의 버튼이나 상단 툴바에서 접근 가능한 메쉬 자동 생성 도구를 이용하면 되는데요.

기본적으로 제공되는 프리셋이나 설정의 수치를 변경하여 원하는 형태의 버텍스를 생성할 수 있습니다.

다만, 여기서는 에디터의 기초에 대해 알려드리기에 메쉬 자동 생성 도구에 대해서 자세히 다루지는 않습니다.

 

다음으로는 아트 메쉬의 기초에 대해 알아보겠습니다.

아트 메쉬는 먼저 이미지인 '텍스쳐'와 폴리곤인 '버텍스'가 합쳐져야 비로소 완성됩니다.

그리고 버텍스는 항상 텍스쳐를 감싸는 형태를 유지해야 합니다.

 

그 이유는 아트 메쉬의 특성 때문인데요.

버텍스가 완전히 완성된 영역에 한에서만 텍스쳐가 표시가 되므로 사진과 같이 버텍스 일부가 텍스쳐를 침범한 상태로 메쉬 편집을 끝내버리면 그 영역만큼 텍스쳐가 잘려서 표현이 됩니다.

이러한 아트 메쉬의 특성을 잘 파악하고 아트 메쉬를 수정해 보도록 합시다.

 

샘플로 머리카락 파츠 일부를 가져왔는데요.

아트 메쉬는 다음과 같은 느낌으로 수정을 한다 생각하시면 좋습니다.

• 텍스쳐의 가장자리를 따라 갭을 준 채로 버텍스의 아웃 라인을 만듭니다.
• 텍스쳐의 가장자리를 따라 갭을 준 채로 버텍스의 인 라인을 만듭니다.
• 이때 삼각형을 이룰 수 있도록 점과 점 사이에 포인트를 생성합니다.
• 마지막으로 자동 연결을 사용해 연결되지 않은 버텍스 라인을 모두 연결합니다.

작업자마다 아트 메쉬를 수정하는 방법은 다를 수 있습니다.

다만 이러한 방법이 가장 기초적인 방법이며 이 방법에서 더 나아가 각자만의 방법으로 발전해 나가시면 됩니다.

 

아트 메쉬를 수정하는 가장 기초적인 방법을 배웠습니다.

여기서 조금 더 나아가 아트 메쉬를 수정을 하되, 더 좋은 아트 메쉬를 만드는 방법에 대해 생각해 보겠습니다.

저는 남들에게 설명을 할 때 "좋은 아트 메쉬는 움직이기 좋은 아트 메쉬"라고 말을 하곤 합니다.

 

그러면 움직이기 좋게 하기 위해선 어떻게 해야 될까요?

움직이기 좋게 하기 위해선 이미지 오브젝트의 라인과 공간을 반영하여 아트 메쉬를 제작해야 합니다.

 

그림은 분명 2D이지만 저희는 입체감을 느낍니다. 그 입체감을 만드는 것은 원근과 음영입니다.

원근과 음영을 버텍스에도 반영을 해주는 겁니다.

 

나쁜 예시 / 좋은 예시를 보면서 더 설명을 해보겠습니다.

나쁜 예시의 경우 치마의 라인을 무시하고 버텍스 라인을 생성했습니다. 물론 이 경우라도 문제는 없습니다.

다만 주름치마의 움직임이 잘 표현되지 않습니다.

좋은 예시의 경우 치마 주름의 라인을 잘 반영한 버텍스 라인입니다.

귀찮더라도 자동 메쉬 생성을 쓰지 않고 수동으로 메쉬를 짜는 이유가 자동 도구는 이러한 라인과 공간을 고려하지 않기 때문입니다.

 

그러면 아트 메쉬가 많으면 좋을까요?

정답은 세모입니다.

물론 많으면 더 자유롭고 디테일한 표현을 할 수 있지만 많은 아트 메쉬를 제어하는데 작업의 효율성과 프로그램의 성능에 악영향을 끼칩니다.

그리고 각이 진 특정한 오브젝트에선 오히려 더 많은 아트 메쉬가 표현에 불리할 수 있습니다.

 

필요한 곳에 필요한 만큼의 버텍스를 만들어 아트 메쉬를 수정하는 것이 모델러의 관건이자 실력이라 할 수 있겠습니다.

 

---

 

[디포머에 대해 알아보기.]

이번에는 아트 메쉬의 단짝 친구인 디포머에 대해 알아보도록 하겠습니다.

 

디포머는 단일, 혹은 다수의 아트 메쉬를 효율적으로 제어 및 관리할 수 있도록 도와주는 오브젝트입니다.

디포머는 워프 디포머와 회전 디포머 2종류가 존재합니다.

 

먼저 워프 디포머입니다.

워프 디포머는 면 단위 움직임 변형에 주로 사용을 하며 입체적인 움직임과 흔들림, 변형등을 표현할 수 있습니다.

워프 디포머의 구성 요소는 테두리 상자, 변형 베지어, 변형자로 이루어져 있습니다.

 

여기서 짚고 넘어갈 부분이 변형자의 공식 명칭은 변환입니다.

다만 변환이라는 단어가 애매하고 2019년 강의 당시 한국어 번역이 없을 때 제가 변형자라고 소개를 하였다 보니 입에 익어서 변형자라고 부를 것 같습니다. 공식 명칭과 다르다는 부분은 꼭 참고하시길 바랍니다.

 

각 구성 요소는 다음과 같은 역할을 수행합니다.

• 테두리 상자 - 워프 디포머의 사이즈 조절, 위치 이동
• 변형 베지어 - 변형자의 일괄적인 제어
• 변형자(변환) - 종속된 오브젝트의 변형을 담당하는 실질적인 역할

 

워프 디포머의 기본 조작입니다.

테두리 상자를 통해 조작을 수행하며 커서의 위치에 따라 모양이 달라지며 각 수행하는 기능 또한 달라집니다.

테두리 상자는 우측 하단의 X 버튼을 통해 없앨 수 있으며 워프 디포머를 선택 해제 후 다시 재 선택하는 것을 통해 테두리 상자를 다시 활성화할 수 있습니다.

단축키 지정을 통해 테두리 상자의 활성화를 빠르게 제어할 수도 있습니다.

 

또한 컨트롤 키를 누르고 있는 상태에선 테두리 상자가 파란색으로 변하며 현재 선택 중인 워프 디포머에 종속된 오브젝트에 영향을 주지 않고 워프 디포머만 변형을 할 수 있습니다.

 

다음은 회전 디포머입니다.

회전 디포머는 팔 관절 같이 각도의 변형이 주로 이루어지는 곳에 사용되는 디포머입니다.

회전 디포머의 구성 요소는 스케일핸들과 각도핸들로 이루어져 있습니다.

 

회전 디포머의 기본 조작입니다.

워프 디포머와 다르게 테두리 상자가 생성되지 않으며 스케일핸들과 각도핸들을 통해서 조작을 진행합니다.

그리고 워프 디포머와 동일하게 컨트롤을 누르고 있는 상태에선 파란색으로 변하며 종속된 오브젝트에 영향을 주지 않고 회전 디포머를 변형시킬 수 있습니다.

 

디포머의 추가적인 조작입니다.

각 디포머를 선택한 상태에서 인스펙터 팔레트를 보면 각 디포머 별로 조작할 수 있는 옵션들이 표시됩니다.

 

워프 디포머의 경우 변환 베지어, 변환자의 분할 수를 추가적으로 조절할 수 있으며

변환 베지어의 편집 타입을 변경할 수 있습니다.

 

회전 디포머의 경우 각도, 스케일 등을 수치로 정확하게 조정할 수 있습니다.

 

그리고 공통적으로 불투명도과 스크린 컬러 등을 지정할 수 있습니다.

 

마지막으로 디포머의 종속 개념에 대해 간단히 알아보고 가겠습니다.

에디터에서는 아트 메쉬에 디포머를 씌워 변형을 하게 되는데 여기서 디포머에 디포머를 씌워서 변형도 가능합니다.

폴더 안의 폴더 같은 느낌으로 이해하시면 좋을 것 같은데요.

이를 '종속'이라 표현을 합니다.

 

종속 관계에서 상위에 위치하는 디포머는 '부모' 상대적으로 하위에 위치하는 디포머는 '자식'이라 부릅니다.

 

여러 디포머의 종속 관계에서 상위에 위치하는 부모 디포머를 변형하는 경우 그 부모 디포머에 같이 종속된 자식 디포머 또한 부모 디포머 변형을 그대로 적용받게 됩니다.

하지만 자식 디포머가 변형이 되더라도 그 자식 디포머의 부모 디포머에는 영향을 끼치지 않습니다.

 

즉 종속 관계에서의 변형의 흐름은 일방통행이라 이해를 하시면 될 것 같습니다.

 

갑자기 이런 디포머 종속이란 개념을 설명해서 다소 의아하실 수 있습니다.

이러한 개념이 있다는 걸 인지해야 앞으로의 강의를 진행하면서 이해에 도움이 되실 겁니다.

 

다소 복잡하게 느껴지더라도 실무로 겪어보면 그리 어렵지도 않으니 강의와 함께 계속 나아가시길 바라겠습니다.

 

이번편의 내용은 여기까지입니다.

 

Hello, cubism! Part.2에서 이어서 찾아뵙도록 하겠습니다.

감사합니다.

 

Live2D 라이선스 구매를 고려 중이신가요?
' UKSQPRDNRN ' 코드를 입력하셔서 라이선스 비용의 9%를 절감해 보세요!*

*연간 플랜, 3년 플랜 대상이며 인디/비즈니스 플랜 모두 활용 가능합니다.