AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

일반 HTML 페이지 만들기

프로젝트 디렉토리에서는 article.html이라는 이름의 파일을 찾을 수 있습니다. 이 가이드에서는 해당 파일에 포함된 뉴스 기사로 AMP 페이지를 만들 것입니다.

  1. article.html파일에서 전체 코드를 복사하고 새 파일에 붙여넣습니다.
  2. 새 파일을 article.amp.html저장합니다.

사실 AMP 파일의 이름을 반드시 .amp.html로 저장할 필요는 없으며 모든 확장자를 사용할 수 있습니다. 실제로 URL의 매개변수를 사용하여 AMP 페이지와 표준 버전을 구별하는 게시자도 많습니다. 예: http://publisher.com/article.html?amp

article.amp.html 파일은 다음과 같아야 합니다.

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

이 페이지는 뉴스 기사의 일반적인 정적 요소(CSS, 자바스크립트, 이미지 태그)를 사용하여 의도적으로 단순하게 구성했습니다.

지금 단계의 AMP 버전의 기사는 원래 기사를 그대로 옮겨 온 것에 불과합니다. 이를 AMP로 변환해보겠습니다.

시작하려면 AMP 라이브러리 파일을 추가합니다. 이 작업만으로는 새 파일이 유효한 AMP 페이지가 되지 않지만, 이 문제를 해결하기 위해 필요한 것을 파악하는 데 AMP 라이브러리가 어떻게 도움이 되는지 살펴보겠습니다.

AMP 라이브러리를 포함하려면 다음 줄을 <head> 태그 하단에 추가합니다.

<script async src="https://cdn.ampproject.org/v0.js"></script>

브라우저에서 http://localhost:8000/article.amp.html을 연 다음, 새 article.amp.html 페이지를 로드하고 Chrome이나 선호하는 브라우저에서 Developer Console엽니다.

Developer Console에서 자바스크립트 출력을 검사할 때(Console 탭이 선택되어 있어야 함) 다음 로그 항목이 표시되어야 합니다.

Powered by AMP ⚡ HTML

AMP 라이브러리에 포함된 AMP 유효성 검사기는 페이지를 유효한 AMP 문서로 변환하는 데 방해가 되는 요소가 있는지 알려줍니다. 다음 프래그먼트 식별자를 문서 URL에 추가하여 AMP 유효성 검사기를 사용 설정합니다.

#development=1

예:

http://localhost:8000/article.amp.html#development=1

Developer Console에 여러 유효성 오류가 표시되었을 것입니다(확인하려면 브라우저의 페이지를 직접 새로고침해야 할 수 있음).

샘플의 AMP 유효성 오류

이를 유효한 AMP 문서로 만들기 위해서는 모든 오류를 해결해야 합니다. 이번 codelab에서 처리할 작업입니다.

모바일 뉴스 기사로 작업하고 있었으므로 오류 해결을 시작하기 전에 브라우저의 개발자 도구에서 모바일 기기 환경을 시뮬레이션합니다. 예를 들어 Chrome DevTools에서는 휴대전화 아이콘을 클릭하고 메뉴에서 휴대기기를 선택하면 됩니다.

브라우저에 다음과 같이 모바일로 시뮬레이션된 해상도가 표시됩니다.

AMP 페이지의 모바일 시뮬레이션

이제 작업을 시작할 준비가 되었습니다. 유효성 오류를 하나씩 확인하고 AMP와 어떻게 관련되어 있는지 알아보도록 하겠습니다.