일러스트 한 장, 아홉 단계

먼저 해보고 싶다면 글 끝의「놀아보기」로 바로 넘어가세요. 카메라를 켜면 카노가 당신을 따라 움직입니다.

이 아이는 우파루파 소녀 카노(중국어로 花野, 영어로 Kano, 일본어로 カノ)입니다. 이름은 우파루파의 고향인 Xochimilco 호수에서 따왔고, 나와틀어로 「꽃밭」이라는 뜻입니다. 카노는 2D 퍼펫입니다. 일러스트 한 장을 83개 레이어로 나누었고, 고개를 돌리고, 눈을 깜빡이고, 말하고, 26가지 동작을 하며, 카메라 속의 당신을 따라 움직이기도 합니다.

프로젝트 전체에서 Live2D 편집기를 한 번도 열지 않았습니다. Live2D의 메시와 변형은 편집기에서 마우스로만 조정할 수 있고, 공식적으로 프로그램에서 메시를 고치는 인터페이스를 제공하지 않아 AI 에이전트가 끼어들 수 없습니다. 그래서 이번에는 2D 애니메이션의 기초 상식만으로 퍼펫 효과를 직접 재현했는데, 의외로 결과물이 괜찮았습니다. 역할 분담은 제가 그림을 보고 결정하고, Opus 5.5가 코드를 쓰고 수치를 재는 것이었습니다. 2026-10-08에 착수해 10-14에 웹페이지에 올렸습니다. 웹 버전은 일부러 텍스처를 줄였기 때문에 가까이서 보면 원본보다 조금 흐립니다(이유는 단계 9에 있습니다).

왜 Live2D 편집기를 쓰지 않았나

Live2D가 하는 일은 풀어 보면 모두 그래픽스의 기본기입니다. 메시 변형, 앞뒤 레이어의 시차, 뼈, 이미지 교체입니다. 편집기는 이것들을 마우스 조작으로 감싸 두었고, 공식이 외부 프로그램에 제공하는 인터페이스에는 메시 정점을 고치는 기능이 없습니다(2026-10 확인). 모델을 재생하는 Cubism Core는 프로그램에서 읽을 수 있어서, 단계 1에서 공식 샘플로 측정할 수 있었습니다. 이번에는 이것들을 코드로 하나씩 다시 써 넣었습니다.

아홉 단계 한눈에 보기

고개 돌리기는 앞 단계의 결함을 처음으로 드러내는 단계입니다. 그리지 않은 부분이 드러나면 단계 2로 돌아가 보완하고, 두 번째 윤곽선이 나타나면 단계 3으로 돌아가 다시 분해합니다.

먼저 전문가 레퍼런스를 측정해 「비슷한가」를 숫자로 바꿉니다

작업에 들어가기 전에, 전문가 퍼펫이 고개를 돌릴 때 각 레이어가 얼마나 움직이는지 측정합니다.

방법

1. Live2D 공식 Cubism Core로 휴머노이드 샘플 모델 12개를 불러와 고개 돌리기 파라미터를 끝까지 밀어 봅니다
2. 얼굴 윤곽의 이동량을 1로 두고 각 레이어의 상대 이동량을 계산해, 12개의 중앙값을 취합니다

메인 이미지는 한 장, 가려진 부분은 따로 그립니다

정면 일러스트에는 머리카락 뒤나 팔 뒤에 있는 것이 없으므로 따로 그려야 합니다.

방법

1. ChatGPT 이미지 편집으로 메인 이미지를 바탕 삼아, 한 장에 한 가지만 수정합니다
2. 편집된 이미지는 ECC(이미지 정합 방법의 하나)로 메인 이미지에 맞춰 정렬하며, 정렬할 때는 수정하지 않은 부분만 봅니다

레이어 분해 후, 보이는 부분은 원본 이미지 픽셀로 되돌립니다

레이어 분해는 모델에 맡기고, 색은 원본만 따릅니다.

방법

1. 메인 이미지와 단계 2의 편집 이미지를 레이어 분해 모델(이번에는 2026년 2월에 발표된 See-through)에 넣어 머리카락, 얼굴, 이목구비, 옷 등의 레이어로 분해합니다
2. 각 레이어에서 보이는 영역의 픽셀은 모두 원본 이미지에서 다시 붙이고, 같은 픽셀은 가장 위의 레이어에만 줍니다
3. 분류에 없는 부위(카노의 아가미)는 원본에서 어느 레이어에도 덮이지 않은 부분을 잘라 냅니다
4. 각 레이어 캔버스에서 불투명도가 0.06 미만인 노이즈를 지웁니다

