애니메이션 적용하기

애니메이션은 정지된 상세페이지에 움직임을 더해 시선을 사로잡아요. 글자가 타이핑되거나, 숫자가 올라가거나, 이미지가 슬라이드되는 식이죠.

---

1. 애니메이션이란? + 종류

요소(텍스트·이미지 등)에 움직임 효과를 입히는 기능이에요. 크리에이지에는 14가지의 애니메이션이 있어요.

효과	설명	적용 가능한 요소
깜빡임	요소를 깜빡이게 합니다	모든 요소
순차 페이드인	자식 요소들이 순차적으로 나타납니다	텍스트 · 묶음
슬라이드인	지정한 방향에서 미끄러져 나타납니다	모든 요소
글자색 변경	글자 색상이 시간에 따라 변합니다	텍스트 · 아이콘 · 묶음
배경색 변경	배경 색상이 시간에 따라 변합니다	모든 요소
타이핑	글자가 한 글자씩 타이핑됩니다	텍스트 · 묶음
숫자 카운트업	시작 숫자부터 점점 증가합니다	텍스트 · 묶음
바 채우기	지정한 비율까지 채워집니다	텍스트 · 묶음
이미지 전환	두 이미지를 시간차로 전환합니다	이미지 · 영상
사진 슬라이드	두 사진을 슬라이드 모션으로 전환합니다	이미지 · 영상
흔들림	요소를 좌우로 흔듭니다	모든 요소
슬라이드 리빌	지정한 방향부터 점차 드러납니다	모든 요소
맥박	은은하게 커졌다 작아지며 시선을 끕니다	모든 요소
줌인	작은 크기에서 점점 확대되며 등장합니다	모든 요소

💡 '묶음' 은 여러 요소를 감싸는 박스(섹션 등)를 뜻해요.

---

2. 애니메이션 적용하기

직접 적용

1. 효과를 줄 요소를 선택해요.
2. 왼쪽 [애니메이션] 탭을 열어요.
3. [유형] 에서 원하는 효과를 고르고, 아래 설정값을 조정한 뒤 적용해요.

채팅으로 적용 (제일 쉬워요, 추천)

복잡하게 고를 것 없이, 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)는 섞을 수 없거든요. 그래서 애니메이션 섹션은 따로 분리되어 움직이는 파일로 나와요.