배경
- 전시 부스에 세우는 체험 앱이라 행사 3일이 전부였습니다. 배포하고 나서 천천히 고치는 방식이 통하지 않고, 첫날 결과가 나쁘면 그날 안에 판단해야 했습니다.
- 방문객은 부스 앞에 잠깐 서 있는 사람들입니다. 설치나 가입을 요구할 수 없고 스마트폰으로 열자마자 무엇을 할 수 있는지 보여야 했습니다.
- 전시장 네트워크는 느리고 불안정한데 3D 장비 모델을 띄워야 했습니다. 모델이 안 뜨면 체험 자체가 성립하지 않습니다.
- 부스와 별개로 프라이빗 이벤트장에서도 같은 서비스가 돌아야 했습니다. 두 장소에서 서버를 나눠 띄우는 구성이었습니다.
성과
3D 체험 화면을 저속 네트워크 전제로 구현
- 부스 전경과 장비 제품을 react-three-fiber로 띄웠습니다. 부스 모델 뷰어와 제품 모델 뷰어를 나누고, 화면을 벗어날 때 렌더러를 정리하는 컴포넌트를 따로 둬서 모바일에서 메모리가 누적되지 않게 했습니다.
- 모델을 두 방식으로 압축했습니다. 부스 모델은 Meshopt 디코더로, 제품 모델은 Draco 압축본으로 로드하고 진입 전에 미리 받아두도록 프리로드를 걸었습니다. 모델은 CDN에서 서빙하고 앱은 PWA로 감싸 재방문 시 다시 받지 않게 했습니다. 저속 회선에서 초기 로드를 줄이는 것이 3D 화면의 성패라고 봤습니다.
실시간 채팅을 라이브러리 없이 네이티브 WebSocket으로 구현
행사 중에도 배포해야 하는 상황을 전제로 연결 유지를 설계했습니다. 소켓을 모듈 싱글톤으로 두고 모든 화면이 하나의 연결을 공유하게 한 다음, 끊기는 경우를 종류별로 나눠 처리했습니다.
- 유휴 감지: 40초 동안 메시지가 없으면 ping을 보내고, 10초 안에 pong이 없으면 죽은 연결로 보고 재연결합니다. ping 시점에 지터를 줘서 여러 클라이언트가 동시에 몰리지 않게 했습니다.
- 재연결: 지수 백오프에 지터를 얹어 최대 5회 시도합니다.
- 배포 전환 대응: 블루그린으로 새 버전이 올라가는 중 끊긴 경우는 2~5초 사이로 분산해 다시 붙습니다. 전원이 동시에 재접속해 새 서버를 밀어버리는 것을 막기 위한 값입니다.
- 인증 오류 분기: 종료 코드 1008·4001·4003은 재연결 대상이 아니라 인증 실패로 보고 재시도를 멈춥니다. 끊긴 이유를 구분하지 않으면 인증이 만료된 클라이언트가 무한히 재접속합니다.
- 송신 재시도: 연결이 붙는 중에 보낸 메시지는 버리지 않고 3회까지 재전송합니다.
- 서버가 답변과 함께 UI 구성 요소를 내려보내는 형식(A2UI)을 화면에서 해석해 렌더하도록 붙였고, 음성 입력은 브라우저 음성 인식으로 받았습니다.
다국어와 첫날 데이터 기반 UI 개선
- 방문객이 한국어와 영어를 섞어 쓰는 환경이라 한국어·영어·일본어 3개국어를 넣었습니다. 실제로 3일간 오간 대화의 10% 정도가 영어였습니다.
- 첫날 운영 결과에서 접속 자체는 있었는데 채팅까지 들어오는 사람이 적다는 것이 드러났습니다. 화면은 잘 떴고 서버도 정상이었으니 기능 문제가 아니라 채팅이 있다는 걸 모르고 나가는 것으로 봤습니다.
- 채팅을 화면 전면에 배치하고 진입 단계를 줄였습니다. 무엇을 눌러야 대화가 시작되는지 고민할 필요가 없게 만드는 방향이었습니다.
- 다음 날 부스 쪽 신규 채팅 사용자가 1.5배로 늘었습니다. 같은 날 운영팀이 NFC 태그를 늘리고 스태프 안내도 강화해 전체 접속량도 두 배 이상 뛰었는데, 접속량 증가와 별개로 채팅 진입 비율 자체가 올라간 부분이 UI 변경 몫입니다.
두 장소의 사용 양상 차이를 확인
- 부스와 프라이빗 이벤트장의 대화를 나눠 보니 성격이 달랐습니다. 부스에서는 회사 소개와 제품 사양을 묻고, 이벤트장에서는 부스 위치나 전시 안내를 더 물었습니다.
- 이벤트장 쪽이 대화당 주고받는 메시지가 더 많았습니다. 잠깐 서서 쓰는 사람과 앉아서 쓰는 사람의 차이로 보고, 행사 마지막 날 부스 이용이 줄어든 뒤에도 이벤트장 쪽은 계속 쓰인 것과 같은 흐름으로 읽었습니다.
고정 IP 제약을 우회한 배포 자동화
- 프로덕션 서버가 고정 IP에서만 SSH를 허용해 일반 호스티드 러너로는 배포할 수 없었습니다. self-hosted 러너를 세워 main 푸시 시 소스를 동기화하고 프론트엔드 컨테이너만 재빌드·재기동하도록 파이프라인을 짰습니다. 행사 중 당일 개선을 반영하려면 배포 경로가 먼저 열려 있어야 했습니다.
결과
| 항목 | 값 |
|---|---|
| 담당 범위 | 본인 161/265 커밋. 방문객이 쓰는 화면 전체(3D·채팅·다국어) |
| 운영 | SEMICON Korea 2026, 3일 현장 운영 |
| 실사용자 | 약 1,500명 접속 |
| 챗봇 대화 | 100명 가까이 이용, 3일간 약 550개 메시지 (영어 대화 약 10%) |
| UI 개선 효과 | 개선 다음 날 부스 신규 채팅 사용자 1.5배 |
| 안정성 | 행사 3일간 배포로 인한 대화 끊김 접수 없음 |
| 3D 전송량 대응 | 부스 모델 Meshopt · 제품 모델 Draco 압축, CDN 서빙 + 프리로드 + PWA 캐싱 |
| 다국어 | 한국어·영어·일본어 3개국어 |
| 만족도 | 설문 8~10점 (응답 12건 중 점수 기입 4명이라 지표로 쓰지 않음) |
배운 점
- 기능이 동작하는 것과 사람이 쓰는 것은 다른 문제였습니다. 첫날 채팅 이용이 낮았을 때 서버 로그에는 이상이 없었습니다. 고칠 곳이 코드가 아니라 진입 경로였다는 걸 데이터를 나눠 보고서야 알았습니다.
- 3일밖에 없으면 첫날을 관측일로 써야 합니다. 완성해서 내놓고 끝내는 대신 첫날 데이터를 보고 다음 날 바꿀 수 있게 배포 경로를 미리 열어둔 것이 효과를 냈습니다.
- 끊기는 이유를 구분하지 않으면 재연결이 오히려 해가 됩니다. 인증 만료를 네트워크 단절과 같이 다뤘다면 만료된 클라이언트가 무한히 재접속했을 것이고, 전원이 동시에 붙었다면 새로 뜬 서버가 먼저 죽었을 것입니다. 지터와 종료 코드 분기가 필요했던 이유입니다.
- 같은 서비스인데 장소에 따라 쓰는 방식이 갈렸습니다. 서 있는 사람과 앉아 있는 사람에게 필요한 화면이 다르다는 걸 데이터로 확인한 첫 경험입니다.