브라우저 영상 편집기의 타임라인 트리밍 UX를 개선했습니다 — 피드백 부탁드립니다
안녕하세요. 오픈소스 브라우저 영상 편집기 Timeline Studio를 개발하고 있습니다.
이미지, 영상, 자막, 음성, 배경음악, 오버레이를 설치 없이 하나의 타임라인에서 편집할 수 있도록 만드는 프로젝트입니다.
최근에는 클립의 트리밍 핸들을 화면 가장자리까지 드래그했을 때, 타임라인이 자동으로 스크롤되면서 클립 길이도 계속 조절되는 기능을 개선했습니다.
처음 구현했을 때 데이터 자체는 정확했습니다. 클립 duration도 맞았고, 저장된 타임라인 범위도 올바르게 갱신됐습니다. 하지만 실제로 마우스와 스마트폰으로 조작해 보니 UX가 자연스럽지 않았습니다.
발견한 문제는 다음과 같았습니다.
• 모바일에서 손가락이 화면 끝에 닿는 순간 클립이 의도보다 훨씬 길게 늘어나는 현상
• 바깥쪽으로 늘릴 때와 다시 안쪽으로 줄일 때 스크롤 속도가 다르게 느껴지는 문제
• 타임라인을 확대하거나 축소한 뒤 마우스 위치와 트리밍 핸들이 어긋나는 현상
• 모바일에서 8초 위치까지 드래그했지만 손을 놓으면 약 4초 위치처럼 보이는 문제
• 클립을 줄였을 때 활성 핸들이 화면 밖으로 사라지는 문제
• 데스크톱용 수정이 고정 플레이헤드를 사용하는 모바일 동작을 깨뜨리는 문제
원인은 하나의 트리밍 동작에서 서로 다른 좌표계를 같은 값처럼 사용한 것이었습니다.
- 화면 위의 포인터 좌표
- scrollLeft
- 렌더링된 타임라인 픽셀
- 타임라인의 실제 시간
- 데스크톱의 가변 플레이헤드
- 모바일의 고정 플레이헤드
개별 증상을 하나씩 보정하는 대신, 사용자가 직접 확인할 수 있는 UX 원칙을 먼저 정의했습니다.
1. 트리밍 핸들은 항상 마우스나 손가락 가까이에 있어야 합니다.
2. 한 번의 제스처가 끝날 때까지 pixels-per-second 값은 바뀌면 안 됩니다.
3. 자동 스크롤 이동량을 클립 리사이즈 이동량으로 한 번 더 계산하면 안 됩니다.
4. 눈금자, 클립, 핸들은 동일한 시간 스케일을 사용해야 합니다.
5. 지나치게 늘어난 부분을 되돌릴 때는 정밀하게 조절할 수 있어야 합니다.
6. 활성 핸들이 화면 밖으로 완전히 사라지면 안 됩니다.
7. 모바일에서 손을 뗀 뒤 고정 플레이헤드 아래의 시간이 바뀌면 안 됩니다.
최종적으로 직접 드래그하는 움직임은 1:1로 유지했습니다. 화면 가장자리에서 바깥쪽으로 클립을 늘릴 때의 자동 스크롤은 최대 14px/frame, 다시 안쪽으로 줄일 때는 최대 6px/frame으로 제한했습니다. 되돌리는 동작을 느리게 만든 이유는 오버슈트를 더 정확하게 수정할 수 있도록 하기 위해서입니다.
또한 트리밍이 프로젝트 전체 길이를 늘릴 때 기존 타임라인을 같은 폭 안에 압축하지 않고, 트랙과 눈금자 폭 자체가 늘어나도록 변경했습니다. 한 번의 드래그 중에는 시간 스케일을 고정하고, 제스처가 끝난 뒤에만 변경된 표시 범위를 확정합니다.
현재 확대/축소, 화면 가장자리 자동 스크롤, 반대 방향 드래그, 모바일 고정 플레이헤드 좌표 변환 등을 포함한 회귀 테스트 35개를 추가했습니다. 하지만 최종 duration 값만 검사하는 테스트보다 실제 마우스와 모바일 터치 환경에서 반복해서 조작해 본 것이 더 많은 문제를 발견하는 데 도움이 됐습니다.
소스 코드는 아래에서 확인하실 수 있습니다.
https://github.com/MartinDelophy/ai-video-editor
영상 편집 도구를 사용하거나 직접 개발해 보신 분들의 의견을 듣고 싶습니다.
화면 가장자리에서 길이를 지나치게 늘린 뒤 다시 줄일 때, 양방향 스크롤 속도가 같은 것이 더 자연스러우신가요? 아니면 되돌리는 속도를 조금 낮춰 정밀하게 조절할 수 있는 방식이 더 편하신가요?
모바일과 데스크톱에서 다르게 느껴지는 부분이나 테스트해 보고 싶은 상황도 알려주시면 감사하겠습니다.
