UX - 인터렉션의 이해

제스처 예시

 

인터렉션

• 둘 이상의 물체나 대상이 서로 영향을 주고 교감하는 하는 행동
• 크게 사용자 사용자 제스처와 디바이스 효과로 나눌 수 있음.

디바이스 효과(Device effect)

개념

• 모바일 앱 화면 전환 효과를 말함.

페이드 인 & 아웃

• A 에서 B로 화면이 전환될 때 A가 흐려지면서 B가 진해지는 효과

슬라이드

• 전환 방향에 따라 레프트, 라이트, 업, 다운으로 구분

슬라이드 오버레이

• 새로나오는 B 화면이 기존에 A화면 위로 올라오는 효과
• 모바일 앱에서는 메뉴, 설정, 마이페이지 등에 많이 사용됨

슬라이드 리비얼

• 기존의 A 화면이 나가고 그 자리에 B 화면이 나오는 효과
• 서브 화면에서 다시 메인화면으로 넘어갈 때 사용

슬라이드 푸시

• B 화면이 A 화면을 밀어내면서 나오는 효과
• 주제가 다른 화면이나 메뉴로 이동할 때 사용

팝

• 다음에 보이는 화면이 팝업처럼 보여지는 효과
• 이미지 클릭이나 상세 화면 이동할 때 사용

플립 & 턴

• 서로 화면이 뒤집어 지면서 전환됨

플로우

• 기존 A 화면이 작아지면서 사라지고 B 화면이 작아졌다가 커지면서 전환됨
• 화면 리스트 중 원하는 화면으로 이동할 때 많이 사용됨

제스처 ( User Gesture )

싱글탭

• 화면을 한손가락으로 가볍게 누름
• 콘텐츠 선택시 사용
• 이벤트 발생은 눌렀다가 뗄때 발생함 ( 릴리스 )

더블탭

• 화면을 빠르게 두번 탭함
• 이미지, 지도 확대/축소에 사용됨

프레스

• 터치&홀드라고 부르기도 함
• 손가락으로 꾸욱 누름
• 말풍선이나 특정 영역의 글자를 복사하기 위해 사용되기도 함.

팬

• 화면에 손가락을 댄 후 떼지않고 지속적으로 드래그 하는 움직임
• VR/AR등 입체영상의 화면이동이나 3D 화면 회전시 사용함.

드래그

• 특정 영역 및 오브젝트에 손가락을 대고 있다가 정해진 방향으로 움직인 후 손가락을 떼는 동작
• 팬을 이용한 상하좌우, 곡선을 그릴때 사용

스와이프

• 한손가락을 화면에 댄 후 일정 거리를 움직이는 제스처
• 수직방향의 스와이프는 스크롤(Scroll)이라고 부르기도 함
• 화면전환에 많이 사용됨

플릭

• 손가락으로 터치하면서 빠르게 수평 또는 수직으로 스크롤 하는 움직임
• 스와이프와 유사하지만, 손가락의 움직임이 멈추기 전에 손가락을 때는게 포인트
• 화면을 빠르게 스크롤 하거나 드로워 메뉴(Drawer Menu)를 열 때 사용

핀치 인 & 아웃

• 두 손가락을 화면 위에 터치한 상태에서 서로 다른 방향으로 움직이는 제스처
• 확대 또는 축소시 사용함. ( 줌인, 줌아웃 과 같은 의미 )

프레스 & 드래그

• 화면에 한손가락을 대고 다른 손가락으로 화면에 터치를 한 후 일정거리를 움직이는 동작
• 특정 영역을 선택하거나 영역을 선택할 때 사용

로테이트

• 화면을 수평에서 수직, 수직에서 수평으로 전환하는 동작
• 이미지나 지도, 네비게이션 사용시 사용