amp-bind란?
지난 4월의 블로그 게시물에서 amp-bind를 다음과 같이 소개한 바 있습니다.
amp-bind는 계속해서 AMP의 기본적인 성능과 UX를 보장하는 동시에 AMP의 상호작용 모델을 근본적으로 바꿔놓습니다. amp-bind는 amp-carousel 및 amp-accordion과 같이 범위가 지정되고 사용 사례를 기반으로 하는 구성 요소로만 상호작용을 제한하는 AMP 프로젝트의 기존 방식을 뛰어넘어 AMP를 기반으로 작성되는 코딩 계층과 더 비슷한 방식으로 동작합니다. amp-bind는 다양한 문서 상태에 대한 트리거와 사용자 액션을 연결해주므로, 개발자로서는 훨씬 더 자유롭게 원하는 유형의 상호작용을 정의할 수 있습니다.
이런 정의는 기술적으로는 정확하지만 상당히 추상적이기도 합니다. 이 기능은 너무나 유연성이 뛰어나므로, 막연한 광의의 설명만으로는 실제로 어떤 일을 해낼 수 있는 기능인지 파악하기 어렵습니다.
그렇다면 amp-bind로 어떤 기능을 구현할 수 있을까요?
먼저 이 기능의 기본적인 동작부터 몇 가지를 살펴보는 게 좋을 것 같습니다. 그 후에 AMP by Example playground에 나와 있는 코드를 변경해 보면서 직접 시험해 보시기 바랍니다
.
기본 사항을 익힌 후 배운 내용을 바탕으로 아래의 예제를 살펴보면 amp-bind를 다른 AMP HTML 기능과 함께 사용할 때 구현 가능한 기능 몇 가지를 확인할 수 있습니다.
- 제품 색과 크기 선택(상세 예제는 아래 참조)
- 서버 측 필터 및 정렬(상세 예제는 아래 참조)
- 페이지 새로고침 없이 검색 결과 표시(상세 예제는 아래 참조)
- 자동 제안 사항 검색(상세 예제는 아래 참조)
- 캐러셀 슬라이드 표시기(상세 예제는 아래 참조)
- '선택' 입력으로부터 탐색 트리거
- 'like', 'thumbs up', 'add to cart' 등을 기반으로 전체 페이지 상태를 업데이트하는 스마트 버튼. 이 스마트 버튼을 통해 이러한 액션과 장바구니에 늘어나는 품목 수 또는 '좋아요(like)' 수를 바탕으로 맞춤설정된 추천 사항으로 구성된 캐러셀을 표시할 수 있습니다.
- 다수의 항목으로 구성된 다양한 뷰(목록 또는 그리드) 간 전환
- 구매 전 제품 옵션을 맞춤설정할 수 있는 UI 패널 오버레이 전환
- 도움말 숨기기/표시
- 맞춤형 슬라이더를 사용하여 amp-list 데이터 필터링
- 전체 페이지 업데이트 없이 통화 변경(예: 미국 달러에서 유로로)
- 기타 등등!
제품 색과 크기 선택
이 예제에서는 제품 상세 페이지에서 흔히 볼 수 있는 여러 기능을 보여줍니다. 이 기능 중 전체 상호작용이 필요하지 않은 경우 분리하여 사용할 수도 있습니다. 여기서 amp-bind는 amp-form, amp-selector, amp-carousel 및 몇 가지 기본적인 CSS 간의 이벤트와 액션을 조정합니다.
- 사용자가 amp-form(손쉬운 사용자설정 및 명확한 시맨틱을 위한 amp-selector를 사용하여 입력 항목 제공)에서 항목을 선택합니다.
- 이러한 선택 항목 각각과 관련된 이벤트가 발생합니다.
- 이 이벤트는 다음과 같은 몇 가지 사항을 수행하도록 amp-bind를 통해 조정됩니다.
- 세 가지 각기 다른 amp-carousel(각 사과 색마다 하나씩) 중 하나에 대한 CSS 표시 트리거
- 특정 색의 사과에 특정 크기를 사용할 수 없는 경우 양식 입력에 대해 '비활성화된' 속성(및 스타일) 트리거
- 사과 색에 따라 가격 업데이트 트리거
페이지에서 amp-bind를 사용하면 사용자는 자신이 선택한 항목을 바로 확인할 수 있게 하고, 구매 관련 정보를 빠르고 정확히 파악한 후 Form을 전송할 수 있습니다.
서버 측 필터 및 정렬
현재 amp-list[src] 바인딩을 통해
서버 측 데이터 정렬 및 필터링이 가능합니다. 여기서는 amp-bind를 사용하여 'select' 입력 및 amp-list 간의 이벤트 및 액션을 조정합니다. 단계별로 살펴보도록 하겠습니다.
- 사용자가 정렬이나 필터링 관련 규칙을 선택합니다(예: '낮은 순에서 높은 순').
- 'select' 상태 변경과 관련된 이벤트가 발생합니다.
- 이 이벤트는 amp-list의 src 속성에 대한 업데이트를 트리거하도록 amp-bind를 통해 조정되어, 이 업데이트에서는 정렬 규칙(?sort=price-ascending)과 일치하는 쿼리 매개변수를 추가하며, 이를 통해 서버에 호출을 보냅니다.
- 서버가 정렬 규칙에 따라 결과 목록을 반환합니다. 이런 결과는 amp-list에서 정의된 템플릿에 따라 렌더링됩니다.
바인딩 이벤트는 여러 입력을 통해 트리거될 수 있으므로 'show more' 버튼을 통한 결과 추가, 목록 결과 페이지 매기기 등의 다른 많은 기능에 이 기본 패턴을 사용할 수 있습니다. 따라서 사용자는 상위 페이지를 새로 고치지 않고도 목록에서 추가 항목을 탐색할 수 있습니다. 개발자 여러분은 사용자가 맞춤설정된 추천 사항 목록을 새로 고칠 수 있는 환경도 구현할 수 있습니다.
모범 사례: 페이지를 처음 로드할 때 div[placeholder]를 사용하여 결과를 정적으로 표시하는 것이 좋습니다. 그러면 지연 없이 결과가 사용자에게 즉시 표시됩니다. 그런 다음 사용자가 정렬 및 필터링 메커니즘과 상호작용할 때 amp-bind를 사용하여 amp-list를 통한 호출을 'src' 속성에 정의된 업데이트된 URL로 실행하여 결과를 표시할 수 있습니다.
페이지 새로고침 없이 검색 결과 표시
전체 페이지를 새로 고치지 않고 인라인으로 검색 결과를 가져와서 표시함으로써, 사용자는 대역폭을 절약하고 현재 페이지 컨텍스트를 유지함에 따라 더욱 완벽한 환경을 이용할 수 있습니다. 이러한 구현 방식은 amp-list에 바인딩하는 방법의 또 다른 응용 사례입니다. 여기서는 amp-form도 사용합니다.
- 사용자가 amp-form을 통해 '배'를 검색합니다.
- 이 검색에서 트리거된 이벤트는 amp-list의 src 속성에 대한 업데이트를 트리거하도록 amp-bind를 통해 조정되어, 이 업데이트에서는 검색 쿼리(?searchProduct=pear)와 일치하는 쿼리 매개변수를 추가하며, 이를 통해 서버에 호출을 보냅니다.
- 서버가 검색 쿼리에 따라 결과 목록을 반환합니다. 이런 결과는 amp-list에서 정의된 템플릿에 따라 렌더링됩니다.
자동 제안 사항 검색
이 예제(참조 코드)에서는 amp-list[src] 바인딩에 약간 더 복잡한 동작을 추가합니다. 여기서는 amp-bind를 사용하여 amp-form 및 amp-list 간의 이벤트 및 액션을 조정합니다.
- 사용자가 검색창에 검색어를 입력하기 시작합니다.
- 양식 필드에 대한 텍스트 입력과 관련된 이벤트가 발생합니다(버튼을 누를 때마다 이러한 이벤트가 트리거되지 않도록 방지하기 위해 디바운스됨).
- 이 이벤트는 다음과 같은 두 가지 사항을 수행하도록 amp-bind를 통해 조정됩니다.
- amp-list를 포함하는 숨겨진 div에 대한 가시성 트리거
- 해당 amp-list의 src 속성에 대한 업데이트 트리거. 이 업데이트에서는 사용자가 양식에 입력한 부분 쿼리를 포함하여 서버에 호출을 보냅니다.
- 서버가 이 쿼리를 기반으로 가능한 결과 목록을 반환합니다. 이러한 목록은 amp-list에서 해당 템플릿을 통해 렌더링합니다. 그러면 이러한 옵션이 사용자에게 자동 제안 사항으로 표시됩니다.
- amp-list 템플릿은 이러한 제안 사항에서 탭하는 항목에 따라 조정되어 양식 필드를 업데이트하는 방식으로 상호작용을 완료합니다.
참고: 개발자 고유의 기능을 빌드하는 경우 이 기능에 대한 두 가지 다른 UI가 동시에 중첩되지 않도록 브라우저의 자동 제안 사항 기능을 꺼야 합니다.
이 기능이 어떻게 작동하는지 더 자세히 알아보려면 GitHub의 예제를 살펴보세요. 예제를 자신의 페이지로 복사하여 붙여넣은 후 템플릿과 백엔드를 사용자설정하기만 하면 원하는 항목을 제공할 수 있습니다. 가장 단순하게는 사용자가 검색할 수 있는 단어에 대해 더욱 세부적인 제안 사항을 제공할 수 있으며, 이와 반대로 가격, 그림 및 평점이 포함된 제품 결과를 나타내는 매우 상세한 카드를 표시할 수도 있습니다.
캐러셀 슬라이드 표시기
여기서 amp-bind는 단순한 페이지 표시기(캐러셀의 왼쪽 아래에 표시되는 4개의 점)에서 CSS 스타일을 사용하여 amp-carousel의 인덱스를 조정하려고 사용한 것일 뿐입니다.
- 사용자가 캐러셀에 표시된 슬라이드를 스와이프합니다.
- 표시된 슬라이드의 변경과 관련된 이벤트가 발생합니다.
- 이 이벤트는 페이지 매기기를 나타내는 점에 대한 CSS 스타일의 변경을 트리거하도록 amp-bind를 통해 조정됩니다.
개발자들은 이 기능을 통해 광범위한 어포던스를 구성하여 캐러셀이 스와이프 가능함을 나타낼 수 있으므로 amp-carousel에서 기본 제공하는 화살표에만 의존할 필요가 없습니다.
다음 단계는?
amp-bind는 현재 안정적으로 작동하지만, 계속해서 더 많은 기능이 활발히 추가되고 있습니다. 우리는 커뮤니티를 통해 받은 피드백을 바탕으로 AMP의 기본적인 성능과 UX가 그대로 보장되는 수준에서 이 구성 요소를 훨씬 더 강력하게 만드는 기능을 계속해서 추가하고 있습니다.
무엇보다도 정렬/필터링 활용 사례를 완성하기 위한 바인딩에서 URL 쿼리 매개변수 및 해당 방문 기록 상태 업데이트, AMP에 인라인으로 추가할 수 있는 항목과 삽입할 수 있는 항목 사이의 경계를 뛰어넘는 풍부한 기능의 상호작용을 지원하기 위한 iframe 및 해당 상위 문서 간 메시징 지원, 그리고 서버 호출을 통해 검증된 양식을 사용하여 페이지 상태를 조정하기 위한 바인딩 업데이트 등이 로드맵에 포함되었습니다.
여러분의 경험을 공유해 주세요!
Google AMP 팀이 확인한 것보다 여러분이 더 많은 새로운 기능을 찾아낼 수 있다고 생각합니다. 주저하지 말고 탐험을 시작해 보세요! amp-bind를 실험해 보고 찾아낸 사실을 알려주시기 바랍니다. 개발자 여러분이 빌드한 결과물을 정말 보고 싶으며 이를 더욱 넓은 AMP 커뮤니티에 공유해 활발한 토론을 이어가시기 바랍니다.
항상 그렇듯이 amp-bind는 물론, AMP에서 지원했으면 하는 다른 기능에 대한 여러분의 의견을 듣고 싶습니다. 개발자 여러분의 얘기를 꼭 듣게 되기를 기다리겠습니다!
