AI를 활용한 상품 영상 제작 및 피그마 GIF 애니메이션 만드는 방법

가나톡ganaTOK
가나톡ganaTOK
AI를 활용한 상품 영상 제작 및 피그마 GIF 애니메이션 만들기

AI를 활용한 상품 영상 제작 및 피그마 GIF 애니메이션 만드는 방법

안녕하세요! 오늘은 AI를 활용해 상품 이미지를 영상으로 만드는 방법과 피그마(Figma)에서 GIF 애니메이션을 제작하는 방법을 소개해 드리겠습니다. 상품 상세페이지에서 애니메이션은 소비자의 시선을 끌고, 제품의 주요 기능을 직관적으로 전달하는 데 효과적입니다.

이번 글에서는 두 가지 내용을 다룹니다.

  1. AI를 활용한 고퀄리티 상품 영상 제작법
  2. 피그마를 이용한 GIF 애니메이션 제작법

1. AI를 활용한 상품 영상 제작 (Cling AI 활용)

Cling AI는 텍스트나 이미지를 활용해 자동으로 고퀄리티 영상을 생성해 주는 AI 서비스입니다.

1) Cling AI 가입 방법

  1. 구글에서 Cling AI를 검색 후 공식 사이트(cling.ai)에 접속합니다.
  2. 오른쪽 상단에서 무료 크레딧 로그인을 클릭해 구글 계정으로 가입합니다.
  3. 가입 시 매월 366 크레딧을 무료로 지급받을 수 있습니다.

2) AI를 이용한 영상 제작 방법

  1. Cling AI 접속 후 "AI 비디오" 선택

    • 텍스트 입력으로 영상을 만들거나, 이미지를 활용해 영상을 생성할 수 있습니다.
    • 보다 정확한 결과를 위해 "이미지 투 비디오" 방식을 추천합니다.

  2. 이미지 업로드 및 설정

    • "스타트 이미지(영상 시작 이미지)"와 "엔드 이미지(영상 끝나는 이미지)"를 업로드합니다.
    • 프롬프트(설명 문구)는 입력하지 않아도 되지만, 보다 세밀한 설정을 원할 경우 ChatGPT를 활용해 작성할 수 있습니다.

  3. 연출 스타일 설정

    • 왼쪽(창의적) ↔ 오른쪽(사용자 지정 프롬프트 반영)으로 조절할 수 있습니다.
    • 무료 버전에서는 "스탠다드(20 크레딧)"와 "프로페셔널(35 크레딧)" 중 선택 가능하며, 프로페셔널은 체험판으로 5회까지 이용할 수 있습니다.

  4. 영상 생성 후 다운로드

    • 생성이 완료되면 MP4 파일로 다운로드할 수 있습니다.

2. AI 영상을 GIF 애니메이션으로 변환하는 방법

상품 상세 페이지에서 GIF 애니메이션을 활용하면 시각적으로 더 큰 효과를 얻을 수 있습니다.

1) MP4를 GIF로 변환하기

  1. 구글에서 **"무료 MP4 to GIF 변환"**을 검색합니다.
  2. 다양한 변환 사이트가 나오는데, 그중 Adobe Express를 추천합니다.
  3. 동영상 업로드 후, 원하는 구간을 3~5초 정도로 잘라줍니다.
  4. 고품질 설정을 선택 후 GIF 파일로 다운로드합니다.

3. 피그마(Figma)에서 GIF 애니메이션 제작하기

이제 변환한 GIF 파일을 활용하여 피그마에서 상세페이지 애니메이션을 제작해 보겠습니다.

1) GIF 파일을 피그마에 삽입하기

  1. 피그마에서 새 프레임을 생성합니다. (860px × 원하는 높이)
  2. 변환한 GIF 파일을 드래그해서 삽입합니다.
  3. 적절한 위치와 크기로 조정합니다.

2) 디자인 요소 추가하기

  1. 타이틀 추가

    • 폰트: 지마켓 폰트
    • 서브 타이틀: 크기 75px, 자간 -8
    • 강조 타이틀: 크기 153px, 자간 -2

  2. 배경 꾸미기

    • 하단에 배경 컬러를 채우고, 그라디언트를 적용합니다.
    • 스포이드 기능을 이용해 GIF와 자연스럽게 조화되도록 설정합니다.

  3. 포인트 강조 아이콘 추가

    • 체크 아이콘, 라운드 박스를 활용해 핵심 기능을 강조합니다.
    • 텍스트와 아이콘 간격을 20px로 조정하고, 오토 레이아웃을 적용합니다.

3) 애니메이션 효과 추가

  1. 텍스트 애니메이션 적용

    • "스큐 아이소메트리 툴" 플러그인을 사용해 텍스트를 기울여 역동적인 느낌을 연출합니다.
    • "드롭 섀도우" 효과를 추가해 입체감을 줍니다.

  2. GIF 애니메이션으로 저장

    • 완성된 프레임을 선택 후, 플러그인 **"GIF Export"**를 사용해 GIF로 저장합니다.

4. 모바일 환경에서 GIF 미리보기 (피그마 활용)

피그마에서는 다양한 디바이스 화면에서 GIF를 미리 확인할 수 있습니다.

  1. 단축키 A를 누르면 디바이스별 화면을 선택할 수 있습니다.
  2. 안드로이드 또는 아이폰 화면을 선택 후 GIF를 삽입합니다.
  3. 상단 "프리뷰" 아이콘을 클릭하여 실제 모바일 환경에서의 표현을 확인합니다.

마무리

이제 AI를 활용한 상품 영상 제작과 피그마에서 GIF 애니메이션을 만드는 방법을 배웠습니다!

✅ Cling AI를 이용하면 고퀄리티 상품 영상을 손쉽게 제작할 수 있습니다.
✅ 변환한 GIF를 피그마에서 활용하면 상품 상세페이지에 생동감을 더할 수 있습니다.
✅ 피그마에서 다양한 애니메이션 효과를 적용해 더욱 직관적인 디자인을 완성할 수 있습니다.

더 자세한 피그마 상세페이지 제작법이 궁금하다면 아래 링크를 확인해 주세요!
📌 [추가 강의 영상 링크]도움이 되셨다면 구독, 좋아요, 알림 설정 부탁드립니다! 😊

Related Posts

로드 중…

댓글 쓰기