AMP 프로젝트는 전용 사이트인 AMP Start (ampstart.com)를 제공합니다. 이 사이트는 무료로 사용 및 수정이 가능하고 이미 완성된 표준 AMP 템플릿을 지원합니다. 바로 사용할 수 있게 미리 만들어진 템플릿 및 구성 요소를 찾고 있다면 참고할 수 있습니다.
이러한 템플릿 디자인에 히어로 이미지 또는 사이드 바 메뉴와 같은 특정 구성 요소도 함께 다운로드하여 사용자의 테마 디자인에 맞게 꾸밀 수 있습니다.
모바일에 최적화되어 있지만 다른 유형으로도 확장할 수 있습니다. 즉, 데스크톱과 모바일 웹 페이지의 역할을 모두 수행합니다. 모바일 장치뿐만 아니라 데스크톱같은 더 큰 화면에서 잘 보이도록 하는 데 유용합니다. 아래에서 실제로 구현되는 단계를 살펴 볼 수 있습니다.
1 단계: 템플릿 선택
필요한 템플릿을 선택합니다. '다운로드'를 클릭하여 템플릿을 저장한 다음 HTML 파일로 불러옵니다. 파일에는 페이지를 렌더링하는 데 필요한 모든 요소가 포함되어 있습니다 HTML, JavaScript 및 CSS.
2 단계: 콘텐츠 추가
템플릿이 유효한 AMP 페이지이고 스타일이 지정되어 있지만, 내부 콘텐츠는 없습니다. 페이지를 자신만의 디자인으로 만들려면 이미지와 콘텐츠를 추가해야 합니다. 페이지를 추가로 스타일링 해야하는 경우 아래 단계를 참조하십시오.
3 단계: 페이지 구조 변경
필요에 따라 AMP 페이지를 스타일링 할 수 있습니다. 추가하려는 구성 요소를 페이지에 복사 및 붙여 넣기만하면 됩니다. 필요하지 않은 구성 요소가 있는 경우 페이지에서 해당 코드를 제거하기만하면 됩니다.
4 단계: 스타일 사용자 지정
기본 제공 스타일을 적용하려면 basscss 클래스 또는 AMP Start 클래스를 HTML에 적용합니다. 보다 세밀한 스타일링을 위해 이러한 CSS를 수정할 수 있습니다 (완료되면 CSS를 압축하여 크기를 줄여줍니다).
5 단계: 페이지 테스트 및 게시
AMP 유효성 검사기를 사용하여 유효한 AMP 페이지인지 확인합니다. 페이지를 서버 또는 CMS에 업로드한 후 잘 작동하는지 확인합니다. 예를 들어 Google 검색에서 페이지가 어떻게 렌더링되는지 확인하려면 구글 서치 콘솔의 'AMP 테스트 도구'를 사용해보세요. 이 도구는 구글에서 제공하는 도구로서 페이지의 유효성을 검사하고 Google 검색 페이지에 페이지가 어떻게 표시되는지 미리보기를 제공합니다.