상세페이지 gif 움직이는 이미지 넣기 / 촬영 없이 ai + 포토샵

상세페이지에 제품이 움직이는 구간을 넣으려면 보통 영상 촬영이 필요하고 촬영한 걸 넣는게 좋습니다. 하지만 스튜디오 잡고, 찍고, 편집하는 것이 쉬운 일은 아니고 누구나 가능하지도 않은 게 현실이죠. 제품이 아직 샘플 단계거나 촬영을 대신할 무언가 필요할 수도 있습니다. 그렇다고 사진으로만 가기엔 제품에 따라 특성을 제대로 보여주기 어려울 수도 있구요. 이번에는 상세페이지를 작업하면서 접이식 써큘레이터  제품 사진을 이용해서  gif 움직이는 이미지로 해당 영역을 채워봤습니다. 상세페이지 자체는 지난번 넥밴드 쿨러 때처럼 클로드코드로 포토샵을 제어해 psd로 만들었습니다.

 

 

 

 

 

세 구간 모두 촬영 없이 만들었습니다. 좌우 회전, 날개 클로즈업, 상하 각도 조절이고요. 실제 촬영본을 대체하는 수준은 아닙니다. 다만 나중에 영상이 준비되면 그 자리만 바꿔 끼울 수 있게 넣어뒀기 때문에, 비어 있던 구간을 채우는 용도로는 충분합니다.

 

 

 

어도비 크리에이티브 클라우드 플랜 확인하기

 

이 글에는 어필리에이트 링크가 포함되어 있습니다. 링크를 통해 구매하시면 운영에 도움이 되며, 구매자에게 추가 비용은 없습니다.

 

 

 

 

실제로 만든 상세페이지는 15000 픽셀이 넘고 중간중간 움직이는 gif 이미지가 들어가게 됩니다.

 

OVA Fold Air는 실험용 가상 브랜드고, 화면 속 사양은 전부 디자인 예시입니다.

 

유사한 실제 제품 보기

한경희 무선 폴딩 서큘레이터

신일 폴딩 팬

제휴 링크가 포함되어 있으며 링크를 통해 구매하시면 소정의 수수료를 지급 받습니다. 구매가엔 영향을 미치지 않습니다.

 

목차

1. 전체 레이아웃은 포토샵에서
2. 동작 지시는 부품 단위로
3. 각도가 과하게 나올 때
4. 포토샵에서 배경을 갈아 끼우며
5. 페이지를 조각으로 나눠 넣기
6. 남는 것은 편집 가능한 psd
7. 마치며

 

전체 레이아웃은 포토샵에서

영상이 들어갈 공간도 한꺼번에 포토샵에서 모두 작업을 합니다. 그리고 해당 영역과 매칭이 되는 느낌도 다 보구요. 영상부터 만들지 않고 상세페이지 디자인을 먼저 다 끝내 놓고 gif 들어갈 자리에는 영상 첫 프레임을 이미지를 넣어서 전체 구성과 흐름을 확인하는 것이 좋습니다.

gif 들어갈 데를 빈 채로 두기 보다는 정지화면을 끼워넣어서 페이지 전체를 포토샵에서 체크하면, 위아래 여백이 맞는지, 색이 이어지는지, 다 만들었을 때 세로가 얼마나 되는지 감을 잡는데 도움이 됩니다.

그리고 디자인에서 잡아둔 자리 크기가 그대로 gif 크기가 됩니다. 순서를 거꾸로 해서 gif부터 만들면 자리에 안 맞아요. 제품이 작아지거나 화면 일부를 잘라내야 합니다.

 

동작 지시는 부품 단위로

제품 영상이 없기 때문에 ai로 제작해야할 때는 제품에 따라 다르겠지만, 예를 들어 "선풍기가 돌아간다" 정도로 쓰면 날개인지 목인지가 정해지지 않아서 몸체가 다 돌아가는 영상이 나올 수도 있습니다. 실제로 그렇게 만들어진 상세페이지들이 보이더라구요.

 

움직일 부품과 고정할 부품을 나눠 프롬프트를 해서 최대한 원하는 움직임을 만들도록 합니다.

• 좌우 회전: 날개는 계속 돌고, 목은 정면에서 옆모습이 보일 때까지 돌았다가 반대로. 폴과 베이스는 고정
• 날개 클로즈업: 날개만 고속 회전, 앞쪽 가드와 목은 고정, 카메라도 고정
• 상하 각도: 목 관절에서 헤드만 위로 젖혀졌다 내려옴. 폴과 베이스는 수직 유지

화면 비율도 같이 넣어야 합니다. 빼먹으면 가로형으로 나와서 세로 자리에 넣을 때 제품이 작게 들어가요. 이게 은근히 잘못나오면 시간 낭비가 되기 때문에 중요한 부분입니다.

결과는 재생만 보지 마시고 프레임을 펼쳐놓고 확인하세요. 적어놓은 부품이 실제로 도는지, 제품 형태나 색이 중간에 달라지지 않는지는 돌려보는 것만으로는 놓치기 쉽습니다. 가끔 없던 로고나 글자가 제품에 찍혀 나오기도 하는데, 그런 컷은 쓰면 안 됩니다.

 

각도가 과하게 나올 때

