DEVIEW 2017 [SESSION 3] 동네 커피샵도 사이렌오더를 쓸 수 있을까?

본 세션은 2016 년 DEVIEW 와 겹치는 부분이 있습니다

DEVIEW 2016 개인 블로그 리뷰: http://hsol.tistory.com/935

DAY 1 / 14:00~14:45 / TRACK 2

동네 커피샵도 사이렌오더를 쓸 수 있을까?

개요

사이렌 오더는 스타벅스사에서 런칭한 서비스. 동네 커피숍에 적용하기에는 install, regist 등의 과정이 불편함

이를 해결하기 위해 PWA 도입!

• 일회성 소비를 위한 서비스를 가능하게 하는 웹 기술은 어떠한 것이 있는가

• 그걸 적용함에 따라 어떠한 문제들이 있는가

PWA(Progressive Web App)

App 설치 없이 URL 접근으로 서비스를 가능하게 하는 솔루션

• 웹에서 앱과 같은 사용자 경험을 제공

• Service worker

  • Web page 로드 시 register

  • Browser 와 별개로 돌고 있는 worker thread

  • Browser 가 꺼져있는 상태에도 Push notification 가능

  ​

URL 전달로 웹이 앱처럼 동작하는 것이 어떠한 상황을 만들어낼까?

• 다수의 사용자에게 자연스럽게 URL 을 전달할 수 있다.

• 최소한 한번 이상 접속할 가능성이 높다.

• 피드백을 받기 용이하다.

  • PWA 인지 모르고 사용했다.

  • 기존 앱이라면 설치하지 않았을 것이다 등

접근성을 높이기

• URL 을 어떻게 전달할 것인가?

  • Physical Web(beacon) - bluetooth 설정 필요, 무음 noti

  • NFC - NDEF record. 사용자의 능동적 접근이 필요

• Loginless

  54% signup 전에 포기. 92% signin 후 정보 재설정 전에 포기.

  • 가벼운 서비스를 사용하기만을 위해 사용자가 개인정보를 제공하지 않음

  Browser fingerprint 를 이용한 사용자 정보 식별

  • User agent(browser info, resolution)

  • Canvas 2D, WebGL

    • javascript > web engine > CPU/GPU > rendering

    • Rendering 결과가 device 간 조금씩 다르다

  • 추출한 data 를 key 로 사용

  • 특정시간, 구간에 사용자를 구분하는데 활용

  ​

Push Notification

Revoke Permission 의 필요성.

Service Worker 에 의한 Push Notification 은 반드시 사용자로부터 알람에 대한 Permission 을 구하도록 브라우저에 구현됨. 하지만 단 한번이라도 Block 당하게 될 경우 다시알람을 허용할 방법이 거의 없음.

• Solution

  • 느린 Invoke. allow 창을 보여주기 전에 충분히 설명함

Payload?

표시 방식이 브라우저마다 달랐다.

• Solution

  • Payload 대신 token 을 이용하여 Server 에 쿼리하는 방식으로 대체

Web Payment

• 결제를 위한 추가적인 앱 설치를 요구하지 않아야 한다.

• Merchant 가 사용자가 원하는 지불수단을 제공해야 한다.

  • 확장성의 문제. Merchant 가 얼마나 다양한 지불 수단을 제공할 수 있는가?

개발 플랫폼 level 에서 제공할 수 있는 것

• 웹으로 결제 가능한 지불수단 추가를 최대한 쉽게 만듦

• Merchant 에서 지불수단 추가에 대한 integration 노력을 최소화

Payment Request API

결제를 위한 프롬프트 UI 생성

• 웹 페이지와 별개로 콜백 구조가 깨질 염려가 없음

Payment Handler

PG 사에서 만든 결제 모듈을 호출

• 지불방식과 관계없이 하나의 함수만을 사용

• 하나의 콜과 콜백안에서 결제요청과 확인이 완료

• 지불수단 추가가 단순하고 쉬움

• 새로우 지불방식의 FLOW 를 공부할 필요가 없음

Future?