Google for Developers Korea Blog: AMP의 새로운 기능: 2018년 2분기 에디션

AMP의 새로운 기능: 2018년 2분기 에디션

2018년 7월 25일 수요일

.post-body span { white-space: normal !important; } <블로그 원문은 이곳에서 확인하실 수 있으며 번역 리뷰에는 도창욱(WebTech GDE)님이 참여해 주셨습니다.>
게시자: Vamsee Jasti, AMP 프로젝트 제품 관리자
AMP 스토리를 위한 수익 창출 지원
이제 AMP 스토리는 게시자가 딜리버리 영업과 딜리버리를 제어할 수 있는 광고를 제공하는 기능인 ‘Publisher placed ads’를 지원합니다. 6월 말에 DFP(DoubleClick for Publishers)에서 Ad Server 지원을 제공할 계획입니다. AMP 스토리에 수익 창출 지원을 추가하는 데 관심 있는 다른 광고 네트워크가 있다면 서둘러 Google에 연락해 주세요.

여기에서 AMP 스토리와 관계 있는 수익 창출 관련 세부 사항을 확인하거나 AMPbyExample.com에서 제공하는 예시를 살펴보세요.
AMP의 새로운 사용자 컨트롤 도구
게시자의 사용자 설정이 가능한 알림, 선택, 승인 흐름을 위한 사용자 컨트롤을 구현을 돕는<amp-consent> 구성 요소를 새롭게 출시했습니다. 모든 사용법과 출시 관련 통합 상세 정보를 소개한 블로그 게시물이 있으니 참고하세요.
이와 관련하여, <amp-geo>라는 새로운 구성 요소를 사용하면 ISO 국가 코드와 유사하게 국가 레벨의 사용자 위치에 대한 근사값을 기반으로 사용자를 위해 웹 콘텐츠의 작은 부분을 쉽사리 바꿀 수 있습니다. 이 구성 요소를 <amp-consent>와 함께 사용하여 사용자의 근사적 위치를 기반으로 <amp-consent>의 동작을 변경할 수 있습니다. 두 구성 요소의 통합 방법을 보여주는 예시를 확인해 보세요.
AMP 날짜 선택기(실험실 기능)
<amp-date-picker> 구성 요소는 양식 입력을 위한 캘린더 스타일의 대화식 날짜 선택기로, 사이트에서 문서 레벨 실험실 기능으로 사용할 수 있도록 공식 제공됩니다. 즉, 개발자가 <meta name=”amp-experiments-opt-in” content=”amp-date-picker”> 임시 태그를 같이 포함하는 한 이 구성 요소를 사용할 수 있다는 뜻입니다. AMP by Example에 나와 있는 샘플을 통해 어떤 기능을 수행하는지 알아보고 자신의 사이트에 적합한지 판단하시기 바랍니다.
참조: 출시 과정에 이러한 중간 단계(문서 레벨 옵트인)를 두는 이유는 개발자와 사용자의 피드백을 수집하고 우리가 구성 요소의 전면 프로덕션 단계로 진행하기에 충분할 정도로 안정적이라고 판단하기 전에 혹시 있을지 모를 문제를 파악하기 위한 것입니다. 그래서 아직은 다소 미흡한 부분이 있을 수 있으니, 피드백 사항이 있으면 알려주세요. 그리고 이번 분기 후반 정도에 나올 전체 릴리즈를 기대해주세요.

