🕹️
전시 현장에서 사흘 내내 도는 앱이라, 3D가 무겁지 않게 뜨고 실시간 연결이 끊겨도 스스로 복구되는 안정성이 기능보다 먼저였습니다.
배경
반도체 전시회(SEMICON Korea 2026, 코엑스) 3일 일정의 부스 체험용 브라우저 앱입니다. 방문객이 부스 화면에서 직접 조작하는 키오스크성 앱이라, 3D 렌더링·실시간 AI 채팅·음성 입력이 한 화면에서 끊김 없이 돌아가야 했습니다. 4인 팀에서 프론트엔드를 거의 전담했습니다.
한 일
- 3D 부스·제품 뷰어 직접 구현: GLTF 기반 부스/제품 뷰어를 react-three-fiber로 구현. drei의 Environment·ContactShadows·MeshReflectorMaterial·OrbitControls로 전시장 느낌의 반사·그림자를 주고, 모델은 meshoptimizer로 압축 디코딩해 CDN에서 로드. DPR을 2로 제한하고 프리로드해 저사양 기기에서도 초기 로딩이 무겁지 않게 했습니다.
- 끊겨도 스스로 복구되는 실시간 채팅: 모듈 레벨 싱글톤 네이티브 WebSocket 위에 keep-alive(40s ping / 10s pong), 지수 백오프(최대 5회)·전송 재시도(3회)를 얹었습니다. 특히 블루그린 배포로 연결이 끊기는 경우를 별도 재연결 경로(2~5초 분산 대기)로 다뤄 배포 중에도 대화를 잃지 않게 했고, 종료 코드(정상·비정상·인증 실패 4001/4003 등)를 구분해 처리했습니다.
- 에이전트 응답을 화면으로: A2UI·음성 입력: 봇이 구조화 UI(A2UI)를 내려주면 동적으로 렌더(액션 카드·링크 미리보기·진행 상태·추론 과정). Web Speech API로 음성 입력(ko-KR, 실시간 중간 결과)을 붙여 키보드 없이 말로 질문할 수 있게 했습니다.
- 전시 환경 대응: 부스 안내 인터랙티브 맵, 제품 상세·기능 패널을 구성하고 PWA(next-pwa)와 3개 국어(next-intl: ko·en·ja)를 적용, 전역 상태는 Zustand로 관리했습니다.
결과
- ko·en·ja: 3개 국어 (next-intl)
- 40s / 10s: ping / pong keep-alive
- ×5: 지수 백오프 재연결
3D·실시간 채팅·음성을 한 화면에서 안정적으로 돌리는 전시용 앱을, 프론트엔드 거의 전부를 직접 구현해 사흘 행사 동안 운영했습니다.
정리
화면이 화려한 것보다, 현장에서 끊기지 않는 것이 핵심인 앱이었습니다. 그래서 3D는 압축·프리로드로 가볍게, 실시간 연결은 배포·네트워크 단절까지 가정해 스스로 복구되도록 설계하는 데 가장 공을 들였습니다.