애니메이션은 정지된 상세페이지에 움직임을 더해 시선을 사로잡아요. 글자가 타이핑되거나, 숫자가 올라가거나, 이미지가 슬라이드되는 식이죠.
1. 애니메이션이란? + 종류
요소(텍스트·이미지 등)에 움직임 효과를 입히는 기능이에요. 크리에이지에는 14가지의 애니메이션이 있어요. | 효과 | 설명 | 적용 가능한 요소 | |---|---|---| | 깜빡임 | 요소를 깜빡이게 합니다 | 모든 요소 | | 순차 페이드인 | 자식 요소들이 순차적으로 나타납니다 | 텍스트 · 묶음 | | 슬라이드인 | 지정한 방향에서 미끄러져 나타납니다 | 모든 요소 | | 글자색 변경 | 글자 색상이 시간에 따라 변합니다 | 텍스트 · 아이콘 · 묶음 | | 배경색 변경 | 배경 색상이 시간에 따라 변합니다 | 모든 요소 | | 타이핑 | 글자가 한 글자씩 타이핑됩니다 | 텍스트 · 묶음 | | 숫자 카운트업 | 시작 숫자부터 점점 증가합니다 | 텍스트 · 묶음 | | 바 채우기 | 지정한 비율까지 채워집니다 | 텍스트 · 묶음 | | 이미지 전환 | 두 이미지를 시간차로 전환합니다 | 이미지 · 영상 | | 사진 슬라이드 | 두 사진을 슬라이드 모션으로 전환합니다 | 이미지 · 영상 | | 흔들림 | 요소를 좌우로 흔듭니다 | 모든 요소 | | 슬라이드 리빌 | 지정한 방향부터 점차 드러납니다 | 모든 요소 | | 맥박 | 은은하게 커졌다 작아지며 시선을 끕니다 | 모든 요소 | | 줌인 | 작은 크기에서 점점 확대되며 등장합니다 | 모든 요소 |
💡 '묶음' 은 여러 요소를 감싸는 박스(섹션 등)를 뜻해요.
2. 애니메이션 적용하기
직접 적용
- 효과를 줄 요소를 선택해요.
- 왼쪽 [애니메이션] 탭을 열어요.
- [유형] 에서 원하는 효과를 고르고, 아래 설정값을 조정한 뒤 적용해요.
채팅으로 적용 (제일 쉬워요, 추천)
복잡하게 고를 것 없이, AI 채팅에 그냥 말하면 돼요. 예) "첫 번째 제목에 타이핑 효과 넣어줘", "이 숫자 카운트업으로 올라가게 해줘"
💡 어떤 효과가 어울릴지 모르겠다면 채팅에 "여기 어울리는 애니메이션 넣어줘" 라고 해보세요!
3. 애니메이션 상세 조정
모든 애니메이션은 공통으로 이 두 가지를 조절할 수 있어요.
- 재생 시간 — 한 번 재생되는 데 걸리는 시간 (0~30초)
- 시작 지연 — 시작하기까지 기다리는 시간 (0~30초)
그리고 효과마다 조정값이 달라요.
깜빡임
- 무한 반복 — 계속 깜빡일지 / 1회만
- 왕복 재생 — (무한일 때) 정방향만 / 왕복
순차 페이드인
- 시차 간격 — 자식 요소들이 나타나는 간격 (0.05~1초)
슬라이드인
- 방향 — 왼쪽 / 오른쪽 / 위 / 아래
- 거리 — 얼마나 멀리서 미끄러져 올지 (0~200px)
글자색 변경
- 시작 색상 · 종료 색상
- 무한 반복 / 왕복 재생
배경색 변경
- 시작 색상 · 종료 색상
- 무한 반복 / 왕복 재생
타이핑
- 별도 조정값은 없어요. (글자 길이에 맞춰 자동) 속도는 공통 [재생 시간] 으로 조절해요.
숫자 카운트업
- 시작 숫자 — 어디서부터 올라갈지 (0~9,999,999). 끝 숫자는 요소에 적힌 숫자예요.
바 채우기
- 채우기 방향 — 가로 / 세로
- 채우기 비율 — 어디까지 채울지 (10~100%)
이미지 전환
- 두 번째 이미지 — 전환될 이미지 선택
- 전환 방식 — 페이드 / 즉시
사진 슬라이드
- 두 번째 이미지 — 전환될 이미지 선택
- 와이프 방향 — 왼쪽 / 오른쪽 / 위 / 아래
흔들림
- 재생 시간 — 흔드는 시간 (0.2~3.0초)
- 무한 반복
슬라이드 리빌
- 방향 — 왼쪽 / 오른쪽 / 위 / 아래
맥박
- 최대 크기 배율 — 얼마나 커질지 (1.01~1.30)
- 무한 반복
줌인
- 시작 크기 — 얼마나 작게 시작할지 (0.0~0.9)
4. 애니메이션 재생 & 전체 삭제
- 재생 — 섹션 툴바의 [영상 & 애니메이션 재생](▷) 을 누르면 처음부터 다시 재생돼, 움직임을 미리 볼 수 있어요.
- 전체 삭제 — 섹션 툴바의 [섹션 내 애니메이션 전체 삭제] 를 누르면, 그 섹션에 적용된 애니메이션이 한 번에 모두 지워져요.
5. WebP와 GIF — 애니메이션 내보내기
애니메이션이나 영상이 들어간 섹션은 일반 사진이 아니라 움직이는 파일로 내보내져요. 형식은 두 가지예요.
- WebP — 최신 형식. 용량이 작고 화질이 좋아요. (네이버 스마트스토어·쿠팡)
- GIF — 오래된 범용 형식. 용량은 크지만 어디서나 열려요. (네이버 스마트스토어)
⚠️ '하나로 내보내기' 할 때 주의!
정적인 섹션들은 한 장의 이미지로 합쳐지지만, 애니메이션 섹션은 파일 형식(확장자)이 달라서 한 이미지에 함께 못 담겨요. 움직이는 파일(WebP/GIF)과 정지 이미지(PNG/JPG)는 섞을 수 없거든요. 그래서 애니메이션 섹션은 따로 분리되어 움직이는 파일로 나와요.