Google for Developers Korea Blog: 기다리는 시간을 더 가치있게 만들기 : 새로운 AMP 로딩 표시기

Google for Developers Korea Blog

한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.

기다리는 시간을 더 가치있게 만들기 : 새로운 AMP 로딩 표시기

2019년 9월 9일 월요일

.post-body span { white-space: normal !important; } <블로그 원문은 이곳에서 확인하실 수 있으며 블로그 번역 리뷰는 조은(Webtech GDE)님이 참여해 주셨습니다>
게시자: Andrew Watterson, Google AMP Project 제품 디자이너
이 게시물은 AMP 디자인 팀에서 작성한 글입니다. 우리는 AMP 컴포넌트와 전체적인 사용 환경을 유용하고 액세스하기 쉽고 세련되게 만들 책임이 있는 제품 디자이너와 연구자로 구성된 팀입니다. 우리가 어떤 일을 하고 어떤 성과물을 내놓고 있는지 확인하려면 GitHub 또는 Contributor Slack에서 UI 및 접근성 작업 그룹과 진행하는 다양한 활동을 살펴보세요.
AMP가 웹 사용자의 일상적 사용 환경을 개선하는 가장 중요한 방법 중 하나는 개발자가 빠르게작동하는 사이트를 만들도록 돕는 일입니다. AMP만 가지고 있는 장점은 한상 무대 뒤에서 개선하고 있다는 점입니다. 우리는 개발자가 따로 어떤 일도 할 필요 없이 AMP를 사용하는 사이트에 속도 개선 사항을 적용할 수 있습니다. 성능 모범 사례는 항상 AMP의 모든 측면에 적용되어있지만, 실제 속도 는 전체 이야기의 절반에 불과합니다. 엔지니어가 기술적인 세부 사항을 계속 열심히 다루는 동안, 우리 디자인팀에서는인지 속도를 개선하는 작업에 착수합니다. 기다림이란 늘 우리 인생의 한 부분이겠지만, AMP 엔지니어들이 우리가 제어할 수 없는 부분(예: Facebook 게시물 또는 YouTube 동영상) 이거나 그냥 용량이 큰 경우 AMP 페이지 내에서 더 빠르게 만들 수 없습니다. 하지만 많은 증거를 통해 사용 환경에 따라 기다려야 하는 상황에 대한 느낌 이 달라진다는 점이 분명히 드러납니다. AMP 페이지를 어느정도 사용해보셨다면 2015년부터 AMP가 사용한 로딩 표시기에 익숙할 것입니다. 원래 AMP 로딩 표시기

원래 AMP 로딩 표시기

오늘부터 우리는 새 로딩 표시기를 사용합니다. 새 AMP 로딩 표시기

새 AMP 로딩 표시기

우리가 어떻게 여기까지 왔는지 말씀드리겠습니다. 우리는 다음 세 가지 목표를 정하고 시작했습니다.

더 빠르게 로딩되는 느낌이 들게 한다.

무슨 내용이 표시될지 독자가 알도록 한다. 2016년 이후로 AMP 페이지에 표시할 광고에는 다른 로딩 표시기를 사용해왔으므로, 사람들은 광고를 주 콘텐츠와 즉시 구분할 수 있습니다. 우리는 동영상, 트윗, Facebook 게시물 등, 더 많은 유형의 콘텐츠에 이러한 로딩 표시기를 확장하고 싶었습니다. 이는 예컨데 인내심을 가지고 동영상이 로드되기만을 기다렸는데, 결국 동영상을 시청할 수 없는 상황이 벌어지지 않도록 하려는 것이었습니다.

디자인을 현대화한다. 이 목표에 대해서는 숫자로 정량화할 수 없지만, AMP 팀의 많은 사람이 우리가 쓰던 로더를 시각적으로 더 세련되게 만들 수 있으리라 느꼈습니다.

우리는 디자인을 세련될 뿐 아니라 중립적으로 유지할 필요도 있었습니다. AMP와 함께 제공되는 UI는 어떤 AMP 페이지의 디자인과도 잘 어울려야 합니다. 즉, 극적 표현력을 살린 색이나 너무 튀는 스타일은 지양해야 한다는 뜻입니다. 우리는 일정 시간 후 콘텐츠가 '로드'될 것임을 표시하는 10가지 종류의 로딩 표시기 디자인에 대한 프로토타입을 만들어 2,500명의 웹 사용자를 대상으로 로드 시간이 얼마나 걸릴 것 같은지 예측해 보라는 질문을 던졌습니다. 사람은 무척 짧은 시간을 추정하는 데는 능숙하지 못하므로, 예측의 정확도가 중요한 게 아니라 그 추세가 중요했습니다. 참가자들은 기존의 AMP 로딩 표시기나 기본적인 스피너와 같은 종래의 옵션에 비해 우리가 새로 디자인해서 선보인 몇몇 프로토타입을 보고서는 거의 1초 정도 로딩 시간이 덜 걸릴 것으로 예측했습니다. 우리는 이 데이터와 디자인 과정에서 큰 관심을 끌었던 몇몇 관찰 사항을 바탕으로 한 가지 디자인을 골랐습니다. 우리는 다음 세 가지 원칙에 이르렀습니다.

