이미지 블록에 눈에 띄는 시각 효과를 추가하여 방문자의 관심을 끌어보세요.

사이트에서 이미지 블록에 효과를 추가하여 이미지에 더욱 스타일리시한 모습을 줄 수 있습니다. 일부 효과는 애니메이션을 추가해 이미지가 항상 움직이게 만들고, 일부 효과는 방문자가 사이트에서 해당 섹션을 스크롤할 때만 표시됩니다. 이러한 효과를 적용하는 방법은 이미지를 플루이드 엔진 또는 클래식 에디터 섹션에 추가했는지 여부에 따라 다릅니다.

시작하기 전에

• 이미지 효과는 단일 이미지에 애니메이션을 추가합니다. 버전 7.1을 사용 중이라면, 사이트 전체 애니메이션을 통해 전체 사이트에 애니메이션을 적용할 수 있습니다.
• 개별 이미지 블록의 애니메이션은 사이트 전체 애니메이션을 무시합니다.
• 편집된 .gif 파일에 이미지 효과를 추가하면 정적 .jpg로 변환됩니다.
• 사이트에 시각 효과를 추가하기 전에 접근성 리소스를 검토하는 것이 좋습니다. 

플루이드 엔진에서 이미지 블록에 효과 적용

플루이드 엔진 섹션의 이미지 블록에 이미지를 추가한 후, 이미지를 더블 클릭하면 편집기가 열립니다. 그런 다음:

1. 디자인을 클릭한 다음 이미지 효과를 클릭합니다.
2. 메뉴에서 효과를 선택합니다. 효과에 적용한 모든 변경 사항은 사이트 미리 보기에 표시됩니다.
3. 저장을 클릭하면 변경 사항을 저장하고 계속 편집할 수 있으며, 종료 후 저장을 클릭하면 편집기를 닫습니다.

이미지 효과 스타일

다음 이미지 효과 중에서 선택할 수 있습니다.

• 없음 - 오버레이 투명도 설정을 제외하고 다른 효과는 적용하지 않음
• Liquid - 이미지에 물결 효과를 줍니다
• 필름 그레인 - 이미지에 애니메이션 정적 오버레이 추가
• 패럴렉스 - 방문자가 스크롤할 때 이미지가 움직임
• 굴절된 선 - 직선 패턴에 따라 이미지를 굴절시킴
• 굴절된 원 - 원형 패턴에 따라 이미지를 굴절시킴

세부 정보 패널에서 이미지 효과를 클릭한 후 설정 아이콘을 클릭하여 효과를 사용자 지정하세요.

세부 정보 패널에서 카테고리를 클릭하여 드롭다운 메뉴를 펼치고 다음과 같은 추가 옵션을 확인하세요.

• 효과의 크기와 모양 사용자 지정
• Liquid와 같은 동작으로 효과의 속도와 방향 편집

이미지 효과의 유형에 따라 효과의 핵심 구성 요소를 변경할 수 있는 다양한 설정이 표시됩니다. 설정을 무작위로 조합해 실험해 보려면 효과를 선택할 때 셔플 아이콘을 클릭하거나 효과의 세부 정보 패널에서 무작위를 클릭하세요.

각 효과를 테스트해보며 효과가 어떻게 보이고 사이트에서 어떻게 작동하는지 살펴보는 것을 권장합니다.

클래식 에디터에서 이미지 블록에 효과를 적용합니다.

클래식 에디터 섹션의 이미지 블록에 이미지를 추가한 후, 이미지를 더블 클릭하면 편집기가 열립니다. 그런 다음:

1. 디자인을 클릭한 다음 애니메이션을 클릭합니다.
2. 목록에서 효과를 선택하여 이미지와 텍스트에 적용하세요. 옵션을 선택하면 페이지에서 미리 보기가 표시됩니다.

블록 애니메이션 스타일

다음 설정 중에서 선택하여 전체 블록을 애니메이션하세요.

• 없음 - 사이트 전체에 애니메이션 설정이 있어도 애니메이션이 없습니다
• 사이트 기본값 - 블록이 사이트 전체 애니메이션 설정과 일치합니다
• 페이드 인 - 블록이 서서히 표시됩니다
• 위로 슬라이드 - 블록이 위로 슬라이드됩니다
• 수평 클립 - 블록을 수평 레이어로 로드합니다
• 수직 클립 - 블록이 수직 레이어로 로드됨
• Tilt up - 블록이 위쪽으로 기울어지며 확대됩니다.
• 아래로 기울이기 - 블록이 아래쪽으로 기울어지며 확대됩니다.
• 포커스 인 - 블록이 흐릿하게 보이다가 초점이 맞춰집니다.
• 충돌 - 이미지와 텍스트가 양쪽에서 안쪽으로 슬라이드됩니다.
• 리빌 - 이미지와 텍스트가 중앙에서 바깥쪽으로 슬라이드됩니다.
• 사용자 지정 - 이미지와 텍스트의 애니메이션을 독립적으로 설정하세요.

사용자 지정을 클릭하여 이미지와 텍스트에 독립적으로 애니메이션을 적용하고 다음 설정 중에서 선택하세요:

• 없음
• 페이드 인
• 위로 슬라이드
• 아래로 슬라이드
• 왼쪽에서 슬라이드
• 오른쪽에서 슬라이드
• 포커스 인

다음은 이러한 설정을 사용하여 만든 콜라주 이미지 블록의 예입니다.

• 애니메이션 - 사용자 지정
• 이미지 애니메이션 - 오른쪽에서 슬라이드
• 텍스트 애니메이션 - 왼쪽에서 슬라이드

문제 해결

이미지 효과가 사이트에 표시되지 않는 경우 다음 사항에 유의하세요.

• ​​콘텐츠가 애니메이션화되지 않는 경우, 지원되는 브라우저를 사용하고 있는지 확인하세요.
• 이미지 효과는 WebGL을 지원하는 브라우저와 기기에서만 표시됩니다. WebGL은 기기의 그래픽 프로세서와 함께 작동하는 도구입니다. 브라우저가 이 기능을 지원하는지 테스트해 보려면 get.webgl.org로 이동하세요. 브라우저가 WebGL을 지원하지 않으면 섹션 배경은 정적으로 유지됩니다.

팁: 사이트가 버전 7.1을 사용 중인 경우 방문자는 기기 설정을 통해 일부 애니메이션 기능을 끌 수 있습니다. 이렇게 하면 사이트를 방문할 때 움직임이 줄어듭니다. 예를 들어 Mac 사용자가 기기에서 화면 모션을 줄이도록 선택하면, 이미지 블록 또는 배경 이미지에 대해 활성화한 애니메이션이 해당 방문자에게 애니메이션으로 표시되지 않습니다.

기타 애니메이션 및 효과

사이트 버전과 효과를 추가하는 위치에 따라 배너 이미지, 배경 비디오 또는 섹션 배경 이미지와 같은 대안을 사용하여 이미지에 유사한 효과와 애니메이션을 적용할 수 있습니다.

각 유형에 대해 자세히 알아보려면 링크된 가이드를 참조하세요.