하루 만에 만드는 커스터마이즈 3D 캐릭터: AI 파이프라인부터 라이브 웹앱까지

Tripo AI Blender AccuRig Claude Code Google Stitch

AI가 이미지 한 장을 3D 캐릭터로 바꿔준다는 건 이제 다들 보셨을 겁니다. 인상적이죠——하지만 솔직히, 정적인 오브젝트 하나가 무슨 의미가 있을까요? 게임에서는 그렇게 동작하지 않습니다. 게임에는 캐릭터 하나가 아니라 캐릭터 ＋ 옷장 한 벌이 있습니다——모자, 안경, 의상, 신발을 마음대로 갈아입힐 수 있죠.

그래서 아이디어는 이렇습니다. 자기만의 소품 컬렉션(옷장)을 가진 커스터마이즈 캐릭터를 만드는 것도 똑같이 쉽다는 것, 그리고 그것을 웹앱으로 감싸 누구나 입혀볼 수 있게 하는 것을 보여드리겠습니다. 이것은 처음부터 끝까지의 전체 워크플로입니다——콘셉트, 3D 모델 생성, AI 텍스처링, 조립, 리깅, 잠깐 언리얼 엔진에 들렀다가, 마지막으로 AI 코딩 에이전트로 플레이 가능한 웹앱까지. 전부 약 하루가 걸렸고, 결과적으로 정말 재미있었습니다.

완성품은 이미 공개 중입니다——먼저 가서 놀아보세요

아래의 모든 것은 「Some Serious Drip」으로 모입니다. 「저주받았지만 사랑스러운」 핏을 입혀볼 수 있는 3D Pepe로, 랜덤으로 돌릴 수도 있고 공유용 카드로 내보낼 수도 있습니다. 먼저 열어본 다음, 각 부분이 어떻게 만들어졌는지 보러 돌아오세요. Some Serious Drip 데모 열기 →

재미있는 비영리 패러디

이 캐릭터는 Pepe이며, 원작자의 모든 권리를 존중하고 그대로 유지합니다. 이것은 워크플로를 보여주기 위한 패러디 팬 프로젝트일 뿐——제품도 아니고 영리 목적도 아닙니다.

전체 제작 과정 보기

전 과정을 처음부터 끝까지 YouTube에서.

YouTube에서 열기

1. 무엇이든 생성하기 전에 옷장부터 기획하라

바로 모델 생성으로 뛰어들고 싶은 유혹이 있습니다. 그러지 마세요. 커스터마이즈 캐릭터의 품질은 에셋 목록에 달려 있으므로, 저는 먼저 화이트보드에서 목록을 확정합니다. 제 테마는 지난 5년간의 매우 격동적이었던 인터넷 문화에 대한 장난스러운 회고였고, 덕분에 에셋이 저절로 정해졌습니다——그 빨간 모자, Apple Vision Pro, 피젯 스피너, 베이프, 어디에나 있는 스타벅스 컵, N95 마스크, Supreme 비니, 밈 후디 몇 벌 등등.

모든 것을 최종 앱이 노출할 카테고리로 분류합니다——모자, 아이웨어, 페이스웨어, 의상, 스킨, 부츠, 애니메이션——그리고 확정된 항목은 빨갛게 표시합니다. 이 보드가 곧 명세서입니다. 메시를 몇 개 생성해야 하는지, 나중에 그것들이 어떻게 묶이는지 정확히 알려줍니다.

콘셉트 보드가 곧 명세서——에셋을 모자 / 아이웨어 / 페이스웨어 / 의상으로 묶고, 확정되면 빨갛게 표시.

2. Tripo Smart Mesh로 베이스 캐릭터 생성

목록을 확정한 뒤, 콘셉트를 Tripo 로 가져와 Smart Mesh로 생성합니다. 이런 깔끔하고 스타일화된 룩에는 최고의 선택이며——저평가된 팁은, 폴리곤 수를 에셋별로 선택해 필요한 곳에만 디테일을 높일 수 있다는 점입니다. 머리는 설정 7을 골랐는데, 그것만으로도 거의 완벽한 결과였습니다.

머리를 붙인 채로 몸을 생성하라——나중에 머리를 교체하더라도

머리 없는 몸을 생성하면 AI가 목과 어깨의 위치를 추측하게 되어 비율이 어긋납니다. 그래서 저는 올바른 전체 비율을 위해 몸과 머리를 함께 생성한 뒤, 더 정확한 버전으로 머리만 한 번 더 생성합니다. 둘 다 잡는 거죠——비율은 정확하게, 머리는 선명하게.

머리에 Tripo Smart Mesh 적용. 폴리곤 수는 에셋별로 선택하고 Blender용 FBX로 내보내기.

