칸반 보드를 만든 이야기

칸반을 만들기로 한 다음, 막상 시작하니까 모바일이 어려웠습니다. 데스크톱은 마우스로 카드 잡고 끌면 그만이에요. 그런데 모바일은 손가락이 하나입니다. 그 한 손가락으로 카드를 들고, 옮기고, 그러는 동안에도 화면을 둘러볼 수 있어야 합니다.

짧게 누름 vs 길게 누름

먼저 정한 것 — 카드를 만지면 바로 들리는 게 아니라, 잠깐 길게 눌러야 들립니다. 안 그러면 손가락으로 카드 목록을 위아래로 훑을 때마다 카드가 따라 잡혀버리니까요. 짧게 누르면 카드 안으로 들어가고, 길게 누르면 들어 올려져요. 별 거 아닌 결정 같은데, 이걸 정해두지 않으면 다른 모든 게 어색해집니다.

원본은 자리에 두고 복제본을 띄움

카드를 들었을 때 그 카드 자체를 손가락 따라 움직이게 만들지 않았습니다. 원본은 컬럼 안에 그대로 두되 보이지 않게 가리고, 별도의 복제본을 화면 맨 위에 띄워서 손가락을 따라가게 했어요.

이유는 단순합니다. 원본은 컬럼 안에 묶여 있어서 다른 카드들과 같이 움직이려고 해요. 손가락을 따라가게 만들려면 그 관계를 다 끊어야 하는데, 그 사이에 컬럼들이 흔들립니다. 차라리 복제본을 자유롭게 띄우는 게 훨씬 깔끔했습니다.

화면 가장자리로 가면 따라온다

3개 컬럼을 좁은 화면에 다 욱여넣으면 카드 제목이 두 글자에서 잘립니다. 그래서 각 컬럼을 좀 넓게 만들고, 화면에 다 안 들어가는 컬럼은 옆으로 밀어서 봐야 하게 했습니다.

그러면 새 문제: 카드를 들고 다른 컬럼에 옮기고 싶은데 그 컬럼이 화면 밖에 있어요. 손가락은 화면 안에 있어야 하니까요.

해결 — 손가락이 화면 좌우 가장자리 가까이 가면 컬럼들이 알아서 흘러옵니다. 가장자리에 닿을수록 빨라져요. 손가락은 가만히 두기만 하면 됩니다. 결국 어느 컬럼이든 화면 안으로 들어옵니다.

이 동작이 직관적으로 느껴지기까지 시간이 좀 걸렸어요. 처음엔 너무 천천히 흐르면 답답하고, 너무 빨리 흐르면 정확한 곳에 못 멈춥니다. 가장자리에서 멀리 있으면 느리게, 가까울수록 빠르게 — 손가락 위치를 가속도처럼 다루는 게 정답이었습니다.

들었다가, 돌아갔다가, 옮겨갔다

작동 시키고 처음 테스트 했을 때 발견한 이상한 버그가 하나 있었습니다. 카드를 다른 컬럼에 놓으면, 잠깐 원래 자리로 돌아갔다가 그 다음에 새 컬럼으로 옮겨가는 게 눈에 보였어요. 한 0.3초 정도. 짧은데 거슬립니다.

원인을 따라가 보니, 카드 상태를 바꾸고 저장하는 건 빠른데, 화면이 그 변화를 받아서 반영하기까지 약간의 시차가 있었습니다. 그 짧은 사이에 들어 올렸던 복제본은 이미 사라졌고, 원본은 아직 옛날 자리에서 보이는 상태였어요.

고치는 방법은 단순했습니다. 복제본이 사라진 다음에도 잠깐 동안은 원본을 계속 가려두기. 화면이 새 상태를 받아들일 때까지 기다리는 거예요. 사용자 입장에서는 카드가 매끄럽게 새 자리로 옮겨가는 것처럼 보입니다.

굳이 어려운 길은 안 갔다

처음엔 가상 리스트라는 걸 쓰려고 했습니다. 카드가 많아져도 화면 밖 카드는 안 그리니까 빠르거든요. 그런데 그걸 쓰면 — 드래그 중인 카드가 화면 밖으로 나가면 그 카드 자체가 사라집니다. 사라지면서 드래그도 같이 끊겨버려요.

피해 가는 방법은 있는데 다 복잡합니다. 그래서 다른 선택을 했어요. 한 컬럼에 보일 카드 수에 상한을 두자. 20개. 칸반은 어차피 “지금 하고 있는 것”을 보는 화면이지 모든 할 일을 다 늘어놓는 곳이 아닙니다. 한 컬럼에 20개 넘게 쌓이면 그건 이미 너무 많아요. 다른 신호인 거죠.

마지막

칸반 보드는 겉으로는 단순해 보입니다. 카드 끌어다 놓는 것. 그런데 만들고 나서 다시 보면, 그 작은 동작 하나에 들어간 결정들이 의외로 많아요. 언제 들지, 어떻게 띄울지, 가장자리는 어떻게 알아챌지, 놓고 나서 어떻게 매끄럽게 안착할지.

다 끝내고 나서 보면 별 거 아닌 코드 같습니다. 그 사이에 안 보이는 결정들이 잔뜩 쌓여 있어요. 만드는 일은 늘 그렇습니다.