🎮 FruitSpinner 개발일지 #5 — 보이는 것이 전부다
🎨 그래디언트에서 플랫으로 초기 버전의 육각형은 그래디언트 가 들어간 입체적인 스타일이었다. 구 모양 하이라이트에 그림자까지. 그런데 과일 이모지와 조합하니 너무 복잡해 보였다. 이모지 자체가 이미 디테일이 있는 그래픽인데, 배경까지 화려하면 시각적 노이즈가 심해진다. 결국 하늘색 플랫 벡터 스타일 로 바꿨다. 육각형은 단순한 배경 역할만 하고, 과일 이모지가 주인공이 되는 구조. 컵이나 파이프 같은 UI 요소도 같은 스타일로 통일했다. 🖼️ Canvas 렌더링 순서의 함정 플랫 스타일로 바꾼 뒤 이상한 현상이 생겼다. 과일 이모지가 흐릿하게 보이는 것이다. 원인을 찾아보니 렌더링 순서 문제였다. Canvas 는 나중에 그린 것이 위에 올라간다. 그런데 육각형 배경을 그릴 때 배경색 과 테두리를 한 번에 그리고 있었다. 배경색이 이모지 위에 반투명하게 덮여서 이모지가 흐려 보였던 것이다. 해결은 단순했다. 모든 육각형의 배경과 테두리를 먼저 그리고, 그 다음에 모든 이모지를 따로 그리는 2패스 렌더링 으로 바꿨다. 배경 레이어 → 이모지 레이어. 이 순서만 지키면 이모지가 항상 선명하게 보인다. 교훈: Canvas에서 복잡한 요소를 그릴 때는 "무엇을 먼저 그릴 것인가"가 핵심이다. 🍎 이모지의 한계와 장점 이모지를 게임 그래픽으로 쓰는 건 장단점이 분명하다. 장점은 명확하다. 별도 에셋 없이 바로 쓸 수 있고, 누구나 알아보는 직관적인 그래픽이다. 과일 8종(🍎🍊🍋🍇🍓🍑🥝🍒)이 색상까지 자동으로 구분된다. 개발 속도 면에서 이보다 빠른 방법은 없다. 한계도 있다. OS마다 이모지 디자인이 다르다. iOS에서 예쁘게 보이던 과일이 Android에서는 다른 느낌일 수 있다. 크기 조절이 완벽하지 않아서 잎사귀 같은 부분이 튀어나오기도 한다. 그래서 육각형이라는 명확한 경계 안에 가두는 방식 을 택한 것이기도 하다. 💧 물방울 실험 한 가지 재미있는 실험을 했다. 같은 ...