브라우저 없는 웹을 위한 디자인

웹 브라우징에서 웹 브라우저를 빼면 어떻게 됩니까? Google의 새로운 "홈 화면에 추가" 기능은 기본 앱과 구별할 수 없는 빠르고 집중적인 웹 경험을 제공합니다. 디자이너는 Twitter와 같은 얼리 어답터의 성공에서 무엇을 배울 수 있으며 앱과 같은 디자인 패턴을 활용하여 이 완전히 새로운 사용자 경험 문제를 해결하려면 어떻게 해야 할까요?

우리는 네이티브 대 웹 경험의 주제에 대한 토론을 보았습니다. 둘 다 장단점이 있지만 브라우저 내 경험의 가장 큰 단점은 네이티브 앱 경험만큼 안정적이고 빠르며 몰입감이 느껴지지 않는다는 것입니다.

이 기사에서는 PWA(프로그레시브 웹 애플리케이션), 특히 Android 기기의 홈 화면에 추가되는 애플리케이션을 설계하고 개발하기 위한 팁과 트릭을 다룹니다. 그러나 먼저 몇 가지 예를 보고 PWA에 대한 사례를 만들어 보겠습니다.

앱과 같은 경험의 부상

PWA는 간단히 말해서 기본 애플리케이션처럼 보이고 느껴지는 웹사이트입니다. Google I/O 개발자 컨퍼런스에서의 연설에서 Google의 제품 부사장인 Rahul Roy-Chowdhury는 "사용자가 더 좋아하고 더 많이 참여하는 근본적으로 더 나은 웹 경험"이라고 설명했습니다.

숫자는 Rahul의 주장을 뒷받침합니다. Forbes는 PWA 출시 이후 사용자 참여가 두 배 증가했습니다. 이 수치는 또한 전자 상거래 부문의 성장을 계속 보여주고 있으며 Lancom은 새로운 PWA 출시 이후 전환율이 크게 증가했습니다.

사용자는 기술이 기본인지, 설치된 웹 앱 또는 웹 사이트인지에 대해 그다지 신경을 쓰지 않았습니다. 사용자를 참여시키고 쇼핑객을 전환하게 만드는 것은 경험 자체입니다.

"

이러한 종류의 빠르고 유동적이며 앱과 유사한 모바일 경험은 사용자가 원하는 것이며 주류 시장에서 더 많은 PWA가 등장함에 따라 기대하게 될 것입니다. 이 물결을 가속화할 것으로 보이는 한 가지 기능은 기본적으로 PWA 설치 프로세스인 "홈 화면에 추가"입니다. 최종 사용자의 경우 홈 화면에 PWA를 추가하면 앱과 같은 경험이 시작됩니다.

"홈 화면에 추가"란 무엇이며 그만한 가치가 있습니까?

"홈 화면에 추가"는 Android의 홈 화면에 PWA를 설치하여 사용자가 브라우저를 열고 URL을 입력하거나 검색 엔진을 사용할 필요 없이 PWA에 즉시 액세스할 수 있도록 하는 기능입니다. (참고: 아이폰 초창기부터 iOS 사파리에서도 비슷한 기능이 제공됐지만 사용자에게 앱 동작을 시뮬레이션할 수 있는 기회는 많지 않았다. 이런 이유로 사파리 버전은 이 기사의 일부가 아니다.)

Google의 Lighthouse 체크리스트에 반영된 바와 같이, 이 기능을 갖춘 PWA는 더 높은 점수를 받으며 결과적으로 검색 결과에서 더 높은 순위를 차지할 가능성이 높습니다.

PWA인 Twitter Lite를 사용하십시오. 전통적으로 Twitter는 모바일 웹에서 수백만 명의 사용자를 다시 참여시키는 데 어려움을 겪었습니다. Twitter Lite PWA에 "홈 화면에 추가" 프롬프트를 도입한 이후로 250,000명의 고유한 일일 사용자가 하루 평균 4번 홈 화면에서 웹 앱을 실행하는 것을 보고 있습니다.

소매 부문도 성공을 거두고 있습니다. Alibaba는 사용자가 기기의 홈 화면에 PWA를 추가한 후 상호작용 비율이 4배 더 높다고 보고했으며 Flipkart는 홈 화면 아이콘을 통해 도착한 쇼핑객의 전환율이 70% 증가했습니다.

