Wix 하모니 에디터: 애니메이션 추가 및 사용자 지정하기
3 분
페이지 메뉴
- 요소에 애니메이션 추가하기
- 애니메이션 사용자 지정하기
- 모바일 사이트에 애니메이션 추가하기
이 도움말은 2026년 1월에 출시된 새로운 Wix 하모니 에디터를 참조합니다. Wix 하모니 에디터를 사용 중인지 Wix 에디터를 사용 중인지 확실하지 않다면, 여기에서 자세한 정보를 확인하세요.
디자인에 움직임과 생동감을 더하는 애니메이션으로 사이트에 생동감을 불어넣으세요. 애니메이션이 표시되는 시기를 기반으로 입장, 스크롤, 반복 효과, 마우스 효과 등과 같은 다양한 옵션을 제공합니다.
각 애니메이션을 사용자 지정해 거리, 지속 시간, 지연 시간 등의 설정을 조정하고 원하는 모습에 맞춰 정확하게 구현하세요 모든 모바일 애니메이션은 작은 화면에 맞게 설계되어 있으므로 어떤 기기에서든 사이트가 멋지게 보일 수 있습니다.
추가 정보:
동일한 요소에 다양한 애니메이션 및 효과를 적용할 수 있습니다.
요소에 애니메이션 추가하기
요소에 애니메이션을 적용해 사이트에 움직임과 활기를 더하세요. 다양한 효과 중에서 선택해 페이지의 각 부분에 생동감을 불어넣고 방문자에게 기억에 남을 경험을 선사하세요.
애니메이션을 추가하려면:
- 에디터로 이동합니다.
- 해당 요소를 클릭합니다.
- 액션 바에서 애니메이션
아이콘을 클릭합니다. - 제공된 옵션에서 애니메이션을 선택합니다.
- 입장: 애니메이션은 화면에 요소를 도입하는 역할을 하며, 요소가 처음 나타날 때 한 번만 재생됩니다.
- 반복: 애니메이션이 연속 루프로 재생됩니다.
- 스크롤: 방문자가 페이지를 위아래로 스크롤하면서 해당 요소에 가까워지면 애니메이션이 재생됩니다.
- 마우스 효과: 방문자가 요소에 커서를 마우스오버하면 애니메이션이 움직이기 시작합니다.
참고:
머리글 요소는 페이지 첫 방문 시 한 번만 애니메이션 효과가 적용됩니다.
애니메이션 사용자 지정하기
요소에 애니메이션을 추가한 후에는 사이트의 디자인과 분위기에 맞게 애니메이션을 개인화하세요. 강도, 방향, 지연 등과 같은 옵션을 조정해 원하는 정확한 효과를 생성하고 방문자의 몰입도를 높일 수 있습니다.
참고:
사용 가능한 사용자 지정 옵션은 선택한 애니메이션에 따라 달라집니다.
애니메이션을 사용자 지정하려면:
- 에디터로 이동합니다.
- 해당 요소를 선택합니다.
- 액션 바에서 애니메이션 아이콘을 클릭합니다.
- (아직 선택하지 않은 경우) 제공된 옵션에서 애니메이션을 선택합니다.
- 사용자 지정을 클릭해 선택한 애니메이션을 조정합니다.
- 강도: 드롭다운을 클릭해 애니메이션 재생 강도를 선택합니다.
- 방향: 애니메이션이 시작하는 방향(예: 시계 방향 또는 오른쪽)을 선택합니다.
- 거리: 슬라이더를 사용해 효과 시작 지점과 종료 지점 간의 거리를 변경합니다.
- 지속 시간: 슬라이더를 사용해 애니메이션 지속 시간을 조정합니다.
- 지연 시간: 슬라이더를 끌어 페이지 로딩과 애니메이션 시작 시점 간의 속도를 조정합니다.
- 속도: 슬라이더를 끌어 효과의 속도를 변경합니다. 숫자가 낮을수록 효과가 더 빨라집니다.
- 이동 축: 요소가 가로, 세로 또는 두 축 모두에서 이동할지 여부를 결정합니다.
- 애니메이션 유형: 스크롤 시 안쪽으로, 바깥쪽으로 또는 연속 애니메이션 유형 중에서 선택합니다.
- 회전 축: 요소가 이동하기 시작하는 기준점을 선택합니다.
- 모션 스타일: 모션의 강도를 완만하게 또는 보통으로 선택합니다.
모바일 사이트에 애니메이션 추가하기
데스크톱과 마찬가지로 모바일 사이트에 애니메이션을 추가해 방문자가 모든 기기에서 매력적인 경험을 즐길 수 있도록 할 수 있습니다. 모바일 애니메이션은 작은 화면과 해상도에 맞게 특별히 설계되어 별도의 노력 없이도 모든 것이 완벽하게 표시됩니다.
참고:
데스크톱에서 추가한 애니메이션은 모바일 사이트에도 표시되지만, 데스크톱 애니메이션을 변경하지 않고도 모바일에서 다른 애니메이션을 선택하거나 애니메이션을 비활성화할 수 있습니다.
모바일에 애니메이션을 추가하려면:
- 에디터로 이동합니다.
- 페이지 오른쪽 상단에서 모바일
아이콘을 클릭합니다. - 해당 요소를 클릭합니다.
- 액션 바에서 애니메이션
아이콘을 클릭합니다. - 제공된 옵션에서 애니메이션을 선택합니다.
