앞 글까지는 한 화면 안이었습니다. 이번은 화면이 바뀌는 순간입니다.
매치컷 — 형태를 남기고 나머지를 바꿉니다
맨 위 그림의 왼쪽은 화면이 통째로 바뀝니다. 두 장면이 남남입니다. 오른쪽은 가운데 원이 자리와 크기를 지킨 채 남고, 그 원이 다음 장면의 다른 것이 됩니다.
원이 다리 역할을 해서 두 장면이 이어진 것으로 읽힙니다.
남기는 것은 셋입니다.
- 형태 — 동그라미는 동그라미로
- 자리 — 화면에서 같은 위치
- 크기 — 거의 같은 크기
이 셋이 같으면 색과 내용이 다 바뀌어도 같은 것으로 읽힙니다. 화면 UI에서는 목록의 작은 썸네일이 상세 화면의 큰 그림이 되는 자리에 가장 많이 씁니다.
목록에서 카드를 누르면 그 카드의 그림이 상세 화면의 큰 그림 자리로 이어지게 해 줘. 다른 것은 페이드로 바꾸고, 그림만 위치와 크기를 이어서.
줌 스루 · 휩 팬 · 아이리스
셋은 같은 일(장면 바꾸기)을 다른 방식으로 합니다. 뜻이 다릅니다.
| 전환 | 하는 말 | 어울리는 사이 |
|---|---|---|
| 줌 스루 | "이 안으로 들어간다" | 목록 → 그 항목의 속 |
| 휩 팬 | "옆으로 옮긴다" | 같은 층의 형제 화면 |
| 아이리스 | "연다 / 닫는다" | 시작 화면, 모달, 결과 공개 |
줌 스루
한 요소를 향해 카메라가 파고들며 그 요소가 화면을 채우고, 그 상태에서 다음 화면으로 넘어갑니다. 계층을 내려간다는 느낌을 만듭니다. 되돌아올 때는 반대로 하면 "나왔다"가 됩니다.
휩 팬
옆으로 휙 밀려 나갑니다. 빠르고, 대개 흐림(블러)이 같이 붙습니다. 같은 층에서 옆으로 옮긴다는 뜻이라 탭 사이 이동에 맞습니다. 계층이 바뀌는 자리에 쓰면 어디로 간 건지 헷갈립니다.
아이리스
원이 커지거나 작아지며 다음 화면을 드러냅니다. 오래된 영화에서 장면을 닫을 때 쓰던 방식이라 "시작"과 "끝"의 느낌이 강합니다. 중간 단계에 쓰면 과합니다.
방향이 뜻을 만듭니다
전환에서 제일 자주 어긋나는 것이 방향입니다.
- 오른쪽에서 들어왔으면 나갈 때는 오른쪽으로 나가야 합니다
- 깊이 들어갔으면 되돌아올 때는 나오는 방향이어야 합니다
들어온 방향과 나가는 방향이 어긋나면 사용자는 자기가 어디 있는지 잃어버립니다. 뒤로 가기를 눌렀는데 앞으로 가는 것처럼 보이는 앱이 이 실수를 한 것입니다.
다음 화면으로 갈 때는 오른쪽에서 들어오고, 뒤로 갈 때는 오른쪽으로 나가게 해 줘. 260ms, ease-out.
안 되는 것
- 한 앱에 전환을 여러 종류 섞으면 규칙이 안 보입니다. 두 가지면 충분합니다 — 계층용 하나, 형제용 하나
- 아이리스와 줌 스루는 길어지기 쉽습니다. 400ms를 넘으면 매번 기다리게 됩니다
- 매치컷은 이을 것이 진짜 있어야 합니다. 억지로 아무 도형이나 남기면 이어진 게 아니라 잔상이 남은 것처럼 보입니다
- 휩 팬의 흐림은 움직이는 동안만입니다. 멈춘 뒤에도 흐리면 고장으로 보입니다
확인하지 못한 것
여기 적은 전환 시간(260~400ms)은 화면 UI 관행입니다. 영상 편집에서 쓰는 같은 이름의 기법은 길이가 훨씬 깁니다. 두 분야가 같은 단어를 쓰지만 값은 공유하지 않습니다.
정리
- 매치컷은 형태·자리·크기 셋을 남깁니다. 그 셋이 같으면 나머지가 다 바뀌어도 이어집니다
- 줌 스루는 "안으로", 휩 팬은 "옆으로", 아이리스는 "연다"입니다
- 방향이 뜻을 만듭니다. 들어온 방향과 나가는 방향이 어긋나면 길을 잃습니다
- 한 앱에 전환은 두 가지면 충분합니다