화면 전환 방식
앱 화면 전환 효과는 어떤 종류가 있고 언제 쓰나요? 깊이 들어갈 때는 푸시, 잠깐 다녀올 때는 모달, 같은 층 이동은 탭 전환을 쓰고, 카드 확장과 크로스페이드도 있습니다.
전환 방식은 새 화면이 어디서 왔는지를 알려 줍니다. 화면 사이의 관계에 맞는 전환을 고릅니다.
이름과 미리보기
미리보기를 누르면 멈추고, 다시 누르면 재생합니다.
푸시
Push transition
옆에서 밀고 들어옴. 한 단계 더 깊이 들어갈 때
모달 등장
Modal presentation
아래에서 올라와 덮음. 잠깐 하고 돌아올 일(작성, 설정)
탭 전환
Tab switch
같은 층의 화면끼리 바꿈. 짧은 페이드 정도
카드 확장
Shared element transition
누른 카드가 그대로 커져 상세 화면이 됨
크로스페이드
Crossfade
이전 화면이 사라지며 새 화면이 겹쳐 나타남
이렇게 씁니다
- 깊이 들어감은 푸시, 잠깐 다녀옴은 모달, 같은 층 이동은 탭 전환. 이 관계를 섞지 않습니다.
- 뒤로 갈 때는 들어온 방향의 반대로 나갑니다. 오른쪽에서 들어왔으면 오른쪽으로 나갑니다.
- 카드 확장은 사진·상품처럼 같은 것을 크게 보는 경우에만 씁니다. 효과가 커서 남발하면 피곤합니다.
복사해서 쓰는 프롬프트
목록 → 상세
상품 목록에서 상세로 가는 전환을 카드 확장(Shared element transition)으로 만들어 줘. - 누른 카드의 이미지가 그대로 커지며 상세 화면 상단 이미지가 되게. - 길이 350ms, ease-out. - 닫을 때는 원래 카드 자리로 줄어들며 돌아가게. - 동작 줄이기 설정이면 크로스페이드(Crossfade) 200ms로 대체.
참고한 게시물: @uxwoodytips