습관만들기 Pawbit TIL 5

도장을 200%로 키웠는데 안 커 보였다

습관을 완료하면 발바닥 도장이 200% 크기로 나타났다가 100%로 줄어들며 찍히게 했다. 그런데 막상 보니 별로 커지는 느낌이 없었다.

크기(Transform.scale)와 투명도(Opacity)를 같은 진행값 하나에 묶어 둔 게 원인이었다. 진행이 0일 때가 가장 큰 순간인데, 같은 값을 투명도에도 쓰니 그 순간은 완전히 투명하다. 가장 큰 모습이 있긴 한데 안 보인다. 게다가 처음이 빠른 곡선(Curves.easeOut)이라 큰 구간을 순식간에 지나간다.

그래서 두 속성의 타이밍을 떼어 놓았다. 크기는 곡선을 태워 천천히 줄이고, 투명도는 앞 40% 안에 미리 채운다. 애니메이션이 움직일 때마다 화면을 다시 그려 주는 AnimatedBuilder에서는 속성마다 곡선을 따로 걸 수 있다.

• 판단: 한 동작처럼 보여도 속성마다 곡선과 속도를 따로 줘야 의도한 모습이 나온다. 안 보인다는 건 대개 안 그려진 게 아니라 보일 타이밍이 없는 것이다.

---

스티커는 내장 아이콘에 색만 입혔다

꾸미기용 스티커를 넣으면서 그림을 따로 만들지 않기로 했다. Flutter에 기본으로 들어 있는 머티리얼 아이콘(Material Icons, Apache 2.0 라이선스)을 파스텔 색으로 칠하면 그대로 스티커가 된다. 추가 파일도 패키지도 없고 라이선스 비용도 없다. 감정·건강·운동·음식·동물 등 10개 카테고리로 140여 종을 묶고, 16종은 기본으로 주고 나머지는 상점에서 포인트로 사게 했다.

걸린 건 동물이었다. 내장 아이콘에는 토끼(cruelty_free)와 새(flutter_dash) 정도뿐이고 정작 개와 고양이가 없다. 강아지를 키우는 앱에 강아지 스티커가 없는 셈이다.

• 판단: 공짜 재료로 어디까지 되는지 먼저 재 보고 모자란 부분만 만든다. 다만 공짜 재료의 빈 곳이 제품의 핵심과 겹치는지는 꼭 본다. 겹치면 그 부분은 material_symbols_icons 같은 패키지를 붙이거나 따로 그려야 한다.

---

케어 표시를 점에서 세 칸으로

강아지의 밥·산책·목욕 상태를 점 하나로 보여 주던 걸 알약 모양 세 칸으로 바꿨다. 건강하면 세 칸 모두 초록이고, 나빠질수록 칸이 줄며 노랑과 빨강으로 바뀌고, 칸이 다 비면 아픔이다.

상태는 안에서 0(건강)부터 3(아픔)까지 숫자로 들고 있고, 화면에서만 남은 칸을 3에서 단계를 뺀 값으로 뒤집어 칸 수와 색으로 바꾼다. 그래서 표시를 점에서 칸으로 바꿀 때 저장된 값은 건드릴 게 없었다.

• 판단: 보여 주는 방식은 데이터보다 자주 바뀐다. 저장은 사실만 담고 해석은 화면이 맡으면, 디자인을 바꿀 때 쌓인 데이터를 고치지 않아도 된다.

---

습관 무제한을 되돌렸다

이번 개편 초반에 습관 슬롯을 없애고 습관을 무제한으로 만들었다. 그런데 꿈 조각과 포인트 수입이 습관 수에 비례하니, 습관을 많이 만들수록 수입이 끝없이 커져 밸런스가 무너졌다. 그래서 9개까지는 무료, 10번째부터는 광고를 보고 한 칸씩 여는 방식으로 상한을 다시 걸었다.

• 판단: 수입이 무엇에 비례하는지를 먼저 본다. 사용자가 마음대로 늘릴 수 있는 값에 수입이 걸려 있으면 어딘가에 상한이 필요하다. 완전히 막기보다 광고 같은 비용을 붙인 소프트캡으로 두면, 원하는 사람은 계속 늘릴 수 있다.

---

Series: Today I Learn