콘티온 ContiOn TIL 6

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

콘티 편집 화면에 하루 동안 여러 개선을 붙였다. 그중 판단이 필요했던 셋을 모았다.

데스크톱에선 되는데 iPad에선 안 됐다

실사용자가 “순서를 바꾸는 기능이 있으면 좋겠다”고 물어 왔다. 순서 바꾸기는 이미 있었다. 데스크톱에서 항목을 끌어다 놓는 드래그로. 그런데 그 사람은 iPad로 쓰고 있었고, 터치 기기에서는 드래그가 전혀 먹지 않아 기능이 없는 것처럼 보였던 것이다.

원인은 브라우저 기본 드래그(HTML5 네이티브 드래그 — 브라우저가 기본으로 주는 끌어 놓기 기능)가 iOS·iPadOS에서 손가락으로 끄는 동작을 드래그로 받아 주지 않는다는 데 있었다. 마우스 전용 기능이었던 셈이다. 만드는 쪽은 데스크톱에서만 써 봤으니 몰랐고, 다른 기기로 쓰는 사람이 물어서야 드러났다.

갈아엎을까, 옆에 길을 하나 더 낼까

선택지는 셋이었다.

드래그 라이브러리(dnd-kit — 마우스·터치 드래그를 한꺼번에 처리해 주는 외부 패키지)로 교체
포인터 이벤트(마우스·터치·펜 입력을 하나로 다루는 브라우저 기능)로 드래그를 직접 다시 구현
드래그는 그대로 두고, 터치용으로 버튼 경로를 따로 얹기

터치 드래그 자체는 앞의 둘로 충분히 된다. 문제는 콘티 드래그가 단순 목록이 아니라는 점이었다. 그룹째 옮기기, 그룹 밖 경계, 왼쪽 곡 목록에서 콘티로 끌어넣기, 놓일 자리 표시선, 끄는 동안 자동 스크롤이 전부 얽혀 있어서 라이브러리로 바꾸면 사실상 전면 재작성이다. 새 의존성(외부 패키지)이 붙으면 용량·보안 검토가 따라오고, 터치에서는 “끌어 옮기기”와 “화면 스크롤”이 같은 손가락 동작이라 둘을 가려내는 조정도 필요하다. 자동 테스트가 없어서 망가진 곳은 iPad 실기기로만 잡힌다.

잘 돌던 데스크톱 경로를 걷어내면서 이 비용을 다 치를 만큼 급하지 않았다. 그래서 데스크톱 드래그는 손대지 않고 버튼 경로를 얹기로 했다.

항목마다 선택 동그라미(라디오 버튼)를 두고 하나만 고른다.
목록 위 공용 버튼 한 줄(위로·아래로·그룹 넣기/빼기)이 고른 항목에 작용한다. 항목마다 버튼을 달지 않는다.
그룹 머리글을 고르면 그룹째, 곡을 고르면 한 칸씩 움직인다.

입력 방식을 하나로 통일하는 건 미뤘다. 위 비용 목록을 적어 둔 건, 나중에 다시 저울질할 때 무엇을 치러야 하는지 바로 보려고서다. 하나로 합치는 게 깔끔하긴 하지만, 멀쩡히 도는 경로를 걷어내는 비용이 그 깔끔함보다 클 때는 옆에 길을 하나 더 내는 쪽이 싸다.

구분을 필수로 하되, DB 제약은 걸지 않았다

곡의 구분(카테고리)을 반드시 고르게 하고, 어디에도 애매한 곡은 ‘그 외’라는 구분에 담기로 했다. ‘기타’는 이미 순서용 구분에 있어서 이름이 겹쳤고, 이름이 겹치면 그 곡이 곡인지 순서 자막인지 판정이 흐려져 ‘그 외’로 갈랐다.

가장 확실한 방법은 DB에 NOT NULL(그 칸을 비워 두면 저장 자체를 거부하는 제약)을 거는 것이다. 그런데 이 앱의 DB인 SQLite는 이미 있는 칸에 NOT NULL을 나중에 붙이려면 표를 통째로 새로 만들어야 하고, 곡 표는 콘티 항목 같은 다른 표들이 외래 키(다른 표의 행을 가리키는 연결)로 가리키고 있었다. 표를 다시 만드는 도중에 그 연결이 끊기면 운영 중인 데이터가 망가진다.

그래서 “필수”를 DB가 아니라 앱에서 지키기로 했다. 저장할 때 서버가 구분이 비었는지 검사해 거부하고, 옛 곡의 빈 구분은 데이터 정리로 한 번에 채웠다. 새로 빈 값이 생기지 않고 옛 빈 값도 없으니 사실상 필수가 된다. DB 제약은 얻는 것에 비해 위험이 커서 백로그로 남겼다.

같은 목적이라도 가장 단단한 수단이 늘 맞는 건 아니다. 그 수단을 거는 과정에서 무엇이 깨질 수 있는지까지 같이 잰다.

PPT를 뽑아 봐야만 결과를 알 수 있었다

내보내기 전에 슬라이드를 미리 볼 방법이 없어서, 뽑아 열어 봐야 잘못된 곳이 보였다. 그래서 내보내기 전에 슬라이드 미리보기를 넣기로 했다. 미리보기가 결과와 어긋나면 믿을 수 없다는 것(앞선 TIL 2), 둘이 같은 결과를 보여 주려면 계산하는 곳을 하나로 모아야 한다는 것(앞선 TIL 3)은 이미 겪은 대로 따랐다.

이번에 새로 정한 건 끝내 맞출 수 없는 차이를 다루는 방법이다. 자막이 나가는 PC에만 깔린 글꼴은 브라우저 미리보기에서 비슷한 글꼴로 보이고, 넘치는 긴 줄이 자동으로 줄어드는 건 실제 PPT를 열어야만 보인다. 이 둘은 브라우저가 흉내 낼 방법이 없다. 그래서 미리보기 위에 “글꼴과 긴 줄 축소는 실제 PPT와 다를 수 있다”고 적어 두었다.

맞출 수 없는 차이는 숨기지 말고 미리 말해 둔다. 미리보기가 어디까지 믿을 만한지 알고 보면, 어긋난 곳을 보고도 미리보기 전체를 의심하지 않는다.

요약

데스크톱에서 되던 드래그가 터치 기기에선 안 됐다. 만드는 쪽은 한 기기로만 보니 모르고, 다른 기기로 쓰는 사람이 물어야 드러난다.
터치 대응을 위해 얽힌 드래그를 라이브러리로 갈아엎는 대신, 선택 + 공용 버튼이라는 다른 길을 얹었다. 걷어내는 비용이 통일의 깔끔함보다 크면 길을 하나 더 내는 쪽이 싸다.
“필수”를 DB 제약으로 걸려면 표를 다시 만들어야 해서 연결이 끊길 위험이 컸다. 앱 검증과 데이터 정리로도 사실상 필수가 된다.
미리보기로도 맞출 수 없는 차이(재생 PC 글꼴, 긴 줄 자동 축소)는 숨기지 말고 미리보기 위에 적어 둔다.

Series: Today I Learn