당겨서 새로 고침

위키백과 모바일 앱에서 당겨서 새로 고침]] **당겨서 새로 고침** 또는 **풀 투 리프레시**(Pull-to-refresh)는 로렌 브릭터가 개발한 터치스크린 제스처이다. 컴퓨팅 장치의 화면을 손가락으로 터치하거나 포인팅 장치의 버튼을 누른 다음, 손가락이나 포인팅 장치로 화면을 아래로 끌어내렸다가 놓음으로써 애플리케이션에 화면 내용을 새로 고침하도록 신호를 보내는 방식이다. 이 제스처의 다른 이름으로는 "끌어내려 새로 고침(pull-down-to-refresh)", "당겨서 다시 로드(pull-to-reload)", "밀어서 새로 고침(swipe to refresh)", "스크롤하여 새로 고침(scroll to refresh)" 등이 있다. 이 제스처의 목적은 새로 고침 기능을 즉시 사용할 수 있도록 하는 것이다. 당겨서 새로 고침은 사용자가 위로 스크롤하는 도중 원치 않는 새로 고침이 발생할 수 있고, 도박 기계의 레버와 유사하여 소셜 미디어 중독을 조장할 수 있다는 비판이 제기되었다.date=23 February 2018date=10 January 2022
# 역사
당겨서 새로 고침 제스처는 로렌 브릭터가 개발한 트위티 모바일 애플리케이션에서 처음 등장했다. 브릭터는 2007년 애플에서 퇴사한 후 2008년 개인 프로젝트로 X (소셜 네트워크)용 IOS 애플리케이션인 트위티를 개발했다. 브릭터가 처음 트위티를 개발할 때, 그는 애플리케이션에 새로 고침 기능을 추가하고 싶었다. 당시 다른 모바일 애플리케이션에 대해 그는 "그들은 모두 목록을 스크롤할 수 있는 도구 모음의 모서리 중 하나에 새로 고침 버튼을 어딘가에 밀어 넣어야 했습니다. 그곳은 탐색 및 액션 UI에 가장 귀중한 공간이었고, 새로 고침 버튼과 같은 평범한 것에 그 공간을 사용하는 것은 낭비처럼 보였습니다."라고 말했다.date= April 21, 2016 따라서 브릭터는 귀중한 모서리 공간을 다른 용도로 활용할 수 있도록 다른 새로 고침 방법을 만들기로 결정했다. 그는 처음에는 애플의 플랫폼 관례를 따르는 새로 고침 메커니즘을 만들 계획이었지만, 당겨서 새로 고침 작업은 당시 애플 플랫폼에 새로운 상호 작용을 만들어냈다.url=https://scs.hosted.panopto.com/Panopto/Pages/Viewer.aspx?id=b37ab806-26f1-43fe-827c-67dc1d69bd17 이 제스처는 당시 가장 많이 사용되던 모바일 웹 브라우저인 구글 크롬의 모바일 버전에 2015년 버전 41에서 옵션으로 추가되었으며, 2019년 버전 75부터는 필수 기능이 되었다.date=22 July 2019date=11 March 2015 모질라는 2020년 모바일 모질라 파이어폭스 웹 브라우저의 "나이틀리" 버전에 이 기능을 처음 추가했으며, 그 다음 해에는 "안정적인" 주류 버전에 추가했다.date=23 October 2020date=11 August 2021
# 생성
트위티의 새로 고침 메커니즘의 초기 디자인에서 브릭터는 사용자가 새로운 트윗이 페이지 상단에 나타날 것으로 예상했기 때문에 트윗 목록 상단에 새로 고침 버튼을 배치했다. 이 디자인은 트위티 버전 1.0으로 출시되었다. 이 버튼은 사용자에게 트위터 피드를 새로 고침할 수 있는 기능을 제공했지만, 브릭터가 다른 기능에 사용하고 싶었던 귀중한 화면 공간을 차지했다. 브릭터는 "돌이켜보면 트위티 1.0(목록 상단에 새로 고침 버튼이 있는)은 당겨서 새로 고침과 매우 비슷했으며, 버튼에서 제스처로 넘어가는 것은 그리 큰 도약이 아니었습니다."라고 말했다. 브릭터는 최종 버전을 출시하기 전에 당겨서 새로 고침의 두 가지 주요 반복을 실험했다. 첫 번째 반복에서는 사용자가 화면에서 보이지 않는 임계값을 스크롤할 때 새로 고침이 트리거되었다. 그러나 이 반복에서는 새로 고침이 발생하고 있음을 사용자에게 알리는 시각적 피드백이 없었다. 브릭터는 사용자에게 시각적 피드백을 제공하는 것이 필요하다고 생각했기 때문에, 당겨서 새로 고침의 두 번째이자 최종 반복에서는 새로 고침 시 시각적 피드백을 추가하여 사용자가 제스처를 더 잘 이해할 수 있도록 했다. 이 최종 반복에는 페이지 상단을 임계값 이상으로 당긴 다음 놓으면 새로 고침이 발생한다는 경고 텍스트도 포함되었다. 브릭터는 이 설명 텍스트를 포함했는데, 이는 이 제스처가 대부분의 사용자가 이전에 보지 못했을 새로운 상호 작용 기술을 제시했기 때문에 사용자가 기능을 이해할 수 있도록 제스처의 목적을 명시적으로 설명해야 한다고 느꼈기 때문이다. 당겨서 새로 고침의 이 두 가지 반복은 사용자 테스트 없이 단 하루 만에 만들어졌다. 브릭터는 이 반복과 제스처의 보이지 않는 임계값을 수동으로 테스트하여 "옳다"고 느껴질 때까지 조정했다고 말한다. 즉, 임계값이 너무 작으면 사용자가 실수로 제스처를 트리거할 수 있고, 너무 크면 사용자가 활성화하기 어려울 수 있다는 것이다. 트위티 2.0에 처음 출시된 이후, 당겨서 새로 고침 디자인은 상호 작용 디자이너들이 이 기술에 다양한 스타일을 적용하면서 디자인 커뮤니티에 의해 더욱 발전되었다. 브릭터는 현재 당겨서 새로 고침에 대한 작업을 계속할 계획이 없다.
# 메커니즘
트위티 2.0에 출시된 당겨서 새로 고침의 원래 버전에 포함된 단계: #사용자가 화면을 아래로 당기면 목록 상단에 아래쪽 화살표와 "새로 고침하려면 아래로 당기세요"라는 메시지를 표시하는 텍스트가 시각적 피드백으로 나타난다. #사용자가 새로 고침 임계값에 도달하기 전에 놓으면 새로 고침이 중단되고 시각적 피드백이 사라진다. #사용자가 새로 고침 임계값에 도달할 만큼 충분히 아래로 당기면 화면 상단에 위쪽 화살표와 "새로 고침하려면 놓으세요"라는 메시지를 표시하는 텍스트가 새로운 시각적 피드백으로 나타난다. #사용자가 놓으면 새로 고침이 발생한다.
# 반응
처음 출시되자마자 당겨서 새로 고침은 트위티 사용자들로부터 긍정적인 평가를 받았다. 사용자들은 그 편리함과 직관적인 특성에 대해 메커니즘을 칭찬했다. 일반 사용자 외에도 당겨서 새로 고침은 전체 상호 작용 디자인 커뮤니티에서도 호평을 받았다. 디자이너 팀 반 담은 당겨서 새로 고침 출시 후 브릭터에게 이메일을 보내 "덕분에 저는 목록을 아래로 당겼다가 놓는 방식으로 내 받은 편지함을 새로 고치려고 했습니다. 당신이 애플보다 더 잘하는 것을 싫어합니다."라고 말했다고 한다. 다른 상호 작용 디자이너들도 이 기술에 대해 유사하게 긍정적인 감정을 표현했다. 2013년 말 Co.Design에 오스틴 가르가 작성한 "당겨서 새로 고침 제스처가 사라져야 하는 이유"라는 제목의 기사는 이 제스처를 비판하며, 스마트폰이 자동 새로 고침을 할 수 있을 만큼 빠르고 강력해졌기 때문에 당겨서 새로 고침 기술은 이제 구식이 되었고 본질적으로 불필요한 단계가 되었다고 주장했다.accessdate=28 April 2016 그러나 이 제스처가 이제 너무 보편적이어서 사용자들이 모바일 앱 경험의 일부로 암묵적으로 기대하게 되었기 때문에 개발자들이 이를 넘어서기는 어렵다. 이 기사는 브릭터조차도 동의하며 제스처가 진화할 때라고 믿는다고 보도한다. 브릭터는 이 기사에서 "사람들이 여전히 '당겨서 새로 고침'이라고 부르는 것이 저를 괴롭힙니다. 새로 고침만을 위해 사용하는 것은 제한적이며 구식으로 만듭니다... 저는 '당겨서 동작 수행(pull-to-do-action)'이라는 아이디어를 좋아합니다."라고 말했다. 이 기사는 새로 고침에만 국한되지 않고 수직 스와이프 상호 작용이 이제 다른 동작을 수행하도록 진화하여 새로운 스타일의 앱 상호 작용을 탄생시켜야 한다고 결론짓는다. 해당 기사 출판 후, 닉 아르노트가 쓴 Neglected Potential의 기사는 스마트폰이 이론적으로 자동 새로 고침이 가능하지만, 많은 사용자에게 데이터 속도는 여전히 제한적인 요소라고 반박했다. 아르노트는 수동으로 새로 고침할 수 있는 기능은 사용자가 보고 있는 내용이 실제로 최신 상태인지 확신할 수 있도록 여전히 중요하며, 당겨서 새로 고침은 사용자가 새로운 내용을 보고 싶으면 어차피 맨 위로 스크롤할 것이므로 새로 고침은 스크롤의 논리적 확장이며, 당겨서 하는 제스처가 덜 직관적일 수 있는 다른 동작과는 다르기 때문에 훌륭한 디자인이라고 덧붙였다.accessdate=28 April 2016