모션 프롬프트 ⑧ 키네틱 타이포 · 카운트업 · 루프 — 글자와 숫자, 그리고 끝을 처음에 잇기

연재의 마지막입니다. 이번 셋은 글자와 숫자, 그리고 끝을 처음에 잇는 법입니다.

키네틱 타이포 — 단어 단위로

맨 위 그림에서 문장이 단어씩 올라옵니다. 한 글자씩이 아닙니다.

한 글자씩 튀어나오는 연출을 자주 보는데, 한글에서는 특히 안 좋습니다. 뜻이 음절이 아니라 단어에 붙기 때문입니다. "글·자·는"으로 쪼개지면 다 나올 때까지 아무 뜻도 읽히지 않습니다.

• 쪼개는 단위는 뜻이 끊기지 않는 덩어리 — 단어, 어절
• 지연은 80~140ms (스태거와 같은 원리인데 조금 깁니다)
• 각 덩어리는 짧게 움직입니다. 200~300ms

가장 중요한 것은 이것입니다. 글자가 움직이는 동안은 못 읽습니다. 읽을 시간은 멈춘 뒤부터 셉니다. 그래서 연출 시간이 길수록 읽는 시간이 늦게 시작됩니다.

제목을 어절 단위로 100ms씩 늦게, 각각 아래에서 16px 올라오며 240ms ease-out.

카운트업 — 끝에서 느려져야 합니다

숫자가 0에서 목표값까지 올라가는 연출입니다. 흔한데 자주 어색합니다. 이유는 대개 일정한 속도로 올라가기 때문입니다.

linear로 올리면 목표값에 뚝 멈춥니다. 도착한 게 아니라 끊긴 것으로 보입니다. 이징의 규칙이 여기도 그대로 적용됩니다 — 들어오는 것은 ease-out.

마지막 항목이 중요합니다. 숫자가 올라가는 동안 자릿수가 바뀌면 옆의 것들이 같이 밀립니다. 고정폭 글꼴을 쓰거나 자리를 미리 잡아 두어야 합니다.

0에서 1,284까지 1.2초 동안 ease-out으로 올려 줘. 올라가는 동안 숫자 폭이 변하지 않게 고정폭으로.

루프 — 끝 프레임과 첫 프레임이 같아야 합니다

위 그림의 오른쪽 띠는 끝없이 흐르는데 이음매가 안 보입니다. 한 주기만큼 정확히 밀었기 때문입니다.

무늬 한 주기 = 260px  →  translateX(0) 에서 translateX(-260px) 까지

한 픽셀만 어긋나도 매 주기마다 튑니다. 그리고 사람 눈은 그 튐을 놀랄 만큼 잘 잡아냅니다. 로딩 표시나 배경 띠가 "뭔가 거슬리는데 뭔지 모르겠다" 싶으면 대개 이것입니다.

만드는 법은 둘 중 하나입니다.

1. 무늬를 주기적으로 만들고 정확히 한 주기만큼 민다 (위 그림)
2. 왕복시킨다 — 갔다가 되돌아온다. 이음매가 아예 없지만 움직임이 단조롭다

배경 띠가 정확히 한 주기(260px)만큼 6초에 걸쳐 linear 로 흐르게 해 줘. 끝 프레임이 첫 프레임과 완전히 같아야 해.

안 되는 것

• 긴 문장에 키네틱 타이포를 쓰면 읽기 전에 지칩니다. 제목과 짧은 문구까지
• 카운트업을 3초 넘게 끌면 숫자를 보려던 사람이 기다리게 됩니다
• 루프에 ease를 쓰면 주기마다 느려졌다 빨라져서 이음매가 더 드러납니다. 루프는 linear입니다
• 셋 다 한 화면에 하나만. 글자가 날고 숫자가 오르고 배경이 흐르면 어디를 볼지 알 수 없습니다

연재를 닫으며 — 스물한 개 한눈에

여덟 편을 한 줄로

"부드럽게"라고 쓰지 말고 숫자를 쓰십시오. 무엇이 · 얼마나 · 어떤 곡선으로 얼마 동안. 이 넷을 적으면 AI가 고르는 것이 아니라 내가 고른 것이 나옵니다.

그리고 전부에 공통인 것 하나. prefers-reduced-motion을 켠 사람에게는 이 모든 것이 꺼져야 합니다. 이 연재의 그림 열두 장도 그 설정에서는 멈춘 채로 나옵니다.

확인하지 못한 것

이 연재에 적은 숫자는 대부분 화면 UI에서 널리 쓰이는 범위이지 측정값이 아닙니다. 영상 편집이나 게임 연출은 같은 단어를 쓰면서 값은 전혀 다릅니다. 만드는 것의 성격이 먼저이고, 여기 적은 값은 출발점입니다.