서브태스크 그래프를 만들기까지

하위 작업 기능을 만들고 나서, 한동안 뿌듯했습니다. 큰 일을 잘게 쪼개서 하나씩 해치울 수 있으니까요.

근데 쓰다 보니 불만이 생겼습니다. 이것들 사이에 순서가 있는데, 리스트로는 그게 안 보이는 거예요.

리스트의 한계

하위 작업이 세 개쯤이면 리스트로 충분합니다. 위에서 아래로 하면 되니까요.

그런데 다섯 개, 열 개가 되면 머릿속이 복잡해집니다. 어떤 건 동시에 할 수 있고, 어떤 건 앞의 게 끝나야 시작할 수 있고, 어떤 건 둘 중 하나를 골라야 합니다. 이걸 일렬로 세워놓으니 관계가 보이질 않았습니다.

그래서 그래프를 만들어 보기로 했습니다. 솔직히 말하면, 만들 수 있을지 확신은 없었습니다.

하루 만에 기본이 나왔습니다

놀랍게도 — 제가 제일 놀랐습니다 — 기본 골격은 하루 만에 나왔습니다. 하위 작업 하나가 네모 카드 하나, 연결이 곡선 하나. 드래그해서 잇고, 드래그해서 옮기고. 1,700줄 정도.

“어, 이거 되는데?” 하는 순간이 있었습니다. 그 순간의 기쁨은 꽤 컸어요.

근데 그건 시작이었습니다.

자동 배치라는 난제

노드를 처음 화면에 띄울 때, 어디에 놓을 것인가. 사용자가 한 번도 위치를 잡아준 적 없는 새 노드는 알아서 적절한 곳에 가야 합니다.

위상 정렬이라는 걸 써봤습니다. 들어오는 연결이 없는 노드부터 시작해서 레이어별로 나누는 방식인데, 이론은 알겠는데 실제로 적용하니 예외가 끝이 없었습니다.

결국 사용자가 직접 옮긴 노드는 그 위치를 존중하고, 새 노드만 자동 배치하는 방식으로 타협했습니다. 완벽하진 않지만, 쓸 만합니다. 아마도요.

회전이 이렇게 어려울 줄은

모바일에서 그래프를 보려면 가로 모드가 필요합니다. 노드가 많아지면 세로로는 좁으니까요. “그냥 돌리면 되겠지”라고 가볍게 생각했습니다.

아닙니다.

화면을 90도 돌리면 손가락의 X축 이동이 화면의 Y축이 됩니다. CSS로 돌리고 끝나는 게 아니라, 제스처 좌표를 변환해야 했습니다. 이 두 줄을 찾기까지 꽤 헤맸습니다.

dx = rotated ? translationY : translationX
dy = rotated ? -translationX : translationY

두 줄짜리 해법치고는 도달하는 데 너무 오래 걸렸습니다. 부끄럽지만 솔직히 적어둡니다.

실선과 점선

만들다 보니 모든 연결이 같지 않다는 걸 깨달았습니다. “이걸 끝내면 저걸 해”라는 필수 경로가 있고, “이 방법 대신 저 방법도 있어”라는 대안 경로가 있습니다.

그래서 실선과 점선으로 나눴습니다. 탭하면 바꿀 수 있고, 우선순위도 매길 수 있게. 단, 나가는 연결이 하나뿐이면 대안으로 못 바꾸게 막았습니다. 유일한 길을 “선택 사항”이라고 하면 이상하잖아요.

손가락은 정밀하지 않습니다

2픽셀 두께의 선을 모바일에서 정확히 탭하는 건 거의 불가능합니다. 저도 못 합니다. 만든 사람이 못 누르면 안 되겠죠.

그래서 보이지 않는 20픽셀짜리 터치 영역을 선 위에 겹쳐놨습니다. 눈에는 가느다란 선인데, 손가락은 넉넉하게 누를 수 있습니다. 노드의 연결 핸들도 8픽셀씩 넓혔습니다.

이런 눈에 안 보이는 작업이 시간을 제일 많이 잡아먹었습니다. 누가 알아주는 건 아니지만, 안 하면 바로 티가 납니다.

3주의 기록

2월 17일에 시작해서 3월 8일에 어느 정도 마무리. 첫날 기본이 나왔고, 나머지 20일은 전부 다듬는 시간이었습니다.

잘 만들었는지는 솔직히 모르겠습니다. 다만 드래그할 때 깜빡이지 않고, 연결할 때 딸깍 달라붙고, 손가락이 닿는 곳이 정확하게 — 그 정도는 해냈다고 생각합니다. 아마도요.

더 좋아질 수 있는 부분이 분명히 있을 겁니다. 쓰시다가 불편한 점이 있으면 알려주세요.

---

할 일의 흐름이 눈에 보이면, 끝내는 것도 조금 더 쉬워지기를 바랍니다.