header-logo
Wix를 사용해해 사이트와 비즈니스를 구축하는 방법을 알아보세요.
직관적인 Wix 기능을 사용해 사이트를 디자인하고 관리하세요.
구독, 플랜 및 인보이스를 관리하세요.
비즈니스를 운영하고 회원과 소통하세요.
도메인을 구매하고 사이트에 연결, 이전하는 방법을 알아보세요.
비즈니스 및 웹 존재감을 키울 수 있는 도구를 확인하세요.
SEO 및 마케팅 도구로 가시성을 높이세요.
보다 효율적으로 작업할 수 있는 고급 기능을 활용하세요.
해결책을 찾고, 알려진 문제에 대해 알아보거나 문의하세요.
placeholder-preview-image
강좌 및 튜토리얼을 통해 실력을 향상시키세요.
웹 디자인, 마케팅 등에 대한 팁을 확인하세요.
검색 엔진에서 유기적 사이트 트래픽을 증가시키는 방법을 알아보세요.
풀스택 플랫폼을 활용해 맞춤형 사이트를 구축하세요.
목표 달성에 도움을 줄 전문가를 만나보세요.
placeholder-preview-image

Studio 에디터: 루프 애니메이션 추가하기

4 분
페이지 메뉴
  • 루프 애니메이션 추가하기
  • 루프 애니메이션 사용자 지정하기
  • 루프 애니메이션 제거하기
지속적으로 반복되는 애니메이션으로 디자인에 움직이는 느낌을 더하세요. 방문자가 관심을 갖기를 바라는 모든 요소에 루프 애니메이션을 추가할 수 있습니다. 일부는 더 미세하며, 일부는 진정한 관심을 끌 수 있습니다.
다른 중단점에 있는 애니메이션은 어떻게 되나요?
데스크톱 중단점에 애니메이션을 추가하면 더 작은 중단점까지 계단식으로 표시됩니다. 하지만, 중단점별로 다른 애니메이션을 설정하거나 동일한 애니메이션을 사용자 지정할 수 있습니다.  
Wix Studio 아카데미로 이동해 추가 Wix Studio 웨비나, 튜토리얼 및 강좌를 확인하세요. (영문)

루프 애니메이션 추가하기

특정 요소 및 섹션, 또는 사이트 페이지 전체에 루프 애니메이션을 추가할 수 있습니다.

루프 애니메이션을 추가하려면

  1. 해당 요소를 선택합니다.
  2. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
Studio 에디터에서 속성 패널을 여는 스크린샷
  1. 애니메이션 및 효과 탭을 클릭합니다.
  2. 반복 재생 아래에서 + 추가를 클릭합니다.
  3. 목록에서 애니메이션을 선택합니다.
    도움말: 애니메이션에 마우스오버해 표시되는 방식을 미리 확인할 수 있습니다. 
사용 가능한 루프 애니메이션과 해당 애니메이션에 마우스오버하면 미리보기가 표시되는 방법을 보여주는 GIF

루프 애니메이션 사용자 지정하기

애니메이션을 선택한 후에는 원하는 방식으로 작동하도록 설정하세요. 애니메이션 지속 시간 및 강도 설정, 반복 사이에 지연 시간을 추가하는 등의 작업을 수행할 수 있습니다. 

루프 애니메이션을 사용자 지정하려면:

  1. 해당 요소를 선택합니다.
  2. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
Studio 에디터에서 속성 패널을 여는 스크린샷
  1. 애니메이션 및 효과 탭을 클릭합니다.
  2. 변경하고자 하는 애니메이션을 클릭합니다. 
  3. 애니메이션 조정을 클릭해 설정을 변경합니다.
    • 방향: 애니메이션이 나오는 방향을 선택합니다. (예: 왼쪽에서, 위에서)
    • 강도: 애니메이션을 더 은은하게 또는 공격적으로 만듭니다. 
    • 지속 시간: 애니메이션의 지속 시간을 변경합니다.
    • 반복 지연: 애니메이션의 무한 반복 사이에 지연 시간(초)을 추가합니다.  
    • Ease 효과: 애니메이션이 서서히 나타나거나 사라지는 정도를 선택합니다.
참고:
사용 가능한 설정은 선택한 애니메이션에 따라 달라집니다.
루프 애니메이션에 사용할 수 있는 조정 옵션의 스크린샷

루프 애니메이션 제거하기

속성 패널에서 언제든지 루프 애니메이션을 제거할 수 있습니다. 

루프 애니메이션을 제거하려면:

  1. 해당 요소를 선택합니다.
  2. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
Studio 에디터에서 속성 패널을 여는 스크린샷
  1. 애니메이션 및 효과 탭을 클릭합니다.
  2. 애니메이션에 마우스오버한 후 추가 작업 아이콘을 클릭합니다.
  3. 제거를 클릭합니다.
속성 패널에서 루프 애니메이션 제거하기
Studio 에디터에서 속성 패널을 여는 스크린샷
사용 가능한 루프 애니메이션과 해당 애니메이션에 마우스오버하면 미리보기가 표시되는 방법을 보여주는 GIF
Studio 에디터에서 속성 패널을 여는 스크린샷
루프 애니메이션에 사용할 수 있는 조정 옵션의 스크린샷
Studio 에디터에서 속성 패널을 여는 스크린샷
속성 패널에서 루프 애니메이션 제거하기