우리가 모바일웹의 잠재력을 죽이고 있다

학습 차원에서 틈틈이 해외 전문가들이 블로그나 미디어 그리고 책에서 쓴 글을 정리하고 있습니다. 이번 포스팅도 그중 하나고요. 거칠고 오역된 부분이 있을 수 있습니다. 제대로 번역되지 않은 부분은 확인 주시면 반영토록 하겠습니다. 이번 글은 프리랜서 개발자인 Danny Moerkerke가 미디엄에 쓴 글을 정리한 것입니다.

이런 것들이 당신에게 일어났었나?

당신은 모바일폰이나 태블릿에서 웹을 브라우징하고 있다. 배너가 화면 위에 나타난다. 당신에게 이 사이트의 네이티브 앱을 설치하라고 요구한다. 당신이 이 웹사이트를 찾은 것은 처음이다. 당신은 그 앱을 설치하지 않기로 결정한다.

그러나 당신이 그 웹사이트를 몇 번에 걸쳐 방문할 때 배너는 계속 나타난다. 잠시 후 당신은 그 사이트 네이티브 앱을 시험 삼아 써보기로 한다. 스토어에 가서 다운로드를 받는다. 당신은 앱을 열면, 그것을 사용하기 시작한다. 그러나 당신은 앱이 제공하는 것이 당신이 웹사이트에서 얻었던 것과 크게 다를 게 없다는 것을 파악한다.

그러나 사용자 경험은 좋다. 페이지에서 페이지로 갈 때 화이트 스크린이 없다. 당신이 앱을 열면 그것을 즉시 뜬다.

그래서 당신은 모바일 기기에서 수십 메가바이트 스토리지를 차지하더라도 웹사이트 대신에 그 사이트 네이티브 앱을 사용하기로 결정한다. 그리고 당신은 정기적으로 끊임없는 업데이트에 귀찮아진다.

속도와 사용자 경험은 사람들이 모바일 웹사이트에 비해 네이티브 앱을 선호하는 주요 이유들이다. 사실 사용자들은 좋은 사용자 경험과 편리함을 위해 네이티브 앱을 설치하는데 따르는 번거로움과 기기에서 스토리지 공간을 포기할 의사가 있다.

이것은 유감이다. 모바일웹은 사용 편의성과 검색 용이성 등에서 강한 이점들이 있기 때문이다 그러나 모바일 웹사이트가 나쁜 사용자 경험을 제공할 때 이런 것들은 가치가 없다.

웹은 좀 더 많은 것들을 할 수 있다.

많은 네이티브 앱들은 쉽게 잘 다듬어진 모바일 웹사이트로 대체될 수 있다. 모바일 웹사이트는 정확하게 같거나 나은 사용자 경험을 제공할 수 있다. 대신에, 우리는 사용자 경험이 엉망이거나 사용자 경험을 전혀 제공하지 못한다. 우리는 사용자들을 쫓아낸다. 그리고 그들에게 네이티브 앱을 설치하라고 말한다.

이것이 사용자들이 모바일 웹사이트들보다 네이티브 앱들을 선호하는 이유다. 사용자 경험과 속도 때문이다. 이들 요소는 우리가 모바일웹을 모바일에 관련성 있게 만들려면 모바일 웹사이트에서 향상할 필요가 있는 영역이다. 지금 당장 모바일웹은 한마디로 말해 적절하지 않다.

사람들이 모바일 기기에서 쓰는 시간의 90%는 앱에서 쓰인다. 단지 10%만 모바일 웹사이트에서 쓰인다. 데스크톱과는 완전히 대조적이다. 데스크톱에선 웹 기반 애플리케이션들이 커다란 성공을 거두고 있다.

왜 우리는 같은 성공을 모바일에서 이룰 수 없는 것일까? 몇 가지 이유가 있다

우리는 적극적으로 사용자들을 내쫓고 있다.

우리가 모바일 웹사이트에 놓은 성가신 배너들은 사람들이 우리의 네이티브앱을 다운로드하도록 강요하고 있다. 이것은 모바일웹을 해친다. 이것들이 전달하는 메시지는 이 웹사이트는 우리 모바일 기기에서 보기엔 충분히 좋지 않다는 것이다. 우리는 그것을 보다 좋게 만들기 위해 신경조차 쓰지 않았다.