3. Blender의 헤드 스왑 트릭

두 파트를 Blender로 가져옵니다. 몸에서 머리를 잘라내고, 따로 생성한 더 좋은 머리를 그 자리에 병합합니다. 두 메시를 깔끔하게 잇는 일은 생각보다 훨씬 쉽습니다.

두 엣지 루프를 브리지

머리 아래쪽 루프와 목 위쪽 루프를 선택하고 우클릭한 뒤 Loop Tools → Bridge를 사용합니다. 한 번의 클릭으로 두 개구부가 봉합됩니다. 목에 세그먼트를 몇 개 더해 전환을 더 매끄럽게 만드세요.

셰이딩을 고치고 손으로 매끄럽게

오브젝트 모드로 돌아가 셰이딩을 다시 계산하고, 스컬프트 모드로 들어가 이음새를 Smooth(스무스) 브러시로 쓸어주고 Elastic Deform으로 전체 형태를 미세 조정합니다. 적은 노력으로 큰 제어력을 얻을 수 있는——AI가 이미 메시 제작이라는 가장 어려운 부분을 처리해 준 지금, 바로 시간을 쏟아야 할 지점입니다.

비율을 위해 머리를 붙여 몸을 생성한 뒤, 머리를 더 선명한 것으로 교체하고 목에서 브리지.

이건 5분이면 익히는 Blender 기술

루프 브리지, 셰이딩 수정, 스무딩——어느 것도 고급 모델링이 아닙니다. AI 생성 메시를 다룰 때 엄청난 효과를 내는, 한 줌의 Blender 기초일 뿐입니다. 더 자세한 버전을 보고 싶다면 제 채널에 각각의 무료 설명이 있습니다.

4. Tripo에서 텍스처, Modddif에서 복구

메시가 깔끔하므로 Blender에서 빠르게 UV를 만듭니다——텍스처를 안전하게 지키기 위해 심을 몇 개만 넣으면 됩니다(무료 UV Packer 애드온이 있으면 더 좋습니다). 그런 다음 Tripo로 돌아가 원본 UV를 유지하고, 처음에 사용한 것과 같은 이미지를 업로드한 뒤 텍스처 생성을 누릅니다. 바로 쓸 수 있는 결과가 나오고, 머티리얼에서 PBR을 더한 뒤 다음으로 넘어갑니다.

같은 시작 이미지 ＋ 원본 UV ＝ Tripo의 깔끔한 베이스 텍스처, 그 위에 PBR.

Pepe의 눈은 브러시 두 번이면 끝

눈은 Blender에서 빈 텍스처를 만들어 흰색으로 채우고, 검은 브러시를 한 번 그으면——그게 눈 전체입니다. 러프니스는 취향대로 조절하세요. 사실적인 눈을 원하나요? 구를 하나 놓고 Nano Banana / Gemini로 눈 텍스처를 생성해 투영하면 됩니다.

일부 에셋은 글자가 깨진 채 돌아옵니다——「Supreme」 박스 로고가 살짝 어긋났고, 스타벅스 컵 뒷면은 완전히 뭉개졌습니다. 문제없습니다. Modddif(무료 도구)에 들어가 깨진 영역을 칠하고, 수정본을 생성한 뒤 올바른 글자로 다시 투영합니다. 같은 방법으로 어떤 텍스처든 순식간에 고칠 수 있습니다.

Modddif로 뭉개진 스타벅스 텍스처 복구——깨진 영역을 칠하고, 재생성하고, 다시 투영.

왜 Tripo에서 텍스처하고 필요할 때만 고치는가

Tripo에서 베이스 텍스처를 만들고 문제 부분만 고치면 엄청난 시간이 절약되며, 단순한 오브젝트는 한 번에 완벽하게 나옵니다. Tripo는 최근 파트 세그멘테이션을 진짜 쓸 만하게 만들었고(v2), 8K 텍스처와 PBR 업스케일을 추가했습니다. 제 팀이 의지하는 도구죠. 각 생성기의 실력은 저희 Arena 리더보드 에서 볼 수 있고, 복구 도구의 자세한 설명은 제 Modddif 가이드 에 있습니다.

5. Blender에서 옷장 조립하기

이제 재미있는 부분입니다. 모든 에셋을 Blender로 가져와 스컬프트 모드에서 하나씩 몸에 배치합니다. 사용하는 건 같은 작은 도구 세트——이동, 스케일, 회전, 그리고 옷이 자연스럽게 흘러내리고 겹치도록 하는 Elastic Deform과 Smooth 브러시입니다. 들고 있는 물건(커피, 베이프)은 조금 다르게 처리하지만, 모자·안경·상의·신발의 워크플로는 대체로 같습니다. 전체적으로 옷장 전부를 조립하고 정렬하는 데 약 30분이 걸렸습니다.