아래 틸트영상은 원래 상하 각도는 20도를 요청했는데 결과는 거의 눕는 수준까지 젖혀졌습니다. 실제 제품이 그렇게 움직일 수도 있고 아닐 수도 있지만 저는 30도 정도만 움직이는 걸 가정하고 제품 컨셉을 잡았기 때문에 잘못된 부분이었습니다.

그래서 추가로 다시 제작하지는 않고 쓸 만한 구간만 잘라서 제작을 했구요. 여기서 프레임 잘라내는 것은 포토샵에서 해도 됩니다. 너무 영상이 긴 경우는 클로드 코드에서 미리 잘라와도 되구요. 정면에서 헤드가 올라가는 구간 중 30도까지만 쓰고, 뒤에 역순 프레임을 붙여 올라갔다 내려오게 만들었습니다. 아래의 경우는 회전처럼 계속 도는 동작은 시작과 끝 모양이 맞물리는 지점 같은 걸 클로드코드가 찾아서 잘라냈습니다.

 

 

ai로 만든 영상을 프레임 단위로 다듬고 gif와 psd 작업까지 이어가려면 아래에서 어도비 플랜 구성을 확인해보세요.

 

어도비 크리에이티브 클라우드 플랜 확인하기

 

 

배경을 페이지 톤에 맞추기

프레임을 레이어로 쌓고 타임라인을 프레임 애니메이션으로 바꾸면 gif로 만들 수 있습니다. 포토샵 기본 기능이죠.

한 가지 손볼 게 있는데, 생성 영상은 배경이 원본 사진과 다르게 나오는 경우가 있습니다. 밝은 스튜디오 배경으로 찍힌 제품 사진을 넣었는데 결과물은 중간 회색으로 바뀌어 나오는 식이에요. 그대로 쓰면 상세페이지의 다른 구간과 색이 안 맞습니다.

 

 

그래서 배경을 한 장 새로 만들어 깔고, 프레임마다 제품만 따내서 그 위에 얹었습니다. 흰 제품이라 어두운 배경으로 통일했더니 세 구간이 한 묶음처럼 이어지더라구요.

 

 

프레임 수만큼 반복해야 하는 작업이라 이번에도 클로드코드가 포토샵을 제어해서 처리했습니다.

 

페이지를 조각으로 나눠 넣기

완성한 gif를 페이지 이미지에 합치면 안 됩니다. 가끔 gif상세페이지 전체이미지에 합성하고 싶다는 말씀을 하시는 경우가 있어요. 그러면 페이지 전체가 gif가 되면서 파일이 수십 MB로 커지거든요. 

psd에서 gif 자리 위아래를 기준으로 png를 내보내고, 그 사이에 필요한 것만 gif를 놓는게 맞습니다. 카피를 고칠 땐 그 png만 다시 내보내고, 나중에 촬영 영상이 나오면 gif 자리만 갈아 끼우면 되구요. 동영상 되는 쇼핑몰이면 그 자리에 mp4를 올려도 됩니다. 위아래 이미지는 건드릴 일이 없어요.

 

남는 것은 편집 가능한 psd

이번에도 ai로 만든 상세피이지 전체 결과물로 남는 건 레이어가 살아 있는 psd예요. 구간마다 레이어 그룹이 나뉘어 있고 문구는 텍스트 레이어로 들어가 있습니다. 

상세페이지는 만들고 끝나는 문서가 아니라 가격이며 문구가 계속 바뀌는 문서죠. gif 구간을 조각으로 분리해둔 것도 같은 이유입니다. 어느 부분을 고치든 그 조각 안에서 끝나는 구조로 남겨두는 게 이 작업에서 제일 중요한 결과물이라고 봅니다.

 

 

마치며

이번 작업은 상세페이지를 ai로 만든 다음, 그중 일부를 움직이는 이미지로 넣고 싶을 때 쓰는 방법입니다. 상세페이지를 포토샵으로 만드는 과정 자체는 지난 글과 크게 다르지 않아서, gif를 위해 영상을 먼저 만들고 포토샵에서 붙인 부분만 따로 정리했습니다.

 

 

AI 에이전트로 상세페이지 만들기: 넥쿨러 시장 조사부터 포토샵 PSD 완성까지

 

 

프롬프트를 아무리 구체적으로 써도 한 번에 완벽한 결과가 나오지는 않습니다. 각도가 과하게 나온 영상을 버릴지 구간만 골라 쓸지, 어떤 동작을 보여줄지 정하는 건 결국 사람 몫이에요. 다만 기준을 문서로 미리 정해두면 그 판단에만 집중할 수 있어서 훨씬 수월합니다.

소재까지는 생성형 이미지와 영상으로 만들고, 최종 상태로 마감하는 일은 포토샵에서 하면 됩니다. 포토샵을 직접 다루지 못하더라도 방향만 잡을 수 있으면 이 방식으로 끌고 갈 수 있구요. 결과물이 열어서 고칠 수 있는 원본으로 남는다는 게 포토샵을 쓰는 이유입니다.

 

어도비 크리에이티브 클라우드 플랜 확인하기

 

---

본문에 등장하는 OVA Fold Air는 상세페이지 제작 과정을 설명하기 위한 가상 브랜드이며 실제 판매되는 제품이 아닙니다. 기재된 스펙과 수치는 모두 가상의 예시이고, 특정 브랜드나 제품과 관련이 없습니다.

 

 

 

업로드 없이 브라우저에서 GIF 용량 줄이기