Pull to Refresh (당겨서 새로고침)

드래그하면 요소가 포인터를 따라오며, 움직일 영역이나 축을 제한할 수 있습니다.

[적용할 곳]에 드래그(Drag) 인터랙션을 넣어 줘. 드래거블(draggable), 드래그 제약(drag constraints)이라고도 불러.
드래그하는 동안 요소가 포인터를 바로 따라오고, 허용된 영역의 가장자리에서 멈추며, 놓으면 살짝 튕기면서 원래 자리로 돌아오게 해 줘.
마우스뿐 아니라 터치로도 아래 페이지가 스크롤되지 않고 동작하게 하고, 키보드로 옮기는 방법도 마련해 줘.

고리나 호가 계속 돌면서 무언가를 불러오는 중임을 보여 줍니다.

[적용할 곳]에 서큘러 스피너(Circular Spinner)를 넣어 줘. 스피너(spinner), 스로버(throbber)라고도 불러.
호가 흐린 고리를 따라 일정하게 돌면서 길어졌다 짧아졌다 하고, 부드럽게 끊김 없이 이어지게 해 줘.
회전은 끊김 없이 이어지게 하고, 스크린 리더용 로딩 라벨을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 느리게 하거나 멈춰 줘.

패널이 아래 가장자리에서 밀려 올라오며, 끌어서 정해진 높이에 맞출 수 있는 경우가 많습니다.

[적용할 곳]에 바텀 시트 슬라이드 업(Bottom Sheet Slide-Up)을 넣어 줘. 바텀 드로어(bottom drawer), 시트(sheet)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 패널이 아래 가장자리에서 밀려 올라오고, 튕김 없이 부드럽게 감속하며 자리를 잡게 해 줘.
시트가 열릴 때마다 한 번 재생하고, 닫을 때는 다시 아래로 내려가게 하고, 열려 있는 동안 키보드 포커스가 시트 안에 머물게 해 줘.

클릭하거나 탭한 바로 그 지점에서 둥근 물결이 퍼지며 사라집니다.

[적용할 곳]에 리플(Ripple) 효과를 넣어 줘. 머티리얼 리플(material ripple), 잉크 리플(ink ripple)이라고도 불러.
클릭하거나 탭할 때마다 누른 바로 그 지점에서 부드러운 원형 물결이 요소를 덮을 때까지 퍼지며 점점 옅어지게 해 줘. 빠르고 가볍게.
물결은 요소 모양대로 잘라 내고, 빠르게 연달아 누르면 각각 새 물결이 시작되게 하고, 키보드로 누를 때는 가운데에서 시작해 줘.

원과 체크 표시가 스스로 그려지며 작업이 성공했음을 알립니다.

[적용할 곳]에 석세스 체크마크(Success Checkmark) 애니메이션을 넣어 줘. 애니메이션 성공 체크(animated success tick)라고도 불러.
원이 부드러운 한 획으로 그려진 다음 그 안에 체크 표시가 그려지고, 표시 전체가 작고 부드럽게 톡 튀게 해 줘. 차분하고 확신 있게.
작업이 성공했을 때 한 번만 재생하고, 스크린 리더가 읽어 줄 수 있는 텍스트 메시지를 함께 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 완성된 표시를 바로 보여 줘.

목록 행을 옆으로 밀면 삭제나 보관 같은 동작 버튼이 드러납니다.

[적용할 곳]에 스와이프 삭제(Swipe to Delete) 인터랙션을 넣어 줘. 스와이프 액션(swipe actions), 스와이프 투 리빌(swipe to reveal)이라고도 불러.
행을 옆으로 끌면 손가락을 그대로 따라 움직이며 뒤에 있는 보관·삭제 같은 동작 버튼이 드러나고, 버튼이 다 보이면 멈추게 해 줘. 손을 떼면 튕김 없이 부드럽게 제자리로 미끄러지게.
가로로 밀 때도 세로 스크롤이 되게 하고, 스와이프하지 않아도 키보드와 스크린 리더로 같은 동작을 할 수 있게 해 줘.