핵심 비유
'영화의 장면 전환' 비유 — 잘 만든 영화는 장면이 바뀔 때 카메라가 부드럽게 따라가서 "여기서 저기로 갔구나"가 자연스럽게 이해된다. 반대로 컷이 뚝뚝 끊기고 갑자기 다른 곳으로 점프하면 관객은 "어? 방금 뭐였지?" 하고 길을 잃는다. 앱의 화면 전환·애니메이션도 똑같다. 모션은 예쁘게 보이려는 장식이 아니라, 무엇이 어디에서 와서 어디로 갔는지 공간과 인과를 이어주는 '설명'이다. 좋은 모션은 의식되지 않고, 나쁜 모션은 거슬리거나 멀미를 부른다.
핵심 포인트
- 모션의 진짜 일은 연속성 전달 — 메뉴가 어디서 펼쳐졌는지, 삭제한 항목이 어디로 사라졌는지를 눈으로 따라가게 해 사용자가 '길'을 잃지 않게 한다.
- 자연스러운 길이는 보통 200~300ms. 너무 빠르면(0.1초 미만) 안 보이고, 너무 느리면(0.5초 이상) 앱이 굼떠 보인다.
- 이징(easing): 시작과 끝의 속도를 다르게(처음 살짝 빠르게, 끝에서 부드럽게 멈춤). 일정 속도(linear)는 기계적이고 어색하다.
- 과하면 독: 모든 요소가 통통 튀고 빙글 돌면 화려한 게 아니라 어지럽다. 모션은 꼭 필요한 곳에만 — 화면 전환, 상태 변화, 새 항목 등장 정도.
- 접근성 — 끌 수 있어야 한다: 어지럼·멀미에 민감한 사용자를 위해 운영체제의 '동작 줄이기' 설정(prefers-reduced-motion)을 켜면 애니메이션이 약해지거나 꺼지도록 한다.
- 모션은 로딩·피드백과도 연결된다 — 버튼을 눌렀을 때 살짝 눌리는 반응이 "제대로 눌렸어"라는 신호가 된다.
교사 팁
도입은 "앱에서 화면이 바뀔 때 부드러웠던 적과, 뚝 끊겨서 거슬렸던 적을 하나씩 떠올려보세요"로 연다. 학생 폰에서 같은 동작(메뉴 열기, 사진 넘기기)을 천천히 관찰하게 하면 모션의 길이·방향이 보인다. design-sense 이론 탭의 인터랙션 원리 카드(피드백·로딩 패턴 등)와 연결해, 모션이 '장식'이 아니라 '인과·연속성을 전달하는 인터랙션 원리'임을 짚는다. 이어 학생들에게 "이 모션을 200ms로 줄이면? 1초로 늘리면?"을 머릿속으로 비교하게 해 적정 시간 감각을 잡아준다.
좋은 예 vs 나쁜 예
- ✅ 유튜브에서 영상을 누르면 썸네일이 부드럽게 커지며 재생 화면으로 이어진다 — 어디서 왔는지 눈으로 따라가진다. 카톡에서 메시지를 보내면 말풍선이 슬쩍 올라오며 자리 잡아 "보냈다"는 느낌을 준다(200~300ms 안쪽).
- ❌ 화면 전환마다 1초 넘게 빙글빙글 도는 화려한 애니메이션: 처음엔 멋있어 보여도 매번 기다려야 해 앱이 느리게 느껴지고, 길어지면 멀미가 난다. 또 동작 줄이기 설정을 무시하면 민감한 사용자에게 불편을 강요한다.
실습·평가
- 실습: 자주 쓰는 앱 2개에서 '화면 전환' 한 장면씩을 골라, ① 무엇이 어디서 어디로 움직이는가 ② 빠른가/느린가(대략 0.2초? 1초?) ③ 그 모션이 이해를 돕는가 거슬리는가를 3줄로 메모한다(5분). 짝과 비교해 "더 좋은 모션"의 공통점을 한 문장으로 정리.
- O/X 퀴즈: "애니메이션은 화려할수록 좋으니 화면 전환을 1초 이상 길고 요란하게 만드는 게 사용자 만족에 가장 좋다." → X (보통 200~300ms가 자연스럽고, 길거나 과하면 느리게 느껴지고 멀미를 부른다)