Studio 에디터: 버튼 아이콘에 애니메이션 추가하기
4 분
페이지 메뉴
- 사전 디자인된 아이콘 애니메이션 추가하기
- 사용자 지정 아이콘 애니메이션 생성하기
- 아이콘 디자인하기
- 사용자 지정 아이콘 요구 사항 및 가이드라인
스타일 버튼을 사용한다면, 아이콘 애니메이션을 추가해 시선을 사로잡는 효과를 만들고, 클라이언트의 사이트를 작은 부분까지 인터랙티브하게 만들어 보세요.
기성 효과를 적용하기 위해 Wix Studio의 사전 디자인된 다양한 애니메이션 아이콘 중 선택하거나 시작 및 종료 아이콘을 결합해 사용자 지정 애니메이션을 제작할 수 있습니다. 개성을 더하기 위해 나만의 SVG 파일을 업로드할 수도 있습니다.
버튼 아이콘 애니메이션은 어떻게 작동하나요?
사전 디자인된 아이콘 애니메이션 추가하기
빠른 편집을 위한 눈에 띄는 아이콘 애니메이션 중 하나를 선택하세요. 원하는 효과를 선택한 후에는 지속 시간을 설정할 수 있습니다.
사전 디자인된 애니메이션 아이콘을 추가하려면:
- 에디터로 이동합니다.
- 해당 스타일 버튼을 클릭합니다.
- 설정을 클릭합니다.
- 아이콘 유형 아래에서 애니메이션을 클릭합니다.
- 다음에 수행할 작업을 선택합니다.
- 아이콘 선택 아래에서 원하는 아이콘을 선택합니다.
- 추가
아이콘을 클릭해 미디어 관리자에서 모든 애니메이션 아이콘을 탐색합니다.
- (선택사항) 슬라이더를 끌어 애니메이션 지속 시간을 변경합니다.
도움말:
사전 디자인된 아이콘에 마우스오버해 애니메이션을 미리보기하세요.
사용자 지정 아이콘 애니메이션 생성하기
클라이언트 사이트의 버튼에 사용할 아이콘 애니메이션을 직접 제작해 보세요. 시작 아이콘과 종료 아이콘을 모두 선택하면 클라이언트의 사이트에 딱 맞는 완벽한 애니메이션을 제작할 수 있습니다. Wix의 아이콘을 결합하거나 나만의 SVG 파일 2개를 사용할 수도 있습니다.
사용자 지정 애니메이션을 생성하려면:
- 에디터로 이동합니다.
- 해당 스타일 버튼을 클릭합니다.
- 설정을 클릭합니다.
- 아이콘 유형 아래에서 애니메이션을 선택합니다.
- 추가
아이콘을 클릭하고 추가하기를 선택합니다. - 시작 및 종료 아이콘을 설정합니다.
- 시작 아이콘에서 추가
아이콘을 클릭합니다. - Wix 미디어 탭에서 파일을 선택하거나 사이트 파일에서 직접 파일을 업로드 또는 선택합니다.
- 파일 선택을 클릭합니다.
- 종료 아이콘에 대해 a-c 단계를 반복합니다.
- 시작 아이콘에서 추가
- (선택사항) 상단에서 뒤로를 클릭한 후 슬라이더를 사용해 지속 시간을 설정합니다.
도움말:
- 나만의 파일과 Wix 아이콘을 결합할 수 있습니다.
- 미리보기 상자를 사용해 효과가 원하는 대로 표시되는지 확인하세요.
아이콘 디자인하기
디자인 비전, 클라이언트의 고유한 브랜딩, 특정 버튼에 맞게 아이콘을 조정하세요. 아이콘의 크기를 조정하고 색상을 변경하고, 회전해 버튼이 더 동적으로 느껴지도록 할 수 있습니다.
버튼의 마우스오버 상태를 디자인해 상호 작용이라는 레이어를 추가할 수 있습니다. 예를 들어, 아이콘을 회전하거나 마우스오버 시 색상을 이동하는 등의 작업을 수행할 수 있습니다.
아이콘을 디자인하려면:
- 에디터로 이동합니다.
- 해당 스타일 버튼을 클릭합니다.
- 에디터 오른쪽 상단에서 속성 열기
화살표를 클릭합니다.
- 디자인 아래에서 기본 또는 마우스오버 중 해당 상태를 선택합니다.
- 디자인 아래에서 아이콘을 클릭합니다.
- 제공되는 옵션을 사용해 아이콘을 디자인합니다.
- 아이콘의 크기를 조정합니다.
- 아이콘 색상을 변경하고 투명도를 조정합니다.
- 아이콘을 다른 각도로 회전합니다.
사용자 지정 아이콘 요구 사항 및 가이드라인
사용자 지정 아이콘에는 몇 가지 요구 사항이 있습니다. 내 파일을 업로드하고 사용하려면, 파일이 다음 조건을 충족해야 합니다.
- 검은색(#000000)만 해당
- SVG 형식
- 250KB 이하
참고:
Adobe 일러스트레이션 또는 Figma에서 SVG 파일을 생성한 경우, 내보내기 전 컴파운드 경로로 변환해야 합니다.
아이콘 생성 시에는 염두에 두어야 할 몇 가지 모범 사례가 있습니다. 가장 원활한 애니메이션을 위해 아래 가이드라인을 따르는 것이 좋습니다.
- 시작 및 종료 아이콘이 동일한 시작 위치에 있는지 확인합니다.
- 두 아이콘의 포인트 수가 동일한지 확인합니다.
- 잘라내기 없이 채워진 아이콘을 사용합니다.
- 하나의 큰 모양이 아닌 여러 개의 작은 모양을 사용해 SVG 아이콘을 만듭니다.
- 품질을 유지하기 위해 크기 조정 시 모양의 크기를 조정합니다.
- 프로그램의 픽셀 보기를 사용해 아트보드의 픽셀과 정렬되도록 합니다.
- 아이콘이 모양이 매우 다른 경우, 더 원활한 전환을 위해 다음 도움말을 참고할 수 있습니다.
- 아이콘의 변형된 버전을 사용합니다(시작 아이콘이 종료 아이콘으로 약간 변형되었으며 그 반대의 경우도 마찬가지입니다).
- 한 아이콘의 모양을 다른 아이콘으로 숨깁니다(예: 종료 아이콘에서 시작 아이콘의 모양 숨기기).
중요!
Wix는 Wix 외부에서 생성한 SVG 파일에 대한 지원 또는 문제 해결을 제공하지 않습니다.