무한 스크롤 또는 무한 스크롤 : 지금까지 온 곳
오늘날 우리는 무한 스크롤이 어떻게 웹상에서 그처럼 호평을받는 기술이되었으며, 그 인기에도 불구하고 아직 웹 디자인에 널리 채택되지 않은 이유에 대해 가장 관련성이 높은 사실을 조사하고 있습니다.
이 기능은 웹 페이지에 표시되는 정보의 양이 증가하고 인터넷 연결 속도가 빨라져서 독자가 더 빠른 속도로 정보에 액세스하고 정보를 전송할 수있는 시점에 나타났습니다. 웹 페이지에서의 무한 스크롤 문제는 사용자 경험 디자인과 관련된 측면 중 하나이며 생각만큼 잘리지 않습니다.
시작과 대중화
Google에서는 연속 스크롤 이라고하며 끝없는 스크롤이라고도합니다. 간단히 말하면, 무한 스크롤은 사용자가 페이지의 맨 아래에 도달 할 때 브라우저가 자동으로 새 컨텐츠를로드하여 다음 부분으로 이동하기 위해 페이지 매김 단추를 찾을 필요가 없도록하는 기술입니다. 마우스 휠을 돌리면 모든 것이 나타납니다.
이 기술은 Facebook의 뉴스 피드 페이지에서 특히 사용됩니다. Google의 이미지 검색 결과 페이지와 Twitter 타임 라인 참조 용으로 게시 된 흥미로운 최신 예제는 Isotope jQuery 플러그인 데모 페이지에서 확인할 수 있습니다.
hexaedro.eu는 인류의 진화를 설명하기 위해 수평 무한 스크롤을 활용합니다.
이러한 종류의 스크롤에 대한 첫 번째 언급 중 하나는 Bill Scott (PayPal의 사용자 인터페이스 엔지니어링 담당 이사)이 그의 기사 인 Death to Paging! – Rico LiveGrid가 릴리스되었습니다.
다음 섹션으로 이동하기 전에 사용자에게 단일 뷰로 매우 큰 데이터 테이블을 표시하도록 개발되었으며, 먼저 스크롤링 라이브 그리드라고합니다. 이 기사에는 장단점 섹션과 일부 디자인 고려 사항이 포함되어 있으며 질문 요소를 페이징 대 무한 스크롤로 명확하게 표현했습니다.
이 기술은 웹에서 세련되고 인기를 얻었으며 갑작스런 열의를 일으켰습니다. Scott의 기사 1 년 후, 스크롤링 라이브 그리드를 발표 한 후, 페이지 청킹 현상을 비난하고 온라인에서 사용자가 더 많은 콘텐츠를 요구하도록 강요하지 말고 새로운 스크롤을 칭찬하는 것이 가능했습니다. 그들."
2008 년 중반까지 무한 스크롤이라는 용어는 이미 그 자체로 사용되었으며 이름이 같은 사이트는 작동 방식을 자세히 설명하는 데 전념했습니다. 이 사이트는 또한 WordPress 테마, jQuery 라이브러리를 통한 페이지 및 Safari 및 Chrome의 "자동 페이지 화"애드온을 스크롤하여 일반 사이트에 스크롤 기능을 자동으로 추가 할 수있는 몇 가지 플러그인을 제공했습니다.
"사용자에게 더 많은 콘텐츠를 요구하도록 강요하지 말고 콘텐츠를 제공하십시오."2012 년에도이 기술은 반응 형 디자인의 구현과 함께 "마음의 기쁨"에 대한 혁신으로 여전히 제시됩니다. 좀 더 분석적인 관점에서 볼 때, 이것은 처음에 인쇄 된 내용물의 존재와 전자 대응 물 사이의 분리에 대한 한 단계 더 나아갔습니다. 결국, 웹 페이지의 개념은 신문, 잡지 및 실제 종이 페이지가있는 책의 물질 세계에서 정확하게 나옵니다.
토마스 백달 (Thomas Baekdal)은 인쇄 된 페이지와 디지털 화면에 표시되는 텍스트 사이의 관계를 해당 인쇄 정신의 용해에서 설명합니다. Baekdal은 기본적으로 형식 우선 또는 내용 우선과 같은 일종의 공식으로 문제를 해결합니다. 그의 분석에서 백달은 인쇄 매체의 한계가 디지털 화면으로 전송되어서는 안된다고 말합니다.
애플은 또한 스크롤링 경향에 대한 찬사를 보냈다. 새로운 iBooks 3.0의 주요 기능 중 하나는 책을 세로로 스크롤 할 수 있다는 것입니다. 이제 독자는 페이지 넘김 효과를 잊고 손가락으로 쓸어 넘겨 베스트 셀러를 읽을 수 있습니다. 이것은 백달의“춤추는 곰을 없애라”라는 모토를 정확하게 구현 한 것입니다. 독자들이 오래된 물리적 책 패러다임에서 벗어날 수 있도록하기 위해서입니다. 다행스럽게도 전통적인 페이지 넘김 테마 또는 연속 스크롤링 테마 중 하나를 자유롭게 선택할 수있는 옵션이 있었기 때문에 구식 독자는 여전히 장치 내에서 실제 책을 모방 할 수 있습니다.
이 UX 개선을 피해야하는 이유는 무엇입니까?
무한 스크롤을 수용하는 규칙에 대한 몇 가지 예외 중 하나는 Etsy의 Dan McKinley의 경우였으며 A / B 테스트 방법론을 사용한 실용적인 연구 결과 기술이 예상대로 작동하지 않는 것으로 나타났습니다.
실제로 즐겨 찾기에 대한 클릭 수가 감소하고 검색 기능이 더 이상 사용되지 않은 후 무한 스크롤이 사이트에서 제거되었습니다. 사용자의 반응을 평가하는 데 사용되는 방법에 대한 편견이있을 수 있지만 무한 스크롤이 자체적으로 활동을 최대화하지 않았거나 사이트의 일반 대중이 변경에 동의하지 않았 음을 알 수 있습니다.
Google은 끝없는 스크롤이 완전히 구현되지 않은 또 다른 예입니다. 이미지 검색에만 무한 스크롤이 가능하며 스크롤해도 "더 많은 결과 표시"버튼으로 제한됩니다.
distancetomars.com 사이트에 무한 스크롤의 가장 창의적인 용도 중 하나가 나와 있습니다.
혜택
무한 스크롤은 단순히 멋진 기능 일뿐 아니라 여러 가지 장점이있어 많은 경우에 가치가 있습니다.
- 더 많은 콘텐츠가 자동으로 제공 될 때 사용자가 유지하는 끊임없는 관심은 무한 스크롤의 매력의 핵심입니다. 독자는 개선 된 관심에 따라 다음 버튼을 어디에서 찾을 지 또는 어떤 페이지가 나올지를 생각하지 않아도됩니다.
- 심리적 용어로, 무한 스크롤은 호기심과 새로운 정보를 기다리는 동안 생성 된 기대의 완화에 기반한 자동 응답을 유발하는 것으로 보입니다. 이 심리적 메커니즘은 초기 장점이 문제로 바뀔 수 있으므로 충분한 이해가 필요합니다. 예를 들어, McKinley의 결과에 따르면 검색 결과 페이지를 끝없이 스크롤하면 사용자에게 충격을 주거나 혼란스러워서 검색 사용을 피할 수있을 정도로 더 많은 정보가 과부하 상태가됩니다.
- 템플릿 디자인은 더 깨끗하고, 컨텐츠를위한 더 많은 공간을 제공하며, 페이징을위한 숫자 목록과 같은 방해 요소가 적습니다.
단점
물론 무한 스크롤과 관련하여 고려해야 할 여러 가지 문제가 있습니다.
- 페이지 로딩 시간 증가 : 페이지 하단에 추가되는 추가 컨텐츠를 다운로드하는 데 더 많은 시간이 필요하다는 것은 분명합니다. 전화 접속 연결이 불량하거나 모바일 데이터 요금제가 낮은 사용자는 해당 페이지를 효과적으로 탐색 할 수있는 기능이 줄어 듭니다.
- 메모리 사용 : 데스크톱 컴퓨터와 모바일 장치 및 태블릿의 브라우저는 특히 페이지에 많은 양의 이미지가로드 될 때 메모리 부족 및 충돌이 발생할 수 있습니다.
- 더 많은 시스템 메모리와 프로세서 사용으로 인해 로딩 시간이 증가하면 고르지 않고 불쾌한 탐색이 불가피 할 수 있습니다.
- 브라우저 호환성 : 무한 스크롤은 반응 형 웹 디자인 영역에 속하므로 이전 장치 또는 브라우저 버전과 완전히 호환되지 않을 수있는 라이브러리 및 플러그인에 따라 다릅니다.
- 바닥 글이 사라지고 도달 할 수없는 것을 보는 것은 사용자에게 "외상을 입는"경험이 될 수 있습니다. 또한 바닥 글의 모든 내용과 바닥 글 자체의 기능이 사라집니다.
- 방향 및 공간 참조 부족 : 페이지가 매겨진 구성표에서 사용자는 페이지의 내용을 통해 자신을 향하도록 간단한 시각적 참조를 설정하고 관심있는 항목이있는 위치를 표시 할 수 있으므로 나중에 다시 돌아올 수 있습니다. 자신이 찾고있는 것을 실제로 어디에 있는지 모르거나 잃어버린 느낌이 드는 사용자가있을 수 있습니다.
- 새로 고침 또는 뒤로 버튼을 누르면 데이터 스트림에서 사용자의 마지막 위치가 손실됩니다. 무한 스크롤은 많은 양의 항목을 표시하는 것을 목표로하기 때문에 실망스러운 상황을 피하기 위해 목록에서 실제 위치를 검색하는 방법도 구현해야합니다. 끝없는 페이지에 대한 대부분의 불만은 사용자가 방문한 페이지에 대한 제어권을 상실함에 따라이 두 가지 마지막 요점을 나타냅니다.
- 관심 지점이 개별 페이지에 표시되지 않고 항목 흐름의 어딘가에 떠 있기 때문에 책갈피는 쓸모없는 경향이 있습니다.
- 반드시 나쁜 것은 아니지만 검색 페이지에서 순위가 크게 다를 수 있습니다. 페이지 번호 2 이후에 갇힌 결과는 충분히 아래로 스크롤하여 페이지 번호 1에 나타납니다.
그렇기 때문에 인기가 높음에도 불구하고 무한 페이지가 항상 모든 사이트 또는 다른 장치에서 본 동일한 사이트에 가장 적합한 옵션은 아닙니다.
몇 가지 해결 방법
개발자는 이러한 불편에 대한 해결 방법을 지속적으로 찾고 무한 스크롤을보다 효과적으로 만듭니다. 문서화 된 새로운 iPad 용 LinkedIn 앱 사례는 무한 스크롤을 구현할 때 발생하는 문제 및 솔루션에 대한 사례 연구를 제공합니다.
응용 프로그램은 뉴스와 큰 그림을 표시하기 위해 중앙 목록에서 무한 스크롤해야했습니다. 이것은 스크롤의 성능에 영향을 미치지 않으면 서 모든 요소를 편리하게 처리 할 수있는 방법을 필요로했다. HTML5와 CSS 트릭을 결합하여 충돌없이 콘텐츠를 부드럽게 보여주는 앱의 최종 결과를 얻었습니다.
의심 할 여지없이 이러한 사용자 환경 개선은 여전히 공정한 발전 방법이 있지만, 특히 많은 정보, 그래픽 및 텍스트가있는 페이지를 탐색 할 때 사용자는 이미 더 나은 탐색 환경을 즐기고 있습니다.
리포지토리 영역
무한 스크롤은 여기에 있으므로 작동하도록 다른 방법을 아는 것이 좋습니다.
Enhantsy : Etsy.com에서 무한 스크롤 구현을 실제로 좋아했던 소수의 사람들은 Enhantsy 페이지에서이 플러그인을 설치하여 페이지에서 다시 스크롤 할 수 있습니다. 이 플러그인은 Etsy의 모든 페이지에서 연속 스크롤을 복원하는 것 외에도 몇 가지 다른 기능을 제공합니다.
워드 프레스 솔루션 : 블로그는 아마도 무한 스크롤링에 가장 선호되는 후보 일 것입니다. 어쩌면 소수의 사용자는 무한 스크롤이 활성화되어있을 때 WordPress가 배치하는 반투명 플로팅 바닥 글을 처리 할 수 없지만 기술을 좋아하는 대부분의 사람들에게 무한 스크롤은 대부분 무한 스크롤 모드를 활성화하는 플러그인입니다. WP 테마의 전문 지식이나 코딩 기술이 거의 필요하지 않습니다. Jetpack 플러그인은 또한 수십 가지 기능 중 하나 이상으로 무한 스크롤 기능을 제공합니다. Tuts +는 jQuery를 사용하여 무한 스크롤을 수행하는 방법에 대한 자습서를 게시했습니다. 이 튜토리얼은 코드 자체를 입력하여 무한 스크롤을 구현할 용감한 땜장이들을 대상으로합니다.
토론 및 권장 사항 : StackOverflow는 무한 스크롤과 관련된 모든 측면에 대한 많은 자습서를 제공합니다.
모바일 대안 : 무한 스크롤은 터치 스크린의 특성으로 인해 모바일 장치에서 잘 작동합니다. Android-Binding을 사용하여 Android에 효과를 줄 수 있습니다. 예를 들어, iPhone에서 작동하기 위해 앱에서 사용되는 이미지 스크롤 방법도 사용할 수 있습니다.
