🔎 #773. AI 코딩 에이전트로 카드 애니메이션 만들기(Lottie)

Published on: 2026.06.17

안녕하세요?
매일 사람이 쓰는 뉴스레터 Daily Prompt입니다.

오늘은 Codex를 사용해 뉴스레터를 소개하는 카드 애니메이션을 만든 과정을 공유드립니다.

AI 코딩 에이전트로 카드 애니메이션 만들기

어제는 AI 코딩 에이전트 Codex를 사용해 Daily Prompt 로고 모션을 만들어봤습니다. 오늘은 같은 오픈소스를 사용해 뉴스레터의 장점을 소개하는 세로형 카드 콘텐츠를 만들어보았습니다. 이 때 각 카드에 들어갈 일러스트도 Codex에게 생성해달라고 요청했습니다.

오늘의 프롬프트:

https://github.com/diffusionstudio/lottie 소스를 활용해서 Daily Prompt 뉴스레터의 장점을 소개하는 세로형 카드 애니메이션을 만들어줘.

- 파란 배경 위에 흰색 둥근 카드가 가로로 넘어가는 캐러셀 구조로 구성해줘.
- 각 카드에는 심플한 일러스트와 제목, 짧은 설명을 넣어줘.
- 1번은 ‘매일 중요한 것 하나만’, 2번은 ‘프롬프트 공유’로 하고, 나머지는 뉴스레터 장점에 맞게 알아서 구성해줘.
- 전체는 5개 카드, 8초 루프 애니메이션으로 만들어줘.
- 각 카드의 일러스트는 이미지 생성 스킬(@image gen)을 사용해서 새로 만들어줘.

오늘의 프롬프트 입력 결과:

Daily Prompt benefit card carousel animation — 오늘의 프롬프트 1 입력 결과

카드에 어울리는 일러스트를 생성해야할 때, 아래와 같이 @image를 입력하고 Image Gen 스킬을 선택해주셔야 코덱스가 이미지를 생성해줍니다.

Image Gen 스킬로 생성된 일러스트들:

위 방식을 활용해 홈페이지에 다음과 같이 적용할 수 있습니다(아래 이미지는 목업 이미지입니다)

마무리

오늘은 뉴스레터 장점 소개용으로 카드 애니메이션을 제작하였지만, 사실 어떤 콘텐츠에도 적용할 수 있습니다. 제품 기능, 서비스 장점, 사용자 후기 등 '여러 장점이나 단계를 짧게 보여줘야 하는 상황'에 적용할 수 있습니다.
Lottie는 원래 앱과 웹에 가벼운 애니메이션을 넣기 위한 포맷입니다. 예전에는 이를 만들기 위해 디자인 툴, export 플러그인, 미리보기 도구, 개발 적용 과정을 오가야 했습니다. 하지만 이제는 오픈소스 링크와 Codex만 있으면 원하는 것을 뭐든지 만들 수 있습니다.
이렇게 코딩 에이전트를 사용해보면, (과거 코딩을 하지 못해서) 필요에 따라 사용하던 서비스를 유료구독해야할 이유를 찾기 어려워집니다. 어떤 서비스를 쓰다가 유료구독해야 추가 기능을 쓸 수 있다는 팝업을 만나게 되면, Codex를 켜서 유료기능을 구현해달라고 요청하게 됩니다.
에이전트 시대의 개인 역량은 '코딩을 할 수 있느냐'보다 '문제를 문제로 알아차릴 수 있느냐'에 가까워지는 것 같습니다. 불편한 반복 작업 등 이런 것들을 그냥 참고 넘기는 대신 '이걸 Codex에게 맡기면 어떨까?'라고 물어보는 것이 중요합니다.
Codex에게 물어보는 사람과 물어보지 않는 사람 간 격차가 이미 시작되었습니다. 구독자님도 Codex(무료로 시작 가능)를 다운로드 받고 코딩 에이전트를 사용해보세요!

Codex를 활용한 지난 회차: