🎮 FruitSpinner 개발일지 #5 — 보이는 것이 전부다

🎨 그래디언트에서 플랫으로

초기 버전의 육각형은 그래디언트가 들어간 입체적인 스타일이었다. 구 모양 하이라이트에 그림자까지. 그런데 과일 이모지와 조합하니 너무 복잡해 보였다. 이모지 자체가 이미 디테일이 있는 그래픽인데, 배경까지 화려하면 시각적 노이즈가 심해진다.

결국 하늘색 플랫 벡터 스타일로 바꿨다. 육각형은 단순한 배경 역할만 하고, 과일 이모지가 주인공이 되는 구조. 컵이나 파이프 같은 UI 요소도 같은 스타일로 통일했다.

🖼️ Canvas 렌더링 순서의 함정

플랫 스타일로 바꾼 뒤 이상한 현상이 생겼다. 과일 이모지가 흐릿하게 보이는 것이다. 원인을 찾아보니 렌더링 순서 문제였다.

Canvas는 나중에 그린 것이 위에 올라간다. 그런데 육각형 배경을 그릴 때 배경색과 테두리를 한 번에 그리고 있었다. 배경색이 이모지 위에 반투명하게 덮여서 이모지가 흐려 보였던 것이다.

해결은 단순했다. 모든 육각형의 배경과 테두리를 먼저 그리고, 그 다음에 모든 이모지를 따로 그리는 2패스 렌더링으로 바꿨다. 배경 레이어 → 이모지 레이어. 이 순서만 지키면 이모지가 항상 선명하게 보인다.

교훈: Canvas에서 복잡한 요소를 그릴 때는 "무엇을 먼저 그릴 것인가"가 핵심이다.

🍎 이모지의 한계와 장점

이모지를 게임 그래픽으로 쓰는 건 장단점이 분명하다.

장점은 명확하다. 별도 에셋 없이 바로 쓸 수 있고, 누구나 알아보는 직관적인 그래픽이다. 과일 8종(🍎🍊🍋🍇🍓🍑🥝🍒)이 색상까지 자동으로 구분된다. 개발 속도 면에서 이보다 빠른 방법은 없다.

한계도 있다. OS마다 이모지 디자인이 다르다. iOS에서 예쁘게 보이던 과일이 Android에서는 다른 느낌일 수 있다. 크기 조절이 완벽하지 않아서 잎사귀 같은 부분이 튀어나오기도 한다. 그래서 육각형이라는 명확한 경계 안에 가두는 방식을 택한 것이기도 하다.

💧 물방울 실험

한 가지 재미있는 실험을 했다. 같은 색 과일끼리 유리판 위의 물방울처럼 합쳐지는 표현을 시도한 것이다. 개별 테두리 대신 그룹 전체의 외곽선만 그리면 하나의 덩어리처럼 보인다.

기술적으로는 같은 색 그룹을 BFS로 찾고, 그룹 외곽 경계만 계산해서 그리는 방식이었다. 시각적으로 흥미로웠지만 최종 버전에는 채택하지 않았다. 육각형 개별 표현이 게임 플레이의 가독성에서 더 나았기 때문이다.

📝 다음 글에서는

모바일 출시를 위한 여정. Cordova 빌드, 세로 모드 강제, 코드 리팩토링, 그리고 Google Play Console 등록까지의 이야기를 다룬다.