Two주 만에 Three.js와 실시간 음성 AI를 사용하여, 직접 걸어 들어가 대화할 수 있는 3D 세계로 구현한 성당(盛唐) 시대의 장안성

만약 당신이 말을 하는 성당(盛唐) 시대의 장안성에 걸어 들어가, 이백(Li Bai)과 시를 주고받고, AI 가이드의 안내를 받으며, 천수부(天枢府)에서 지기사(智机使)의 설명을 듣는다면 어떤 경험을 하게 될까요?

우리는 2주간의 고강도 개발을 통해 이 아이디어를 온라인에서 플레이 가능하고 오픈 소스로 재사용할 수 있는 브라우저 3D 인터랙티브 프로젝트로 만들어냈습니다.

온라인 체험: https://t.co/T63NGiFV36
GitHub 오픈 소스: https://t.co/QCI5lOdjDB

프로젝트 핵심 하이라이트:

• WASD 키를 사용하여 카메라만 돌려 모델을 보는 것이 아니라, 실제로 장안성을 "걸어 들어가는" 경험 제공
• 실제 음성 대화: 마이크를 누르고 있으면 이백(Li Bai), 두보(Du Fu), 지기사(智机使)와 채팅 가능
• 시(詩) 미니게임, 보물관, AI 전시관을 융합하여 역사와 AI 능력을 플레이 가능한 경험으로 변환
• 전체 오픈 소스 공개로 일반 크리에이터와 초보자도 복제 및 학습 가능

전체 프로젝트는 하나의 소박한 아이디어에서 시작되었습니다: 성당(盛唐) 시대의 장안성을 유랑하고, 대화하고, 게임을 즐기며, AI 능력을 보여줄 수 있는 3D 세계로 만드는 것.

개발 과정은 9단계로 나뉘며, 가장 핵심적인 노하우와 시행착오 경험을 모두 정리했습니다:

1. 먼저 볼만한 수준의 로우 폴리곤(Low-poly) 장안성 모형 구축 (Three.js 핵심 구축)

2. WASD 게임 모드를 추가하여 플레이어가 실제로 장안성을 "걸어 들어갈" 수 있게 함.

3. 수많은 NPC와 미니게임(비화령, 대련, 수수께끼 등 당나라 스타일의 놀이) 추가

4. 보물관, 시화 전시관을 제작하여 문화 콘텐츠를 인터랙티브 전시관으로 변환.

5. AI 브랜드를 당나라 스타일의 "천수부(天枢府) / AI 전시관"으로 만들어 현대의 AI가 성당(盛唐) 장면에 등장하게 함

6. Agora 실시간 음성 에이전트(Agent)를 연결하여 실제 음성 대화 구현 (가장 어렵고 핵심적인 부분).

7. 캐릭터 아바타, 비디오 패널, 고풍스러운 BGM을 추가하여 몰입감 향상

8. 3D 스케일, 브라우저 캐시, 음성 계정 등 흔히 발생하는 문제 해결

9. 최종적으로 GitHub Pages에 배포하여 누구나 클릭 한 번으로 체험 가능하게 함

음성 부분에는 Agora ConvoAI + Persona 설계를 사용했습니다. 각 NPC(이백, 두보, 왕유, 지기사 등)는 천편일률적인 로봇이 아니라 독립적인 성격, 음색, 대화 스타일을 가지고 있습니다.

일반 사용자는 링크를 클릭하기만 하면 바로 플레이할 수 있습니다:

WASD 이동 → NPC에게 다가가 E 키로 대화 → 전시관 입장 및 상호작용 → 음성 채팅

개발자가 복제하기에도 매우 친화적입니다: 코드 모듈화가 명확하며, 프론트엔드 Three.js와 백엔드 FastAPI가 분리되어 있고, 문서와 시행착오 기록이 매우 완벽합니다.

우리가 최종적으로 만들어낸 것은 단순한 3D 전시 페이지가 아니라, 소규모 디지털 문화 관광 + AI 능력의 샘플입니다:

역사 문화를 게임화하고, AI 능력을 시나리오화하며, 오픈 소스 프로젝트를 진정으로 공유할 수 있는 작품으로 만들었습니다.

성당(盛唐) 시대 장안의 AI 버전을 체험하고 싶으신가요?
링크를 클릭해 들어가서 이백과 음성으로 시를 주고받거나, 지기사에게 실시간 음성 기술에 대한 설명을 들어보세요.

관심 있는 분들은 좋아요를 누르거나, 가장 플레이해보고 싶은 부분을 댓글로 남겨주시거나, 직접 GitHub에서 코드를 복제해 보세요.

#Threejs