여둘까 Office Layout TIL 4

재는 도중에 화면을 옮길 수가 없었다

긴 복도의 폭을 재려면 첫 점을 찍고, 도면을 옆으로 끌어 옮긴 다음 두 번째 점을 찍어야 한다. 그런데 거리를 재는 동안에는 도면을 옮길 수가 없었다. 첫 점을 찍고 화면 밖에 있는 두 번째 지점까지 가려면 측정을 취소해야 했다.

왼쪽 클릭은 이미 자리가 차 있었다

재는 동안 왼쪽 클릭은 “점 찍기”에 쓰인다. 그러니 화면 이동(팬 — 도면을 끌어서 보이는 범위를 옮기는 동작)을 왼쪽 클릭에 얹을 수는 없다. 그래서 휠 버튼 클릭, 오른쪽 클릭, Space를 누른 채 드래그 — 이 셋으로 옮기게 했다. 캐드나 Figma 같은 도면·디자인 도구가 쓰는 관례와 같다.

좋은 입력은 이미 다 누가 쓰고 있다. 새 동작을 넣을 때는 빈 자리를 새로 만드는 게 아니라, 사람들이 이미 손에 익힌 자리를 빌려 온다.

잘 돌던 쪽은 한 줄도 안 건드렸다

도형을 클릭하고 끌고 점을 찍는 일은 Konva(캔버스 위 도형을 다루는 라이브러리)가 이미 잘 처리하고 있었다. 여기에 팬을 얹는 방법은 두 가지였다.

• Konva가 입력을 처리하는 코드 곳곳에 “팬 중이면 무시해”를 심는다 — 잘 돌던 게 깨질 수 있고, 앞으로 고칠 때마다 그 조건을 기억해야 한다
• 입력이 Konva에 닿기 전에 팬 동작만 앞에서 가로채고, 나머지는 그대로 흘려보낸다 — 잘 돌던 기계는 그대로 두고 입구에 거름망 하나만 단다

두 번째를 택했다. 브라우저의 입력 이벤트는 바깥에서 안쪽으로 내려오는 단계(캡처)와 안쪽에서 바깥으로 올라가는 단계(버블)를 거치는데, Konva는 올라가는 단계에서 듣는다. 내려오는 단계에서 먼저 잡아 멈추면 Konva는 그 입력을 아예 받지 않는다. 측정·그리기·선택 쪽 코드는 한 줄도 바뀌지 않았다.

옮겨도 점은 제자리에 있다

도면을 옮길 때 움직이는 건 보는 위치(카메라)뿐이다. 찍은 점과 가구는 화면 픽셀이 아니라 도면 기준 좌표로 저장돼 있어서, 화면을 아무리 옮겨도 그대로다. 그래서 첫 점 → 화면 이동 → 두 번째 점이 한 좌표계 위에서 이어진다.

잘 돌아가는 시스템에 기능을 더할 때는, 안을 고치기보다 입구에서 가르는 쪽이 먼저 떠올라야 한다. 안을 고치면 고친 곳마다 새 조건이 생기고, 입구에서 가르면 조건이 한 곳에만 있다.

Series: Today I Learn