좌표와 transform 디버깅

이번에는 디버깅입니다.

그래픽 툴의 수학 버그는 숫자만 쳐다보면 잘 안 보입니다. x = 231.42라고 쓰여 있어도 그게 맞는지 틀린지 감이 잘 안 옵니다. 그런데 좌표축과 bounds를 화면에 그려보면 바로 보입니다.

“아, x축이 저기로 누웠구나.”

이 순간 디버깅 시간이 확 줄어듭니다.

디버그 overlay는 변환된 basis vector, transformed corners, AABB를 같이 보여줘서 좌표계 오류를 빨리 드러냅니다.

좌표축을 그리자

matrix가 있다면 변환된 x축과 y축을 그릴 수 있습니다.

basisX = M * (1, 0) - M * (0, 0)
basisY = M * (0, 1) - M * (0, 0)

basisX는 local x축이 화면에서 어디를 향하는지, basisY는 local y축이 어디를 향하는지 보여줍니다. 회전, scale, skew가 섞여도 축을 보면 감이 옵니다. 숫자보다 그림이 빠를 때가 많습니다.

오브젝트의 네 corner를 변환한 뒤 min/max를 잡으면 화면 기준 AABB가 나옵니다.

AABB = min/max(transformed corners)

selection이 어긋날 때 content matrix가 틀린 건지, viewport matrix가 틀린 건지, object matrix가 틀린 건지 나눠서 봐야 합니다. 한꺼번에 보면 다 수상해 보입니다. 범인을 좁혀야 합니다.

브라우저가 실제로 적용한 transform은 computed style에서 읽을 수 있습니다.

getComputedStyle(element).transform

에디터 모델의 matrix와 computed matrix를 나란히 표시하면 직렬화 과정에서 생긴 오류를 빨리 찾을 수 있습니다. 예를 들어 모델은 center origin을 가정했는데 CSS는 top-left origin으로 적용했다면 축이 바로 어긋납니다.

디버그 overlay는 보통 pointer-events: none으로 둡니다. 디버그 UI가 편집 입력을 가로막으면, 디버깅하다가 다시 디버깅할 일이 생깁니다. 이건 좀 억울합니다.

데모에서는 debug 값을 보며 basis vector가 회전과 scale을 어떻게 포함하는지 읽습니다.

오늘의 핵심은 좋은 그래픽 에디터에는 좋은 디버그 레이어가 필요하다는 것입니다. 좌표축, bounds, matrix readout은 화려한 기능은 아니지만, 개발자를 꽤 오래 살려줍니다.