"홈 화면에 추가"의 사용자 기반은 Android Chrome으로 제한되어 있지만 이 기능은 전통적으로 기본 앱에서 수행하던 역할인 몰입도가 높고 독점적인 경험을 통해 참여도가 높은 소수 사용자에게 보상을 제공합니다.

프로그레시브 웹 응용 프로그램은 웹 사이트가 앱으로 래핑된 것이 아닙니까?

기본적으로 그렇습니다. 그리고 왜 안 될까요? 모바일 시간의 90%가 앱에서 사용되며 소매 부문에서 전환율이 120% 향상되었습니다.

이는 모든 소매업체를 네이티브 앱 개발 경로로 이끄는 일종의 통계입니다. 그러나 기본 앱의 평균 비용이 약 $270,000인 상황에서 "홈 화면에 추가"는 매력적인 재정적 대안을 제공합니다.

사용자는 기술이 기본인지, 설치된 웹 앱 또는 웹 사이트인지에 대해 그다지 신경을 쓰지 않았습니다. 사용자를 참여시키고 쇼핑객을 전환하게 만드는 것은 경험 자체입니다.

• 로딩이 빠르나요?
• 오프라인에서 작동합니까?
• 탐색이 즉시 이루어집니까?
• 장치와 원활하게 통합됩니까?

이것은 "홈 화면에 추가"가 기본 앱과 일반적으로 관련된 일종의 높은 참여 통계를 제공하는 경우 통합되어야 하는 앱과 유사한 디자인의 특성입니다.

경험을 앱처럼 만드는 것은 무엇입니까?

"홈 화면에 추가"는 해당 앱에만 초점을 맞춘 경험을 만듭니다. 웹 사이트는 브라우저의 URL 표시줄이나 외부 웹 사이트에 대한 링크를 제공하는 탐색 도구 모음 없이 앱 아이콘을 통해 시작됩니다.

좋은 출발점이지만 경험이 진정으로 앱처럼 느껴지려면 다음을 포함하여 기본 앱 사용자의 특정 기대치를 인식하고 충족해야 합니다.

• 즉각적인 페이지 전환;
• 높은 인지 성능;
• 오프라인 접근성;
• 완전한 장치 통합;
• 앱 스타일 탐색;
• 뒤로 버튼;
• 공유 행동;
• URL을 복사하고 인쇄하고 앞으로 가십시오.

다이빙 할 준비가 되셨습니까? 하나하나 살펴보겠습니다.

즉각적인 페이지 전환

사용자는 각 상호 작용 후에 새 콘텐츠가 로드될 때까지 기다리지 않고 앱을 빠르게 사용하고 사용할 수 있기를 기대합니다.

PWA로 해결

PWA가 Lighthouse 체크리스트를 통과하려면 특정 성능 향상 지침을 따라야 합니다. 콘텐츠는 배후에서 캐시되어야 하며 새 페이지는 로딩 이벤트가 없는 것처럼 느껴질 정도로 빠르게 로드되어야 합니다.

인지된 성능

놀랍게도 모바일 지연으로 인한 스트레스 수준은 공포 영화를 보는 것과 비슷합니다! 앱을 다운로드하는 사용자는 콘텐츠를 기다릴 필요가 없습니다. 또한 로드할 때 비동기적으로 나타나는 요소로 인해 연결되지 않은 경험을 하려고 하지 않습니다.

PWA로 해결

"홈 화면에 추가" PWA 실행 전환(아래 Flipkart 예 참조)은 로드된 콘텐츠와 로드된 콘텐츠 사이에 시각적 다리를 제공합니다. 이것은 "미리 로드된 상태"가 속도와 심리스에 대한 인식을 어떻게 향상시킬 수 있는지 보여주는 예입니다. 잘 설계된 PWA는 페이지의 최종 상태를 모방하는 자리 표시자(골격)를 사용하고 지연 로드를 사용하여 보이지 않는 요소의 우선 순위를 낮추어 초기 로드가 더 빠르게 보이도록 하여 이 아이디어를 기반으로 합니다.

오프라인으로 작동

기본 앱을 다운로드하는 사용자는 앱이 제대로 작동하기 위해 인터넷 연결에 의존할 필요가 없습니다.

PWA로 해결

서비스 작업자(오프라인 경험을 향상시키는 기술)를 사용하여 연결이 낮거나 없는 영역에 온라인 콘텐츠를 즉시 표시할 수 있습니다. 페이지 콘텐츠는 배후에서 캐시되어 기차의 터널에 들어갈 때와 같이 브라우징 경험이 지연되는 곳에서 액세스할 수 있습니다.

