conference

GDG WebTech - AMP, PWA

허원철 2017. 2. 27. 10:05
GDG WebTech에서 AMP와 PWA 주제로 세미나가 있어 참여하게 되었습니다.

AMP만 보고 참여한 세미나를 참여했지만 PWA에도 흥미가 생겨 끝까지 듣게 되었습니다. 물론 블로그를 보시면 아시겠지만, 내용이 많이 부실합니다. (사전 준비가 안되어 있어....) 그래도 이런 기능이 있구나.. 정도로만 참고하시면 될 것 같습니다. 자세한 내용을 접하고 싶으시다면 아래 첨부한 링크를 보시거나 직접 서치를 해주시면 감사하겠습니다.


AMP

- AMP를 처음 접하게 된건 블로그를 운영하면서 였습니다. 블로그를 하게 되면 방문자를 늘릴 수 있는 방법 중 하나로 검색 엔진에 노출되게끔 하는 것 입니다. 이는 구글이나 네이버 웹마스터도구를 통해 가능합니다. 구글 - 웹마스터도구 메뉴들을 보면  '액셀러레이티드 모바일 페이지(AMP)' 가 있습니다.  




그래서 AMP가 무엇인가?

- 간단한게 말씀을 드리자면, 모바일에서 조금 더 최적화된 웹페이지를 구성하는 방법입니다. (물론 데스크탑도 해당 되는 얘기이지만, 모바일에서 조금 더 좋은 효과를 볼 수 있습니다. - 체감상 3~40% 정도 빨라진다고 합니다.)


왜 AMP를 써야하는가?

조은님 曰 : "우리가 쓰는 웹은 빠르지 않습니다. 다만 네트워크가 빠른 것 입니다. 그렇기 때문에 웹을 만들 때, 느리다는 가정 하에 만들어야 합니다."

※ AMP를 사용할 경우, 구글 검색에서 상위 노출되도록 도와줍니다. (구글에 적극적인 지원이 있습니다...)



어떤 이유 때문에 빨라 질 수 있는가?

- 여러가지 이유가 있지만, 몇 가지만 간추려서 적어보겠습니다.

1) 비동기방식 자바스크립만 사용 가능합니다.

1
<script async src="{...}"></script>
cs

2) 작성자가 작성한 자바스크립트 사용 불가능합니다.(amp에서 제공한 스크립트만 가능합니다.)

※ iframe 삽입을 허용하기 때문에 iframe에서 작성한 자바스크립트를 사용할 수 있습니다.

3) CSS를 inline으로 넣는다. (Size : 50kb 제한)

4) 렌더링에 성능 이슈를 주는 CSS는 제한됩니다.

5) preconnect API를 사용하여 페이지를 접근하기 전에 페이지를 미리 로딩됩니다.



간단한 예제를 통해 접해보자


- 세미나에서 진행 했던 걸 예제로 진행하기 위해.. 페이스북에 올라가 있는 프로필 사진으로 명함(?) 웹 페이지를 만들어 보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html amp lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 
    <link rel="canonical" href="AmpCard.html"/>
    <title>Heo Won Chul - Card</title>
    
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
    .card {
        padding : 10px;
    }
    </style>
</head>
<body>    
    <div class='card'>
        <amp-img
            src="https://scontent-icn1-1.xx.fbcdn.net/v/t1.0-1/p240x240/1518040_761651517286777_6537604985669832242_n.jpg?oh=b0fb88831ed414f133487f8d9ed93b35&oe=59355EED"
            width="240"
            height="240"
            layout="responsive">
        </amp-img>
        <dl>
            <dt>Heo Won Chul</dt>
            <dt>heowc1992@gmail.com</dt>
            <dt></dt>
        </dl>
    </div>
</body>
</html>
cs

1) <!DOCTYPE html> 이어야 합니다.
2) html 태그에 amp 속성을 넣어줍니다.
3) 메타 태그로 charset=UTF-8을 넣어줍니다.
4) 메타 태그로 viewport 추가를 해줍니다.
5) 검색에서 더 자세하고 정확한 정보를 제공하기 위해 canonical link를 추가합니다.
6) amp에서 제공하는 스크립트를 추가해줍니다.
7) amp에서 제공하는 스타일을 넣어줍니다.

여기까지만 하면 amp에서 권장하는 기본 페이지입니다. (https://www.ampproject.org/)

추가로 이미지를 올리기 위해 img 태그가 아닌 amp-img 태그를 사용합니다. layout="responsive"은 화면 비율에 맞게 알아서 맞춰 주는 속성 입니다. (잔코딩을 줄여줄 속성일 듯 합니다.)


AMP 확인하기

- 로컬에서는 AMP가 브라우저에 적용되있는지 불가능하고 서버를 띄운 후 판단이 가능합니다. 개발자 도구(F12)에서 Console Tab에서 'AMP validation successful' 문구가 뜨면, 제대로 amp가 적용된 것을 알 수 있습니다.





PWA


- 점진적인 개선을 통해 점점 더 앱처럼 되어간다.. 조금 더 네이티브화 되어 간다.. 이런 모토(?)를 가지고 생겨난 기술인 것 같습니다.




GDG WebTech에서 PWA의 주요 기능으로 뽑는 것


1) 푸시 노티피케이션


- 스마트폰 앱처럼 브라우저에서 푸쉬 알림이 가능합니다. 현재 페이스북에서 푸시 알림을 사용하고 있습니다. 



2) 서비스 워커


- 자체적인 스코프가 존재하여, 지속적인 백그라운드 처리가 가능합니다. 이는 브라우저의 설치되는 일종의 시스템 요소와 유사하다고 볼 수 있습니다. (https://jakearchibald.github.io/isserviceworkerready/)


- 주요 함수로는 cache, waitUntile, fetch가 있습니다.


※ 서비스가 되는 페이지라면 반드시 https로 사용해야 합니다.


3) 웹 인스터러블


- 웹용 매니페스트를 등록 해주면 앱에서든 데스크탑에서든 다운이 가능합니다. (안드로이드 매니페스트와 용도는 같다고 생각하시면 쉽습니다.)


manifest.json 추가 등록 후, (옵션이 여러가지 있으나.. 진행이 너무 빨라서 다는 못 들었습니다..ㅠㅠ)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "name": "heowc-card",
    "short_name": "heowc-card",
    "icons": [
        {
            "src": "https://scontent-icn1-1.xx.fbcdn.net/v/t1.0-1/p240x240/1518040_761651517286777_6537604985669832242_n.jpg?oh=b0fb88831ed414f133487f8d9ed93b35&oe=59355EED",
            "sizes": "240x240",
            "type": "image/png"
        }
    ],
    "start_url": "./?utm_source=web_app_manifest",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#FFFFFF",
    "theme_color": "#3F51B5"
}
cs


html 에 추가 수정 해주시면 됩니다.


1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html amp lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 
    <link rel="canonical" href="AmpCard.html"/>
    <link rel="manifest" href="manifest.json"/>
...
cs



결과(개발자도구 - Application)


- application tab에서 보면 방금 manifest.json 에서 등록한 정보가 추가되는 것을 볼 수 있습니다. 데스트탑에서는 'add to homescreen'으로 앱을 설치 할 수 있습니다.





참고


- https://github.com/pwa-workshop/namp-card/wiki/%EC%BD%94%EB%93%9C%EB%9E%A9(Codelab)-%EA%B0%80%EC%9D%B4%EB%93%9C-%EB%AC%B8%EC%84%9C

- https://github.com/pwa-workshop/namp-card

- https://www.ampproject.org/ko/docs/get_started/create/basic_markup