이소진의 포트폴리오
개발 | 기획 | 디자인
Unity FPS 퀴즈 게임 + WebGL 기반 글로벌 바이럴 전략
최근수정일: 2026. 03. 31
project thumbnail
역할
Unity 게임 개발, 배포 구조 설계, 웹 플랫폼 구축, 프로모션 기획 (개인 프로젝트)
기여
Unity 기반 FPS 퀴즈 게임 단독 개발, 웹 기반 즉시 플레이 환경 구축, SNS 트렌드 진입 (X (구 트위터))
기간
2022. 03 - 2022. 06 (4개월)
기술
C#, React, JavaScript, Styled Components, Adobe Photoshop, Adobe Illustrator, Adobe Premiere Pro, Unity
C#
React
JavaScript
Styled Components
Adobe Photoshop
Adobe Illustrator
Adobe Premiere Pro
Unity
프로젝트 개요
한 줄 정의
설치 없는 WebGL 게임 배포 → SNS 기반 확산 구조 설계
핵심 성과
  • X(트위터) 대한민국 실시간 트렌드 진입
  • 웹 접근 기반 플레이 구조 구축
문제 정의
  • PC 설치 기반 게임 → 유입 장벽 존재
  • 글로벌 유저 접근성 제한
  • 콘텐츠는 완성됐으나, 유통 구조 부재
해결 전략
  • WebGL 기반 실행 구조
  • SNS 링크 기반 접근 설계
  • 콘텐츠–플랫폼 분리
본문 이미지
서비스 구조 다이어그램 (WebGL + React)
  • Unity 실행 → WebGL 빌드
  • React → iframe embedding
  • Client–Server 분리 구조
주요 구현
  • FPS 기반 이동 시스템 구현
  • Trigger 기반 퀴즈 이벤트 설계
  • 정답 판별 로직 구축
  • React 웹 플랫폼 구축
  • WebGL iframe 임베딩 구조 적용
문제 해결 및 개선
3D 공간 충돌 버그
  • 문제: FPS 이동 중 오브젝트 끼임 현상 발생
  • 원인: 공간 설계 부족, 오브젝트 배치 기준 없음
  • 해결: CAD 기반 공간 구조 설계 / 이동 동선 시나리오 문서화 (excel)
  • 결과: 버그 재현조건 확인 및 수정
본문 이미지
테스트 시간 부족 문제
  • 문제: 테스트/검증할 시간 부족
  • 원인: 테스트 케이스 미정의로 인한 무의미한 반복업무, 기록 시스템 부재
  • 해결: 테스트 케이스 작성 → 수행 및 수정 여부 기록
테스트 케이스 문서 예시
ID조건버그 여부심각도수정 완료
00011번방 입장 퀴즈X
00021번방 복도 코너 회전O. 끼임 발생✮✮✮O
  • 결과: 테스트 예상 시간 50% 감소
  • 인사이트: 버그 수정에는 재현 구조를 세우는 게 핵심이다
유입 장벽이 높음
  • 문제: 게임 앱 설치 필요 → 초기 대거이탈 예상됨
  • 원인: K-POP을 주제로 한 게임이므로 타겟층이 웹환경에 포진됨
  • 해결: Unity + WebGL 기반 브라우저 실행으로 전환
  • 결과: 즉시 플레이 환경 구축
본문 이미지
콘텐츠 확산 전략
  • 문제: 사용자 유입 전략이 부재
  • 원인: 공유/프로모션 구조 미설계
  • 해결: SNS를 통한 링크 기반 유입 구조 설계, 포스터 / 티저영상 등 홍보 자료 제작
  • 결과: X(트위터) 실시간 트렌드 진입
  • 인사이트: 유통 구조로써 트래픽은 만들 수 있다
본문 이미지
iframe 렌더링 성능 저하
  • 문제: iframe 포함 페이지 렌더링 지연
  • 원인: 불필요한 리렌더링이 다수 발생
  • 해결: React.memo 기반 렌더링 최적화
  • 결과: 렌더링 횟수 1회로 제한, 체감 성능 개선
  • 인사이트: 프론트엔드 성능은 상태관리에 영향 많이 받는다.
성과
  • WebGL 기반 게임 배포 구조 구축
  • 글로벌 접근 가능 환경 구현
  • SNS 트렌드 진입
  • 유입률 목표의 500% 달성
인사이트
  • 접근성/프로모션 설계로 유입을 만들 수 있음
  • 콘텐츠보다 유통 구조가 중요
  • 구조적 설계가 사용자 경험을 만든다
스크린샷
screenshot-thumbnail
screenshot-0