AI 웹 포스터·캐릭터 애니메이션 제작 실습
AI로 만든 캐릭터와 배경 위에 정확한 HTML 텍스트를 배치하고, 캐릭터 한 요소를 스프라이트로 움직여 정적 PNG·PDF와 웹 게시용 포스터를 함께 만듭니다.
3시간형은 제공된 그래픽과 스프라이트를 활용해 포스터 구성과 웹 적용을 끝까지 경험합니다. 1일형은 개인 포스터와 6프레임 걷기 제작까지 진행하며, 걷기 6장과 넘어짐 6장 전체 제작은 별도 확장 범위로 둡니다.
1부. 정적인 포스터를 움직이는 웹 포스터로 확장합니다
포스터 전체를 이미지 한 장으로 만들지 않습니다. AI는 캐릭터·배경·질감을 만들고, 제목·일정·장소·CTA는 HTML/CSS로 정확하게 배치합니다. 웹에서는 캐릭터 한 요소만 움직이고, 인쇄와 공유용으로는 같은 내용을 정적 PNG·PDF로 남깁니다.
정확한 글자는 그대로,
캐릭터만 움직입니다
제목과 일정은 선택·검색 가능한 HTML 텍스트로 두고, 종이 로봇만 WebP 스프라이트로 재생하는 웹 포스터 예시입니다.
캐릭터, 배경, 질감과 전체 분위기를 만들고 텍스트가 올라갈 여백을 확보합니다.
강의명, 일정, 장소, 주관, 문의, CTA를 정확히 입력하고 모바일·인쇄 크기에 맞게 조정합니다.
캐릭터나 장식 한두 요소만 움직여 정보 읽기를 방해하지 않게 하고, 동작 줄이기에서는 정지합니다.
첫 프레임 또는 대표 자세를 사용해 같은 내용을 PNG·PDF로 내보내고 게시물·인쇄물에 활용합니다.
정적 포스터 시안에서 확인하는 두 가지 방향
같은 내용으로 두 가지 결과물을 남깁니다
| 구분 | 정적 PNG·PDF | 움직이는 웹 포스터 |
|---|---|---|
| 글자 | HTML/CSS로 구성한 정확한 내용을 캡처·출력 | 검색·선택 가능한 HTML 텍스트로 유지 |
| 그래픽 | 대표 자세 한 장과 배경 사용 | 같은 캐릭터의 WebP 스프라이트 재생 |
| 활용 | 인쇄, 이메일, SNS 이미지 | 홈페이지, 행사 안내, 랜딩페이지 |
| 확인 | 페이지 크기, 글자, 배경, QR | 모바일, 로딩, 동작 줄이기, 정적 대체 화면 |
2부. 포스터 캐릭터를 프레임 애니메이션으로 확장합니다
정적 포스터의 캐릭터를 여러 장으로 늘리는 것만으로는 자연스럽게 움직이지 않습니다. 같은 10초 주기로 재생해 프레임 부족, 크기와 위치 흔들림, 양쪽 다리 교대 여부를 비교합니다.
기기에서 동작 줄이기를 사용하면 위 애니메이션은 첫 프레임에서 멈춥니다. 수업에서도 prefers-reduced-motion 대응을 함께 확인합니다.
포스터가 움직이는 웹 콘텐츠가 되는 흐름
포스터 제작과 캐릭터 애니메이션을 별도 결과물로 끝내지 않습니다. 같은 정보와 그래픽을 정적 출력과 웹 화면에 함께 쓰도록 제작 단계를 연결합니다.
정확해야 하는 제목·일정·장소와 AI가 만들 캐릭터·배경을 나눕니다.
정확한 텍스트, 여백, 정렬, CTA를 반응형 포스터 레이아웃에 배치합니다.
고정 요소와 접지·통과 자세를 적고 어느 다리가 앞으로 나오는지 지정합니다.
알파 경계를 측정해 공통 배율, 몸통 중심, 접지선을 맞춥니다.
WebP 시트를 HTML 포스터에 올리고 글자를 방해하지 않는 범위에서 재생합니다.
PNG·PDF 출력과 모바일 웹, 로딩, 동작 줄이기, 정적 대체 화면을 확인합니다.
3시간 기본형 교육 구성 예시
기본형은 제공된 포스터 그래픽과 실제 스프라이트 파일을 활용해 HTML 포스터 구성부터 웹 적용까지 끝내는 과정입니다. 개인 그래픽과 6프레임 생성은 1일형에서 다룹니다.
한 콘텐츠를 PNG·PDF와 웹 화면으로 함께 만드는 구조를 이해합니다.
AI 그래픽, HTML 텍스트, 움직임, 정적 대체 화면의 역할을 나눕니다.
캐릭터·배경·색감과 정확한 정보 영역을 분리합니다.
포스터에서 움직일 한 요소와 정지시킬 제목·일정·CTA를 먼저 결정합니다.
제공 그래픽 위에 정확한 제목, 일정, 장소와 버튼을 배치합니다.
모바일에서도 글자가 먼저 읽히도록 여백, 대비, 정렬을 조정합니다.
초기·흔들림·성공 버전에서 프레임과 기준점의 차이를 찾습니다.
캐릭터 고정 요소, 몸통 중심, 접지선, 양쪽 다리 교대를 확인합니다.
제공된 WebP 시트를 포스터의 캐릭터 영역에서 재생합니다.
글자와 CTA를 가리지 않는 위치, 크기, 속도와 반복 주기를 조정합니다.
대표 프레임으로 PNG·PDF를 만들고 웹 포스터를 반응형으로 확인합니다.
모바일, 로딩, 동작 줄이기, 링크 동작을 점검하고 공개 경로를 확인합니다.
운영 방식
AI 그래픽과 HTML 텍스트의 역할, 정적 포스터와 웹 포스터의 차이, 애니메이션 실패 사례를 비교합니다.
제공된 그래픽과 스프라이트로 HTML/CSS 웹 포스터를 만들고 정적 출력까지 진행합니다.
개인 포스터 그래픽과 6프레임 걷기 캐릭터를 만들어 웹 게시용 화면으로 연결합니다.
걷기 6장과 넘어짐 6장을 생성·보정하고 4×3 시트로 묶는 작업은 별도 확장 범위로 구성합니다.
사용 가능한 생성 도구와 계정, 이미지 업로드 보안 범위, 참여자 수준에 맞춰 생성과 후처리 비중을 조정합니다.
프롬프트와 후처리의 역할을 나눕니다
프롬프트는 캐릭터 변화와 자세 누락을 줄이는 데 도움을 주지만 픽셀 좌표를 보장하지 않습니다. 정확한 정렬은 생성 후 측정과 보정 단계에서 처리합니다.
고정 요소, 프레임 배열, 자세 순서, 배경, 누락 금지 조건과 검수 기준을 명시합니다.
같은 캐릭터인지, 양쪽 다리가 교대하는지, 안테나와 소품이 모두 남았는지 판단합니다.
배경 제거, 알파 경계 측정, 공통 배율, 몸통 중심, 접지선과 파일 배열을 정확히 맞춥니다.
6프레임 걷기 시트 요청 뼈대
실제 최종본도 생성 후 여섯 장에 같은 배율을 적용하고 알파 경계의 중심과 접지선을 다시 맞췄습니다. 수업에서는 프롬프트 성공과 파일 정렬 성공을 같은 것으로 설명하지 않습니다.
실습 후 남는 산출물
제목, 일정, 장소, 대상, CTA와 움직일 그래픽 영역을 분리해 정리합니다.
텍스트를 제외한 캐릭터·배경 시안과 웹에서 움직일 요소의 고정 기준을 남깁니다.
글자를 정확히 수정할 수 있고 모바일 폭에도 대응하는 포스터 레이아웃을 만듭니다.
프레임을 한 파일로 묶어 웹에서 반복 요청 없이 재생할 수 있게 구성합니다.
HTML 텍스트와 캐릭터 애니메이션을 결합하고 동작 줄이기에서 정지하는 화면을 남깁니다.
같은 정보와 대표 프레임으로 인쇄·공유용 파일과 정적 대체 화면을 만듭니다.
버전별 실제 파일 구성
| 버전 | 프레임 | 배열 | 수업에서 확인할 점 |
|---|---|---|---|
| 초기 v3 | 6장 | 6×1 | 걷기 4장·넘어짐 2장일 때 동작이 급하게 바뀌는 이유 |
| 실패 v4 | 12장 | 4×3 | 장수가 늘어도 크기와 위치가 다르면 더 흔들릴 수 있다는 점 |
| 정렬 v5 | 12장 | 4×3 | 중심과 접지선을 맞춰도 다리 통과 자세가 따로 필요하다는 점 |
| 교차 v6 | 12장 | 4×3 | 교차 자세만으로는 양쪽 다리가 번갈아 전진한다고 볼 수 없다는 점 |
| 성공 v7 | 12장 | 4×3 | 같은 배율·기준점과 앞발 교대를 함께 확인해야 한다는 점 |
최종 검수 체크리스트
- 강의명, 일정, 장소, 대상, CTA가 원문과 같은지 확인합니다.
- 포스터의 글자가 AI 이미지 안에 박힌 가짜 텍스트가 아니라 HTML로 입력됐는지 확인합니다.
- 움직이는 캐릭터가 제목, 일정, 신청 버튼을 가리거나 읽기를 방해하지 않는지 확인합니다.
- 안테나, 눈, 서류처럼 캐릭터를 구분하는 요소가 모든 프레임에 남아 있는지 확인합니다.
- 모든 프레임의 카메라 거리와 몸체 배율이 같은지 확인합니다.
- 몸통 중심과 접지한 발의 바닥선이 같은 기준에 놓였는지 확인합니다.
- 자세 때문에 생기는 높이 차이를 억지로 늘이거나 줄이지 않았는지 확인합니다.
- 긴 보폭 사이에 다리가 몸 아래를 통과하는 자세가 있는지 확인합니다.
- 첫 번째와 다음 접지 자세에서 서로 반대 다리가 앞으로 나오는지 확인합니다.
- 넘어짐 프레임 전체에 한 번 정한 공통 배율을 적용했는지 확인합니다.
- 투명 배경 가장자리에 이전 배경색이나 그림자가 남지 않았는지 확인합니다.
- 데스크톱 124px과 모바일 96px 크기에서 한 사이클을 재생해봤는지 확인합니다.
- 동작 줄이기 설정에서 애니메이션이 멈추고 첫 프레임이 보이는지 확인합니다.
- PNG·PDF와 웹 포스터의 제목·일정·대표 이미지가 서로 같은지 확인합니다.
FAQ
그림을 잘 그리지 못해도 참여할 수 있나요?
가능합니다. 직접 그리는 수업보다 참고 이미지에서 그래픽과 정보 영역을 분리하고, 생성 결과를 비교·검수·보정해 웹 화면에 적용하는 과정에 초점을 둡니다.
3시간 안에 개인 포스터와 애니메이션을 모두 만들 수 있나요?
개인별 이미지 생성은 대기 시간과 결과 편차가 있어 일괄적으로 약속하기 어렵습니다. 3시간형은 제공 그래픽과 스프라이트로 웹 포스터 완성에 집중하고, 개인 포스터와 6프레임 걷기 제작은 1일형에 배치합니다.
웹 포스터를 인쇄하거나 SNS 이미지로도 쓸 수 있나요?
가능합니다. 제목·일정·장소를 HTML/CSS로 구성한 뒤 대표 프레임에서 PNG·PDF로 내보냅니다. 웹에서는 같은 내용에 캐릭터 움직임을 더하고, 정적 출력에서는 대표 자세 한 장을 사용합니다.
포스터가 계속 움직이면 정보 읽기를 방해하지 않나요?
그럴 수 있어 포스터 전체가 아니라 캐릭터나 장식 한두 요소만 움직입니다. 제목, 일정, 장소, CTA는 정지된 상태로 유지하고 동작 줄이기 설정에서는 애니메이션을 멈춥니다.
프롬프트만 잘 쓰면 정렬 작업이 필요 없나요?
아닙니다. 프롬프트는 캐릭터 변화와 자세 누락을 줄이는 데 유용하지만 정확한 픽셀 좌표를 보장하지 않습니다. 투명 배경을 기준으로 실제 경계를 측정하고 공통 배율, 중심, 접지선을 다시 맞춰야 합니다.
GIF 대신 WebP 스프라이트와 CSS를 쓰는 이유는 무엇인가요?
프레임 순서와 속도를 CSS에서 조절하고, 동작 줄이기 설정에 대응하며, 같은 시트를 여러 화면 크기에서 재사용하기 쉽기 때문입니다. 교육에서는 GIF가 틀렸다고 단정하지 않고 웹 적용 목적에 따라 방식을 비교합니다.
관련 실습자료
강의안의 근거가 된 실제 제작 기록과 다음 단계 교육자료를 함께 연결합니다.
움직이는 웹 포스터 실습 교육을 준비한다면
참여자 수준, 수업 시간, 사용할 이미지 생성 도구, 개인 그래픽과 캐릭터 제작 여부에 맞춰 비교형·제공 자산형·개인 제작형 범위를 조정합니다.