대신 우리는 모바일 웹에서 줄수 있었는데, 그렇게 하지 않은 것과 정확하게 같은 사용자 경험을 주기 위해 사용자 스마트폰 스토리지 중 100MB까지를 차지하기를 원한다.

여기서 문제는 무엇인가

특별히 스트라이프를 꼬집으려는 게 나의 의도는 아니다. 그러나 스트라이프 네이티브 앱은 그들의 웹사이트와 비교해 어떤 추가된 가치도 제공하지 않는다. 그러나 웹사이트는 작은 로그인 화면부터 시작해 실질적으로 모바일 기기에서 실용적으로 사용할 수 없다.

이 글이 실린 미디엄도 마찬가지다. 모바일 미디엄 웹사이트에선 당신은 네이티브 앱을 설치해달라는 배너를 볼 것이다. 몇 개월 동안 그것을 클릭하지 않다가 나는 마침내 네이티브 앱을 설치해 보기로 했다.

그것은 58MB 앱이다. 기본적으로 그것은 당신에게 모바일 웹사이트와 같은 경험을 준다. 그것이 전달하는 유일한 추가 가치는 이것이 스토리를 쓸 수 있게 한다는 것이다. 모바일 웹사이트로는 가능하지 않은 일이다.

일부 이유로, 미디엄 네이티브 앱의 코멘트에 답하는 것은 가능하지 않다. 한 스토리에 많은 클랩(Clap: 박수)가 있을 때 예를 들면 1256개가 있을 때 그것은 단순히 12K로 보여준다. 정확한 숫자를 보여줄 수 있는 옵션은 없다.

이것 외에 모바일웹사이트에서 보이는 배너는 네이티브 앱을 설치한 후에도 사라지지 않는다. 설상가상으로, 이제 두 번째 배너가 나타나 당신이 네이티브 앱을 열도록 만든다.

반응형 디자인은 모바일 퍼스트가 되어야 한다

당신이 쓰는 브라우저 개발 툴의 반응형 뷰에서 우리 웹사이트를 보는 것과 그것을 모바일 기기 작은 화면에 집어 넣는 것만으로는 충분하지 않다.   이것은 기본적으로 모바일 웹을 데스크톱 웹사이트를 지나치게 단순화한 버전으로 축소한다.

우리는, 데스크톱 퍼스트 마인드셋에서 벗어날 모바일 기기 퍼스트용으로 개발을 시작할 필요가 있다. 우리의 사용자들은, 점점 모바일에서 증가하고 있다. 많은 사람들이 모바일에만 있다. 모바일 퍼스트 디자인은  우리가 모바일 기기에서 데스크톱으로 증가될 수 있는 완전한 사용자 경험을 위해 디자인할 것이라는 것을 보장할 것이다. 우리는, 데스크톱 퍼스트로 디자인해서는 안된다. 모바일 기기에 맞도록 기능들을 버려야 한다.

이것은 미묘하지만 커다란 차이다. 그러나 당신의 웹사이트가 작은 기기에서 잘 보이는 것만으로는 충분치 않다는 것을 명심하라. 당신은 모바일 기기에서 웹앱을 실제로 경험해볼 필요가 있다. 이것은 실제 기기에서 실제 조건 아래 테스트해야 한다는 것을 의미한다.

당신의 멋진 개발용 랩톱에선 부드럽게 돌아가더라도 3G 연결 환경과 저렴한 안드로이드폰에서는 그렇지 않을 수 있다. 모두가 최신 아이폰이나 삼성폰을 갖고 있는 것은 아니다. 사실 다수는 이들 제품을 갖고 있지 않다.

모바일 퍼스트는 당신의 사용자들이 최고의 사용자 경험을 가능한 실제 모바일 기기에서 실제 조건 아래 얻을 수 있게 한다는 것을 의미한다.

너무 많은 자바 스크립트

이것은 또한 우리가 정말로 사용자들에게 보내는 자바 스크립트 양을 줄일 필요가 있다는 것을 의미한다. 최근 십여 년간, 우리가 보낸 자바스크립트 양은 636% 증가했다.

이같은 양의 자바스크립트를 평균 안드로이드폰을 쓰는 사용자들에게 3G 네트워크 환경에서 보내는 것은 단지 그것이 끊기는 게 아니라 인터랙티브를 위한 시간에 도달하는데, 수십 초 또는 1분기 걸리도록 할 수 있다. 이것은 사실상 이들 기기를 못쓰게 한다.

당신은 당신의 웹사이트가 실제 조건 아래 모바일 기기에서 어떻게 실행되는지 직접 볼 수 있다.

우리는 오프라인 퍼스트를 오해하고 있다.

당신의 웹앱을 오프라인 퍼스트용으로 디자인하는 그것은 당신의 앱이 사용자가 오프라인에 있을 때 정확하게 같은 경험을 제공해야 한다는 것을 의미하는 것은 아니다.

이것은 사용자들이 점점 더 모바일 기기에 있고, 모바일 기기들은 느리고 가끔 연결된다는 것을 의미한다. 한 네이티브앱은 단지 뜨고 일부 (오래된) 콘텐츠와 함께 기본 화면을 보여줄 것이다. 이것은 연결이 돌아오면 바로 업데이트될 것이다.

대부분의 웹앱들은 사용자들이 백지 화면을 오랫동안 보게 놔두거나 아니면 그냥 먹통이 된다. 이것은 사용자들이 웹앱보다 네이티브 앱을 좋아하는 가장 중요한 이유 중 2개다. 웹앱 사용자 경험은 한마디로 충분히 좋지 않다.

네이티브앱들은 이점이 있다. 네이티브앱들은 UI나 스크립트를 사용하기 전에 다운로드할 필요가 없다. 모든 것들은 이미 설치돼 있다. 그들이 기본적으로 유일하게 필요로 하는 것은 데이터다.

웹앱들은 이제 같은 일들을 한 서비스 워커(Service Worker)를 사용해 성취할 수 있다. 사용자가 당신의 웹사이트를 처음 방문할 때 서비스 워커는 HTML이나 CSS, 자바 스크립트 같은 모든 자산을 확인할 수 있다. 그리고 이미지는 다운르도되고 사용자 기가에 저장된다. 그 후 방문하면 그것을 런칭하는데 필요한 모든 것들이 이미 거기에 있다. 뭔가 바뀌지 않는다면 이들 자산을 내려받아야 할 이유가 없다.

이 방식으로 당신의 웹앱은 최적의 사용자 경험을 제공할 수 있다. 사용자가 오프라인이나 연결이 좋지 않은 상태에 있더라도 말이다.

우리는 웹의 기능들을 충분히 쓰고 있지 않다.

나는근처에 있는 특정 매장의 오픈 시간을 확인하거나 가장 가까운 위치를 확인하기 위해 웹을 여러 번 찾아왔다. 대부분 나는 웹사이트가 나의 현재 위치를 확인할 수 있도록 위치나 우편번호를 넣어야 한다.

나의 정확한 위치를 GPS를 통해 확인할 수 있는 지오로케이션 API(Geolocation API)는 IE9 이후로 지원됐다. 그러나 지오로케이션 API는 여전히 웹사이트들에서 많이 사용되지 않고 있다. 이들 웹사이트는 또한, 카메라, 마이크로폰, 최신 스마트폰에 있는 모든 센서들에도 접근할 수 있지만 이것들을 거의 사용하지 않는다.

네이티브 앱들은 반면, 이들 기능들을 활용하고 있다. 사람들, 개발자들 조차도 웹사이트는 이걸 할 수 없다고 생각하는 듯 하다.

어떻게 모바일웹을 구할 수 있을까?

많은 웹사이트들에서, 트래픽 다수는, 모바일 기기에서 나온다. 단지, 사람들이 모바일 기기에서, 보내는 시간의 10%가, 모바일 웹에서 사용되고 있다.

네이티브 앱들은, 분명히 여기에서 승자다. 온라인 소매 업체들은, 대부분 돈을 네이티브 앱들에서 번다. 다운로드된 네이티브 앱들은, 안정적으로 증가하고 있다. 그러나 거기에는 중요한 단점이 있다. 보다 많은 앱들이 매년 다운로드도고 있지만  한달에 새로운 앱을 하나도 내려받지 않은 사람들이 대부분이다. 몇몇 앱들이 앱들이 벌어들이는 돈의 대부분을 차지하고 있다. 앱들의 다수는 다운로드되지 않고 있고, 돈도 전혀 벌지 못하고 있다.

