화면은 평평합니다. 그런데 속도만으로 깊이를 만들 수 있습니다.
패럴랙스 — 거리는 속도로 읽힙니다
맨 위 그림에서 세 겹이 같은 방향으로 흐릅니다. 다른 것은 속도뿐입니다.
- 맨 뒤 산 — 30초에 한 바퀴
- 가운데 언덕 — 14초
- 맨 앞 풀 — 7초
크기가 아니라 속도가 거리를 말합니다. 같은 크기라도 느리게 흐르면 멀리 있는 것으로 보입니다. 차를 타고 갈 때 전봇대는 휙 지나가고 산은 따라오는 것과 같은 원리입니다.
겹은 셋이면 충분합니다
넷, 다섯으로 늘려도 눈은 구분하지 못하고 그리는 일만 늡니다. 배경 · 중간 · 전경 셋이면 깊이가 충분히 읽힙니다.
속도 비율
배경을 1로 놓았을 때 대략 이렇습니다.
| 겹 | 배경 대비 속도 |
|---|---|
| 배경 | 1 |
| 중간 | 2~2.5배 |
| 전경 | 4~5배 |
배경은 스크롤의 0.2배, 중간은 0.5배, 앞은 1배(그대로) 로 움직이게 해 줘.
스크롤 패럴랙스는 배수로 적는 편이 편합니다. 1배가 "화면과 같이 움직임"이고, 0에 가까울수록 멀리 있는 것입니다.
푸시 인 — 보이면 실패입니다
푸시 인은 카메라가 아주 천천히 다가가는 것입니다. 위 그림의 오른쪽은 12초에 걸쳐 1.16배까지 커집니다.
움직임이 보이면 실패입니다. 눈에 띄는 순간 "왜 커지지"가 되고, 안 보여야 "점점 집중하게 된다"가 됩니다.
| 값 | |
|---|---|
| 배율 | 10초에 1.1~1.2배 |
| 곡선 | ease-in-out 또는 거의 linear |
| 기준점 | 화면 가운데, 또는 주인공이 있는 자리 |
그보다 빠르면 그건 푸시 인이 아니라 확대입니다. 확대는 "이걸 봐"라고 말하고, 푸시 인은 아무 말도 하지 않으면서 같은 일을 합니다.
둘을 같이 쓰면
배경이 패럴랙스로 흐르는 동안 전체가 아주 천천히 푸시 인 되면, 화면이 살아 있는 것처럼 보입니다. 정지 화면 한 장으로 영상 같은 느낌을 만드는 가장 값싼 방법이라 사진 슬라이드나 첫 화면에 많이 씁니다.
배경 사진을 14초에 1.14배까지 천천히 키우면서, 앞의 글자는 스크롤의 0.6배로 움직이게 해 줘.
안 되는 것
- 읽는 화면에 패럴랙스를 넣으면 멀미가 납니다. 글을 읽는 동안 배경이 따로 움직이면 눈이 초점을 어디 둘지 몰라 피로해집니다. 본문 영역은 그대로 두십시오
- 모바일에서는 더 약하게. 화면이 작아 같은 배수라도 상대적 움직임이 커 보입니다. 절반 정도로 줄이거나 아예 끄는 편이 낫습니다
- 푸시 인을 영원히 돌리면 결국 너무 커져서 화면이 뭉개집니다. 왕복시키거나 한 번만 하고 멈춰야 합니다
prefers-reduced-motion에서는 둘 다 꺼야 합니다. 이 두 기법은 어지럼증을 가장 잘 일으키는 축에 듭니다
확인하지 못한 것
속도 비율과 배율은 널리 쓰이는 값입니다. 어느 정도에서 멀미가 시작되는지는 사람마다 다르고, 저는 재 보지 않았습니다. 그래서 "본문에는 넣지 말 것"과 "설정에서 끌 수 있게" 두 가지를 기본으로 둡니다.
정리
- 패럴랙스는 속도로 거리를 만듭니다. 크기가 아니라 속도입니다
- 겹은 셋. 배경 1 : 중간 2~2.5 : 전경 4~5
- 푸시 인은 보이면 실패입니다. 10초에 1.1~1.2배
- 읽는 화면에는 넣지 않습니다. 모바일은 절반으로, 축소 설정에서는 끕니다
이어서 읽을 것
깊이를 만드는 이야기라 공간을 다루는 앞 편과 붙어 있습니다. 스쿼시 앤 스트레치 · 아크를 먼저 보시면 이어지고, 연재 전체는 프롬프트 연구에 있습니다.