상세페이지 만들기 : ai 영상제작해서 처음부터 끝까지 완성하기

상세페이지 만들기 할 때 사진과 텍스트로 대부분 작업을 하게 되는데요. 영상이 들어가면 좋겠다는 생각은 드는데, 편집 프로그램을 열고 컷을 붙이는 시간이 들어서 이미지로 마무리하는 경우가 많죠. 그런데 이 일을 AI가 대신 해준다면 하고 싶었던 것을 더 쉽게, 더 많이 해볼 수 있게 됩니다.

▶ 애프터 이펙트 플랜 살펴보기

※ 이 글에는 제휴 링크가 포함되어 있으며, 제휴활동을 통해 소정의 수수료를 지급받을 수 있습니다. 구매자에게 추가 비용은 발생하지 않습니다.

상세페이지 구성과 그 안에 들어갈 제품 영상을 둘 다 AI에게 맡겨봤습니다. 어떻게 구성할지 정하고, 영상 자리를 잡고, 그 자리에 넣을 영상까지 만드는 흐름입니다. 영상 쪽은 캡컷이나 프리미어 프로가 아니라 애프터 이펙트를 씁니다.

결과로 남는 것이 이미지 한 장이 아니라 다시 열어 고칠 수 있는 포토샵 파일과 애프터 이펙트 프로젝트 파일이라는 점이, 생성형 도구로 뽑는 것과 갈라지는 부분입니다.

온담은 실험용으로 만든 가상 브랜드입니다. 실제로 판매하는 상품이 아니고, 아래 상세페이지도 어딘가에 게시한 페이지가 아니라 구조를 검증하려고 만든 예시입니다.

상세페이지 만들기 : 뼈대부터 정의

상세페이지 만들기는 이미지로 길게 만드는 경우가 대부분이지만, 실은 위에서 아래로 읽히는 긴 문서입니다. 무엇을 어떤 순서로 놓느냐가 디자인보다 먼저 정할 부분인데요. 요즘은 아래와 같은 틀을 기본으로 많이 씁니다. 영상은 세 번째 자리에 배치했습니다.

자리	역할	들어가는 것
1~2	붙잡기	첫 화면, 공감 문장
3	보여주기	영상
4~7	설득하기	구성, 색·흠집·당도 기준
8~10	그려주기	포장, 먹는 방법
11~12	확인시키기	구성 정보 표, 배송·보관 안내
13~14	닫기	마무리 문장, 고지

위쪽은 사고 싶게 만드는 자리, 아래쪽은 사기 전에 확인하는 자리입니다. 당도 12브릭스 같은 숫자를 맨 위로 올리면 아직 관심이 붙지 않은 사람에게 스펙부터 들이미는 순서가 됩니다.

역할을 같이 적어두면 자리가 늘거나 줄어도 어디에 끼울지 판단이 섭니다. 목록이 정해지면 필요한 이미지와 문구가 따라 나오고, 그게 그대로 지시문이 됩니다. 색과 여백은 문장으로 지정하기보다 마음에 드는 페이지를 한 장 주는 편이 결과가 빨리 수렴합니다.

어도비 앱을 깔아두고 AI가 골라 쓰게 하기

상세페이지 만들기와 여기에 들어갈 영상 제작할 때 포토샵이나 애프터 이펙트 같은 어도비 앱이 설치돼 있어야 돌아갑니다. 크리에이티브 클라우드를 쓰면 공간이 되는 만큼 앱을 깔아두고, 작업에 따라 AI가 알맞은 앱을 골라 쓰게 하면 됩니다.

애프터 이펙트를 쓰는 이유는 어도비가 애프터 이펙트와 포토샵을 스크립트로 제어할 수 있게 열어뒀고, 클로드코드 같은 AI가 그 스크립트를 만들어 실행시킵니다. 별도로 설치하는 플러그인은 없습니다. 배경 제거는 어도비 커넥터가 처리해서 포토샵을 따로 켜지 않아도 되는데, 크리에이티브 클라우드 구독에 포함된 기능이라 추가 결제도 없습니다.

조건이 하나 있습니다. 어도비 이미지 도구는 어도비 저장소에 올라간 파일만 받습니다. 내 컴퓨터 경로를 그대로 주면 거절당하는데, 업로드부터 배경 제거까지 AI에게 맡기면 순서대로 처리합니다.

상세페이지 만들기 – 이미지를 영상 소재로 넘기기

상세페이지에 쓴 제품 이미지를 그대로 영상 소재로 넘겼습니다. 누끼를 딴 투명 png여야 영상 쪽에서 배경을 새로 깔고 카메라를 움직입니다. 소재가 한 벌이라 페이지와 영상의 톤이 어긋나지 않는다는 점이 같은 구독 안에서 작업하는 이유이기도 합니다.

말로 넘긴 값은 네 가지입니다.

정해줄 것	지시문에 쓰는 말
비율과 길이	세로·정사각·가로 세 가지, 각 9초
제품 크기	화면 폭의 8할쯤 차지하게
문구	브랜드명, 헤드라인, 서브카피, 꼬리문구
분위기	어두운 배경에 제품만 밝게, 카메라는 천천히

