첫 화면이 뜨기까지: 19.6초를 8초로
처음 들어온 사람은 시뮬레이터가 첫 장면을 그릴 때까지 19.6초 동안 빈 화면을 봐야 했습니다. 2026년 10월 27일에 첫 화면 전에 만들던 셰이더를 98개에서 36개로 줄이고 순서를 바꿔, 같은 PC에서 정지 화면은 0.8초, 소개는 2초 남짓, 첫 3D 장면은 8~9초에 뜨게 했습니다. 같은 날 휴대폰 조건과 장이 바뀔 때의 멈춤도 줄였습니다.
무엇이 오래 걸렸나
3D 장면을 그리려면 브라우저가 먼저 그래픽 카드에서 돌아갈 작은 프로그램인 셰이더를 만들어야 합니다. 발사대의 금속, 지형, 하늘, 불꽃과 연기가 모두 각자의 셰이더를 씁니다. 우주대장은 첫 화면을 그리기 전에 셰이더 98개를 만들고 있었고, 하나씩 잰 시간을 더하면 54초였습니다. 그동안 화면은 비어 있었습니다.
고친 것
| 무엇을 | 어떻게 | 결과 |
|---|---|---|
| 겹치는 셰이더 | 반사를 찍는 카메라를 본 화면과 같은 조명·그림자 설정으로 맞춤 | 같은 재질이 그림자 없는 판으로 한 벌 더 만들어지던 것이 사라짐 |
| 조명 계산 | 조명 24개를 셰이더마다 복제하던 코드를 실제 반복문으로 바꾸고, 꺼진 조명과 닿지 않는 거리는 건너뜀 | 일반 재질 0.55 → 0.25초, 지형 5.8 → 2.3초. 고정 노출로 비교한 화면은 같음 |
| 큰 반복문 | 대기 산란, 불꽃과 배기, 파도와 노이즈의 반복 횟수를 값으로 넘겨 컴파일 때 펼쳐지지 않게 함 | 셰이더 하나하나가 짧아짐 |
| 순서 | 첫 장면에 필요한 셰이더만 먼저 만들고, 그동안 같은 장면의 정지 화면 위에 소개를 띄움 | 빈 화면 대신 0.8초에 정지 화면 |
| 나머지 셰이더 | 첫 화면 뒤 한 번에 6개씩, 소개나 메뉴에 있을 때만 만들고 발사 중에는 쉼 | 첫 화면 전 셰이더 98 → 36개 |
| 내려받기 | 첫 발사에 쓰지 않는 운반차 소리(0.3 MB)는 받지 않고, 배경음악은 128 kbps로. 지형 색과 마스크는 WebP로(마스크는 무손실) | 소개 전 내려받기 4.0 → 3.3 MB, 배경음악 2.0 → 1.6 MB씩 |
결과: 같은 PC, 캐시 없음
| 항목 | 전 | 후 |
|---|---|---|
| 처음 보이는 화면 | 19.6초 (빈 화면) | 0.8초 (정지 화면) |
| 소개 | — | 2.1~2.4초 |
| 첫 3D 장면 | 19.6초 뒤 | 8~9초 |
| 첫 화면 전 셰이더 | 98개 · 합계 54초 | 36개 · 합계 9.9초 |
‘합계’는 셰이더를 하나씩 만들며 잰 시간을 더한 값입니다. 실제로는 일부가 겹쳐 진행됩니다.
2차: 휴대폰과 장이 바뀔 때
같은 날 저녁에는 휴대폰 조건과, 장이 바뀌는 순간의 멈춤을 다뤘습니다. 새 장이 시작될 때 그 장에서 보일 셰이더와 텍스처를 장 제목 카드가 떠 있는 동안 미리 준비하게 했고, 카메라가 바뀔 때 화면 밝기를 맞추느라 한 프레임을 두 번 그리던 것을 없앴습니다.
| 항목 | 전 | 후 |
|---|---|---|
| 휴대폰 조건 소개 | 평균 7.3초 | 평균 5.4초 |
| 휴대폰 조건 첫 3D 장면 | 14.6초 | 12.3초 |
| PC 소개 | 2.1초 | 1.9초 |
| 0.12초 넘게 걸린 프레임 | 133개 | 27개 |
| 1장 시작 멈춤 | 2.05초 | 0.24초 |
| 2장 시작 멈춤 | 3.23초 | 0.28초 |
| 10장 시작 멈춤 | 0.97초 | 0.26초 |
| 7장 끝·9·13·14장 | 0.6~1.0초 | 0.2초 미만 |
휴대폰 조건은 PC에서 CPU를 4배 느리게, 통신을 9 Mbps로 흉내 낸 값입니다. 프레임 수는 화면 없는 브라우저에서 8배속으로 돌려 센 값입니다.
휴대폰의 그래픽 메모리
휴대폰은 그래픽 메모리가 모자라거나 오래 다른 앱에 있다가 돌아오면 3D 그래픽이 통째로 사라질 수 있습니다. 이때 빈 화면으로 멈추지 않고 안내를 띄운 뒤 다시 불러오게 했고, 진행 기록은 그대로 이어집니다. 페이지가 가려지면 소리도 멈췄다가 돌아오면 이어집니다.
기체가 고도 3 km를 넘어 날아오르면 발사 전날 장면의 건물 외벽 텍스처를 내려놓게 했습니다. 지구 영상을 빼고 잰 텍스처 메모리가 2장에서는 266 MB였고, 비행 중인 10장에서는 44 MB가 됐습니다.
확인한 방법
- 첫 방문 시간은 캐시를 비운 브라우저로 처음부터 열어 잽니다. 첫 방문 측정 도구를 이날 새로 만들었습니다.
- 바꾼 뒤에도 화면이 같은지 고정 노출로 찍어 비교하고, 연기와 증기의 모양이 같은지 확인했습니다.
- 처음 들어와 첫 발사를 승인하는 과정, 휴대폰 세로·가로 화면, 그래픽이 사라졌다 돌아오는 경우를 자동 점검으로 다시 돌렸습니다.