프로젝트 개요
예비 대학생을 위한 학교 홍보용 인터랙티브 보드게임 형식의 웹게임입니다. 플레이어는 주사위를 굴려, 각 칸에서 발생하는 총 30개의 이벤트를 통해 대학 생활을 간접 체험합니다. 선택지에 따라 스탯이 변화하며, 최종 스탯 조합에 따른 다양한 엔딩을 볼 수 있습니다.
2명의 개발팀, 3명의 시나리오 및 디자인팀이 진행한 팀 프로젝트입니다. 저는 개발팀에 속했으며, 팀 리더로서 프로젝트 아이디어 제시 및 개발팀 및 시나리오/디자인 간 소통 조율을 담당했습니다.
대학 2학년 때 진행한 저의 첫 프로젝트로, 기술 스택이 다소 단순하지만 리소스 로딩 최적화와 효율적인 자료구조 구현에 있어서 기틀을 쌓을 수 있게 해준 소중한 프로젝트입니다.
문제 해결
1. 리소스 로딩 성능 최적화
문제: 각 칸의 이벤트에 사용되는 이미지와 사운드를 실시간으로 로드할 경우, 매번 1초 이상의 로딩 대기 시간이 발생하여 게임 몰입도가 크게 저하되었습니다.
해결: 게임 시작 전 p5.js의 preload() 함수에서 15MB의 전체 이미지 및 사운드 리소스를 사전 로드하도록 구현했습니다.
결과: 이벤트 로딩 시간을 1초에서 0.1초 이하로 단축(90% 개선)하여 끊김 없는 게임 플레이를 실현했습니다.
2. 클래스를 사용한 이벤트 생성 협업 효율 향상
문제: 30개 이벤트를 각각 함수로 구현하여, 이벤트 추가·수정 시마다 개발자가 직접 코드를 작성해야 해 협업 병목이 발생했습니다.
해결: 이벤트 처리 로직은 클래스로 구현하고, 콘텐츠(메시지, 선택지, 스탯 변동값)는 데이터 배열로 분리했습니다. 새 이벤트 추가 시 배열에 데이터만 입력하면 클래스가 UI 렌더링부터 스탯 계산까지 자동 처리합니다.
결과: 디자인 및 시나리오팀도 데이터 배열만 수정하면 개발자 개입 없이 이벤트 추가·수정을 할 수 있게 되어, 협업 효율이 크게 향상되었습니다.