모든 에셋을 몸에 정렬하고 컬렉션으로 정리——모자, 상의, 하의, 신발, 소품.

이제 '조립'이 진짜 기술이다

AI는 이미 가장 어려운 부분——메시 제작——을 해결했습니다. 남은 것, 그리고 앞으로 가장 큰 기술이 될 거라고 제가 생각하는 것은 조합하는 일입니다: 비율, 핏, 무엇이 보기 좋은지에 대한 안목과 판단. 시간은 거기에 써야 합니다.

6. AccuRig로 한 번에 리깅

FBX로 내보내고 AccuRig 로 가져옵니다. 큰 골칫거리를 덜어주는 두 가지 내보내기 팁: 들고 있는 물건의 중복은 내보낼 필요가 없고(나중에 머티리얼만 바꾸고 하나만 리깅하면 됨), 오브젝트를 합칠 필요도 없습니다——분리된 채로 내보내고 분리된 채로 두면 나중에 머티리얼을 깔끔하게 다시 할당할 수 있습니다.

마커를 놓고 캘리브레이션

AccuRig는 몇 개의 관절 마커 배치를 안내합니다. Pepe는 손가락이 4개이므로 4손가락 핸드 리그를 선택하세요——이 단계를 건너뛰지 마세요. 캘리브레이트를 누르면 결과가 좋습니다. 흔한 문제 지점은 겨드랑이와 비표준 비율인데, 스타일화된 캐릭터에는 포즈 오프셋 옵션이 해결해 줍니다.

무료 애니메이션 몇 개 받기

AccuRig는 무료이고 무료 애니메이션도 제공합니다. 저는 두 개를 내보냅니다——기본 아이들과, 무언가를 든 아이들——캐릭터에게 커피나 베이프를 든 상태가 있기 때문입니다.

AccuRig: 마커 배치, 4손가락 핸드 리그 선택, 캘리브레이트. 무료·빠름, 아이들 애니메이션 포함.

갈아입는 아바타를 위한 두 가지 웨이트 지름길

강체 액세서리(Vision Pro, 모자, 안경)는 머리 본만 따라가야 합니다. 칠하는 대신, 버텍스 그룹에서 머리 본을 잠그고 잠기지 않은 그룹을 모두 삭제하세요——한 번에 100% 머리 웨이트가 됩니다.
다리를 몸에서 분리해 별도 오브젝트로 만들어, 옷이 가리는 부분을 숨길 수 있게 합니다. 게임에서는 바지 아래의 몸을 렌더링하지 않습니다——다리 또는 바지 중 하나만 보이고 둘 다는 절대 안 됨. 그러면 클리핑을 피할 수 있습니다.

7. 선택적 우회로: 언리얼 엔진에 넣기

똑같은 캐릭터를 그대로 게임 엔진에 넣을 수 있습니다. 바꿔야 할 것은 AccuRig에서 내보낼 때 언리얼 엔진 5 스켈레톤을 선택하는 것뿐입니다. 캐릭터와 모든 에셋을 UE5로 가져와 애니메이션을 기본 3인칭 블루프린트 템플릿에 리타게팅하고, 오브젝트를 교체하는 간단한 블루프린트를 만듭니다. 그다음부터는 당신의 게임 로직에 달려 있습니다.

같은 리그·UE5 스켈레톤: 3인칭 템플릿에 리타게팅하고 작은 블루프린트로 소품을 교체.

8. Claude Code + Google Stitch로 웹앱 만들기

제가 가장 재미있었던 부분입니다. 준비되고 리깅된 에셋을 GLB로 내보내고, Blender에서 각 오브젝트에 알맞은 이름을 붙인 다음, AI 코딩 에이전트에게 컨피규레이터를 만들게 합니다. 에이전트에게 건네는 핵심 맥락: 모든 에셋은 이미 하나의 아마추어 위에 이름과 함께 올라가 있으니, 보이기와 숨기기만 하면 된다는 것.

저는 Claude Code 를 두 개의 스킬 팩으로 구동합니다——커뮤니티 Designer Skills와 Google Stitch Skills——거기에 Stitch MCP를 더해, 비어 있는 새 프로젝트 폴더에서:

# In an empty project folder, add the skills to Claude Code:
npx -y skills@latest add julianoczkowski/designer-skills -y -a claude-code
npx -y skills@latest add google-labs-code/stitch-skills  -y -a claude-code

