AMP는 지연없이 페이지에 바로 액세스 가능하게 하는 프레임워크로 다양한 웹기반의 기술을 사용해 모바일 웹의 성능을 높이기 위한 목적을 가지고 있다.
AMP는 AMP Websites , Stories , Ads, Email 이 있으며,
AMP Stories 에 대해서 알아보았다.
AMP stories
An open format for visual storytelling on mobile
AMP 는 모바일 겨냥하여 개발되고 있고 데스크톱도 지원하고 있다.
AMP Stories 는 open web으로 된 시각적인 스토리 텔링 도구라고 볼 수 있다.
전체 화면에서 이미지, 동영상, 그래픽, 오디오 등으로 정보를 전달하는 시각적 스토리텔링 도구로,
읽기 간편하고 시각적으로 풍부한 콘텐츠 제공한다.
주로 콘텐츠가 많은 미디어 사이트나 뉴스 사이트에서 주로 시각적인 정보 전달 도구로 많이 사용하고 있다.
Protecting the Antarctic: A journey to a continent in distress
Protecting the Antarctic: A Journey to a continent in distress
www.cnn.com
AMP 구성요소
amp 코드는 html 에서 작성된다.
amp stories는 크게 amp-story standalone 이 바깥, amp-story-page 이 안으로 구성되어있으며
page 에는 여러 layer 들이 존재한다.
amp-story standalone > amp-story-page , System Bookend >amp-story-grid-layer
layer에는 비디오나 text, image 가 포함된다.
구성 요소는 사용자 지정 AMP 구성 요소이며, 모든 사용자 지정 구성 요소와 마찬가지로 구성 요소에 대한 관련 스크립트를 AMP 문서에 추가해야 한다.
<head>
<script async custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
</head>
웹에서 발견되는 스토리의 경우, 스토리의 미니 디테일을 제공하기 위해 다음과 같은 특정 메타데이터가 필요하다.
<body> 에서 다음 태그를 추가한다.
<amp-story standalone
title="Joy of Pets"
publisher="AMP tutorials"
publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
poster-portrait-src="assets/cover.jpg">
</amp-story>
layer 에서 실질적인 데이터 코드를 추가한다.
<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-img src="assets/cover.jpg"
width="720" height="1280"
layout="responsive">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>The Joy of Pets</h1>
<p>By AMP Tutorials</p>
</amp-story-grid-layer>
</amp-story-page>layer 의 template="fill" : 이미지를 화면 가득 채우게 한다.
template 에 "vertical" , "horizontal", "thirds 등을 주어 다른 효과를 줄 수 있다.
여러 콘텐츠 들이 층으로 쌓이게 되어 하나의 페이지를 완성할 수 있다.
AMP CDN
CDN을 통해 쉽게 캐싱될 수 있도록 디자인
구글에서 제공하는 CDN 서비스를 통해 제공하도록 하거나
직접 구축하거나 또는 일반적인 웹 서버를 통해 서비스 할 수 도 있다.
완성된 코드
Joy of Pets
Dogs Dogs were probably the first tame animals. They have accompanied humans for some 10,000 years. Some scientists assert that all dogs, domestic and wild, share a common ancestor in the small South Asian wolf. Rabbits Rabbits can learn to follow simple v
49ifw.csb.app
AMP Stories 를 통해 독자들에게 뉴스나 정보를 풍부한 시각적 요소들과 함께 스토리텔링하는 도구로 사용한다면 좋을 것 같다.
출처
https://tv.naver.com/v/5067180
구글 AMP 소개
NAVER Engineering | 모바일 환경에서 빠르게 동작하는 웹환경을 만들기 위해 AMP를 출시한지 3년이 지나고 있다. AMP의 현주소를 살펴보고 사례와 함께 AMP 기술을 들여다보도록 하자.
tv.naver.com
Understanding the parts of an AMP story
문서 가이드 및 튜토리얼 Create your first Web Story Understanding the parts of an AMP story 웹 스토리는 전체 화면에서 이미지, 동영상, 그래픽, 오디오 등으로 정보를 전달하는 시각적 스토리텔링 도구로, 읽
amp.dev
https://d2.naver.com/news/7976742
'Back-end > 웹(web)' 카테고리의 다른 글
| CSS - 기본 정리 (0) | 2022.03.30 |
|---|---|
| HTML - 태그 (0) | 2022.03.09 |
| express multer 파일 업로드 (0) | 2020.09.23 |
| express get방식 post방식 (0) | 2020.09.23 |
| nodejs 프레임워크 express 로 서버 설치, 설정 (0) | 2020.09.22 |
댓글