RicoCheesethe studio log · v2.0
Live · KRRead posts
목록으로
뉴스PUBLISHED · 2026년 5월 19일·13 MIN READ

DEV 유저 둘. 다른 나라. 이상하고 작은 아바타 프로젝트.

두 나라에 사는 개발자가 3D VRM 아바타 협업 프로젝트를 v2로 업그레이드하면서 겪은 과정 — 아키텍처 변화, 기괴한 애니메이션 버그, 그리고 사이드 프로젝트가 작은 엔진이 된 이야기.

#webdev#nextjs#sideprojects#react
Two DEV Users. Two Countries. One Weird Little Avatar Project.

몇 달 전, @webdeveloperhyper와 나는 두 개의 VRM 아바타가 3D 씬 안에서 서로 대화하는 작은 사이드 프로젝트를 만들었다.

당시엔 그냥 재미있는 걸 만들어보려는 것뿐이었다. 다른 나라에 사는 두 개발자가 인터넷을 통해 이상하고 작은 애니메이션 캐릭터를 서로 상호작용하게 만드는 것. 솔직히 그냥 왜 안 돼? 하는 마음이었다.

그때 프로젝트는 훨씬 단순했다. 대화 시스템, 몇 가지 VRM 애니메이션, 몇 가지 제스처, 그리고 아바타가 애니메이션 중간에 이상한 포즈로 굳어버리는 걸 막으려고 꽤 많은 시간을 썼다.

거의 다 됐다고 생각했다.

완전히 틀린 생각이었다.

어느새, 프로젝트가 살아있는 것처럼 되어버렸다 #

사이드 프로젝트의 재미있는 점은 좀처럼 통제된 상태를 유지하지 않는다는 것이다.

하나를 고치면 새 아이디어가 하나 생기고, "작은 기능" 하나를 추가하다 보면 어느새 주말 실험이 실제 시스템처럼 움직이기 시작한다.

여기서 벌어진 일이 정확히 그랬다.

오피스 생활, 일본어 공부, 엔지니어링 업무, 인터뷰 준비, 마케팅 사이드 퀘스트, 그리고 뇌가 과열되지 않게 어른으로 살아남으려 애쓰는 동안 — WDH는 마치 수면 부족한 VRM 마법사처럼 조용히 프로젝트를 발전시키고 있었다.

며칠마다 이런 메시지를 받곤 했다.

"음악이랑 음악 버튼 추가했어. 그리고 푸시했어."

또는

"모바일 말풍선 레이아웃이랑 반응형 아바타 포지셔닝 고쳤어."

아니면 그냥:

"고쳤어. 푸시했어."

그런데 어떻게 된 일인지 프로젝트는 계속 더 멋있어지고 있었다.

아바타가 스크립트대로 움직이는 느낌이 사라졌다 #

v2에서 가장 큰 변화 중 하나는 캐릭터가 단순히 명령에 따라 애니메이션을 재생하는 오브젝트처럼 느껴지는 걸 벗어난 것이다.

이제 아바타들은 실제로 반응한다.

자연스럽게 눈을 깜빡인다. 움직임을 따라간다. 듣는 동안 시선이 옮겨간다. 상대 캐릭터가 말하는 동안 반응한다. 작은 디테일이지만 기묘하게도 중요한 것들이다.

알고 보니 인간은 생명의 작은 신호에 매우 민감하다.

정적인 모델은 즉시 죽은 것처럼 느껴진다.

하지만 다음을 추가하면:

  1. eye tracking
  2. idle movement (유휴 상태 움직임)
  3. 미세한 딜레이
  4. 작은 반응
  5. 표정

…갑자기 뇌가 그것을 기하학적 오브젝트가 아닌 캐릭터로 받아들이기 시작한다.

그 전환이 예상보다 훨씬 더 흥미로웠다.

어느 시점엔 대부분의 사용자가 의식적으로는 알아채지 못할 아주 작은 제스처 타이밍을 조정하는 데 비합리적일 만큼 많은 시간을 썼다.

그런데 그게 인터랙티브 시스템의 마법이기도 하다.

눈에 보이지 않는 디테일이 대개 핵심을 담당하고 있다.

아키텍처도 조용히 더 흥미로워졌다 #

첫 번째 버전은 대부분 "일단 돌아가게 만들기"에 관한 것이었다.

두 번째 버전은 오케스트레이션(orchestration)에 관한 것이 됐다.

이제 씬은 다음을 처리한다:

  1. 대화 시퀀싱
  2. 애니메이션 조율
  3. 배경 전환
  4. 음악 제어
  5. 표정 타이밍
  6. 반응형 레이아웃
  7. 의상 전환
  8. 분기형 인터랙션

그렇게 되자 하드코딩으로 동작을 정의하는 방식은 금세 한계에 부딪혔다.

거대한 조건문 체인을 여기저기 늘어놓는 대신, 대화 자체를 구조화된 데이터로 만들었다.

각 대화 항목이 다음을 알고 있다:

  • 누가 말하는지
  • 어떤 애니메이션이 재생되는지
  • 어떤 표정이 등장하는지
  • 타이밍이 어떻게 동작해야 하는지

덕분에 모든 게 스파게티로 무너지지 않고 시스템을 훨씬 쉽게 확장할 수 있게 됐다.