고개 돌리기는 정점만 움직이고 이미지는 바꾸지 않습니다

이미지 레이어는 한 장도 교체하지 않고, 머리를 타원체로 보고 축을 중심으로 돌리며, 각 레이어는 비율표의 깊이에 따라 움직입니다.

방법

1. 정점마다 깊이를 하나씩 부여하고, 레이어 간 앞뒤 거리는 단계 1의 비율표에서 역산합니다. 코가 가장 앞, 뒷머리가 가장 뒤입니다
2. 목은 거의 움직이지 않고 턱이 목 위를 미끄러지듯 지나갑니다(공식 샘플에서 고개를 돌릴 때 목의 이동량은 0에 가깝습니다)

팔은 작은 각도만 구부리고, 큰 동작은 이미지를 한 장 교체합니다

내려뜨린 손은 수십 도 안에서만 구부리고, 손을 드는 것 같은 큰 동작은 따로 그린 이미지로 교체합니다.

방법

1. 내려뜨린 손은 어깨, 팔꿈치, 손목 세 개의 뼈로 구부리고, 관절 근처의 메시를 촘촘하게 합니다
2. 손 들기, 얼굴 가리기, 허리에 손 올리기 같은 자세는 각각 단계 2의 방법으로 이미지를 한 장씩 편집하며, 카노는 모두 6종입니다
3. 교체할 때는 페이드하지 않습니다. 손이 먼저 자세 방향으로 휙 휘어지다가 중간의 한 프레임에서 그대로 교체되고, 새 손이 한 번 튕기며 자리를 잡습니다
4. 손을 들 때 위팔은 0.55배로 줄어들고, 팔꿈치의 지점도 위로 따라 올라갑니다

표정은 밀어서 바꾸고, 눈은 깜빡이는 프레임에서 교체합니다

표정을 바꿀 때 페이드 인/아웃을 쓰지 않습니다. 입과 눈썹은 옵티컬 플로우로 밀어 옮기고, 눈은 깜빡이는 프레임에 숨겨서 교체합니다.

방법

1. 표정만 바꾼 얼굴 11장을 생성하고, 단계 2의 기준으로 메인 이미지에 정렬합니다
2. 옵티컬 플로우(두 이미지 사이에서 각 픽셀이 어떻게 움직였는지 계산하는 방법)로 원래 얼굴을 새 표정으로 밀어 옮깁니다
3. 눈은 밀지 않습니다. 강제로 한 번 깜빡이게 하고, 눈이 감긴 프레임에서 얼굴과 눈을 함께 교체합니다. 11개 표정 중 9개가 이 경로를 따릅니다

모션은 전문가 작품의 리듬에 맞춰 직접 배치합니다

모션의 좋고 나쁨은 리듬에 달려 있습니다. 리듬은 전문가 작품에서 가져오고, 키프레임은 직접 배치합니다.

방법

1. 공식 샘플의 모션을 보고 공통된 리듬을 정리하되, 어떤 곡선도 그대로 가져오지 않습니다
2. 모션마다 키프레임을 직접 배치합니다. 머리, 몸, 시선, 아가미, 표정, 손짓에 타임라인을 하나씩 둡니다
3. 기쁨 계열은 「힘 모으기 → 튀어 오르기 → 멈추기 → 머리카락이 따라 흔들리기」의 네 박자로 배치하고, 감정은 표정에 맡깁니다
4. 모션에 필요한 표정과 손짓은 단계 5, 6에서 만들어 둔 세트를 적용합니다

카메라 연결: 얼굴과 상반신을 두 경로로 나눕니다

얼굴과 몸이 각자 따로 움직이므로, 한쪽이 추적을 놓쳐도 다른 쪽은 계속 움직입니다.

방법

