Next.js + Three.js로 3D 캐릭터 기반 사주 서비스(Beta)를 만들었습니다.

안녕하세요. 최근 개인 프로젝트로 3D 기반의 운세 서비스를 개발하여 공유드립니다.

단순한 텍스트 위주의 사주 사이트에서 벗어나, Three.js를 활용해 12지신 캐릭터가 직접 운세를 알려주는 인터랙티브한 웹 서비스를 만들어보고 싶었습니다.

[기술 스택 및 구현 내용]

• Frontend: Next.js, Three.js (React-Three-Fiber), Tailwind CSS

• Backend: Supabase (Auth, Database)

• AI/Integration: Azure TTS (음성 합성), 명리학 로직 연동

• Modeling: Blender (GLB Export, 최적화)

[공유하고 싶은 포인트]

• 3D 웹 최적화: 모바일에서도 가볍게 돌아가게 하기 위해 GLB 모델 용량 최적화와 WebGL 렌더링 최적화에 신경을 많이 썼습니다.

• 경험 공유: 블렌더 모델링부터 웹 통합까지 1인 개발로 진행하면서 겪었던 기술적 트러블슈팅 과정을 블로그(링크)에 기록 중입니다.

[직접 링크]

• 서비스 주소: https://play.google.com/store/apps/details?id=com.cheri.saju

직접 하나부터 열까지 구현해보면서 웹에서의 3D 표현 가능성을 많이 느꼈습니다. 디자인이나 기능적으로 부족한 점이 많겠지만, 개발자분들의 냉철한 피드백을 주시면 서비스 완성도를 높이는 데 큰 도움이 될 것 같습니다.

시간 되실 때 한번 구경해주시고, 의견 남겨주시면 감사하겠습니다!