Overview

설치 없이 브라우저에서 즉시 플레이 가능한 WebGL 기반 FPS 퀴즈 게임. SNS 바이럴 전략으로 X 트렌드 진입을 달성했습니다.

WebGL 실행

설치 없이 브라우저에서 즉시 플레이

콘텐츠–플랫폼 분리

Unity 게임과 웹 배포 구조 분리 설계

유입 구조 설계

SNS 링크 기반 트래픽 생성 구조

렌더링 최적화

React.memo로 iframe 렌더링 최소화

Problem

설치 게임 구조 → 유입 차단

설치 필요 → 초기 대거이탈 예상
웹 유저 접근 불가 → 타겟 불일치 (SNS 유저 대상임)
게임 실행 방식과 유저 환경 불일치 (콘텐츠 존재 but 유통 구조 없음)

Solution

WebGL 기반 실행 구조

Unity → WebGL 빌드
브라우저 실행 환경 전환
설치 과정 제거

유입 구조 설계

SNS 링크 중심 구조
웹페이지 클릭 → 즉시 플레이
공유 가능한 콘텐츠 구조

구조 변경 핵심

콘텐츠 제작 → 배포 구조 설계
게임 → 서비스로 전환

Implementation

FPS 게임 로직 구현

이동 시스템 구현 (C#)
Trigger 기반 퀴즈 이벤트
정답 판별 로직

웹 플랫폼 구축

React 기반 페이지 구성
WebGL iframe 임베딩
Client–Server 분리

렌더링 최적화

문제: iframe 리렌더링 반복
해결: React.memo 적용 → 렌더링 1회로 제한

Problem Solving

3D 충돌 버그

문제: 이동 중 끼임 발생
원인: 공간 설계 기준 없음
해결: CAD 기반 구조 설계
결과: 재현 조건 확보 → 수정

테스트 구조 부재

문제: 반복 테스트 비효율
원인: 테스트 기준 없음
해결: 테스트 케이스 문서화
결과: 시간 50% 감소

테스트 케이스 예시
ID	조건	버그 여부	심각도	수정 완료
0001	1번방 입장 퀴즈	X
0002	1번방 복도 코너 회전	O. 끼임 발생	✮✮✮	O

유입 장벽 문제

문제: 게임 설치 필요
원인: 실행 환경 불일치
해결: WebGL 전환
결과: 즉시 플레이 환경 → 목표의 500% 트래픽 달성 → 트위터 대한민국 실시간 트렌드

렌더링 성능 저하

문제: iframe 지연
원인: 불필요 리렌더
해결: memo 적용
결과: 성능 개선 → 웹 형태로 제공 가능

Insight

유입은 기능이 아니라 구조

"유입"은 콘텐츠 품질과 무관. 접근 방식이 결정한다.

문제 해결 순서

재현 조건을 얼마나 정확하게, 빠르게 찾는지에서 시작해야 함.

스크린샷

Result

Outcomes

WebGL 전환 — 설치 장벽 제거 → 글로벌 접근 가능 환경 확보
SNS 트렌드 진입 — X 실시간 트렌드 달성 → 유입 목표 500% 초과
테스트 체계 구축 — 테스트 시간 50% 감소 → 개발 속도 개선
렌더링 최적화 — 불필요 렌더 제거 → 체감 성능 개선

Before / After Metrics

유입률 목표

50% → 500%

Before50%

After500%

테스트 소요 시간

100% → 50%

Before100%

After50% 감소

Unity FPS 퀴즈 게임 + WebGL 전환으로 유입 500% 달성