1. 브라우저에서 추적 모델 두 개를 돌립니다. 하나는 얼굴, 하나는 몸을 봅니다
2. 두 경로가 각자 중앙을 맞추고 각자 평활화합니다. 처음 1초간 정지한 자세를 정면으로 삼고, 이후에는 정면과의 차이를 측정합니다
3. 방향은 거울처럼: 당신이 왼쪽으로 가면 카노도 화면에서 왼쪽으로 갑니다
4. 팔의 작은 동작은 그대로 따라가며, 손 들기는 임계값을 넘겨 들고 잠시 멈춰야 단계 5의 자세 이미지로 교체됩니다

웹페이지에 올리기

웹페이지에 올리려면 먼저 세 가지를 해결해야 합니다. 원본을 그대로 내보낼 수 없다는 점, 로딩이 너무 느리다는 점, 그리고 몰래 외부로 연결하는 라이브러리가 하나 있다는 점입니다.

방법

1. 공개 버전에는 보호 장치를 세 겹 따로 둡니다. 레이어별 텍스처의 가로·세로를 원본의 3분의 1로 줄이고 메시를 성기게 하며, 원본은 내 컴퓨터에만 둡니다. 에셋은 암호화한 뒤 조각내어 전송합니다. 각 레이어에는 보이지 않는 워터마크와 서명을 숨겨 둡니다
2. 로딩할 때는 먼저 미리보기 이미지를 띄우고, 퍼펫이 준비되면 바꿉니다
3. 텍스처는 무손실 WebP로 바꿉니다
4. 추적용 라이브러리가 60초마다 사용량 통계를 외부로 보내는데 끄는 스위치가 없어서, 페이지 안에서 직접 응답해 버립니다

아직 끝나지 않은 것

카노에게는 알려진 결함이 아직 다섯 개 있어서 먼저 적어 둡니다.

• 울 때와 하품할 때 입속에 옅은 색 고스트가 조금 있습니다
• 고개를 30°까지 돌리면 먼 쪽 앞머리의 잘린 단면에 톱니가 보입니다
• 옆으로 기울이면 비틀림이 따라 나오는데, 퍼펫의 상한이 작아서 눈에 띕니다
• 「이」, 「에」와 웃는 입 모양이 구분되지 않아, 정확하게 하려면 소리로 립싱크를 해야 합니다
• 손가락은 추적하지 않고, 팔꿈치가 화면 밖으로 나가면 손이 움직이지 않습니다

밟은 함정

작업하면서 만난 문제는 대부분 아래 일곱 가지 유형에 속합니다. 유형마다 나타나는 증상과 막는 법만 적습니다.

「이동」으로 해야 할 일을 페이드나 이미지 교체로 처리함

나타나는 증상: 이중상, 반투명한 프레임 하나, 입선 두 줄.

막는 법: 정점을 움직일 수 있으면 움직입니다. 이미지 교체가 불가피하면 눈 깜빡임이나 손을 휙 흔드는 프레임에 숨깁니다(단계 4–6).

AI의 이미지 편집과 레이어 분해는 멋대로 다시 그림

나타나는 증상: 고치려 하지 않은 곳이 바뀌고, 분해된 레이어의 색이 원본과 다르고, 손이 한 쌍 더 생기고, 레이어 주위에 옅은 안개가 낍니다.

막는 법: 한 장에 한 가지만 수정하고, 정렬 기준으로 위치 이동과 스케일 변화를 걸러 내며, 내용을 잘못 그린 것은 사람이 눈으로 확인합니다. 픽셀은 항상 원본을 씁니다(단계 2, 3).

놀아보기

• 「카메라」를 눌러 카메라를 켜면 카노가 따라서 고개를 돌리고, 눈을 깜빡이고, 손을 움직입니다. 영상은 당신의 브라우저 안에서만 처리됩니다
• 동작 버튼을 누르면 모션이 재생됩니다. 카메라를 켜지 않으면 카노는 커서를 바라봅니다

퍼펫이 그대로 다운로드될 위험을 낮추기 위해 웹 버전의 텍스처는 원본의 3분의 1로 줄였습니다. 가까이서 보면 조금 흐린데, 정상입니다.

저작권 고지

• 카노의 캐릭터 디자인, 레이어, 메시, 표정과 모션 © 2026 JonesHong. 이 페이지에서 보는 용도로만 제공되며, 다운로드, 재게시, 재배포, 2차 가공은 허용되지 않습니다
• 웹 렌더링: PixiJS(MIT)
• 카메라 추적: MediaPipe Tasks Vision 및 Face Landmarker, Pose Landmarker 모델(Apache-2.0, Google)