마우스랑 스크롤로 "움직이는 영상"을 조종하는 웹사이트, 어떻게 만드는지 처음부터 아주 쉽게. 코드 몰라도 개념은 이해되게 썼어요.

1단계 · 우리가 뭘 만들려고 했나

한 장면을 상상해보세요. 웹사이트에 들어가면 캐릭터(뭉이)가 깜깜한 심해 바닥에 있어요.

• 스크롤을 내리면 → 뭉이가 수면 위로 헤엄쳐 올라와 땅에 도착해요.
• 마우스를 좌우로 움직이면 → 뭉이가 그 방향을 쳐다봐요. (나를 보는 느낌!)
• 마우스를 더 움직이면 → 뭉이가 마법을 부려서 꽃이 좌우로 피어나고, 화면이 꽃으로 가득 차요.
• 마지막에 스크롤하면 → 꽃 사이로 뭉이 얼굴이 쏙 나와서 손을 흔들며 인사해요.

핵심은 이거예요: 영상이 그냥 재생되는 게 아니라, 내 마우스랑 스크롤이 영상을 조종해요. 내가 멈추면 영상도 멈추고, 내가 되감으면 영상도 되감겨요.

2단계 · 딱 하나만 이해하면 됨 (플립북 비유)

어릴 때 공책 모서리에 그림 그려서 빠르게 넘기면 움직이는 그림책(플립북) 만들어 본 적 있죠? 영상도 똑같아요. 사진(프레임) 여러 장을 빠르게 넘기는 거예요.

보통 영상은 자동으로 페이지가 넘어가요(재생). 우리가 하는 건 딱 하나만 바꾸는 거예요:

페이지를 넘기는 속도를, 내 마우스/스크롤이 정하게 한다.

• 스크롤을 천천히 내리면 → 그림책이 천천히 넘어감 (뭉이가 천천히 올라옴)
• 마우스를 왼쪽으로 가면 → 그림책을 앞쪽 페이지로 (뭉이가 왼쪽 봄)
• 마우스를 오른쪽으로 가면 → 뒤쪽 페이지로 (뭉이가 오른쪽 봄)

그게 전부예요. 어려운 3D나 캐릭터 뼈대(리깅) 그런 거 하나도 없어요. 영상 한 개 + 마우스 위치를 연결하는 거예요.

이걸 멋진 말로 "스크럽(scrub)"이라고 불러요. 그냥 "내가 영상을 손으로 넘긴다" 정도로 생각하면 돼요.

3단계 · 어떤 "움직임"이 필요했나