앞 두 글은 언제 움직이느냐였습니다. 이번 둘은 움직이는 동안 물체가 어떻게 생기느냐, 그리고 어떤 길로 가느냐입니다.
스쿼시 앤 스트레치 — 부딪히면 눌립니다
맨 위 그림에서 공 둘은 같은 높이에서 같은 시간에 떨어집니다. 왼쪽은 모양이 안 변합니다. 오른쪽은 떨어지는 동안 세로로 길어지고, 바닥에 닿는 순간 납작해졌다가 되돌아옵니다.
왼쪽은 돌덩이로, 오른쪽은 고무공으로 읽힙니다. 모양 변화가 재질을 말합니다.
부피는 그대로 두어야 합니다
이게 이 기법의 유일한 규칙입니다. 가로로 넓어진 만큼 세로로 낮아져야 같은 물체로 보입니다.
| 상태 | 가로 × 세로 |
|---|---|
| 평소 | 1.00 × 1.00 |
| 날아갈 때 (스트레치) | 0.88 × 1.16 |
| 부딪힐 때 (스쿼시) | 1.34 × 0.62 |
가로만 키우면 물체가 커진 것이고, 세로만 줄이면 물체가 사라지는 것입니다. 둘을 반대로 같이 움직여야 눌린 것으로 읽힙니다.
기준점이 바닥에 있어야 합니다
납작해질 때 위에서 눌려야 합니다. 가운데를 기준으로 줄이면 공이 바닥을 뚫고 내려갑니다. CSS로는 transform-origin: 50% 100% 입니다. 프롬프트에는 이렇게 씁니다.
공이 바닥에 닿을 때 아래를 기준으로 납작해지게 해 줘.
아크 — 자연에 직선으로 가는 것은 거의 없습니다
같은 출발점, 같은 도착점, 같은 시간입니다. 지나가는 길만 다릅니다.
직선이 기계처럼 보이는 이유는 이징 때와 같습니다. 던진 공도, 휘두른 팔도, 고개를 돌리는 것도 전부 호를 그립니다. 관절이 있는 것은 직선으로 못 움직입니다.
만드는 법은 간단합니다
가로와 세로를 따로 움직이면 됩니다.
- 가로는 고르게 (거의
linear) - 세로는 올라갔다 내려오게 (
ease-in-out)
둘을 겹치면 포물선이 나옵니다. 위 그림이 정확히 그렇게 만들어졌습니다.
프롬프트에는 이렇게 씁니다.
카드가 왼쪽에서 오른쪽으로 갈 때 가운데에서 40px 위로 솟았다 내려오게 해 줘.
어디에 쓰고 어디에 안 쓰나
| 쓰는 곳 | 안 쓰는 곳 |
|---|---|
| 알림 배지가 튀어나올 때 | 표의 행이 정렬될 때 |
| 아이콘을 눌렀을 때 | 모달이 열릴 때 |
| 장바구니로 물건이 날아갈 때 | 사이드바가 밀려 나올 때 |
| 캐릭터·마스코트 | 글자 블록 |
기준은 하나입니다. 그 물체가 물렁한 것으로 보여도 되는가. 버튼과 카드는 단단해야 믿음직스럽고, 배지와 마스코트는 물렁해도 됩니다.
안 되는 것
- 문서에 쓰면 어지럽습니다. 목록이 호를 그리며 들어오면 읽기 전에 눈이 먼저 피곤해집니다
- 스쿼시를 크게 주면 고무가 아니라 물풍선이 됩니다. 화면 UI에서는
1.1 × 0.9정도가 상한입니다. 위 그림의1.34 × 0.62는 원리를 보이려고 과장한 값입니다 - 아크의 높이는 이동 거리의 10~15%면 충분합니다. 그보다 크면 던진 게 아니라 튕겨 나간 것으로 보입니다
- 둘 다 한 화면에 하나씩만. 여기저기서 물렁거리면 화면이 젤리가 됩니다
확인하지 못한 것
위의 배율과 높이 비율은 화면 UI 기준의 관행입니다. 게임이나 캐릭터 애니메이션은 훨씬 과장해도 되고, 실제로 그렇게 합니다. 어느 쪽이 맞는지는 만드는 것의 성격이 정합니다.
정리
- 스쿼시 앤 스트레치는 재질을 말합니다. 안 변하면 돌, 변하면 고무입니다
- 부피는 그대로. 가로로 넓어진 만큼 세로로 낮아져야 같은 물체로 보입니다
- 기준점은 부딪히는 쪽에 둡니다. 가운데로 두면 바닥을 뚫습니다
- 아크는 가로와 세로를 따로 움직이면 나옵니다. 가로는 고르게, 세로는 올라갔다 내려오게
- 단단해야 하는 것, 읽어야 하는 것에는 둘 다 쓰지 않습니다
이어서 읽을 것
앞 편인 이징을 먼저 보시면 이 글의 아크가 왜 이징 위에 얹히는지 이어집니다. 연재 전체는 프롬프트 연구에 있습니다.