AMP 웹 페이지 및 AMP로 작성된 웹 스토리의 차이점은 amp-story 컴포넌트입니다. 이 컴포넌트는 문서 <body>의 유일한 하위 요소이며 standalone 속성을 포함해야 합니다. 모든 웹 스토리 페이지, 레이어 및 요소는 <amp-story> 태그에 정의됩니다.
<!doctype html><html⚡><head><metacharset="utf-8"><title>Joy of Pets</title><linkrel="canonical"href="pets.html"><metaname="viewport"content="width=device-width"><styleamp-boilerplate>body{-webkit-animation:-amp-start8ssteps(1,end)0s1normalboth;-moz-animation:-amp-start8ssteps(1,end)0s1normalboth;-ms-animation:-amp-start8ssteps(1,end)0s1normalboth;animation:-amp-start8ssteps(1,end)0s1normalboth}@-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><styleamp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><scriptasyncsrc="https://cdn.ampproject.org/v0.js"></script><scriptasynccustom-element="amp-video"src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script><scriptasynccustom-element="amp-story"src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script><styleamp-custom>...</style></head><body><!-- Cover page --><amp-storystandalonetitle="Joy of Pets"publisher="AMP tutorials"publisher-logo-src="assets/AMP-Brand-White-Icon.svg"poster-portrait-src="assets/cover.jpg"><amp-story-pageid="cover"><amp-story-grid-layertemplate="fill"><amp-imgsrc="assets/cover.jpg"width="720"height="1280"layout="responsive"></amp-img></amp-story-grid-layer><amp-story-grid-layertemplate="vertical"><h1>The Joy of Pets</h1><p>By AMP Tutorials</p></amp-story-grid-layer></amp-story-page><!-- Page 1 --><amp-story-pageid="page1"><amp-story-grid-layertemplate="vertical"><h1>Cats</h1><amp-imgsrc="assets/cat.jpg"width="720"height="1280"layout="responsive"></amp-img><q>Dogs come when they're called. Cats take a message and get back to you. --Mary Bly</q></amp-story-grid-layer></amp-story-page>
...
</amp-story></body></html>
사용자는 네트워크 연결이 부족한 지역이나 오래된 기기에서 웹 스토리를 볼 수도 있습니다. 다음의 모범 사례를 준수하여 쾌적한 사용자 경험을 제공하세요.
배경 색상
각 웹 스토리 페이지의 배경 색상을 지정합니다. 배경 색상이 있으면 사용자 여건으로 이미지 또는 동영상 애셋을 다운로드할 수 없는 경우 적절한 폴백 옵션이 제공됩니다. 페이지에 지정된 배경 애셋의 주요 색상을 대표하는 색이나 모든 스토리 페이지의 컬러 테마와 일관된 색상을 선택하세요. 가독성을 위해 배경 색상과 텍스트 색상은 다르게 구성하는 것이 좋습니다.
웹 스토리 문서 헤드의 <style amp-custom> 태그 또는 <amp-story-page> 컴포넌트 인라인으로 페이지 배경 색상을 정의합니다.
겹치는 요소
시스템 헤더는 음소거 및 공유 아이콘과 같은 제어 기능이 포함되며 배경 이미지 및 동영상보다 높은 z-index에 표시됩니다. 해당 아이콘으로 인해 가려진 필수 정보가 없는지 확인합니다.
가로세로비
웹 스토리 애셋의 가로세로비는 9:16으로 디자인합니다. 브라우저와 기기에 따라 페이지 높이와 너비가 달라지므로 필수 콘텐츠를 페이지 가장자리에 가깝게 배치하지 않습니다.
포스터 이미지
포스터 이미지는 동영상 다운로드 중 사용자에게 표시됩니다. 원활한 전환을 위해 포스터 이미지는 동영상을 대표할 수 있어야 합니다. amp-video 요소에 poster 속성을 추가하고 이미지 위치를 더해 포스트 이미지를 지정하세요.
<amp-videocontrolswidth="640"height="360"layout="responsive"poster="/static/inline-examples/images/kitten-playing.png"><sourcesrc="/static/inline-examples/videos/kitten-playing.webm"type="video/webm"/><sourcesrc="/static/inline-examples/videos/kitten-playing.mp4"type="video/mp4"/><divfallback><p>This browser does not support the video element.</p></div></amp-video>
해상도 및 품질
다음의 권장 최적화 옵션에 따라 동영상을 인코딩하여 품질을 조정할 수 있습니다.
MP4
-crf 23
WEBM
-b:v 1M
HLS 세그먼트의 경우 지속 시간을 10초 이하로 유지하는 것이 좋습니다.
형식 및 크기
최적의 성능을 위해 동영상 크기는 4MB 미만으로 유지합니다. 크기가 큰 동영상은 여러 페이지로 분할하여 제공할 수도 있습니다.
하나의 동영상 형식만 제공할 수 있는 경우 MP4 형식을 제공합니다. 가능하다면 HLS 동영상을 사용하고 브라우저 호환성 폴백 옵션으로 MP4 형식을 지정합니다. 다음 동영상 코덱을 사용하세요.
MP4, HLS 및 DASH
H.264
WEBM
VP9
vs src 지정
<amp-video> 컴포넌트에서 <source> 하위 요소를 사용하여 src 속성에 동영상 소스를 지정합니다. <source> 요소를 사용하면 동영상 유형을 지정하고 백업 동영상 소스를 추가할 수 있습니다. MIME 유형을 지정하려면 type 속성을 사용해야 합니다. HLS 동영상의 경우 application/x-mpegurl 또는 application/vnd.apple.mpegurl을 사용합니다. 모든 기타 동영상 유형에는 video/ MIME 접두어를 사용하고 ”video/mp4” 등의 동영상 형식을 따릅니다.
amp-story-page로 공개되는 auto-advance-after 속성은 사용자가 탭하지 않아도 스토리 페이지를 진행할지 여부와 그 시점을 지정합니다. 동영상 다음에 스토리를 진행하려면 동영상 ID에 해당 속성을 추가하세요.
<amp-story-pageauto-advance-after="myvideo">
데스크톱 경험
웹 스토리 형식은 선택적 데스크톱 경험을 지원합니다. 따라서 데스크톱 경험이 몰입형 전체 블리드 모드로 변경되며 세로형 패널 3개가 제공되는 기본 경험을 대체합니다. 모바일 사용자는 기기를 가로로 들어도 스토리를 볼 수 있습니다.
<amp-story> 컴포넌트에 supports-landscape 속성을 추가하여 데스크톱 지원 옵션을 선택할 수 있습니다.
<amp-storystandalonesupports-landscapetitle="Joy of Pets"publisher="AMP tutorials"publisher-logo-src="assets/icon.svg"poster-portrait-src="assets/cover.jpg"></amp-story>
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.