Studio 에디터: 미디어 배경에 WebGL 효과 추가하기
8 분
페이지 메뉴
- WebGL 효과 추가하기
- WebGL 효과 사용자 지정하기
- WebGL 효과 제거하기
- 자주 묻는 질문
미디어 배경을 멋진 작품으로 만들어주는 WebGL 효과로 클라이언트 프로젝트를 완전히 변화시켜 보세요. 이러한 효과는 최적의 성능을 보장하는 동시에 사이트 방문자의 참여를 유도합니다. 다양한 프리셋 중 선택한 후 속성을 조정하고 스크롤 시 자동으로 활성화할지, 방문자의 마우스 움직임을 통해 활성화할지 여부를 결정하세요.

WebGL 효과 추가하기
속성 패널로 이동해 섹션 미디어 배경에 WebGL 효과를 추가하세요. 달성하고자 하는 디자인과 상호 작용에 따라 다양한 프리셋 중에서 선택할 수 있습니다.
참고:
배경 스크롤 효과와 WebGL 효과를 결합할 수는 없습니다.
WebGL 효과를 추가하려면:
- 해당 섹션의 배경에 [이미지 또는 동영상을 추가](data-composite="true" href="https://support.wix.com/ko/article/studio-에디터-섹션-배경-변경하기" target="_blank"합니다.
참고: WebGL 효과는 GIF 배경 또는 타일로 맞추기 설정된 미디어 배경에는 지원되지 않습니다. - 캔버스에서 섹션을 선택합니다.
- WebGL 효과를 적용합니다.
- 에디터 오른쪽 상단에서 속성 열기
- 애니메이션 및 효과 탭을 클릭합니다.
- WebGL 효과 아래에서 + 추가를 클릭합니다.
- 목록에서 효과를 선택합니다.
- 에디터 오른쪽 상단에서 속성 열기
도움말:
프리셋 아이콘에 마우스오버해 표시되는 방식을 미리 확인할 수 있습니다. 에디터에서 미리보기 버튼을 활성한 후 애니메이션 조정을 클릭해 캔버스에서 효과를 미리 볼 수도 있습니다.

WebGL 효과 사용자 지정하기
WebGL 효과를 사용자 지정해 미묘한 변형이나 과감하고 역동적인 동작을 추가하는 등 모양과 동작을 미세하게 조정할 수 있습니다. 각 효과는 강도, 속도 및 방향과 같은 조정 가능한 설정과 함께 제공되어 콘텐츠와 상호 작용하는 방식을 완전히 제어할 수 있습니다.
특정 효과의 경우, 자동재생, 스크롤, 마우스 이동, 여러 작업의 조합 중 클라이언트의 사이트에서 트리거되는 요소를 결정할 수도 있습니다.
WebGL 효과를 사용자 지정하려면:
- 해당 섹션을 선택합니다.
- 에디터 오른쪽 상단에서 속성 열기
- 애니메이션 및 효과 탭을 클릭합니다.
- 변경하고자 하는 효과를 클릭합니다.
- 애니메이션 조정을 클릭해 설정을 변경합니다.
노이즈 잔상
유동화
슬릿스캔
RGB orb
잔물결
RGB 분리
패널 하단에 있는 에디터에서 미리보기 버튼이 기본적으로 활성화되어 있으므로 캔버스에서 효과가 작동하는 것을 확인할 수 있습니다.

WebGL 효과 제거하기
이전에 섹션 배경에 추가한 WebGL 효과는 언제든지 제거할 수 있습니다.
WebGL 효과를 제거하려면:
- 해당 섹션을 선택합니다.
- 에디터 오른쪽 상단에서 속성 열기
- 애니메이션 및 효과 탭을 클릭합니다.
- WebGL 효과 옆 추가 작업 아이콘을 클릭합니다.
- 제거를 선택합니다.

자주 묻는 질문
아래 질문을 클릭해 Studio 에디터의 WebGL 효과에 대한 자세한 내용을 확인하세요.
WebGL 효과는 터치스크린 기기에서 작동하나요?
에디터에서 WebGL 효과 추가 옵션이 회색으로 표시되는 이유는 무엇인가요?