이미지 라이트박스 갤러리 소개
AMP 출시 이후로, 개발자들은 사용자가 캐러셀에서 콘텐츠를 볼 수 있도록 몰입형 환경을 제공하기 위해 <amp-carousel>을 <amp-image-lightbox> 간의 손쉬운 연결 방법을 계속 요구해오고 있습니다. 아래에서 보는 것과 같은 결과를 내기 위해 여러 개의 구성 요소를 결합할 수는 있었지만(예: <amp-bind>) 쉽지는 않았습니다.
<amp-lightbox-gallery> 구성 요소는 단독으로 구현하거나 amp-carousel과 통합될 수 있는 몰입형 미디어 환경을 제공합니다. 사용자가 단독 이미지나 이미지 그룹을 탭할 때 한 이미지에서 다음 이미지로 완벽하게 스와이프할 수 있는 몰입형 뷰로 들어가도록 이러한 이미지에 이 구성 요소를 적용할 수 있습니다. <amp-lightbox-gallery>가 <amp-carousel>에 적용될 때 캐러셀에 있는 모든 이미지는 라이트박스 갤러리 동작을 상속하므로 몰입형 뷰에서 항목 간의 스와이프는 라이트박스에서 이루어지는 스와이프와 동기화되어 부드럽고 직관적인 갤러리 환경을 만들어냅니다.

amp-fx-collection을 위한 새로운 효과
우리는 개발자들이 더욱 몰입감 높은 사이트를 만들기 위해 손쉽게 사용할 수 있는 비주얼 효과 세트인 <amp-fx-collection>을 빌드하는 작업에 최근 착수했습니다. 우리는 지금까지 두 가지 효과를 선보였습니다. 문서에서 이루어지는 스크롤 동작의 속도를 기준으로 페이지 요소가 각기 다른 속도로 움직이도록 쉽게 구성할 수 있게 해주는 패럴렉스(parallax) 효과와 사용자가 콘텐츠를 뷰로 스크롤할 때 점차적으로 나타나는 효과를 간단히 적용하는 페이드인 효과가 바로 그것입니다. 앞으로 몇 주 정도에 걸쳐 현재 시험용으로 사용 가능한 날아오기(fly-in)도 출시할 계획입니다. AMP by Example에서 새로운 특징을 확인해보시고 어떻게 생각하시는지 알려주세요.

파일 업로드 기능
파일 업로드는 많은 사이트에서 중요한 기능입니다. 예를 들어 구매 흐름에 맞춤 디자인 업로드 기능이 통합되어 있는 전자상거래 사이트들도 있습니다. 이 기능을 지원하기 위해 우리는 <input type=”file”>을 통해 양식 내에서 파일 업로드 지원 기능을 활성화했습니다. 본질적으로는 개발자가 AMP 페이지가 아닌 일반 페이지에서 구현하는 것과 같은 방식인데, 다만 양식에서 보안 XHR 제출 기능을 사용해야 한다는 추가적인 요구 사항이 있습니다. AMP에서는 이 기본적인 지원 기능을 제공하므로, 우리는 개발자가 파일 업로드 상태(업로드한 바이트 수, 비율, 진행률 표시줄 등)를 사용자에게 더 나은 방식으로 전달할 수 있도록 더욱 발전된 API를 빌드하는 작업을 진행 중입니다.
또 다른 주목할 만한 기능들

Google AMP 캐시에서 AMP 문서를 로드할 때 google.com/amp URL을 없애는 데 도움이 되기 위한 웹 패키징의 진행 상황에 관해 자세히 알아보세요.

Google I/O 2018에서 다양한 강연과 특집 행사가 진행되었습니다. 여기를 클릭하면 I/O에서 AMP 팀이 진행한 강연과 행사를 요약한 내용을 읽어볼 수 있습니다.

곧 발표될 주요 기능

현재 amp-consent와 관련된 다양한 잠재적 기능들에 대한 논의가 활발히 이루어지고 있습니다.

앞서 언급한 날짜 선택기 정식 출시

표시 영역의 모서리로 동영상을 최소화하고 회전 시 전체 화면을 띄워주는 기능을 포함한 다양한 동영상 기능

두 가지 유형의 '무한 스크롤' 사용 환경: 전체 문서를 위한 환경과 목록에 포함된 페이지 요소를 위한 환경

* * *

AMP 개발 커뮤니티 회원들께 그 동안의 노고와 의견을 주신 점에 대해 감사드립니다. 항상 그렇듯이 문제가 있거나 기능을 요청하시려면 저희에게 알려주시기 바랍니다.