모션 레퍼런스 추가

만들게 된 계기

X나 Threads를 보다 보면 연출 이름을 정리한 글이 종종 올라온다.

스크롤하면 카드가 하나씩 떠오르는 건 스태거, 배경과 앞 그림이 다른 속도로 움직이는 건 패럴랙스. 이런 식으로 움직임마다 이름을 붙여 둔 글들이다.

볼 때마다 저장은 해 뒀는데, 막상 쓰려고 하면 어디 있는지 못 찾았다.

AI한테 화면을 만들어 달라고 할 때도 비슷한 일이 있었다. "부드럽게 나타나게 해 줘"라고 쓰면 매번 다른 게 나왔고, 이름을 넣어서 쓰면 한 번에 원하는 쪽으로 갔다.

결국 이름을 아느냐가 중요했는데, 정작 그 이름이 기억나지 않았다.

그래서 저장해 둔 것들을 한곳에 모아, 움직임을 눈으로 보고 이름을 찾을 수 있게 만들어 봤다. 블로그 사이드바의 실험실 아래에 있는 모션 레퍼런스다.

---

어떻게 생겼나

카드 하나가 움직임 하나다.

카드마다 움직이는 데모가 있고, 그 아래에 한국어 이름과 영문 이름, 한 줄 설명이 붙어 있다. 지금은 294개가 들어 있다.

크게 세 갈래로 나눴다.

• 웹 · 앱 화면 — 모달, 드로어, 스크롤 연출, 글자 애니메이션, 숫자 카운트 같은 것
• 모션 그래픽 — 이징, 오버슈트, 장면 전환 같은 것
• 영상 · 사진 — 카메라 움직임, 샷 크기와 앵글, 편집 전환, 사진의 빛과 렌즈

처음 둘은 코딩 AI에, 마지막은 이미지나 영상 생성 AI에 넣을 일이 많다.

이름을 몰라도 찾을 수 있게 설명까지 검색되도록 했다. "커지는", "따라오는" 같은 말로 찾아도 걸린다.

---

쓰는 법

마음에 드는 카드가 있으면 프롬프트 복사를 누르고 AI에 붙여 넣으면 된다. 복사되는 문장은 이런 모양이다.

[Drawer (Off-canvas) · 드로어] 화면 밖에 숨겨 둔 메뉴 패널이 옆 가장자리에서 안쪽으로 밀려 들어오게 해 줘.

영문 이름을 앞에 둔 건 AI가 그 이름을 제일 잘 알아듣기 때문이다. 한국어 이름은 나중에 내가 다시 읽을 때 편하라고 붙였다.

카드 그림을 누르면 크게 볼 수 있다.

큰 화면에서는 조건을 덧붙이는 칩을 고를 수 있다. 드로어라면 "상단 바 오른쪽 끝에", "클릭했을 때" 같은 걸 누르면 요청 문장 아래에 한 줄씩 붙는다.

[Drawer (Off-canvas) · 드로어] 화면 밖에 숨겨 둔 메뉴 패널이 옆 가장자리에서 안쪽으로 밀려 들어오게 해 줘.
- 자리: 상단 바 오른쪽 끝에
- 열리는 때: 클릭했을 때

---

만들면서

참고한 글들에서 가져온 건 연출 이름뿐이다. 이름은 다 같이 쓰는 말이니까 그대로 쓰고, 설명이나 요청 문장은 데모를 보면서 새로 썼다. 데모도 직접 그렸다.

데모는 이미지나 영상이 아니라 전부 CSS 애니메이션이다.

장면은 회색으로 두고, 이름이 가리키는 부분에만 색을 넣었다. 모달이면 떠오르는 창에, 스크롤 줌이면 커지는 그림에만 색이 있어서 무엇을 보면 되는지 바로 보인다.

화면 밖으로 나간 카드는 멈추고, 한 번에 다 멈추는 버튼도 있다. 분류마다 주소도 따로 있어서 /lab/motions/web/scroll 처럼 바로 들어갈 수 있다.

---

바로 가기: https://socialofpeach.com/lab/motions