기존 HTML를 AMP로 바꾸는 방법

HTML에 대한 기본적인 지식이 있다고 가정하고 간단한 HTML5 페이지를 AMP-HTML로 변환해보겠습니다. 표준 AMP 페이지, 즉 데스크톱 페이지가 없는 독립형 AMP 페이지를 구축하지 않는 한, 일반적으로 전체 HTML 페이지를 AMP-HTML로 변환합니다.

다음은 일반적인 뉴스 기사 페이지의 스크린 샷입니다. 여기엔 AMP-HTML로 변환할 몇 가지 주요 항목이 포함되어 있습니다. 헤더 영역, 로고, 내비게이션 메뉴, 기사 제목, 이미지, 기사 콘텐츠 및 푸터 영역입니다. 앞으로 단계별로 나아가면서 AMP 페이지로 고쳐 나갈 것입니다.

아래에 있는 HTML은 어려운 것은 없지만 이 마크 업을 이해하지 못한다면 HTML에서 AMP-HTML로 변환을 진행하기 전에 먼저 HTML과 CSS 기초를 다지는 것이 좋습니다.

<!doctype html>
<html lang="ko">
  <head>
    <title>AMP News Daily</title>
    <link href="style.css" rel="stylesheet"/>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <header>
      <div class="logo">liveblogger</div>
      <nav>
        <ul class="primary-nav">
          <li>news</li>
          <li>sports</li>
          <li>arts</li>
        </ul>
      </nav>
    </header>
    <article>
      <h1>Breaking: AMP is fast</h1>
      <img class="feature-img" src="img/lightning.jpg"/>
      <p> 구글이 모바일 페이지의 속도를 개선하는 액셀러레이티드 모바일 페이지(AMP) 프로젝트를 국내에 본격적으로 도입한다.</p>
      <p>AMP는 페이지 구성 단순화, 해상도 이미지 최적화, 텍스트 우선 로딩 등의 작동 원리로 표준 웹사이트보다 가벼운 버전의 페이지를 구축해 로딩 및 검색 속도를 높인 것이 강점이다.</p>
    </article>
    <footer>
      privacy policy
    </footer>
  </body>
</html>

이 HTML을 AMP-HTML로 변환할 예정입니다.

HELLO WORLD!

가장 기본적인 AMP 페이지를 살펴봅시다. 다음은 모든 AMP 페이지 사용되는 AMP 상용구(boilerplate)입니다. 아래의 코드에서 찾아볼 수 있습니다.

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>새로운 시작</title>
  <link rel="canonical" href="original-html-page.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-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><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom> </style>
</head>
<body>Hello World!</body>
</html>

상용구 코드를 복사할 때 주의해야 합니다. <style amp-boilerplate>...</noscript> 마크업 코드가 모두 한 줄에 있어야 합니다. amp.dev 공식 홈페이지에서 소스 코드를 복사하는 것이 좋습니다.

위의 코드 파일을 웹 서버에 저장하고 브라우저에서 열면 Hello World!가 표시됩니다.

위의 예시에서 본 대부분의 코드가 AMP 페이지의 필수 구성 요소입니다. 이제 코드를 천천히 살펴보면서 AMP 페이지에 필요한 최소한의 요구 사항에 대해 알아보겠습니다.

AMP 페이지는 <!doctype html>으로 시작하고 그 뒤에 <html amp> 또는 <html ⚡>가 와야 합니다.

AMP 페이지는 <head> 태그와 <body> 태그를 포함해야 합니다.

<head> 태그 바로 뒤에 다음 코드가 와야 합니다.
```
<meta charset="utf-8">
```

다음으로 AMP JS 라이브러리를 포함해야 합니다. 이 AMP 라이브러리에는 AMP 페이지를 만들 때 필요한 개발 도구가 포함되어 있으므로 반드시 포함해야 합니다.
```
<script async src="https://cdn.ampproject.org/v0.js"></script>
```
크롬 브라우저에서 개발자 도구 콘솔을 열면 AMP 관련 출력 메시지가 표시됩니다.
```
Powered by AMP ⚡ HTML
```

연관된 데스크톱 HTML 버전을 가리키는 표준 태그를 포함해야 합니다. 연결된 페이지가 없는 경우 자신을 가리킵니다.
```
<link rel="canonical" href="original-html-page.html">
```

뷰포트 메타 태그를 포함해야 합니다.

<meta name="viewport" content="width=device-width,minimum-scale=1">

AMP 페이지는 <head> 태그 내에 다음과 같은 스타일의 상용구(boilerplate) 코드를 삽입해야 합니다.

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-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><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Tip: AMP의 번개 모양 기호는 키보드에서 찾을 수 없으므로 복사 붙여넣기하여 쉽게 사용할 수 있습니다. 유니코드 문자(high voltage sign 또는 U+26A1)입니다.

구글 블로그 AMP

이 블로그 검색

기존 HTML를 AMP로 바꾸는 방법

HELLO WORLD!

관심 있을 만한 글

댓글 쓰기

Live Blogger