트위티에서 시작된 습관
당겨서 새로고침은 로렌 브리크터가 트위터 앱 트위티에서 처음 선보였고, 이후 특허로 등록됐어요(Brichter, 2013). 목록 맨 위에서 이미 엄지가 아래로 움직이는 동작을 그대로 '새로고침' 명령으로 바꾼 아이디어예요. 새로고침 버튼을 찾아 누를 필요가 없어서 피드형 앱의 표준이 됐고, 안드로이드도 '스와이프하여 새로고침'으로 이를 공식화했어요(Google, n.d.).
임계 거리, 햅틱, 표시기
좋은 당겨서 새로고침은 세 단계 피드백을 줘요. 끄는 동안 표시기가 따라오고, 임계 거리를 넘으면 '놓으면 새로고침된다'는 신호를 주고, 놓은 뒤에는 로딩을 보여줘요. 임계 지점에서 가벼운 햅틱 피드백을 주면 손가락만으로 상태를 알 수 있어요. 카드와 동료들(1991)이 말한 0.1초 기준처럼 당기는 동작에는 즉시 반응해야 하고, 밀러(1968)와 마이어스(1985)의 연구처럼 1초가 넘으면 진행 중임을 보여줘야 해요. 나(2004)는 피드백이 있을 때 사용자가 더 오래 기다린다고 보고했어요. 새로 불러오는 동안 스켈레톤 스크린을 함께 쓰면 체감 속도가 좋아져요(Harrison et al., 2007).
언제 쓰고 무엇과 조합할까
당겨서 새로고침은 최신순 피드, 메일함, 알림 목록처럼 위쪽에 새 내용이 쌓이는 화면에 맞아요. 지도나 편집 화면처럼 아래로 끄는 동작이 다른 의미를 갖는 곳에서는 충돌해요. 아래쪽의 무한 스크롤과 함께 쓰면 '위는 새 글, 아래는 옛 글'이라는 명확한 구조가 생겨요. 다만 숨겨진 제스처이므로 데스크톱 웹이나 접근성 사용자를 위해 새로고침 버튼 같은 대체 수단을 남겨두세요. 새 글이 없으면 '최신 상태예요'처럼 결과를 알려주는 게 좋아요.
자주 묻는 질문
- 당겨서 새로고침은 웹에서도 써야 하나요?
- 모바일 브라우저는 자체 새로고침 제스처가 있어 충돌할 수 있으니, 웹에서는 버튼이나 자동 갱신 안내가 더 안전해요.
- 새 콘텐츠가 없을 때는 어떻게 하나요?
- 로딩을 짧게 보여준 뒤 '최신 상태예요' 같은 메시지로 결과를 알려주세요.
출처 검토일: 2026-10-27
참고문헌
- Brichter, L. (2013). User interface mechanics (U.S. Patent No. 8,448,084). U.S. Patent and Trademark Office. 트위티 개발자 로렌 브리크터의 당겨서 새로고침 특허라, 패턴의 기원을 볼 때 참고하면 도움이 돼요.
- Google. (n.d.). Swipe to refresh. Material Design. 안드로이드의 스와이프 새로고침 표시기와 동작 규칙이라, 구현 기준으로 참고하면 도움이 돼요.
- Myers, B. A. (1985). The importance of percent-done progress indicators for computer-human interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 11–17). ACM. 진행 표시가 기다림을 더 견디게 한다는 고전 연구라, 새로고침 중 피드백의 근거로 참고하면 도움이 돼요.
- Miller, R. B. (1968). Response time in man-computer conversational transactions. In Proceedings of the December 9–11, 1968, Fall Joint Computer Conference, Part I (pp. 267–277). ACM. 응답 시간 한계를 처음 체계화한 논문이라, 새로고침 피드백 시점을 정할 때 참고하면 도움이 돼요.
- Card, S. K., Robertson, G. G., & Mackinlay, J. D. (1991). The information visualizer, an information workspace. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 181–186). ACM. 0.1초·1초·10초 응답 기준을 제시해, 당김 애니메이션 반응 속도를 정할 때 참고하면 도움이 돼요.
- Nah, F. F.-H. (2004). A study on tolerable waiting time: How long are Web users willing to wait? Behaviour & Information Technology, 23(3), 153–163. 피드백이 있으면 더 오래 기다린다는 실험이라, 새로고침 표시기의 가치를 설명할 때 참고하면 도움이 돼요.
- Harrison, C., Amento, B., Kuznetsov, S., & Bell, R. (2007). Rethinking the progress bar. In Proceedings of the 20th Annual ACM Symposium on User Interface Software and Technology (pp. 115–118). ACM. 애니메이션 방식이 체감 대기 시간을 바꾼다는 연구라, 로딩 애니메이션을 고를 때 참고하면 도움이 돼요.