전체 장치 통합

사용자가 자신의 앱을 찾고 관리할 것으로 기대하는 기기의 특정 위치가 있습니다.

PWA 솔루션

홈 화면에 추가된 PWA는 이제 Android 앱이 표시될 것으로 예상되는 모든 위치에 표시됩니다. 여기에는 앱 실행기, 작업 전환기 및 시스템 설정이 포함됩니다. 이렇게 하면 Google 검색이나 소셜 미디어 링크와 같이 PWA의 페이지로 연결되는 다른 앱이 브라우저가 아닌 앱을 열게 됩니다. 푸시 알림은 기본 앱에서 온 것처럼 나타납니다.

앱 스타일 탐색

앱은 탐색에 대한 공통 접근 방식을 공유합니다. 헤더 표시줄은 일반적으로 중앙에 현재 섹션의 제목을 표시합니다. 뒤로 버튼은 왼쪽 상단에 있습니다. 모든 상황에 맞는 작업(즐겨찾기, 공유 등)은 오른쪽 상단에 있습니다.

PWA 솔루션은 아직 없음

이 패턴은 모바일 웹에서 일반적이지 않습니다. 대신 이러한 작업은 브라우저의 기본 제공 기능(예: 브라우저의 뒤로 버튼)에서 찾을 수 있습니다. 웹이 이렇게 작동하는 데는 이유가 있습니다. 앱은 일반적으로 매번 같은 화면에서 시작되지만 모바일 웹 사용자는 종종 검색이나 소셜 미디어에서 참조됩니다. 모든 페이지가 방문 페이지가 될 수 있습니다. 이러한 이유로 로고 및 기타 전역 작업은 헤더 표시줄의 중심에 있으며 경험 내내 그대로 유지됩니다.

"홈 화면에 추가"가 있는 PWA가 실제로 앱처럼 느껴지려면 이러한 기대를 해결해야 합니다. 이를 위해 디자이너는 현재 브라우저에서 손실된 주요 탐색 패턴을 복구하는 방법을 알아내야 합니다.

뒤로 버튼

일부는 Android가 기기 자체를 통해 뒤로 버튼을 제공하기 때문에 브라우저의 뒤로 기능을 교체할 필요가 없다고 주장할 수 있습니다. 사실, 두 상호작용은 다른 일을 합니다. 대부분의 앱은 페이지 간의 계층적 관계 내에서 탐색하기 위해 "위로" 작업으로 헤더에 뒤로 버튼을 계속 제공합니다. 시스템의 뒤로 기능은 모달 창을 닫거나 완전히 다른 앱으로 이동할 수 있습니다.

해결책

한 가지 가능한 솔루션은 사용자가 초기 페이지를 지나갈 때 왼쪽 상단의 메뉴 버튼을 뒤로 버튼으로 교체하는 것입니다. 이것은 우리가 이 패턴을 사용자들에게 보여줄 때 검증되었습니다. 참가자가 초기 홈 페이지를 진행하면(메뉴 아이콘이 더 이상 표시되지 않음) 새 섹션으로 이동하도록 요청했습니다. 6명 중 6명은 직관적으로 뒤로 버튼을 사용하여 메뉴를 열 수 있는 홈 페이지로 이동했습니다.

공유 액션

모든 웹 브라우저의 사용자 인터페이스에는 소셜 미디어와 장치에 설치된 다른 앱을 통해 페이지를 공유할 수 있는 기능이 내장되어 있습니다.

해결책

디자이너는 페이지 내에서 일반적으로 공유되는 콘텐츠를 공유하기 위해 더 많은 프롬프트를 제공해야 합니다. 테스트 중에 사용자는 일반적으로 메뉴를 열기 전에 페이지 헤드 또는 제품 이미지 주위에 공유 버튼을 찾는 것으로 나타났습니다. 기능을 찾을 수 없는 경우 참가자는 헤더 표시줄에서 공유 아이콘을 찾을 것으로 예상했습니다.

"더보기" 아이콘은 옵션의 오버플로를 나타내는 데 사용되는 Android 스타일 패턴입니다. 이와 같은 메뉴 뒤에 공유 작업을 추가해 보세요. Web Share API를 사용하여 Android의 기본 공유 대화 상자를 트리거하는 것도 가능합니다(작성 ​​당시 이 기능은 Chrome 전용 기능이며 여전히 표준을 추적하지 않음).