아이러니하게도, 프로젝트가 더 놀이처럼 될수록 깔끔한 시스템 사고가 더 중요해졌다.

스마트폰 화면에 표시된 세계 국기 이모지들 — 두 나라의 협업 Photo by Tim Witzdam on Pexels

가장 웃긴 버그는 항상 애니메이션 관련이었다 #

아바타를 다루다 보면 언젠가 반드시 끔찍한 일이 벌어진다는 법칙이 어딘가에 있는 것 같다.

여러 시점에서:

  • 팔이 인류에게 알려지지 않은 차원으로 회전했다
  • 눈 깜빡임이 고장 나서 수면 마비 같은 아바타가 만들어졌다
  • 제스처 전환이 폭력적으로 끊겼다
  • 어떤 애니메이션은 중간 포즈에서 얼어버렸는데, 캐릭터가 삶을 포기한 것처럼 보였다

전형적인 사이드 프로젝트 경험이다.

기묘하게도 그 순간들이 프로젝트에서 가장 기억에 남는 장면들이 됐다.

버그를 고칠 때마다 아바타가 조금씩 더 실제처럼 느껴졌기 때문이다.

이 모든 일이 일어나는 동안, @webdeveloperhyper는 훨씬 더 큰 것을 만들고 있었다 #

솔직히 이 부분이 가장 존경스럽다.

협업 프로젝트로 실험하는 동안, WDH는 AI Avatar라는 걸 따로 만들고 있었다 — VS Code와 Chrome 확장으로, VRM 아바타가 AI 활동에 반응하고, 작업하는 동안 애니메이션이 동작하고, 커서를 따라다니고, 표정을 트리거하고, 말풍선으로 말하며, 작고 혼돈스러운 코딩 동반자처럼 곁에 존재하는 도구다.

흥미로운 점은 그게 영혼을 최적화하려는 과도하게 기업적인 "AI 생산성" 도구처럼 느껴지지 않았다는 것이다.

장난기 있게 느껴졌다.

인터랙티브 캐릭터를 진심으로 좋아하고, 기술이 조금 더 살아있고 개인적인 느낌이 되길 원하는 사람이 만든 것처럼.

그리고 그 마인드셋이 자연스럽게 협업 프로젝트에도 흘러들어왔다.

작은 인터랙션 디테일들, 반응성 아이디어들, 애니메이션 처리 개선들, 그리고 계속 실험하려는 사고방식 모두 이 시스템들을 더 깊이 탐구하는 과정에서 나왔다.

그래서 협업이 왜 중요한지 다시 한번 실감했다.

작업량만 나누는 게 아니다.

생각하는 방식을 나눈다.

프로젝트는 우연히 작은 엔진이 되었다 #

이게 아마 가장 이상한 깨달음이었다.

어느 시점에 이렇게 생각하는 걸 멈췄다:

"두 아바타가 대화하는 걸 만들고 있다"

그리고 깨닫기 시작했다:

"잠깐… 이거 재사용 가능한 인터랙션 시스템이 되고 있잖아."

이제 다음이 갖춰져 있다:

  • 분기형 대화
  • 모듈식 애니메이션 로직
  • 재사용 가능한 씬 오케스트레이션
  • 동적 반응
  • 설정 가능한 배경
  • 오디오 시스템
  • 반응형 UI 동작

이상하고 작은 사이드 프로젝트가 의심스러울 만큼 확장 가능한 모습을 갖추기 시작한 것이다.

하지만 솔직히, 가장 좋은 부분은 여전히 과정이었다 #

실제 코드는 물론 중요하다. 그런데 가장 기억에 남을 건 아마도:

  • 무작위 주말 디버깅
  • 시간대를 넘나드는 비동기 대화
  • 스크린샷을 주고받기
  • 재미있을 것 같다는 이유 하나로 이상한 아이디어를 테스트하기
  • 서서히 무언가가 개성을 얻어가는 걸 지켜보기

로드맵 압박도 없었다. 이해관계자 회의도 없었다. "비즈니스 가치 정렬"도 없었다.

그냥 호기심이 프로젝트를 앞으로 이끌었다.

그리고 솔직히, 그게 사이드 프로젝트가 계속 재미있는 이유일 것이다.

앞으로의 방향 #

v2는 여전히 시작처럼 느껴진다.

이미 다음 아이디어들이 떠돌고 있다:

  • 인터랙티브 스토리텔링
  • 사용자 트리거 반응
  • 분기형 씬
  • 미니 게임
  • 동적 대화
  • 더 표현력 있는 캐릭터

아니면 완전히 다른 무언가일 수도 있다. 이 시점에서 이 프로젝트들이 어디로 갈지 예측하려는 걸 멈췄다.

재미있는 건 만들면서 발견하는 것이다.

직접 해보고 싶은 분들을 위해 #

WDH가 공개 버전을 만들어뒀다:

이걸로 이상한 걸 만들면 알려달라고 한다.

어차피 그런 게 제일 좋은 아이디어이기 때문에.


이 글은 위 출처의 내용을 바탕으로 작성된 초안입니다. 원문의 의견과 정보를 그대로 전달하며, 별도의 견해를 포함하지 않습니다.