실제 제품 사진과 라이프스타일 사진이 한 번에 한 타일씩 부드럽게 튀어 들어오고, 완성된 그리드가 브랜드 로고타입 아래에 자리 잡으며 마무리됩니다.
Hermoso의 네이티브 HTML 광고 템플릿 13종 중 하나입니다. 모델이 생성하는 대신 브라우저가 실제 마크업으로 렌더링하는 포맷입니다. 이 템플릿은 영상을 출력하며, 채울 수 있는 문구 슬롯 4개가 있고, 실행 전에 브랜드의 제품 사진 4장이 필요합니다.
언제 쓰나요
컬렉션, 라인업, 비포 앤 애프터 세트, 그리고 좋은 사진 자료는 있지만 쓸 곳이 없는 모든 브랜드에 맞습니다. 이미지 폴더를 디자인된 영상으로 바꿔 줍니다.
반드시 지켜야 할 것
사진 네 장이 필요합니다. 이 포맷은 그리드를 조립하는 것이므로, 타일이 한 장을 잘라 낸 것이 아니라 실제로 서로 다른 사진이어야 합니다.
형식 한눈에 보기
- 출력: 영상.
- 문구 슬롯: 4개. 각 슬롯의 글자 수 한도는 추측이 아니라 레이아웃에서 계산됩니다.
- 필요한 에셋: 제품 사진 4장.
- 템플릿 ID: photo-grid.
이 템플릿의 렌더링 방식
여기서는 이미지 모델이나 영상 모델로 아무것도 생성하지 않습니다. 이 포맷은 자체 완결된 HTML 페이지이고, 그 애니메이션은 시간의 순수 함수입니다. CSS 키프레임, 타이머, 무작위성이 없습니다. 렌더러가 헤드리스 Chrome에서 그 페이지를 프레임 단위로 넘기며 각 프레임을 캡처하고, ffmpeg로 조립해 H.264 파일을 만듭니다. 파일은 브랜드 엔드 카드로 크로스페이드되며 끝납니다.
여기서 두 가지가 따라옵니다. 렌더는 결정적입니다. 같은 입력은 같은 파일을 만들므로, 어제 괜찮아 보였던 포맷은 오늘도 괜찮아 보입니다. 또 화면의 모든 단어는 브라우저가 렌더링한 실제 텍스트이므로, 문구가 정확하고 어떤 해상도에서도 선명합니다. 전체 비용은 영상 생성이 아니라 크레딧 몇 개입니다. 그래서 이 포맷들을 대량으로 돌리기에 현실적입니다.
같은 사진을 잘라서 쓸 수 있나요?
아니요. 이 포맷은 그리드를 조립하는 것이므로 서로 다른 사진 네 장이 필요합니다. 한 이미지를 잘라 만든 조각들은 드러낼 것이 없는 그리드로 조립되는데, 그것이야말로 이 애니메이션이 하는 단 하나의 일입니다.
다른 네이티브 템플릿
13개 템플릿은 모두 네이티브 광고 템플릿 색인에 있고, 더 넓은 카탈로그는 창작 레시피 색인에 있습니다.