애니메이션 활용하기

애니메이션은 텍스트, 이미지 등의 요소에 시각적 효과를 적용하는 기능입니다.

애니메이션 효과를 적용하여 브랜드의 특색을 자연스럽게 나타내고, 특정 콘텐츠에 집중 할 수 있도록 디자인 구성을 할 수 있다는 장점을 가지고 있습니다.

큐샵에서는 에디터의 설정, 로티 블록, 코드 등 다양한 방법으로 요소에 애니메이션 효과를 적용하여 사이트 디자인을 할 수 있습니다.

애니메이션 효과를 적용하는 자세한 방법은 아래 가이드를 참고 부탁드립니다.

1. 속성패널 사용하기

도형, 이미지, 텍스트 등 다양한 블록에 애니메이션 설정을 할 수 있습니다.

블록을 선택한 뒤 에디터 오른쪽 [속성패널 > 고급] 설정을 통해 슬라이드, 페이드 등 다양한 애니메이션을 적용 할 수 있으며 여러 블록의 동작시간을 서로 다르게 설정하여 다양한 시각적 효과를 만들어 줄 수 있습니다.

애니메이션 설정의 자세한 방법은 [속성패널] 가이드를 참고 부탁드립니다.

블록에 적용 된 애니메이션 효과는 PC와 모바일에서 동일하게 작동 됩니다.

2. 로티 블록 사용하기

로티(Lottie)는 JSON기반의 애니메이션 파일을 제공하는 플랫폼 입니다.

로티에서 제공하는 다양한 이미지를 활용하여, 사이트에 생동감을 부여하고 사이트의 정보를 쉽게 이해 시키는 등 많은 장점을 가지고 있습니다.

로티 블록을 사용하는 자세한 방법은 [로티블록] 가이드를 참고 부탁드립니다.

3. 코드 사용하기

큐샵은 코드블록, 커스텀 코드 에디터 등을 통해 사이트 내 코드를 통해 디자인 구성을 할 수 있습니다.

사용자의 역량에 따라 보다 다양한 종류의 애니메이션을 만들어 사용을 할 수 있습니다.

[Claude / ChatGPT]등 AI 플랫폼을 통해 애니메이션 적용에 필요한 코드를 쉽게 만들어 보실 수 있습니다.

커스텀 코드를 사용하는 자세한 방법은 [커스텀 코드 에디터] 가이드를 참고 부탁드립니다.

커스텀 코드는 큐샵에서 제공하는 기능이 아닌 직접 코드를 작성하여 사용을 해야하기때문에 디자인에 필요한 애니메이션 코드 안내 및 코드로 인해 발생하는 현상에 대해서는 안내가 불가능합니다.