URL 복사, 인쇄, 앞으로 이동

URL 복사 및 인쇄와 같은 덜 일반적인 작업은 브라우저의 기본 기능이므로 간과해서는 안 됩니다.

해결책

URL 복사 및 인쇄 기능을 제공하는 쉬운 방법은 Web Share API를 사용하는 것입니다. 또는 오버플로 메뉴에서 별도의 옵션으로 표시할 수 있습니다. 그런 다음 이 메뉴를 확장하여 헤더 표시줄의 영구 위치(예: 로그인 및 로그아웃)에서 이점을 얻을 수 있는 전달 작업 또는 기타 모든 작업을 포함할 수 있습니다.

실제 세계에서 작동하게 하는 방법

"홈 화면에 추가"가 허용되는 패턴 그룹으로 발전하는 데 시간이 걸립니다. 다음은 이러한 개발에 도움이 될 수 있는 몇 가지 모범 사례입니다.

고정 헤더, 지속적인 작업

"홈 화면에 추가" 얼리 어답터 Flipkart와 AliExpress는 모두 새로운 패턴을 도입할 때 학습 가능성의 중요성을 인식하고 있습니다. 사용자가 화면 상단에 고정된 헤더 표시줄에서 중요한 전역 작업(뒤로, 장바구니, 검색)을 찾을 수 있는 위치를 항상 알 수 있도록 합니다.

지능적으로 프롬프트

Google 크롬 팀이 PWA가 사용자에게 메시지를 표시할 시기를 완전히 제어할 수 있다고 발표한 이후 "홈 화면에 추가" 설치가 증가했습니다. Flipkart는 사용자가 구매를 한 후 메시지를 표시했을 때 참여도가 3배 증가한 것을 확인했습니다.

스트레스와 테스트

새로운 패턴에 대한 검증 프로세스의 일부는 여러 애플리케이션에서 이를 스트레스 테스트하는 것입니다. 우리는 패턴이 가장 엣지 있는 경우에도 잘 견딘다는 것을 발견했습니다. Lancome PWA의 헤더 표시줄에는 많은 클릭 유도문안이 포함되어 있습니다. Lancom은 오버플로 메뉴를 사용자 인터페이스를 단순화할 수 있는 좋은 기회로 파악하고 "홈 화면에 추가"를 사용할 것으로 예상되는 고급 사용자에게만 로열티 프로그램에 대한 링크와 같은 독점 기능을 제공합니다.

"홈 화면에 추가"는 어디에서 지원됩니까?

Apple은 서비스 작업자를 지원할 것이라고 발표했지만 App Store를 네이티브 앱 개발자가 시간과 돈을 투자할 수 있는 매력적인 장소로 만들겠다고 약속했습니다. 이것이 iOS의 Safari 브라우저가 경쟁업체의 발전에도 불구하고 PWA 및 브라우저 없는 웹 브라우징을 느리게 채택한 이유일 수 있습니다.

Samsung 인터넷 브라우저는 브라우저 표시줄 내에서 지속적인 "홈 화면에 추가" 프롬프트를 개발하여 사용자가 항상 찾을 수 있는 위치를 알 수 있도록 합니다.

Windows는 "홈 화면에 추가"를 한 단계 더 발전시킵니다. 이 기능이 있는 모든 PWA는 이제 Windows 스토어에 다운로드 가능한 앱으로 나열됩니다. 이러한 앱은 가볍고 데스크톱 및 태블릿 장치에 빠르게 설치할 수 있으므로 웹 사이트를 브라우저가 없는 편리한 환경으로 실행할 수 있습니다.

결론

"홈 화면에 추가"는 참여도와 전환율이 높은 사용자에게 몰입감 있고 독점적인 경험을 제공합니다. 사용자 기반과 기능을 지원하는 장치 모두에서 채택이 증가하는 동안 Twitter Lite와 같은 초기 성공 사례에서 검증을 찾을 수 있습니다. 이러한 이야기는 보다 현대적인 앱과 유사한 웹이 성능 및 디자인에 대한 사용자 기대치를 충족할 때 참여에 긍정적인 영향을 미칠 수 있음을 보여줍니다.

이러한 기대는 탐색 및 앱과 같은 사용자 경험의 직관적인 디자인 패턴과 PWA 성능 향상을 결합하여 충족됩니다. 이를 통해 브라우저 없는 웹 브라우징의 새로운 시대를 열 수 있습니다.