모션 프롬프트 ⑦ 마스크 리빌 · 모션 블러 · 세컨더리 액션 — 마지막 손질

여기까지 오면 화면은 이미 돕니다. 이번 셋은 없어도 되는데 있으면 티가 나는 것들입니다.

마스크 리빌 — 나타나는 게 아니라 걷히는 것

맨 위 그림의 글자는 처음부터 다 있습니다. 움직이는 것은 덮개입니다.

이게 왜 다른가. 글자가 페이드로 나타나면 흐린 상태를 지나갑니다. 마스크로 걷으면 글자는 언제나 100% 또렷하고, 보이는 범위만 넓어집니다.

• 페이드 — 흐렸다가 진해진다 → 안개가 걷히는 느낌
• 마스크 — 처음부터 또렷, 가린 것만 치운다 → 인쇄물이 드러나는 느낌

제목, 로고, 큰 글자에 마스크를 쓰는 이유가 이것입니다. 또렷함이 한 번도 깨지지 않습니다.

제목이 왼쪽에서 오른쪽으로 덮개가 걷히듯 나타나게 해 줘. 글자 자체는 흐려지지 않게. 520ms, ease-out.

방향도 뜻을 만듭니다. 가로쓰기 글은 읽는 방향(왼쪽에서 오른쪽) 으로 걷어야 자연스럽고, 아래에서 위로 걷으면 "솟아오른다"가 됩니다.

모션 블러 — 방향으로만 늘립니다

위 그림 아래쪽의 두 사각형은 같은 속도로 갑니다. 뒤쪽에만 잔상이 붙었는데 더 빨라 보입니다.

규칙은 하나입니다. 움직이는 방향으로만 늘립니다. 사방으로 번지면 빠른 게 아니라 초점이 안 맞은 것으로 보입니다.

멈춘 뒤에도 흐리면 고장으로 보입니다. 이게 제일 흔한 실수라, 프롬프트에 "멈추면 블러도 0"을 같이 적는 편이 안전합니다.

카드가 옆으로 빠르게 밀릴 때 가로 방향으로만 흐려지게 해 줘. 멈추면 블러는 0.

세컨더리 액션 — 주인공 옆에서 따로 움직이는 것

이름이 어렵지만 뜻은 간단합니다. 주된 동작 옆에서 같이 일어나는 작은 움직임입니다.

• 버튼을 눌렀을 때 — 버튼이 들어가는 것이 주동작, 그림자가 옅어지는 것이 세컨더리
• 카드가 뒤집힐 때 — 회전이 주동작, 뒷면 글자가 조금 늦게 나타나는 것이 세컨더리
• 목록이 사라질 때 — 사라지는 것이 주동작, 빈자리가 위로 당겨지는 것이 세컨더리

세컨더리 액션이 없으면 움직임이 혼자 노는 것처럼 보입니다. 화면의 다른 것들이 그 사건을 모르는 것 같기 때문입니다.

주동작을 이기면 안 됩니다

이름 그대로 둘째입니다. 세컨더리가 더 크거나 더 오래 움직이면 눈이 그쪽으로 가서 정작 중요한 것을 놓칩니다.

• 크기는 주동작의 절반 이하
• 시작은 조금 늦게(오버랩과 같은 원리)
• 끝나는 것은 주동작보다 먼저거나 비슷하게

안 되는 것

• 마스크 리빌을 본문에 쓰면 읽으려는 사람이 덮개가 걷히기를 기다려야 합니다. 제목까지만
• 모션 블러를 CSS filter: blur()로 상시 걸면 느려집니다. 움직이는 동안만 켜고 끝나면 꺼야 합니다
• 세컨더리를 여러 개 붙이면 무엇이 주인공인지 사라집니다. 하나면 충분합니다
• 셋 다 저사양 기기에서 제일 먼저 끊기는 것들입니다. 없어도 기능이 되도록 만들고, 안 될 때 우아하게 빠지게 해야 합니다

확인하지 못한 것

모션 블러가 어느 속도부터 필요한지는 화면 주사율과 기기에 따라 다릅니다. 120Hz 화면에서는 60Hz보다 잔상이 덜 필요합니다. 저는 두 환경을 나란히 재 보지 않았습니다.

정리

• 마스크 리빌은 또렷함을 한 번도 깨지 않습니다. 제목과 로고에
• 모션 블러는 이동 방향으로만. 멈추면 0
• 세컨더리 액션은 둘째입니다. 주동작의 절반 이하, 조금 늦게 시작
• 셋 다 없어도 되게 만들고 그 위에 얹습니다