AMP

์ด๋ฏธ์ง€ ๋ฐ ๋™์˜์ƒ ์‚ฝ์ž…

์ผ๋ฐ˜์ ์ธ 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>
์ด ์ฝ”๋“œ ์กฐ๊ฐ์„ Playground์—์„œ ์—ด๊ธฐ

์ด๋Š” ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ์˜ˆ๋กœ, ์ด๋ฏธ์ง€๋Š” ์ง€์ •๋œ ๋†’์ด์™€ ๋„ˆ๋น„๋กœ ๊ณ ์ •๋˜์–ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ์ตœ์†Œํ•œ ๋„ˆ๋น„์™€ ๋†’์ด๊ฐ€ ๋ช…์‹œ์ ์œผ๋กœ ์„ค์ •๋˜์–ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์‚ฌ์šฉ ์ค‘์ง€๋˜์—ˆ์„ ๋•Œ ์ด๋ฏธ์ง€ ํ‘œ์‹œ

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>
์ด ์ฝ”๋“œ ์กฐ๊ฐ์„ Playground์—์„œ ์—ด๊ธฐ

๊ณ ๊ธ‰ ๋ ˆ์ด์•„์›ƒ

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>
์ด ์ฝ”๋“œ ์กฐ๊ฐ์„ Playground์—์„œ ์—ด๊ธฐ

Learn more about ๊ณ ๊ธ‰ ๋ ˆ์ด์•„์›ƒ ๊ธฐ์ˆ  ์— ๊ด€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด์„ธ์š”.

๋™์ž‘ ๋ฐ ํ”Œ๋ ˆ์ด์Šคํ™€๋”

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>
์ด ์ฝ”๋“œ ์กฐ๊ฐ์„ Playground์—์„œ ์—ด๊ธฐ

์ด ๊ตฌ์„ฑ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด <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>
์ด ์ฝ”๋“œ ์กฐ๊ฐ์„ Playground์—์„œ ์—ด๊ธฐ

์˜ค๋””์˜ค

ํŽ˜์ด์ง€์— ์˜ค๋””์˜ค ๋ฆฌ์†Œ์Šค๋ฅผ ์‚ฝ์ž…ํ•˜๋ ค๋ฉด 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>
์ด ์ฝ”๋“œ ์กฐ๊ฐ์„ Playground์—์„œ ์—ด๊ธฐ

์ด ๊ตฌ์„ฑ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> ๋ฅผ ํŽ˜์ด์ง€ ํ—ค๋“œ์— ์‚ฝ์ž…ํ•˜์„ธ์š”.