仮想空間ソーシャルサービス
アバターを着飾ってカンファレンスホール・野外ステージのようなテーマ空間に集まり、そこで講演・集まり・公演を開く仮想空間ソーシャルサービスで、通常のアプリ画面を開発しました。3D空間は3Dエンジンが、アカウント・ホーム・ルーム入室といったサービス画面はアプリが担う構造で、両者が画面遷移とアプリの状態に同時に関わります。境界がずれると、ユーザーが見ている画面とアプリが把握している状態が食い違います。作業はサービス画面の開発、3D空間とアプリ画面の境界調整、100人を超えるチームとの協業にわたります。
3D空間はエンジンに、サービス画面はアプリに任せた役割分担
仮想空間ソーシャルアプリには、アバターが動く3D空間と、アカウント・ホーム・ルーム入室・イベント・設定といった通常のアプリ画面が一つのアプリの中に共存しています。ユーザーはアバターの服装と体形を選び、テーマを選んでルームを開くか、ほかの人が開いたルームに入って資料を映しながら話します。3D空間は3Dエンジンが描き、サービス画面はアプリが直接描くよう、両者の役割を分けました。ホームでルームを選んで入り、ルームから出てホームに戻る流れが、二つの領域を行き来しても自然につながるよう構成しました。

ルームに入る瞬間、3D空間とアプリ画面がかみ合う境界
仮想空間アプリでは、3D空間への進入、アプリ画面の遷移、接続セッションの状態、アプリがバックグラウンドに回って戻る変化が、それぞれ別の側で起きます。この四つが同じ瞬間に重なると互いに衝突しうるため、3Dエンジンとアプリが接する境界領域を調整しました。アプリ側の機能開発を担いながら、3D空間とアプリ画面の役割が混ざらないよう、この区間も扱いました。

信号がどの順で届いても追える画面の状態
仮想空間アプリでは、ログイン状態、ルーム入室状態、ネットワーク応答、3Dエンジンの初期化のタイミングがそれぞれ別の時に届きます。画面ごとにユーザー入力・サーバー応答・画面状態の変化を入力と出力に分けて同じ枠で組んだため、どの信号が先に来ても、画面の状態がどこで変わったかを追えます。この枠は、その後ほかのプロジェクトで画面構造を設計する基準になりました。

100人を超えるチームで先に決めた担当領域と接点
仮想空間ソーシャルサービスは、アプリ開発者に3D・サーバー・企画・QAまで加えた100人を超えるチームで作りました。同じプラットフォームのアプリ開発者だけで7〜8人いました。変更が複数のプラットフォームにまたがる機能は、担当領域と互いにやり取りする接点を先に分けてから開発し、プラットフォームごとに異なる動きは合わせながら調整しました。

この仕事のポイント
アカウント・ホーム・ルーム入室・イベント・設定など仮想空間のサービス画面開発
3D空間への進入とアプリ画面の遷移がぶつからないよう合わせた境界
ログイン・ルーム入室・3D初期化が前後して届いても追える画面の状態
インサイト
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



