습관만들기 Pawbit TIL 12

이 글은 Today I Learn 시리즈의 83번째 기록입니다. (총 213개)

들어가기 전 — 좌표가 두 종류다

디자이너의 마을 지도가 아직 없어서, 배경을 비우고 집에서 각 표지판(숲속·상점·갤러리)으로 이어지는 점선 트랙을 깔아 지도처럼 보이게 하기로 했다. 표지판을 누르면 강아지가 그 트랙을 따라 걸어간 다음 화면이 열린다. 점선은 Flutter에 기본 기능이 없어서, 앞선 TIL 11의 습관 추가 타일 점선 테두리처럼 선을 짧은 조각으로 잘라 그렸다. 걷는 연출은 위치 값이 바뀌면 부드럽게 옮겨 주는 AnimatedPositioned 위젯으로 했다.

여기서 계속 걸린 게 위치를 어떻게 적느냐였다. Flutter에서는 크게 두 가지를 쓴다.

비율 좌표(Alignment) — 화면 가운데가 (0, 0)이고, 왼쪽 끝이 -1, 오른쪽 끝이 +1, 위가 -1, 아래가 +1이다. 화면 크기가 달라져도 화면의 어디쯤인지를 그대로 가리킨다.
픽셀 좌표 — 화면 왼쪽 위가 (0, 0)이고 오른쪽·아래로 갈수록 커지는 실제 숫자다.

위젯을 놓을 때는 비율이 편하고, 선을 직접 그리는 CustomPainter는 픽셀만 안다. 그래서 둘을 잇는 변환이 필요하다. 이 글의 일은 거의 다 여기서 시작한다.

트랙과 표지판이 안 맞았다, 특히 오른쪽 상점

실기기로 보니 트랙 끝이 표지판에 안 닿았다. 오른쪽 상점이 제일 크게 벌어졌다. 여기가 안 맞는다고 짚어 가며 몇 번을 다시 잡았다.

트랙은 비율을 픽셀로 바꾸는 식으로 그렸다. (a + 1) / 2는 -1에서 1 사이인 비율을 0에서 1 사이로 옮기는 계산이고, 거기에 화면 폭을 곱하면 픽셀이 된다.

Offset toPx(Alignment a) =>
    Offset((a.x + 1) / 2 * width, (a.y + 1) / 2 * height);

예) 화면 폭이 400이고 a.x = 0.5라면 (0.5 + 1) / 2 = 0.75, 0.75 × 400 = 300px.

그런데 표지판은 Align으로 놓았다. Align은 자식의 오른쪽 끝이 화면 오른쪽 끝에 닿도록 계산하는 방식이라, 화면 폭에서 자식 폭을 뺀 공간 안에서 자리를 잡는다.

Align이 놓는 자식 중심 = (a.x + 1)/2 × (화면폭 − 자식폭) + 자식폭/2
toPx가 주는 점         = (a.x + 1)/2 × 화면폭

화면 폭 400, 표지판 카드 폭 128, 상점 a.x = 0.62로 넣어 보면 이렇다.

Align = 0.81 × (400 − 128) + 64 = 284
toPx  = 0.81 × 400             = 324
                           차이 = 40px

트랙은 324에 그려지는데 카드는 284에 있으니 40px 벌어진다. 차이는 자식폭의 절반에 a.x를 곱한 값(64 × 0.62)과 같다. 가운데 가까운 숲속(a.x = -0.1)을 넣으면 6px뿐이라 거의 티가 안 난다. 어긋남이 a.x에 비례해서 가장자리로 갈수록 커지니, 상점만 유독 안 맞아 보였던 것이다.

판단: 한 화면 안에서 위치를 정하는 방식이 둘이면 반드시 어긋난다. 하나로 통일한다.

중심을 점에 꽂는 법

그래서 표지판·집·강아지도 트랙과 같은 toPx만 쓰게 했다. 남은 문제는 toPx가 점 하나를 준다는 것이다.

절대 위치로 놓는 Positioned(left, top)은 자식의 왼쪽 위 모서리를 그 점에 놓는다. 중심이 아니다.
중심으로 만들려면 자식 크기의 절반만큼 왼쪽·위로 밀어야 하는데, 카드 크기를 미리 모른다. 글자 길이에 따라 높이가 달라진다.

FractionalTranslation이 이걸 푼다. 자기 크기의 몇 퍼센트만큼 미는 위젯이라 크기를 몰라도 된다. (-0.5, -0.5)를 주면 자기 폭의 절반만큼 왼쪽, 높이의 절반만큼 위로 밀려서 중심이 정확히 그 점에 온다.

Positioned(
  left: p.dx, top: p.dy,                    // 여기에 자식의 왼쪽 위가 온다
  child: FractionalTranslation(
    translation: const Offset(-0.5, -0.5),  // 자기 크기의 절반만큼 밀어 중심을 점으로
    child: child,
  ),
)

이제 표지판·집·강아지·트랙이 전부 toPx 하나를 쓰니 픽셀 단위로 정확히 겹친다.

판단: 크기를 모르는 것을 어떤 점에 맞출 때는, 크기를 구하려 하지 말고 자기 크기에 대한 비율로 민다.

고치고 나니 화면이 통째로 비었다

이번엔 마을 화면이 하얗게 텅 비었다.

겹쳐 놓는 Stack이 자기 크기를 정하는 규칙 때문이다.

Stack은 Positioned가 아닌 자식들을 보고 그중 가장 큰 것만큼 커진다.
Positioned 자식은 이미 자리가 정해졌다고 보고 크기 계산에서 뺀다.

원래는 표지판이 Align(Positioned가 아님)이라 Stack이 화면만큼 컸다. 전부 Positioned로 바꾸자 크기 계산에 남은 건 상단 잔고 칩 하나뿐이었고, Stack이 칩 높이(약 50px)로 쪼그라들었다. 그 바깥에 놓인 표지판·강아지·트랙은 전부 잘려(clip) 안 보였다. 부모가 크기를 정해 주도록 SizedBox.expand로 감싸 화면 전체를 차지하게 했다.

그리고 이런 구조 변경은 저장 즉시 반영하는 핫 리로드(hot reload)로는 제대로 안 붙을 때가 있다. 고친 뒤에도 흰 화면이 남아 있었는데, 앱을 새로 띄우니(hot restart) 정상이었다.

판단: 스스로 크기를 못 정하는 틀은 부모가 정해 줘야 한다. 그리고 구조를 바꿨는데 화면이 이상하면 코드를 의심하기 전에 앱부터 새로 띄워 본다.

요약

한 화면 안에서 위치를 정하는 방식은 하나로 통일한다. 위젯은 Align, 그림은 픽셀로 섞으면 어긋난다.
Align은 자식 크기를 빼고 계산한다. 어긋나는 양은 자식폭의 절반 × a.x라 가장자리로 갈수록 커진다.
크기를 모르는 것을 점에 맞출 때는 크기를 구하려 하지 말고 자기 크기에 대한 비율로 민다.
스스로 크기를 못 정하는 틀은 부모가 크기를 정해 줘야 한다.
구조를 바꿨는데 화면이 이상하면 코드를 의심하기 전에 앱부터 새로 띄워 본다.

Series: Today I Learn