DEV 친구와 내가 두 아바타에 생명을 불어넣다

Source: Dev.to

(번역할 텍스트가 제공되지 않았습니다. 번역이 필요한 본문을 알려주시면 한국어로 번역해 드리겠습니다.)

협업이 시작된 계기

저는 DEV Community에서 @webdeveloperhyper를 만났고, 대부분의 좋은 인터넷 협업처럼 이것도 자연스럽게 시작되었습니다.

몇 차례의 메시지. 약간의 피드백. 귀중한 조언.

그러다 어느 순간, 대화가 “멋지다”에서 “함께 재미있는 무언가를 만들자”로 바뀌었습니다.

우리는 과하게 계획하지 않았습니다. 그냥 만들기 시작했죠.

그들은 일본에, 저는 인도에 있었습니다. 이는 이 프로젝트의 대부분이 짧은 시간대—늦은 밤, 하루 중 무작위 20분 창, 몇 시간 간격으로 주고받는 메시지—에 이루어졌다는 뜻이었습니다. 진행 상황은 눈에 띄게 보이지 않았지만 조용히 쌓여갔습니다.

어쩐지, 잘 되었습니다.

기본 형태에서 실제 아바타까지

The project은 다듬어진 캐릭터로 시작하지 않았습니다. 장면에 단순한 형태만 있었고, 이는 위치, 카메라, 기본 상호작용을 테스트하기 위한 자리 표시자에 불과했습니다.

아이디어는 간단했습니다: 두 캐릭터, 짧은 대화, 약간의 애니메이션.

단순한 아이디어는 흥미로운 문제를 숨기곤 합니다.

내 첫 번째 실제 작업은 VRoid Studio를 사용해 아바타 자체를 만드는 것이었습니다. 이것만으로도 큰 학습 곡선이 있었습니다. 가져온 뒤, 아바타는 캐릭터처럼 행동하지 않았고—정적인 객체처럼 행동했습니다.

기본 자세는 T‑포즈였습니다: 팔을 뻗은 채 완전히 생명력이 없었습니다. 이를 고친 것이 첫 번째 작은 승리였으며—아바타를 중립 자세, 손을 내리고 자연스럽게 서 있는 상태로 만들었습니다.

사소해 보이지만, 그 순간 아바타는 모델처럼 보이던 것이 캐릭터처럼 보이기 시작했습니다.

그 뒤로 우리는 제스처를 층층이 추가하기 시작했습니다:

• 인사 애니메이션
• 작별 애니메이션
• 대화 중 작은 움직임
• 내가 가장 좋아하는 디테일 중 하나가 된 한숨 애니메이션

또한 기본 제스처를 직접 오버라이드하려다 실패한 시도가 있었는데, 이를 통해 애니메이션 시스템마다 자체 규칙이 있다는 것을 빠르게 깨달았습니다.

Writing the conversation was harder than expected

놀랍게도 가장 어려운 부분 중 하나는 기술적인 것이 아니라 대화를 직접 쓰는 것이었습니다.

• 짧게.
• 자연스럽게.
• 약간은 재밌게.
• 로봇처럼 보이지 않게.

대사가 너무 길면 억지스럽게 느껴지고, 너무 짧으면 빈칸처럼 느껴집니다. 너무 진지하면 매력이 사라지고, 너무 우스꽝스럽으면 신뢰성이 떨어집니다.

그 균형을 찾는 데 예상보다 더 많은 반복이 필요했습니다. 여전히 펀치라인이 더 나아질 수 있다고 생각하지만, 그것도 좋은 점일 수 있습니다—진화할 여지를 남겨두니까요.

아바타 렌더링이 시스템 문제로 변할 때

아바타 렌더링은 최신 도구로는 간단합니다. 진짜 도전은 행동을 조율하는 것이었습니다.

우리는 씬이 다음을 관리하도록 필요했습니다:

• 누가 말하는지
• 어떤 애니메이션이 재생되는지
• 언제 시작하는지
• 언제 끝나는지
• 언제 다음 캐릭터가 인계받는지

행동을 하드코딩하는 대신, 대화를 구조화된 데이터로 정의했습니다:

const DIALOGUE = [
  {
    speaker: "A",
    text: "I'm Web Developer Hyper. I like to make fun things.",
    animation: "VRMA_03_peace_sign.vrma",
  },
  {
    speaker: "B",
    text: "Hello! I'm Itsugo. And I like turning ideas into something real.",
    animation: "VRMA_04_shoot.vrma",
  },
];

씬은 이 순서를 단순히 해석합니다. 이러한 분리는 시스템을 더 쉽게 제어하고, 확장하며, 이해할 수 있게 만들었습니다. 행동을 강제하는 것이 아니라, 우리는 그것을 조율했습니다.

조정 문제

Animations don’t naturally tell your application when they finish, but timing matters. The next line shouldn’t interrupt too early, and the system shouldn’t freeze if something goes wrong.

So the dialogue system waits for either:

• animation completion or
• a safe timeout fallback

Whichever happens first.

This tiny decision made the system resilient. Small systems thinking like this often matters more than large features.

여기서 확인해 보세요!

협업의 보이지 않는 부분

이 프로젝트를 의미 있게 만든 것은 최종 결과만이 아니라 과정이었습니다.

• 애니메이션 타이밍 수정
• 불필요한 코드 정리
• 가독성 향상
• 제스처 강도 조정
• 초보자 친화적인 주석 추가

이 모든 작업을 서로 다른 시간대에 진행했습니다.

Huge thanks to @webdeveloperhyper for setting up the foundation, pushing the project forward, and tolerating my questionable Japanese during our conversations (ˉ▽ˉ；)… This project exists because of that shared effort and patience.

다음에 어디까지 갈 수 있을까

지금은 두 아바타가 대화하고 있을 뿐이지만, 이미 뭔가 더 큰 것의 시작처럼 느껴집니다:

• 인터랙티브 캐릭터
• 스토리 시스템
• 동적 대화
• 아직 생각조차 못한 무언가일지도

그리고 이것이 실제 질문으로 이어집니다:

우리는 어떻게 앞으로 나아가야 할까요?

다음에 이 프로젝트가 나아갈 수 있는 몇 가지 아이디어, 하지만 멋진 팔로워들의 의견을 듣고 싶어요

이 프로젝트를 어떻게 재미있게 활용하고 싶나요?
얼마나 비현실적으로 들리든, 이 사이드 프로젝트와 함께 즐겨봅시다.

Closing

이 프로젝트는 온라인에서 만난 두 개발자 사이의 작은 실험으로 시작되었습니다.
사이드 프로젝트가 왜 중요한지를 일깨워 주는 계기가 되었습니다.

• 완벽해서가 아니라.
• 살아있기 때문에.

그리고 때때로, 그것만으로도 의미 있는 무언가를 시작하기에 충분합니다.