잘 쌓이고, 버벅이지 않게

음식 사진이 떨어져 쌓이는 것이 이 앱의 핵심이다. 그런데 음식 사이에 빈틈이 남고, 떨어지는 순간에는 화면이 버벅였다. 왜 보기 좋게 쌓이지 않는지, 무엇이 화면을 무겁게 만드는지부터 살펴봤다.

빈틈의 원인은 보이지 않는 경계였다

화면에서는 음식끼리 떨어져 있는데, 앱은 이미 서로 부딪혔다고 판단하고 있었다. 음식 사진을 둘러싼 사각형을 경계로 잡으면 투명한 여백까지 자리를 차지하기 때문이다. 음식이 들어갈 공간이 있어 보여도 더 가까이 붙을 수 없었다.

해결의 핵심은 보이는 사진과 부딪힘을 계산하는 경계를 따로 다루는 것이었다. 음식 모양에 가까운 윤곽을 만들고, 그 윤곽을 이미지 중심을 기준으로 가로·세로 각각 85%로 줄여 충돌 경계로 사용했다. 사진의 표시 크기는 그대로 뒀다.

이렇게 하면 사진 가장자리가 조금씩 겹칠 수 있다. 눈에 보이지 않는 여백 때문에 멀찍이 떨어져 멈추는 대신, 음식끼리 더 가까이 쌓일 수 있게 한 것이다.

아래가 비었는데 위쪽 음식이 걸쳐 멈추는 문제도 있었다. 새 음식이 들어올 때 이미 쌓인 위쪽 음식 일부도 함께 움직이게 해, 서로 밀리면서 빈자리를 찾도록 했다.

음식 하나의 움직임이 목록까지 갱신하고 있었다

떨어지는 음식의 위치를 계속 바꾸는 과정에서, 앱과 목록도 함께 반복해서 갱신되고 있었다. 움직이지 않는 음식까지 이 작업에 영향을 받는 것이 문제였다.

그래서 음식이 떨어질 경로를 먼저 계산하고, 휴대폰의 애니메이션 기능에 전달해 재생하도록 바꿨다. 움직이는 음식은 별도로 그린다. 이미 쌓인 목록은 그대로 두면서 낙하를 표현할 수 있게 한 것이다.

기록이 길어지면, 필요한 부분만 꺼내보기

몇 달 치 기록이 쌓이면 스크롤과 날짜 이동도 살펴봐야 했다. 한 화면에 보이는 음식은 일부인데, 전체 기록을 매번 준비하고 찾아보는 작업은 기록이 늘수록 부담이 커진다.

더미를 작은 구간으로 나눠 지금 보고 있는 화면과 그 주변만 그리도록 했다. 날짜별 기록도 미리 묶어두고 재사용한다. 달력에서 날짜를 고를 때마다 모든 음식을 처음부터 다시 찾는 일을 줄인 것이다.

음식을 얼마나 많이 담을 수 있느냐만큼, 지금 보려는 음식을 가볍게 꺼내볼 수 있느냐가 중요했다.