A 에서 B 로 가는 길을설계합니다.
01 EASE — 같은 1초, 여섯 갈래
출발·도착·길이가 같아도 곡선이 다르면 다른 움직임입니다.
02 SPRING — 공 하나의 무게
떨어질 때 늘어나고 닿을 때 찌그러집니다. 점 사이 간격이 곧 속도입니다.
03 MORPH — 글자가 다른 단어가 된다
폭과 굵기, 축 두 개만으로 단어를 바꿉니다.
04 SPLIT — 하나가 여럿이 된다
칼선을 긋고, 나누고, 한 걸음 물러나 봅니다.
05 DATA — 15초를 숫자로
이 쇼릴은 키프레임 384개, 900프레임입니다.
06 LAND — 모든 것이 ONSET 이 된다
앞 장의 물건이 글자 자리에 내려앉습니다.
정지 컷 6장 — 쇼릴을 한 장씩
동작 줄이기가 켜져 있어 15초 쇼릴 대신 장마다 가장 많은 것을 말하는 한 컷을 보입니다.
-
01 EASE — 같은 1초, 여섯 갈래
1.00초의 절반 지점 — 여섯 A 가 곡선마다 다른 자리에 있다
-
02 SPRING — 공 하나의 무게
1/12초 간격 점 — 꼭대기에서 촘촘하고 바닥 근처에서 성기다
-
03 MORPH — 글자가 다른 단어가 된다
SWING 다섯 글자가 서로 다른 축 값에 멈춘 모습
-
04 SPLIT — 하나가 여럿이 된다
16칸이 서로 다른 크기로 — 칼선 하나
-
05 DATA — 15초를 숫자로
키프레임 384 · 프레임 900 · 15.00초
-
06 LAND — 모든 것이 ONSET 이 된다
앞 장의 물건이 글자 자리에 내려앉아 완성된 워드마크
정지 컷 6장
사례 — 무엇을, 얼마나, 어떤 곡선으로
-
결제가 끝난 순간을 0.4초 안에 알리는 일이었습니다. 체크 표시를 선 그리기로 긋고, 같은 곡선으로 카드가 영수증 크기로 접힙니다.
expo.out 은 처음 80ms 에 거리의 대부분을 갑니다. 누른 사람은 기다리지 않고, 끝은 조용히 멈춥니다.
앱 팀이 그대로 쓰도록 CSS 토큰과 Lottie JSON 두 가지로 넘겼습니다.
- 키프레임
- 12
- 넘긴 형식
- CSS · Lottie JSON
- 곡선
- expo.out
-
6초짜리 브랜드 영상의 마지막 1.5초, 로고가 바닥에 떨어져 세 번 튀고 제자리에 서는 장면입니다.
낙하는 bounce.out, 마지막에 서는 순간만 back.out(1.4) 로 살짝 넘었다가 돌아옵니다. 무게가 있는 소리처럼 보이게.
24fps 144 프레임을 ProRes 4444 로 넘겨 편집실이 알파 채널 그대로 얹었습니다.
- 프레임
- 144
- 넘긴 형식
- ProRes 4444
- 곡선
- bounce.out · back.out(1.4)
-
매달 나가는 이용 리포트의 막대와 숫자를 0.9초 안에 읽히게 만드는 일이었습니다.
막대는 40ms 간격으로 순서대로 자라고, 숫자는 1.2초 동안 굴러 최종값에 멈춥니다. 눈이 왼쪽에서 오른쪽으로 따라갑니다.
개발 팀에는 SVG 와 함께 곡선·길이·지연을 적은 JS 사양서를 넘겼습니다.
- 숫자 굴림
- 1.2초
- 넘긴 형식
- SVG · JS 사양서
- 곡선
- power2.inOut
할 수 있는 일
| 분야 | 무엇을 | 보통 길이 | 대표 곡선 | 넘기는 형식 |
|---|---|---|---|---|
| 제품 UI | 전환·누름 피드백·상태 변화 | 120–420ms | expo.out | CSS 토큰 · Lottie |
| 키네틱 타입 | 가변 축 모프·자간·줄 단위 안무 | 0.6–3초 | power3.inOut | 영상 · 웹 코드 |
| 차트 | 성장·숫자 굴림·선 그리기 | 0.9–1.2초 | power2.inOut | SVG + 사양서 |
| 도형 | 분열·모프·줌 | 1–4초 | back.out · elastic.out | 영상 · 웹 코드 |
| 입자 | 흩어짐·모임·흐름(캔버스 2D) | 2–8초 루프 | sine.inOut | 웹 코드(일시정지 포함) |
다음 15초를 같이 설계합니다
길게 눌러 복사하세요
평일 하루 안에 답합니다(가상 스튜디오).