์ด๋ฏธ์ง ๋ฐ ๋์์ ์ฝ์
์ผ๋ฐ์ ์ธ HTML ํ์ด์ง์ ๋ง์ฐฌ๊ฐ์ง๋ก, AMP ์๋ ์ด๋ฏธ์ง, ๋์์, "์ค๋์ค ์ฝํ ์ธ ๋ฅผ ์ฝ์ ํ ์ ์์ต๋๋ค."
์ <img>, <video>, <audio> ๋ฅผ ์ฌ์ฉํ ์ ์๋์?
AMP ๋ <img> ์ ๊ฐ์ด ๋ฏธ๋์ด๋ฅผ ํ์ํ๋ ๊ธฐ๋ณธ HTML ์์๋ฅผ ์ง์ํ์ง ์์ต๋๋ค. ๋์ ์ด๋ฌํ ์์์ ํด๋นํ๋ ๊ตฌ์ฑ์์๋ฅผ ์ ๊ณตํ๋๋ฐ, ๊ทธ ์ด์ ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ์ ์ ์ด ๋ก๋๋๊ธฐ ์ ์ ํ์ด์ง์ ๋ ์ด์์์ ํ์ ํด์ผ ํ๋ฉฐ, ์ด๋ ์ฒซ ํ์ ์์ญ์ ๋ฏธ๋ฆฌ ๋ก๋ํ๋ ๋ฐ ํ์์ ์ ๋๋ค.
- ๋คํธ์ํฌ์ ๋ ์ด์ง ๋ก๋ ์์ฒญ์ ์ ์ดํ๊ณ ๋ฆฌ์์ค์ ์ฐ์ ์์๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ง์ ํด์ผ ํฉ๋๋ค.
<img>, <video>, <audio> ๋ ๋ ๋๋ง์ด ๋ฉ๋๋ค. ํ์ง๋ง AMP ์์ ํ์ด์ง๋ฅผ ํ์ธํ์ง ๋ชปํ์ฌ AMP ์ ๋ค์ํ ์ด์ ์ ๋๋ฆด ์ ์๊ฒ ๋ฉ๋๋ค. ์ด๋ฏธ์ง
๋ค์๊ณผ ๊ฐ์ด amp-img ์์๋ฅผ ์ฌ์ฉํ์ฌ ํ์ด์ง์ ์ด๋ฏธ์ง๋ฅผ ์ฝ์
ํฉ๋๋ค.
<amp-img
alt="A beautiful sunset"
src="/static/inline-examples/images/sunset.jpg"
width="264"
height="195"
>
</amp-img>
์ด๋ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ์๋ก, ์ด๋ฏธ์ง๋ ์ง์ ๋ ๋์ด์ ๋๋น๋ก ๊ณ ์ ๋์ด ํ์๋ฉ๋๋ค. ์ต์ํ ๋๋น์ ๋์ด๊ฐ ๋ช ์์ ์ผ๋ก ์ค์ ๋์ด ์์ด์ผ ํฉ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ฌ์ฉ ์ค์ง๋์์ ๋ ์ด๋ฏธ์ง ํ์
As <amp-img> ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ฏ๋ก, ์ฌ์ฉ์๊ฐ ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉ ์ค์งํ ๊ฒฝ์ฐ ์ด๋ฏธ์ง๊ฐ ํ์๋์ง ์์ต๋๋ค. ์ด ๊ฒฝ์ฐ, ๋ค์๊ณผ ๊ฐ์ด <img>, <noscript> ๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง ๋์ ํ์ํ ๋ด์ฉ์ ์ง์ ํด์ผ ํฉ๋๋ค.
<amp-img
src="/static/inline-examples/images/sunset.jpg"
width="264"
height="195"
>
<noscript>
<img
src="/static/inline-examples/images/sunset.jpg"
width="264"
height="195"
/>
</noscript>
</amp-img>
๊ณ ๊ธ ๋ ์ด์์
AMP ์์๋ ํ์ค CSS/HTML ์์๋ณด๋ค ํจ์ฌ ์ฝ๊ฒ ์์ ๋ฐ์ํ ์ด๋ฏธ์ง๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. ์๋๋ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ํ์์ผ๋ก, layout="responsive" ๋ฅผ ์ถ๊ฐํ๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค.
<amp-img
alt="A view of the sea"
src="/static/inline-examples/images/sea.jpg"
width="900"
height="675"
layout="responsive"
>
</amp-img>
๋์ ๋ฐ ํ๋ ์ด์คํ๋
AMP HTML ๋ฐํ์์ ์ด๋ฏธ์ง ๋ฆฌ์์ค๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ์ฌ ํ์ ์์ญ ์์น, ์์คํ ๋ฆฌ์์ค, ์ฐ๊ฒฐ ๋์ญํญ ๋ฑ๊ณผ ๊ฐ์ ์์ธ์ ๋ฐํ์ผ๋ก ๋ฆฌ์์ค ๋ก๋๋ฅผ ์ง์ฐ์ํฌ์ง ์ฐ์ ํ ์ง ์ ํํ ์ ์์ต๋๋ค.
์ ๋๋ฉ์ด์ ์ด๋ฏธ์ง
The amp-anim ์์๋ amp-img ์์์ ์์ฃผ ์ ์ฌํ๋ฉฐ, GIF ์ ๊ฐ์ ์ ๋๋ฉ์ด์
์ด๋ฏธ์ง์ ๋ก๋ ๋ฐ ์ฌ์์ ๊ด๋ฆฌํ๋ ์ถ๊ฐ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
<amp-anim
width="400"
height="300"
src="/static/inline-examples/images/wavepool.gif"
>
<amp-img
placeholder
width="400"
height="300"
src="/static/inline-examples/images/wavepool.png"
>
</amp-img>
</amp-anim>
<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> ๋ฅผ ํ์ด์ง ํค๋์ ์ฝ์
ํ์ธ์. ๋์์
ํ์ด์ง์ ๋์์์ ์ฝ์
ํ๋ ค๋ฉด amp-video ์์๋ฅผ ์ฌ์ฉํฉ๋๋ค.
์ง์ HTML5 ๋์์ ํ์ผ ์ฝ์
์๋ง ์ด ์์๋ฅผ ์ฌ์ฉํ์ธ์. ์ด ์์๋ src ์์ฑ์ผ๋ก ์ง์ ํ ๋น๋์ค ๋ฆฌ์์ค๋ฅผ AMP ๊ฐ ๊ฒฐ์ ํ ์๊ฐ์ ๋ ์ด์ง ๋ก๋ํฉ๋๋ค.
๋์์์ด ์์ํ๊ธฐ ์ ์ ํ๋ ์ด์คํ๋๋ฅผ ์ฝ์ ํ๊ณ , ๋ธ๋ผ์ฐ์ ์์ HTML5 ๋์์์ ์ง์ํ์ง ์๋ ๊ฒฝ์ฐ ๋์ฒดํ ๋ด์ฉ์ ์ฝ์ ํฉ๋๋ค. ์๋ฅผ ๋ค๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
This browser does not support the video element.
<amp-video controls
width="640"
height="360"
src="/static/inline-examples/videos/kitten-playing.mp4"
poster="/static/inline-examples/images/kitten-playing.png">
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
์ค๋์ค
ํ์ด์ง์ ์ค๋์ค ๋ฆฌ์์ค๋ฅผ ์ฝ์
ํ๋ ค๋ฉด amp-audio ์์๋ฅผ ์ฌ์ฉํฉ๋๋ค.
์ง์ HTML5 ์ค๋์ค ํ์ผ ์ฝ์
์๋ง ์ด ์์๋ฅผ ์ฌ์ฉํ์ธ์. AMP ํ์ด์ง์ ์ฝ์
๋๋ ๋ชจ๋ ์ธ๋ถ ๋ฆฌ์์ค์ ๊ฐ์ด, ์ด ์์๋ src ์์ฑ์ผ๋ก ์ง์ ํ ์ค๋์ค ๋ฆฌ์์ค๋ฅผ AMP๊ฐ ๊ฒฐ์ ํ ์๊ฐ์ ๋ ์ด์ง ๋ก๋ํฉ๋๋ค.
๋ธ๋ผ์ฐ์ ๊ฐ HTML5 ์ค๋์ค๋ฅผ ์ง์ํ์ง ์๋ ๊ฒฝ์ฐ ๋์ฒด๋ฅผ ํฌํจํฉ๋๋ค. ์๋ฅผ ๋ค๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
Your browser doesnโt support HTML5 audio.
<amp-audio width="400"
height="200"
src="/static/inline-examples/audio/cat-meow.mp3">
<div fallback>
<p>Your browser doesnโt support HTML5 audio.</p>
</div>
<source type="audio/mpeg"
src="/static/inline-examples/audio/cat-meow.mp3">
<source type="audio/ogg"
src="/static/inline-examples/audio/cat-meow.ogg">
</amp-audio>
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> ๋ฅผ ํ์ด์ง ํค๋์ ์ฝ์
ํ์ธ์.