본문으로 건너뛰기
Kamo

개발

Kamo의 자동 줌은 어떻게 작동할까

날것의 마우스 클릭에서 미끄러지는 카메라까지. 모든 줌 뒤에 있는 묶음 규칙, 타이밍, 스프링 물리.

· 5분 분량 · 글: Doug Siqueira

Kamo 녹화에서는 클릭 하나하나가 누군가 카메라를 잡고 있는 것 같은 줌이 돼요. AI는 전혀 안 들어가요. 몇 가지 단순한 규칙과 약간의 물리뿐이에요. 레시피를 통째로 공개할게요.

1. 무엇을 클릭으로 칠까

녹화하는 동안 Kamo는 마우스의 움직임, 클릭, 스크롤을 영상과 같은 시계에 맞춰 파일에 기록해요. 프로젝트를 처음 열 때 Kamo는 이 이벤트를 읽고, 녹화 영역 안의 왼쪽 버튼 누름만 봐요.

  • 오른쪽 클릭과 가운데 클릭은 절대 줌이 안 돼요.
  • 스크롤과 그냥 움직임은 절대 줌을 만들지 않아요.
  • 녹화 중인 창이나 영역 밖의 클릭은 무시해요.

2. 클릭을 장면으로 묶기

클릭마다 줌이 따로 들어가면, 폼 하나 채우는 동안 카메라가 손에 든 휴대폰처럼 흔들릴 거예요. 그래서 Kamo는 클릭을 장면으로 묶어요. 아래 두 조건을 모두 만족하면 클릭이 현재 장면에 합류해요.

  • 이전 클릭을 뗀 뒤 1.5초 이내에 들어오고,
  • 장면의 첫 클릭에서 화면 대각선의 4분의 1 안에 떨어질 것(1080p 화면에서 약 550px).

마지막 클릭이 아니라 첫 클릭에서 재는 게 중요해요. 안 그러면 작은 걸음이 이어지면서 장면이 화면 끝까지 걸어가 버릴 수 있거든요.

3. 타이밍

장면은 첫 클릭 0.3초 전에 시작해서, 클릭이 떨어질 때 보는 사람은 이미 그 자리를 보고 있어요. 그리고 마지막으로 뗀 뒤 1초 동안 유지돼요. 장면은 최소 0.6초예요. 두 장면이 겹치게 되면 하나로 합쳐져요.

카메라는 기본으로 2× 줌하고, 장면 클릭들의 평균 위치를 겨눠요. 가장자리에서는 안쪽으로 살짝 밀어서 영상 밖이 보이지 않게 해요. 줌 안에서는 카메라가 커서를 부드럽게 따라가며 끌려가요.

4. 스프링

줌은 절대 선형 이징을 쓰지 않아요. 카메라는 감쇠 스프링(강성 170, 감쇠 26)이에요. 잘 만든 휴대폰 애니메이션에서 느끼는 바로 그 움직임이죠. 빠르게 출발해서, 부드럽게 느려지고, 흔들림 없이 멈춰요.

느낌을 제대로 살리는 디테일이 두 가지 있어요.

  • 스프링을 단계별로 시뮬레이션하지 않고, 닫힌 형태로 정확히 풀어요. 어떤 프레임 레이트든 같은 곡선이 나와서 미리보기와 60fps 내보내기가 일치해요.
  • 스프링이 도착하는 데 약 0.6초가 걸려서, 카메라는 클릭 전에 움직이기 시작해 한 프레임 안에 클릭 위에 내려앉아요. 연달아 이어지는 줌은 중간에 줌 아웃 없이 한 목표에서 다음 목표로 바로 넘어가요.

5. 커서도 같은 스프링을 타요

Kamo는 Windows 커서 없이 화면을 녹화하고, 마우스 경로를 따라 자체 커서를 그려요. 축마다 같은 스프링을 써요. 전체 경로를 미리 알고 있으니 커서가 약 150ms 앞을 내다볼 수 있어서, 손보다 늦지 않게 미끄러져요. 클릭할 때마다 남은 오차를 서서히 지워서, 클릭하는 프레임에서 커서가 클릭 지점에 정확히 놓여요.

6. 마지막 결정은 항상 내가

모든 줌은 타임라인에 블록으로 나타나요. 끌고, 늘리고, 배율을 바꾸고, 지우거나, 더블클릭해서 직접 추가하세요. 손댄 블록은 수동이 되고, Regenerate zooms(줌 다시 생성)는 언제나 자동 줌만 바꿔요.

전부 결정론적이고(같은 녹화면 같은 줌), 빨라요. 10분짜리 녹화의 줌이 1초도 안 걸려서 만들어져요.

읽어 보고 싶다면 코드는 오픈소스로 공개돼 있고, 지금 바로 브라우저에서 줌을 써 볼 수도 있어요.

다른 글

다음 녹화에서 바로 써 보세요.

무료, 오픈소스, 계정 없음. 첫 편집 영상까지 다운로드 한 번이면 돼요.