Awards Racing은 Ecofuture Technology Services가 만든 브라우저 드리프트 레이싱 게임입니다. 디자인 소프트웨어 아이콘이 붙은 블록을 부수고 좋아요를 모으면서 심사위원과 라이벌을 피하는 규칙입니다.
2026년 9월 9일 FWA of the Day(84점)를 받았고, 9월의 FWA of the Month도 받았습니다. Awwwards에서는 Honorable Mention입니다.
아래 숫자는 모두 rickcreates의 기술 해부 리포트에서 가져왔습니다. 저희가 다시 재지는 않았습니다. 화면과 영상은 awards.racing을 직접 열어 녹화한 것입니다.
그림: awards.racing
영상: awards.racing 플레이 화면에 저희가 자막을 입혔습니다
게임은 WebGL2와 WebGPU 두 경로를 가진 자체 렌더러로 돌아갑니다. 셰이더는 GLSL과 WGSL로 하나씩 따로 썼고, 기본은 WebGL2입니다.
핵심은 WEBGL_multi_draw입니다. 상자와 컵 같은 물리 오브젝트를 종류별로 따로 그리지 않고 한 번에 묶어 그립니다. 장면 패스에서 한 번, 그림자 패스에서 한 번이라서 프레임당 두 번입니다. 물체 종류는 34가지이고, 종류마다 자리가 최대 300개입니다. 실제로는 차고에서 약 92개, 레이스 중에는 290–415개가 화면에 있습니다.
다만 전부가 두 번은 아닙니다. 땅과 자동차, 캐릭터, 효과, 후처리는 일반 그리기 호출로 나가고, WebGL2에서는 프레임당 80–145번입니다. WebGPU 경로는 종류별로 따로 그려서 139–149번입니다. 두 번이라는 말은 물리 오브젝트에만 해당합니다.
- 물체 34종 → multi-draw 호출
- multi-draw 호출 → 장면 패스
- multi-draw 호출 → 그림자 패스
영상: 리포트의 수치로 저희가 만든 설명 영상입니다
첫 방문 때 받는 파일은 약 23.2–23.7MB이고 요청은 약 332번입니다. 가장 큰 덩어리는 이미지(9.6MB)이고, 두 번째가 MP3(8.1MB)입니다. MP3는 곡당 1–1.5MB짜리 여섯 곡이고, 소리를 꺼도 내려받습니다.
3D 모델은 .glb 파일 네 개를 합쳐 1.9MB입니다. 메인 스크립트는 2.5MB(압축하면 0.7MB)이고, 분석이나 광고 스크립트는 없습니다. 휴대폰도 같은 파일을 받습니다. 아래 막대는 큰 덩어리 넷이고, 이 밖에 파일이 더 있어서 합계가 약 23.2–23.7MB입니다.
첫 방문 다운로드의 큰 덩어리
| 이미지 | 9.6 |
| MP3 6곡 | 8.1 |
| 스크립트 | 2.5 |
| 3D 모델 4개 | 1.9 |
영상: 리포트의 수치로 저희가 만든 설명 영상입니다
캐릭터에는 뼈대(스켈레톤)가 없습니다. 질점 여러 개를 스프링으로 이은 구 모양이고, 프레임마다 제약을 4번 풀어서 찌그러지고 늘어나는 느낌을 냅니다.
물리는 Bullet을 C++로 감싸 WebAssembly(240KB)로 돌립니다. 기기에 따라 초당 60번이나 90번 계산합니다. 가만히 놓인 물체는 격자 칸에 두었다가 부딪혔을 때만 깨웁니다.
로딩 화면에는 만든 도구가 적혀 있습니다. three.js, Bullet3, GSAP, Vue.js, Vite, Howler.js, nippleJS, Tweakpane입니다.
그림: awards.racing
리포트의 측정으로는 차고와 레이스 모두 60fps였고, 레이스 중 33ms를 넘는 프레임은 없었습니다. 캔버스는 데스크톱에서 1배, 휴대폰의 기본 최저 품질에서 0.85배로 그립니다.
그래픽은 그림자 맵, 지연 조명, 투명한 물체용 별도 패스를 거치고, 후처리로 블룸이 5단계 들어갑니다.
| 프레임률 | 60fps (차고, 레이스) |
| 가장 느린 프레임 | 33ms 이하 (레이스) |
| 캔버스 배율 | 데스크톱 1배, 휴대폰 0.85배 |
| 첫 화면 표시(FCP) | 1.3~1.6초 |
| 첫 방문 다운로드 | 약 23.2~23.7MB |
영상: awards.racing 차고 화면에 저희가 자막을 입혔습니다
솔직히 이 글은 요즘 뜨는 것을 다루지 않습니다. 어워드 수상작 하나의 속을 숫자로 볼 수 있는 드문 기회라서 골랐습니다.
눈에 들어온 건 두 가지입니다. 하나는 그리기 호출을 줄이는 방식이고, 다른 하나는 약 23MB 중 MP3가 8.1MB라는 점입니다. 소리를 켜기 전에는 받지 않게 미룰 수 있었을 텐데, 왜 그렇게 하지 않았는지는 리포트에도 없어서 아직 모릅니다.
저라면 우리 3D 화면에서 프레임당 그리기 호출이 몇 번인지부터 세어 보겠습니다. 다만 이 숫자들은 리포트 한 곳이 잰 값입니다. 기기와 네트워크에 따라 달라질 수 있습니다.