웹앱의 또 다른 대안, PWA를 경험해보자

PWA란 무엇?

저는 처음 이 단어를 페이스북 광고를 통해서 접하게 되었습니다.

PWA란 Progressive Web App의 줄임말로, 네이티브 앱과 같은 사용자 경험을 주는 웹 앱을 의미합니다

2016년 구글 I/O에서 언급된 기술로, 앱을 직접 깔지 않고, 웹 캐시 + 브라우져의 기능을 통해서 네이티브와 같은 경험을 주기위해 고안되었습니다. 구글이 안드로이드 시장을 잡고 있다고 해도, 결국 그들은 검색엔진으로 성장한 기업이니만큼, 검색이 불가능한 앱이 웹을 모두 삼켜버리는 것 보다는 웹이 앱을 품기를 바라고 있습니다.

그래서 구글이 펼치는 사업을 잘 보면 크롬북이나 크롬 OS 같은 것들로 여러가지 시도들을 했었지만.. 번번히 패러다임은 앱으로 회귀하고 있습니다.

어쨌든 이 PWA를 위해서 구글은 세가지 핵심어를 제시하고 있습니다.

• 신뢰할 수 있는 : https로 구성된 신뢰성 있는 인증서를 가지고 있어야만 (크롬이) PWA로 설치를 유도해줍니다
• 빠른 : 웹 캐싱으로 재방문하는 페이지가 빠르게 로드됍니다
• 접근성이 좋은 : (크롬이) 홈 화면에 추가로 앱과 같이 쉽게 접근가능합니다.

왜 PWA인가?

제가 PWA를 적용한 이유는 웹앱을 만들 시간과 노력이 아까워서였습니다. 웹앱을 싼 값에 효과적으로 만들려면 Cordova의 Phonegap을 전에 한번 써봤지만, 앱이라는게 결국 마켓과 앱스토어에 올려야 한다는 비용이 추가로 들었습니다. 안드로이드의 경우 감내할 수준이었지만, 애플은 심사기간도 오래걸리고 개발자 계정이 필요하더군요.

제 프로젝트가 대학교 축제를 모아놓은 단발성 사이트를 만드는 것이기에 그런 비용은 불필요하다고 판단, PWA를 적용시켜서 보다 효과적으로 재방문율을 높이고자 하였습니다. 그래서 얻어낸 장점과 단점이 명확했습니다

• 장점
  • 푸쉬 알림, GPS 외의 네이티브 기능 일부가 사용 가능하다
  • 상단에 URL이 없는 전체화면이 구현되고, 집중도와 재방문율을 높여준다.
  • 적용하기 매우 쉽다.
  • Android, IOS 모두 적용 가능하다.
• 단점
  • 페이스북, 카카오톡의 이용량이 워낙 많다보니 in app browser 라서 홈 화면에 추가하기 쉽지 않다.(유도 버튼이 안뜬다ㅠㅠ)
  • 처음 한번 설정하는게 익숙하지 않다.

PWA 체험해 보기

제가 실제로 PWA를 한번 대학 축제라는 프로젝트에서 구현을 해 보았는데요, 우선 페이스북 글에 어떻게 홈화면에 추가하는지 적어놓았습니다.

적용은 어떻게?

우선 웹앱 Manifest 파일을 작성해야 합니다.

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

위의 예제에서 보듯이 화면 방향, 아이콘 배경 색깔 이름같은 정말 앱에 있어서 기본적인 요소가 적혀있는 json 파일인데 이걸 link 태그로 적어놓아야 합니다. 자세한 내용은 모질라 디벨로퍼 페이지에서 보실 수 있습니다. 여기서 무슨 버그인지는 모르겠으나, head 태그 안에 최 상단에 놓지 않으면 크롬이 인식을 못하는 버그가 있습니다.(2017.05.20)

<link rel="manifest" href="/manifest.json">

다음 태그를 헤드 꼭대기에 적어놓으면 절반의 성공!
이후 serviceworker를 만들어 놓아야합니다. 사실 이 부분은 매우 길어져서 구글의 문서를 참고하시고 따라가시길 바랍니다ㅎㅎㅎ 거의 복붙수준으로 따라가셔도 무방합니다.

마치며

부디 앱 위주로 돌아가는 생태계가 웹에게도 열려서 반복적인 개발이 아니라 한번에 마무리될 수 있는 연계의 길이 PWA로 대중화되기를 기대해봅니다.