관계가 끊기는 전환
새 화면이 왼쪽에서 나타나 뒤로 간 것처럼 느껴집니다.
9:41
예약 시간 목록
예약 가능한 시간
9월 18일 목요일
오전 10:00
오후 1:00
오후 2:00
오후 4:30
강남 · 전화 상담
사용자가 느끼는 이동
화면은 바뀌었지만 이전 화면과의 관계를 짐작하기 어렵습니다.
애니메이션 · 더 알아보기 · 직접 체험형
화면 전환 방향으로 이전·다음 관계를 어떻게 알려줄까요?
화면이 바뀌는 것만으로는 사용자가 어디에서 어디로 이동했는지 알기 어렵습니다. 전진과 뒤로는 반대 방향으로, 상세는 선택한 대상과 이어서, 잠깐 확인하는 창은 원래 화면 위에 보여주면 이동 관계를 더 쉽게 이해할 수 있습니다.
약 11분쉽게 보는 핵심 기준
NAVIGATION MOTION화면 관계 유지
9:41
예약 시간
10:0013:0014:0016:30
9:41
예약 내용 확인
9월 18일 · 오후 2:00
목록의 선택값이 이어집니다
전진
다음 화면
뒤로
이전 화면
상세
같은 대상
모달
화면 위
먼저 이해할 내용
화면 전환은 새 화면이 이전 화면과 어떤 관계인지 설명해야 합니다
전환 효과는 장식이 아니라 화면 사이의 관계를 짧게 설명하는 안내입니다. 다음 단계로 들어가는지, 이전 위치로 돌아가는지, 선택한 대상을 자세히 보는지, 현재 화면 위에서 잠깐 확인하는지를 서로 다른 방향과 층위로 보여주고 도착 뒤에도 제목·이전 버튼·선택값으로 위치를 확인할 수 있게 합니다.
- 01
출발 화면 확인
- 02
이동 관계 표현
- 03
도착 위치 확인
- 04
이전 상태 복원
전환을 정하는 네 가지 기준
효과 이름보다 화면 사이의 관계를 먼저 정합니다
방향은 앞뒤 관계를 말합니다
다음과 이전이 반대 방향으로 움직이면 사용자는 설명을 읽지 않아도 이동 관계를 짐작할 수 있습니다.
같은 대상은 이어서 보여줍니다
목록에서 누른 사진·이름·카드가 상세 화면으로 이어지면 무엇을 열었는지 놓치지 않습니다.
잠깐 보는 창은 위에 쌓습니다
필터·선택·확인은 원래 화면을 뒤에 남겨 닫으면 같은 위치로 돌아온다는 점을 보여줍니다.
움직임 없이도 길이 남아야 합니다
제목·이전 버튼·선택값을 함께 표시하고 움직임 감소 설정에서는 짧은 전환이나 즉시 변경을 사용합니다.
이동 관계보여줄 연결도착 뒤 확인할 것
다음·이전반대 방향과 이전 버튼기존 선택값과 목록 위치
목록·상세선택한 카드·사진·이름같은 대상의 제목과 주요 행동
현재 화면·모달뒤에 남은 원래 화면닫기·적용 뒤 같은 자리
고객과 함께 정하는 내용
- 화면을 연 행동과 사용자가 기대하는 다음 위치
- 이전 화면으로 돌아갔을 때 유지할 선택값과 스크롤 위치
- 전체 화면 이동과 잠깐 확인하는 창의 구분
- 자주 반복하는 이동에서 허용할 움직임의 강도
데브크래프트가 설계·구현하는 내용
- 화면 경로별 전진·뒤로·상세·모달 전환 규칙
- 선택한 대상과 도착 화면을 연결하는 요소 전환
- 뒤로 가기·닫기·시스템 제스처와 화면 상태 복원
- 성능 확인과 움직임 감소 설정의 정적인 대체 표현
공식 기준도 함께 확인합니다
자연스러운 이동 관계와 움직임 감소 설정을 함께 구현합니다
Apple은 움직임이 사용자의 기대와 맞아야 하며, 화면을 아래로 열었다면 옆으로 닫는 식의 어긋난 방향을 피하라고 안내합니다. Android는 전진·뒤로 전환을 각각 구분하고 선택한 요소를 상세 화면과 연결할 수 있게 합니다. W3C는 상호작용으로 생기는 불필요한 움직임을 줄이거나 끌 수 있어야 한다고 설명합니다.
좋은 전환은 화려한 효과가 아니라 길을 잃지 않게 하는 안내입니다
방향·선택한 대상·뒤에 남은 화면이 다음 위치를 설명해야 합니다. 움직임이 꺼져도 화면 제목과 이전·닫기 버튼, 유지된 선택값으로 같은 관계를 이해할 수 있어야 합니다.
확인할 내용
이 내용을 보면 알 수 있습니다
- 전진과 뒤로, 상세 열기와 모달 열기가 서로 다른 화면 관계라는 점 이해하기
- 방향·선택한 요소·배경 화면을 이용해 출발과 도착을 연결하는 방법 비교하기
- 움직임 감소 설정에서도 제목·버튼·선택값으로 같은 이동 관계를 전달하기
판단 기준
실제 구현에서는 이렇게 확인합니다
- 01다음 화면과 이전 화면이 서로 반대 방향과 일관된 조작으로 연결되는가
- 02목록의 선택 대상과 상세 화면, 원래 화면과 모달의 관계가 전환 중에도 보이는가
- 03뒤로 가기나 닫기 뒤 선택값·스크롤 위치·입력 내용이 필요한 만큼 복원되는가
우리 앱의 화면 이동 규칙을 함께 설계해보세요
목록·상세·작성·확인처럼 이어지는 주요 화면을 알려주세요. 전진·뒤로·모달 방향과 이전 화면 상태를 유지하는 기준을 30분 상담에서 함께 정리합니다.