소리꽃 KeyBloom TIL 5

이 글은 Today I Learn 시리즈의 46번째 기록입니다. (총 125개)

편집한 것을 되돌리는 기능과 그 주변 편집 흐름을 만들며 나온 것들.

되돌리기

되돌리기(undo)를 만드는 방법 자체는 단순하다. 편집하기 직전 상태를 통째로 복사해 두고 — 이렇게 한 시점의 상태를 통째로 떠 놓은 것을 스냅샷이라고 한다 — 되돌릴 때 그걸로 갈아끼운다.

정작 정해야 할 건 “무엇을 저장하느냐”였다. 화면에는 흐르는 파티클도 있고 재생 위치도 있는데, 이건 되돌릴 대상이 아니다. 사용자가 만든 것 — 큐(곡 중간에 갈아타는 연출 설정 묶음)와 그 배치만 담았다.

되돌리기가 어색해지는 대부분의 이유가 여기 있다. 되돌렸는데 엉뚱한 것까지 과거로 돌아가거나, 되돌렸는데 원하는 게 안 돌아온다. 담을 것을 정하는 기준은 “사용자가 이걸 자기가 한 일이라고 생각하나”다.

슬라이더를 한 번 끌면 값이 바뀌었다는 이벤트가 수십 번 날아온다. 그대로 기록하면 되돌리기를 한 번 눌렀을 때 슬라이더가 아주 조금만 돌아간다. 사용자는 방금 한 조작이 통째로 취소되기를 기대한다.

그래서 조작이 시작될 때 상태를 저장해 두고, 끝날 때 실제로 값이 바뀌었으면 그때 한 단계로 기록하게 했다.

사용자가 “한 번 했다”고 느끼는 단위와 시스템이 이벤트를 받는 횟수는 다르다. 되돌리기뿐 아니라 자동 저장, 기록, 알림처럼 “한 번”을 세는 모든 곳에서 이 차이를 먼저 정해야 한다.

여기에 함정이 하나 더 있었다. 이름을 타이핑하다 슬라이더를 잡으면 두 조작이 겹친다. 시작과 끝을 하나로 관리하면 서로의 기록을 지운다. 조작 종류별로 따로 관리하니 겹쳐도 각자 한 단계로 남았다.

큐 이름을 클릭하면 그 자리에서 고치고, 엔터를 치든 다른 데를 클릭하든 확정되게 해 달라고 했다. 끝내는 방법이 둘이 된 셈이다.

그래서 엔터를 쳐도 다른 데를 클릭한 것과 똑같은 확정 처리를 거치게 했다. 방법은 둘이어도 확정은 한 곳에서만 일어난다.

끝나는 방법이 여러 개인 흐름은 확정 처리를 한 군데로 모아야 한다. 각각에 따로 처리를 붙이면 하나는 반드시 다르게 동작하고, 그 하나를 사용자가 찾아낸다.

큐를 옮길 때 재생 위치 근처에 오면 자석처럼 딱 달라붙게 했다(스냅). 처음엔 “0.1초 이내면”처럼 시간으로 판정하려 했는데, 그러면 화면을 확대했을 때와 축소했을 때 붙는 느낌이 완전히 달라진다.

화면상 픽셀 거리로 판정하니 배율과 무관하게 손맛이 일정해졌다.

사용자가 손으로 조작하는 것의 감각은 데이터 단위가 아니라 화면 단위에 붙어 있다. 끌기, 붙기, 눌림 판정 같은 것은 전부 보이는 크기로 재야 한다. 데이터 단위로 만들면 확대·축소·기기 크기가 바뀔 때마다 다른 물건이 된다.