# Then connect the Stitch MCP (stitch.withgoogle.com -> Settings -> Setup MCP),
# and restart Claude so the new skills + MCP load.

여기서부터 디자인에서 앱까지의 파이프라인은 일련의 스킬입니다:

/grill-me → 브리프

먼저 /grill-me를 사용하고, 처음에 디자인에 집중하고 싶다고 명시한 뒤(스택 선정으로 빠지지 않도록), 질문 공세를 받게 둡니다. 나오는 것은 디자인 브리프. /design-brief가 그것을 진짜 디자인 문서로 바꿉니다. 제가 원한 건 에셋을 고르는 단순한 UI였는데——그 과정에서 제가 「스타일」, 즉 drip을 측정하고 있다는 걸 문득 깨달았습니다. 거기서 이름이 나왔죠: drip 미터가 달린 Some Serious Drip.

/stitch 디자인 시스템 → /stitch-loop

/enhance-prompt로 Stitch용 프롬프트를 다듬고, /stitch manage-design-system으로 토대를 세운 뒤, /stitch-loop——핵심 스킬——을 실행해 모든 화면(데스크톱 ＋ 모바일)을 디자인합니다. 여기서 서로 다른 디자인 시스템 여러 개를 탐색할 수도 있습니다.

/design-tokens → 계획 → 빌드

/design-tokens로 디자인에서 실제 변수를 생성하고, /frontend-design으로 빌드합니다. 제 가장 강력한 Claude Code 일반 팁: 먼저 계획하라. 구현 전에 /brief-to-tasks로 빌드를 깔끔한 작업 목록으로 쪼개세요——결과가 훨씬 안정적입니다. 그다음 작동하는 걸 지켜보고, 검토하세요.

/design-review → 수정

마지막으로 /design-review가 에이전트로 하여금 브리프, 디자인 문서, 앞서의 Stitch 콘셉트 화면에 비추어 자기 결과물을 비평하고, 발견한 문제를 고치게 합니다. 화면 크기 몇 개를 손으로 확인하면 끝입니다.

웹앱 흐름: Designer ＋ Stitch 스킬을 설치한 뒤 grill-me → design-brief → stitch-loop → design-tokens → brief-to-tasks → frontend-design → design-review 순으로 실행.

에이전트가 스스로 경로를 고친다

GLB가 하나의 아마추어 위에 명확한 오브젝트 이름과 함께 내보내졌기 때문에, 에이전트는 보이기/숨기기 로직을 스스로 연결합니다. 데이터——이름, 카테고리, 어떤 것이 스킨이고 어떤 것이 옷인지——를 주면 배선은 에이전트가 처리합니다.

9. 결과: Some Serious Drip

잠시 뒤, 앱이 나왔습니다. 프리셋을 고르고——touch grass, btc gold, chrome, wet slime——이 친구를 입히면, drip 미터가 그의 Drip, Chaos, Cringe, Aura를 실시간으로 다시 평가합니다. 몸 전체를 바꾸는 스킨으로 갈아입거나, 아이템을 벗기거나(「바지가 왜 필요해?」), 그리고 공유용 카드를 내보낼 수도 있습니다——제 것은 「The Quiet Flex」로 나왔습니다. 그다음 친구에게 보내면 됩니다. 멋지지 않나요?

완성된 컨피규레이터——프리셋, 실시간 drip 미터, 몸을 바꾸는 스킨, 그리고 원클릭 공유용 카드.

이 가이드의 데모는 TOP 3D AI에서 공개 중입니다. 개구리를 입히고, 핏을 랜덤으로 뽑고, 자신만의 카드를 내보내 보세요.

Some Serious Drip 열기

실제로 얻는 것

재사용 가능한 캐릭터 ＋ 옷장

리깅된 베이스 메시 하나와, 갈아입을 수 있는 AI 생성 에셋 라이브러리.

게임용 최적화

분리된 신체 부위와 머리 본 전용 액세서리——클리핑도 낭비도 없음.

엔진과 웹, 같은 소스

완전히 동일한 리그가 언리얼 엔진 5에도 브라우저 컨피규레이터에도 들어감.

하루면 출시하는 앱

당신의 GLB와 디자인 브리프로부터 AI 에이전트가 빌드하고 자가 검토.

이것이 전체 파이프라인입니다: 콘셉트에서 갈아입을 수 있는 리깅된 캐릭터, 그리고 공개된 웹앱까지, 하루 만에, 힘든 일은 AI에게, 가장 중요한 부분은 당신의 안목으로. 이렇게 캐릭터를 조립하는 새 도구는 끊임없이 등장합니다——등장하면 곧장 Arena 에 들어가니, 손대기 전에 비교해 볼 수 있습니다.