이것은 웹앱에게는 커다란 기회다.

웹앱은 단지 웹 기술만을 사용해 매우 적은 비용으로 네이티브와 거의 같은 사용자 경험을 제공하고 있다. 어떤 모바일 웹사이트도 프로그레시브 웹앱(PWA)으로 바뀔 수 있다. 이것은 웹앱이 오프라인 작동이나 홈 화면에 설치될 수 있는 것을 포함해 네이티브 앱처럼 돌아갈 수 있다는 것을 의미한다. 오프라인 자동이나, 홈 화면에서 설치될 수 있는 것을 포함한다.

단지 하나의 코드 기반으로 당신은 모바일 기기와 데스크톱 화면에 설치될 수 있는 모바일 웹사이트와 앱을 제공할 수 있다.

그리고 거기에서 멈출 수는 없다 이들 프로그레시브 웹앱은 단지 웹사이트를 방문함으로써 설치될 수 있다. 관련된 앱스토어나 구글 플레이 스토어는 없다. 당신의 앱은, 간단하게 구글에서 찾을 수 있다. 당신의 앱을 공유하는 것은 누군가에게 URL을 보내는 것 만큼 간단하다.

이렇게 설치된 앱들은 단지, 평균 네이티브 앱 크기의 일부의 공간만 차지한다. 그리고 업데이트는 자동으로 일어난다. 앱의 새 버전이 있을 때는 언제, 앱은 웹서버에 배치되고, 설치된 모든 앱은, 다음 방문에서 업데이트될 것이다.

우리는 이것을 오늘 할 수 있다 그러나 지금 당장 사람들은 네이티브 앱 설치에 따른 불편함을 기꺼이 감수하려 할 것이다. 그리고 귀중한 스토리지 공간을 포기할 것이다. 모바일웹이 이들에게 그들이 원하는 사용자 경험을 제공해주지 않기 때문이다. 웹의 미래는 모바일이다. 우리는, 모바일웹이 사용자들에게 가능한 최고의 사용자 경험을 제공하도록 보장할 필요가 있다.

더 나은 모바일웹은 개발자들과 함께 시작한다

우리 개발자들은 통상 개발한 것을 테스트하는 최신이고, 강력한 기기를 갖고 있다. 우리는 이것은 현실을 반영하지 않는다는 것을 깨달을 필요가 있다. 대부분의 사용자들은 앱들을 우리가 쓰는 기기들에서 사용하지 않기 때문이다.

대부분의 사람들은, 최신 맥북이나 아이폰을 살 여력 조차 없다. 우리는, 우리의 웹앱들이 가능한 최고의 사용자 경험을 대부분의 사람들이 쓰는 평균 기기들에서도 줄 수 있도록 확실히 할 필요가 있다.

당신의 앱들을 실제 기기들에서 실제 네트워크 조건 아래 테스트하라. 실제 기기에 접근할 수 없다면, 당신은  웹페이지테스트닷오알지( webpagetest.org)를 사용할 수 있다. 이를 통해 전반적인 기기들에서 앱들이 어떤 성능을 보이는지 알 수 있다.

크롬 개발 툴 반응 보기에서 웹사이트를 보는 것은 충분치 않다. 해당 기기에만 레이아웃이 맞는 웹사이트는 충분치 않다. 우리는 정말 우리의 앱들을 사용자들이 최고의 사용자 경험을 얻을 수 있도록 가능한 모든 기기들과 모든 환경에서 적응시킬 필요가 있다. 당신은 사용자 네트워크 환경에 대한 정보를 얻기 위해 네트워크 성능 API를 사용할 수 있다. 그리고 당신의 앱들을 필요한 만큼 적응시킬 수 있다.

당신의 앱들이 오프라인과 나쁜 네트워크에서도 작동할 수 있도록 확실하게 하라. 정적인 자산을 캐싱함으로써 매번 방문할 때마다 다운로드될 필요가 없도록 할 수 있다. 당신은 서비스 워커를 당신의 웹사이트에 추가함으로써 그렇게 할 수 있다. 서비스 워커는 모든 웹브라우저들에서 지원된다.

웹은 이미 데스크톱에서 승리했다. 이제 모바일도 접수할 시간이다.