분위기는 문장보다 참고 화면 한 장이 빠릅니다. 카메라 궤적과 문구가 떠오르는 타이밍을 어떻게 지시했는지는 애프터 이펙트 3D 카메라 편에 따로 정리해뒀습니다.

영상은 유튜브 일부공개로 올려 임베드하기

상세페이지 만들기를 할 때 긴 이미지에 영상이 들어갈 공간을 위해서 이미지를 잘라야 합니다. 그리고 영상은 직접 mp4를 페이지에 올리는 대신 유튜브에 일부공개로 올리고 임베드하는 게 좋습니다. 일부공개는 링크를 아는 사람만 열 수 있는 설정이라, 채널 목록에는 뜨지 않으면서 임베드는 그대로 동작합니다.

운영 쪽 이득은 세 가지입니다. 페이지가 가볍고, 쇼핑몰마다 다른 동영상 규격을 덜 신경 쓰고, 영상을 고칠 때 유튜브 파일만 교체하면 페이지에 걸린 영상도 같이 바뀝니다. 페이지를 다시 배포하지 않아도 됩니다.

영상 자리는 세 번째로 잡았습니다. 첫 화면이 상품을 보여주고 왜 이 상품인지 한 번 말한 다음이라, 관심이 생긴 직후에 재생 버튼이 놓입니다. 영상 위나 아래에 무엇을 보여주는지 한 줄을 붙여야 재생할 이유가 됩니다.

위 화면에 걸린 영상은 실제 판매 상품이 아니라 구조를 확인하려고 만든 샘플입니다.

크리에이티브 클라우드 플랜 비교하기

다른 규격도 같은 출력에서 받아두기

같은 소재에서 세 규격을 한 번에 출력해뒀습니다. 나중에 다른 채널에 쓸 일이 생겼을 때 다시 만들지 않으려는 목적입니다.

비율	크기	쓰이는 자리
세로	1080×1350	릴스·피드
정사각	1080×1080	피드, 썸네일
가로	1920×1080	유튜브, 상세페이지

세로와 가로는 화면 모양이 달라 배치를 규격마다 따로 계산해야 하는데요. 규격별 레퍼런스를 먼저 뽑아 넘기면 반복 지시 횟수가 눈에 띄게 줄어듭니다.

다음 상품에 구조를 통째로 재사용하기

제철 상품은 몇 달마다 바뀌고, 주기가 더 빠를 때도 있습니다. 명절 상품처럼 짧은 기간에 임팩트가 필요한 경우도 있고요. 그때마다 페이지와 영상을 새로 만들게 되는 것이 어느 정도 현실이지만, 틀을 템플릿으로 잡아두면 시즌이 바뀔 때 영상과 프로모션 문구만 바꿔서 씁니다. 상세페이지를 자리별로 나눠서 관리하시는 편을 추천드립니다.

문구 레이어마다 브랜드명·헤드라인·서브카피·꼬리문구로 이름을 붙여두면 다음 상품에서는 그 이름을 찾아 글자와 이미지만 교체합니다. 여름 선물세트를 가을 상품으로 교체하고 세 편을 다시 출력하기까지 1분 30초쯤 걸렸습니다.

출력이 끝나면 포토샵 파일과 애프터 이펙트 프로젝트 파일, mp4 세 개가 자산으로 남습니다. 생성형 도구로 뽑으면 결과물 하나가 나오고 그 안을 고치기 어렵습니다. 같은 틀을 분기마다 재사용하는 쪽이라면 열어서 고칠 파일이 남는 구조가 낫습니다.

ai로 애프터이펙트 영상제작 자동화하기

마치며

이번 상세페이지 만들기에서 영상에 뚜껑이 열리는 동작이나 제품이 도는 컷을 넣으면 더 좋았겠지만 이미지 1장을 애프터이펙트로 효과를 줘서 작업하는 것을 보여드리는 게 목적이었습니다. 더 다이나믹한 움직임은 AI로 영상을 생성하는 쪽이 나을 수 있는데, 대신 사실적이지 않게 나오기도 합니다. 소재가 한 방향에서 찍힌 이미지라서요. 해당 컷이 꼭 필요한 상품이라면 각도별 촬영본이나 3D 오브젝트를 입력으로 준비합니다.

사람이 정한 것은 절 목록과 각 절의 역할, 그리고 분위기를 잡는 레퍼런스 한 장입니다. 문서 조립과 좌표 계산, 영상 출력은 지시로 넘어갔습니다. 포토샵을 직접 다루지 못해도 순서와 기준을 세울 수 있으면 이 흐름은 돌아갑니다.

상세페이지는 포토샵에서, 영상은 애프터 이펙트에서 나옵니다. 두 앱이 같은 크리에이티브 클라우드 안에 있어서 누끼를 딴 제품 이미지를 양쪽에서 그대로 씁니다. 애프터 이펙트는 단일 앱 결제와 모든 앱 플랜 양쪽에 있어서, 포토샵을 이미 쓰고 있다면 플랜 안에서 해결됩니다.

플랜 구성과 가격은 시점마다 달라지니 결제 직전에 어도비 페이지에서 확인하시는 편이 정확합니다.

애프터 이펙트 플랜 확인하고 시작하기