AMP
by hohoya33
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>AMP - Accelerated Mobile Pages</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/custom.css">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="https://highlightjs.org/static/demo/styles/monokai-sublime.css">
<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
<link rel='stylesheet' href='lib/font/devicons/devicons.css'>
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<span style="height:4.6em;width:4.6em;display:inline-flex;align-items:center;justify-content:center;border-radius:50%">
<img src="img/amp_logo.png" alt="" width="100%">
</span>
<h1 style="margin-bottom:60px;font-size:50px;letter-spacing:normal">AMP<br><span style="font-size:30px">Accelerated Mobile Pages</span></h1>
<p>2018. 12. 13</p>
<p>IT 개발2팀 UI파트 - 김재호</p>
</section>
<section>
<h2>The Agenda</h2>
<ul>
<li>AMP 소개</li>
</ul>
</section>
<section>
<section>
<h2>AMP 소개</h2>
</section>
<section>
<h2>배경</h2>
<!-- <p>스마트폰의 성능은 꾸준히 좋아지고 있지만,<br>저전력 CPU와 메모리의 한계 그리고 제한된 스토리지 등 PC를 대체하기에는 어려움이 따름</p> -->
<!-- <div style="display:inline-block;vertical-align:middle;"><img src="img/amp_loading.png" width="65%" alt=""></div> -->
<div style="display:inline-block;vertical-align:middle;"><img src="img/amp_loading3.jpeg" width="50%" alt=""></div>
<p>Google은 검색 결과에서 링크를 클릭하는...CSS
* [https://learning.oreilly.com/library/view/amp-building-accelerated/9781786467317/ab9e89db-2e15-409e-87ee-5af76f4efd24.xhtml](https://learning.oreilly.com/library/view/amp-building-accelerated/9781786467317/ab9e89db-2e15-409e-87ee-5af76f4efd24.xhtml)
* [http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=7767390](http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=7767390)
* [https://medium.com/kainos-applied-innovation/the-future-of-web-gotta-go-fast-91631fdadd6c](https://medium.com/kainos-applied-innovation/the-future-of-web-gotta-go-fast-91631fdadd6c)
* [https://uxplanet.org/amp-the-webs-first-steps-into-the-performance-age-8a25ba2f35f2](https://uxplanet.org/amp-the-webs-first-steps-into-the-performance-age-8a25ba2f35f2)
* [https://216digital.com/amp-for-ecommerce-benefits-infographic/](https://216digital.com/amp-for-ecommerce-benefits-infographic/)
* [https://www.stonetemple.com/the-canonical-guide-to-amp/](https://www.stonetemple.com/the-canonical-guide-to-amp/)
* [https://www.stonetemple.com/4-amp-misconceptions-that-are-no-longer-true/](https://www.stonetemple.com/4-amp-misconceptions-that-are-no-longer-true/)
* [https://allabout-tech.hatenablog.com/entry/2016/07/13/100000](https://allabout-tech.hatenablog.com/entry/2016/07/13/100000)
* [https://syncer.jp/Web/AMP/#section-5](https://syncer.jp/Web/AMP/#section-5)
* [https://syncer.jp/Web/AMP/Common_Attribute/](https://syncer.jp/Web/AMP/Common_Attribute/)
* [https://www.thewordcracker.com/intermediate/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90%EC%84%9C-%EA%B5%AC%EA%B8%80-amp%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/](https://www.thewordcracker.com/intermediate/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90%EC%84%9C-%EA%B5%AC%EA%B8%80-amp%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/)
* [https://developers-kr.googleblog.com/2017/03/why-amp-caches-exist.html](https://developers-kr.googleblog.com/2017/03/why-amp-caches-exist.html)
*...JavaScript
AMP | Accelerated Mobile Pages 자료 정리
최적화된 리소스 관리 및 스마트 캐싱과 함께 웹 페이지에서 사용할 수있는 HTML, CSS 및 JavaScript를 제한함으로써
AMP는 모바일의 성능 문제를 해결하는 동시에 매력적인 미디어 풍부한 콘텐츠를 제공 할 수있는 프레임 워크를 제공합니다
AMP 프로젝트는 좋은 이유로 로고로 번개가 있습니다. AMP 페이지는 번개처럼 빠릅니다.
커스텀 자바스크립트를 AMP 페이지에 추가 할 수 없음
그러나 이것은 변경 될 수 있습니다. 올해 초, AMP conf에서 google은 AMP 페이지에 저자 작성 자바 스크립트를 추가 할 수 있다고 발표했습니다.
AMP는 페이스북 인스턴트아티클과 마찬가지로 로딩이 거의 없어 이탈율을 줄여줄 것으로 보인다.
AMP html 페이지가 Google 검색에 나타나 자마자 Google은 페이지를 작성 (렌더링)하여 자체 캐시에 저장합니다. 즉, 사용자가 페이지를 클릭하자마자 완전히로드되고 거기에 있습니다. 페이지로드가 발생하지 않습니다.
우리의 가장 큰 도전 중 하나는 커스텀 자바 스크립트를 AMP 페이지에 추가 할 수 없다는 것입니다.
그러나 이것은 변경 될 수 있습니다. 올해 초, AMP conf에서 google은 AMP 페이지에 저자 작성 자바 스크립트를 추가 할 수 있다고 발표했습니다.
모바일에서 원하는 페이지를 클릭했는데 로딩시간이 너무 길어 해당 사이트나 어플을 이탈해 본 경험 한 번쯤은 있을 것이다. 많은 이들이 로딩시간이 너무 길면 대게 페이지를 보는 것을 포기한다. 실제로 한 연구에 따르면 웹 로딩시간이 10초가 될 경우 이탈률은 무려 58%에 이르다는 연구결과가 발표되기도 했다.
AMP_HTML 이라는 마크업으로 페이지를 잘 구성해놓으면 구글 및 대기업(?)들을 통해서 구글캐시 및 신기술들이 적용되어 모바일 사용자가 더 빠르게 웹사이트의 컨텐츠를 볼 수 있다.
미디어오늘 홈페이지에 접속해서 데이터를 다운로드 받아 화면에 뜬다.
모바일에 최적화된 AMP페이지를 마련해두고,
기사의 캐시를 미리 받아놓고 있기 때문에 링크를 클릭하는 순간 기사를 볼 수 있는 것이다.
구글은 웹개방성을 무기로 성장해왔다.
뉴스는 모바일에서 주요한 콘텐츠고, 구글은 방대한 양의 정보를 담을수록 이익을 본다.
뉴스를 관리하며 얻는 무수한 이용자 정보 또한 구글이 분석하고 가공해 이용할 가능성도 있다.
페이스북이 2015년 5월 출시한 인스턴트 아티클에 대응해
구글이 급하게 출시한 것처럼 보이는 제품이 AMP 가속화된 모바일 페이지
# 구현할 수있는 UI에 제한
AMP HTML은 일반적인 HTML보다 구현 방법에 제한
CSS를 인라인으로 기재. 기재 가능한 것은 50KB까지
cdn.ampproject.org 제공되는 JavaScript 이외는 이용할 수 없다.
즉, 스스로 쓴 JavaScript는 이용할 수 없음
AMP는 자기가 쓴 JavaScript를 사용할 수 없기 때문에, 인터랙티브 광고는 구현할 수 없습니다.
사용자 작성 및 써드파티 스크립트가 허용되지 않음
img, video, audio, iframe, form, input 대신 amp - **** 등의 사용자 정의 엘리먼츠를 사용한다.
위의 제한이 있기 때문에 디자인 작업시 다음의 과제가 발생합니다.
CSS를 과도하게 사용한 디자인은 구현할 수 없다. 용량 제한이 있기 때문에.
JavaScript를 사용한 자유로운 상호 작용은 구현 수 없다.
JavaScript를 사용하여 상호 작용을하고 싶은 경우는 제공되는 컴포넌트를 이용
# 프런트 엔드 개발
AMP HTML 실무 한편, 분업 제로 제작을하고 있으면 익숙해 질 때까지 시간이 걸립니다. 반대로 개인의 디자인 및 마크 업하는 경우는 그다지 공정은 들지 않습니다.
## HTML
- 일반 HTML과 약간의 구현 사양이 다르기 때문에 초기 학습 비용이 부과됩니다.
- 출시 전에 디버깅 도구를 사용하여 확인이 필요합니다.
- 출시 이후 성공적으로 Google로 인식되고...