그림을 줄이지 않고 35MB 게임에서 3MB를 덜어낸 과정
손님 그림의 크기와 색은 그대로 두고, 파일 형식과 빌드 방식만 바꿨습니다. 얼마나 줄었고 같은 그림이라고 어떻게 확인했는지 실제 수치로 남깁니다.
· 작성 Pebble Room · 성능·QA
첫 화면보다 먼저 35MB를 받는 문제
디저트 아틀리에는 배포할 때 자바스크립트와 스타일, 그림을 하나의 HTML 파일에 합칩니다. 설치 파일 없이 주소 하나로 실행되고 버전이 어긋날 일이 적다는 장점이 있지만, 그림이 늘수록 첫 파일도 함께 무거워집니다.
v1.5.57 빌드는 35,234,416바이트였습니다. 막연히 “이미지가 많아서”라고 결론 내리지 않고, 합치기 전 소스에서 무엇이 큰지부터 확인했습니다. 그림 데이터가 모인 파일이 24,894,856바이트였고, 그중 최근 추가한 동네 손님 다섯 명의 초상이 눈에 띄었습니다. 다섯 장 모두 1,254×1,254픽셀 RGB PNG였습니다.
해상도와 화질은 건드리지 않았습니다
모바일에서 작게 보인다는 이유로 원본 해상도를 낮추면, 대화 장면에서 크게 보여 줄 때 다시 흐려집니다. 그래서 크기를 줄이거나 손실 압축을 쓰는 대신 무손실 WebP로 형식만 바꿨습니다. 브라우저가 풀어낸 뒤의 픽셀은 PNG와 같아야 한다는 조건을 먼저 세웠습니다.
| 손님 그림 | PNG | 무손실 WebP | 절감 |
|---|---|---|---|
| 동네 학생 | 1,270,202 B | 847,062 B | 423,140 B |
| 동네 아빠 | 1,463,172 B | 1,002,344 B | 460,828 B |
| 동네 노신사 | 1,784,858 B | 1,208,442 B | 576,416 B |
| 동네 이웃 여성 | 1,405,834 B | 960,312 B | 445,522 B |
| 동네 아이 | 1,405,465 B | 950,544 B | 454,921 B |
| 합계 | 7,329,531 B | 4,968,704 B | 2,360,827 B |
그림 파일만 보면 약 2.36MB가 줄었습니다. HTML 안에서는 그림을 문자로 바꾸는 과정 때문에 원본보다 커지므로, 최종 파일의 절감 폭은 더 컸습니다.
그림을 바꾼 것만으로는 끝나지 않았습니다
예전에는 다섯 그림이 긴 데이터 문자열로 소스 안에 직접 들어 있었습니다. 이번에는 소스에는 그림 경로만 적고, 배포할 때 빌드가 실제 WebP 데이터를 읽어 한 파일에 넣도록 바꿨습니다. 그 결과 그림 소스 파일은 24,894,856바이트에서 15,122,219바이트로 줄었습니다.
완성된 게임 파일
35,234,416 B → 32,087,427 B
줄어든 양
3,146,989 B, 약 8.9%
gzip으로 다시 측정한 크기
23,050,254 B, 약 21.98MB
압축 전 수치만 보고 “빨라졌다”고 단정하지는 않았습니다. 실제 체감은 방문자의 네트워크와 브라우저 캐시, 서버 압축에도 영향을 받습니다. 다만 같은 화면과 같은 픽셀을 유지하면서 처음 받아야 할 데이터가 줄었다는 점은 분명합니다.
같아 보이는지가 아니라 같은지 검사했습니다
파일이 열리는 것만으로는 부족합니다. 먼저 PNG와 WebP를 각각 다시 풀어 모든 픽셀의 차이를 비교했고, 다섯 장 모두 차이가 0인지 확인했습니다. 그다음 게임을 새로 빌드해 66개 자동 검사를 통과시켰습니다.
자동 검사 뒤에는 브라우저에서 직접 확인했습니다. 첫 주 안내가 진행되는 21개 화면을 차례로 열고, 데스크톱 1280×900, 휴대폰 세로 390×844, 가로 844×390에서 그림과 버튼, 글이 잘리지 않는지 확인했습니다. 실행 중 화면 크기를 바꿨을 때 배치가 즉시 다시 맞춰지는지도 이 과정에서 함께 고쳤습니다.
이번 작업의 기준은 “용량을 줄였다”가 아니라 그림은 그대로이고, 게임도 끝까지 동작하며, 작은 화면에서 조작할 수 있는가였습니다.
이번 작업에서 남긴 기준
- 그림 최적화 전에는 먼저 실제로 큰 파일을 측정합니다.
- 원본을 보존해야 하면 해상도를 낮추기 전에 무손실 형식을 비교합니다.
- 파일 형식을 바꾼 뒤에는 눈대중이 아니라 픽셀 차이를 검사합니다.
- 빌드 성공과 실제 플레이 성공은 다르므로 자동 검사와 여러 화면 크기 확인을 함께 합니다.
게임의 운영 방식은 초보자 가이드에, 이번 변경을 포함한 버전별 수정 내용은 업데이트 내역에 정리해 두었습니다.