때로는 로더가 없는 게 더 낫다. 사용자는 자신이 기다리고 있다는 걸 미처 깨닫기 전에 로더를 표시하면 오히려 사용자의 주의를 흩트리면서 사이트의 작동 속도가 느린 것처럼 보이게 만들 수 있습니다.

흥미로움을 유지한다. 이미 백만 번도 넘게 봤을 법한 똑같은 스피너를 반복해서 봐야 하는 상황은 페이지가 로딩되기를 기다리는 사용자에게 도움이 되지 않습니다.

일관성을 유지한다. 한 페이지에 각각 고유한 디자인과 타이밍을 가진 여러 항목을 로드하면 주의가 분산되고 너저분해 보입니다.

우리는 마지막 원칙을 충족시키기 위해 다양한 크기, 콘텐츠형 아이콘, 배경에 맞춰 디자인을 조정할 수 있도록 했습니다. 첫 번째와 두 번째 원칙의 경우, 여러 단계에 걸쳐 로더를 애니메이션으로 제공함으로써 충족시켰습니다. 즉, 처음에는 아무 것도 표시되지 않다가 중간에 애니메이션을 하나 보여준 다음, 마지막으로는 콘텐츠가 로드될 때까지 루프를 이루며 회전하는 스피너를 표시하는 것으로 마무리합니다. 따라서 콘텐츠 로드 시간이 0.5초 미만일 때는 로더가 전혀 표시되지 않고, 로드 시간이 3.5초를 꽉 채우지 않는 한 스피너는 반복하지 않습니다. 콘텐츠형 아이콘의 예

콘텐츠형 아이콘의 예

우리의 디자인은 세 가지 목표를 모두 만족시켰습니다. 즉, 인지 속도에 관해 고무적인 데이터를 얻었고, 디자인이 더욱 세련되게 바뀌었다고 확신하며, 독자가 무슨 내용이 표시될지 알 수 있도록 개선했습니다. 개발자를 위한 AMP의 유연성 유지를 위해 해결해야 할 몇 가지 추가적인 세부 사항이 있었습니다. 우리는 콘텐츠가 로드되기 전에 새로운 디자인 자리표시자 이미지, 메시지 또는 맞춤 로딩 표시기를 표시하는 AMP의 능력과 충돌하지 않도록 하고 싶었습니다. 단순한 자리표시자 이미지가 있는 콘텐츠의 경우, 우리는 여전히 표시될 내용이 더 있음을 독자에게 알리고 싶으므로 컬러 이미지로 눈에 잘 띄는 특별한 버전의 로딩 표시기를 화면에 띄울 것입니다. 메시지나 맞춤 로딩 표시기처럼, 그보다 더 복잡한 자리표시자의 경우에는 우리의 디자인이 개발자의 디자인과 충돌하지 않도록 기본 로더를 전혀 표시하지 않을 것입니다. 다양한 콘텐츠형 아이콘

다양한 콘텐츠형 아이콘

우리는 앞으로 몇 주에 걸쳐 AMP 페이지 중 몇 퍼센트에 대해서만 제한적으로 새로운 로딩 표시기를 제공하는 라이브 실험을 진행하면서, 사이트 성능 통계뿐 아니라 커뮤니티 의견도 면밀히 주시하여 최종적으로 가다듬는 작업을 수행할 예정입니다. 우리의 목표는 이런 의견을 바탕으로 최종 확정된 새 로더를 모든 AMP 페이지의 모든 구성요소로 전개하는 것입니다. 새로운 디자인이 마음에 드시길 바라고, 한 번에 하나씩 작고 세부적인 사항을 차근차근 개선할 수 있도록 웹의 사용자 환경을 향상하는 데 아낌없는 성원을 보내주시면 고맙겠습니다.

Contents

ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase

검색

Tag

Archive

2024
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2023
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2022
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2021
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2020
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2019
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2018
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2017
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2016
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2015
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2014
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2013
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2012
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 3월
- 2월
- 1월

2011
- 12월
- 11월

Feed

Google
Privacy
Terms