스텝 인디케이터

그래프 에디터를 만들고 나서 한 가지가 마음에 걸렸습니다. 연결 관계를 편집할 때는 그래프가 좋은데, 평소에 서브태스크 목록을 볼 때마다 그래프를 여는 건 번거롭습니다.

일상적으로 필요한 건 “지금 어디쯤이지?”라는 감각이었습니다. 그래프를 열지 않아도, 목록만 보고 흐름을 느낄 수 있으면 좋겠다고 생각했습니다.

근데 그걸 어떻게 보여주지.

Git Log에서 힌트를 얻었습니다

개발자라면 git log --graph의 출력을 한 번쯤 보셨을 거예요. 텍스트 옆에 선과 점이 달리면서 브랜치가 갈라지고 합류하는 그 화면.

그걸 보는 순간 “이거다” 싶었습니다. 서브태스크 리스트 왼쪽에 가느다란 선과 점을 붙이면, 목록을 스크롤하는 것만으로 흐름이 보이겠다.

아이디어는 좋았습니다. 구현은 다른 이야기였습니다.

레인이라는 개념

서브태스크가 일렬이면 선 하나로 됩니다. 하지만 갈림길이 있으면 선이 갈라져야 합니다. 이걸 레인이라고 불렀습니다. git의 브랜치와 비슷한 개념이에요.

주요 경로는 레인 0. 대안 경로가 생기면 새 레인을 할당. 레인이 끝나면 반납해서 다음 분기에서 재사용.

말로 쓰면 간단한데, 레인을 할당하는 순서, 합류 지점에서의 충돌, 재사용 타이밍 — 이런 것들이 맞물리면서 버그가 꽤 많았습니다. 한 가지를 고치면 다른 케이스가 깨지고, 그걸 고치면 또 다른 게 깨지고. 솔직히 중간에 접을까 싶었던 적도 있습니다.

곡선이 주는 차이

처음에는 직선으로 분기를 표현했습니다. 되긴 되는데, 각져서 보기 불편했습니다. 그래서 SVG 베지어 곡선으로 바꿨습니다.

여기서 또 문제가 생겼습니다. 바로 옆 레인으로 갈라지는 것과 먼 레인으로 갈라지는 것에 같은 곡선을 쓰면 부자연스럽습니다. 인접하면 완만한 S자, 멀면 깊은 S자. 이 구분을 넣고 나니 훨씬 읽기 편해졌습니다.

작은 차이인데 눈이 편해지는 건 크더라고요.

가장 까다로웠던 케이스

대안 경로인데 같은 레인에 머무는 경우. 이게 제일 골치 아팠습니다. 점선이 실선 위에 그대로 겹쳐 버리면 분기가 있는지 없는지 구분이 안 됩니다.

한참을 고민하다가, 임시 라우팅 레인이라는 해법을 찾았습니다. 같은 레인의 대안 연결은 잠시 옆으로 나갔다가 다시 돌아옵니다. “여기서 갈라졌다 합류한다”는 게 보이게요.

이걸 떠올렸을 때 좀 기뻤습니다. 이런 소소한 순간이 계속 만들게 하는 힘이 되는 것 같아요.

파란 점 하나

스텝 인디케이터의 핵심은 결국 점의 색입니다. 파란 점이 지금 해야 할 작업, 회색이 끝났거나 진행 중인 것, 연한 회색이 아직 시작 전.

“지금 어디쯤”을 계산하는 게 생각보다 복잡했습니다. 분기가 있으면 어느 쪽이 현재 경로인지 알아야 하거든요. 완료된 노드에서는 완료된 쪽으로만 따라가고, 시작된 형제가 있으면 그것만 현재로 표시하고. 이 로직을 잡는 데 며칠이 걸렸습니다.

근데 파란 점 하나가 제 위치에 딱 찍혔을 때, 그 느낌이 꽤 좋았습니다. 스크롤만 해도 “아, 여기까지 왔구나”가 보이니까요.

상태를 바꿨는데 화면이 안 바뀌면

서버 응답을 기다리는 동안 점과 선이 멈춰 있으면 답답합니다. 눌렀는데 반응이 없으면 한 번 더 누르게 되고, 그러면 꼬이고.

낙관적 업데이트를 넣었습니다. 상태를 바꾸면 일단 화면에서 먼저 반영하고, 서버 응답이 오면 조용히 맞춥니다. 이걸 넣기 전과 후의 체감 차이가 너무 커서, 왜 처음부터 안 했나 싶었습니다.

12픽셀

레인 폭을 정하는 데 의외로 오래 걸렸습니다. 처음에 20픽셀로 했는데, 레인 두세 개만 되어도 리스트 아이템 공간을 너무 많이 먹었습니다.

12로 줄였습니다. 좁지만 선과 점이 구분되고, 레인이 네다섯 개여도 괜찮습니다. 숫자 하나 바꿨을 뿐인데 화면 전체의 느낌이 달라지는 게 신기했습니다.

작은 지도

스텝 인디케이터는 작은 지도 같은 거라고 생각합니다. 그래프 에디터가 전체 지형을 보여준다면, 이건 지금 걷고 있는 길 위의 현재 위치.

잘 만들었는지는 아직 모르겠습니다. 분명 못 본 케이스도 있을 거예요. 하지만 리스트를 스크롤하면서 “아, 여기까지 왔구나”를 느낄 수 있다면, 그걸로 첫 번째 목표는 달성이라고 생각합니다.

이상한 점이 보이면 알려주세요. 고치겠습니다.

---

복잡한 일도, 지금 어디쯤인지 알면 덜 막막하기를 바랍니다.