습관만들기 Pawbit TIL 11

리디자인을 통째로 받기 전에

Claude Design에 앱 UI 리뷰와 리디자인 제안을 받아 봤다. 홈·설정·온보딩·상점·마을·습관 타일·회고 보기까지 화면 파일을 통째로 바꾼 교체본이 왔다. 바로 덮지 않고, 파일마다 지금 코드와 대조해서 화면만 바뀌고 로직과 데이터 호출은 그대로인지부터 보게 했다.

대조해 보니 같은 날 오후에 만든 완료 진동 설정이 교체본에서 빠져 있었다. 교체본은 그 설정이 생기기 전 코드를 바탕으로 만들어졌던 것이다. 파일을 통째로 바꾸면 보통의 비교(diff)로는 무엇이 사라졌는지가 잘 안 드러나서, 기능 단위로 살아 있는지 확인해야 잡힌다. 빠진 걸 되살려 넣고 적용했다.

서로 엮인 교체도 있었다. DEV 패널이 홈에서 설정으로 옮겨 가는데, 홈 쪽만 먼저 바꾸면 패널이 두 군데 생기거나 아예 사라진다. 이런 건 짝으로 같이 적용한다.

• 판단: 남이 만든 큰 변경을 받을 때는 최근 작업이 묻히지 않는지부터 본다. 변경을 만든 쪽은 내 최근 작업을 모른다.

---

실기기로 보며 짚은 것들

적용하고 실기기로 보니 어색한 곳이 여럿이었다. 짚어서 두세 번 다시 손봤는데, 그중 셋은 레이아웃 규칙을 몰라서 생긴 함정이었다.

강아지 그림자가 점처럼 좁았다

넓은 타원 그림자를 원형 그라데이션(RadialGradient)으로 그렸는데, 가운데에 점처럼 좁게만 나왔다. 원형 그라데이션의 반지름은 상자의 짧은 변을 기준으로 잡힌다. 132×24 상자라 24를 기준으로 작은 원만 채운 것이다. 넓은 알약 모양 상자에 흐림(blur) 그림자를 주는 방식으로 바꿨다.

표지판이 화면 세로를 꽉 채웠다

마을 표지판 카드가 위아래로 쭉 늘어나 있었다. 세로로 쌓는 Column은 크기를 따로 안 정하면 기본이 최대(mainAxisSize.max)라서, 제약이 느슨한 자리에 놓이면 받을 수 있는 높이를 다 차지한다. 내용만큼만(min) 차지하게 고정했다.

강아지가 표지판 뒤에 가렸다

겹쳐 놓는 Stack은 자식을 적힌 순서대로 그려서, 나중에 적은 게 위에 온다. 강아지를 표지판들보다 뒤에 적어 늘 위로 보이게 했다.

그 밖에 짚은 것

• 습관 추가 타일은 점선 테두리로 해 달라고 했다. Flutter에는 점선 기본 기능이 없어서, 테두리 경로를 짧게 잘라 그리는 부품을 새로 만들었다(CustomPainter)
• 주간 보기의 완료 표시를 발바닥으로 했다. 발바닥 그림에 습관 색을 입혀(틴트, tint — 그림 모양 그대로 한 가지 색을 칠하는 것) 쓴다
• 밝은 타일에서 완료 도장이 묻혀서, 배경 밝기(computeLuminance)를 재서 밝으면 도장을 더 진하게 찍게 했다
• 회고 보기의 요약 카드는 연속 달성일·모은 조각 같은 통계는 위에 두고, 강아지 총평만 아래로 내려 달라고 했다. 한 카드에 다 들어 있으면 통째로만 옮길 수 있어서, 통계와 총평을 두 조각으로 나눴다
• 설정의 프로필 카드를 누르면 이름 바꾸는 화면으로 바로 가게 했다. 오픈소스 라이선스 화면은 Flutter에 들어 있는 기본 화면(showLicensePage)을 그대로 띄운다

세 함정은 모두 코드만 봐서는 멀쩡했고, 화면에 띄워 보고서야 드러났다.

• 판단: 화면은 실기기로 봐야 안다. 그리고 한 덩어리로 된 부품은 위치도 한 덩어리로만 움직인다. 따로 옮기고 싶은 게 생기면 나눈다.

---

Series: Today I Learn