자동으로 재생되는 반복 애니메이션으로 방문자의 주의를 끌어보세요.

.gif(그래픽 인터체인지 포맷)는 짧은 애니메이션을 지원하는 이미지 유형입니다. 애니메이션 .gif는 자동으로 재생되고, 소리가 포함되지 않으며, 일반적으로 반복됩니다.

Google Images 및 giphy.com 같은 사이트를 검색하여 .gif 이미지를 찾거나 서드파티(타사) 소프트웨어를 사용하여 직접 만들 수 있습니다. .gif 파일이 있으면 이미지를 지원하는 사이트 어디에서나 업로드할 수 있습니다.

다음은 애니메이션 .gif의 예입니다.

.gif 파일 추가하기

.gif 파일은 다음을 포함하여 이미지를 추가할 수 있는 사이트의 모든 위치에 업로드할 수 있습니다.

• 배너
• 커버 페이지(7.0 버전)
• 갤러리 블록(7.0 버전)
• 갤러리 페이지(7.0 버전)
• 갤러리 섹션
• 이미지 블록
• 색인(7.0 버전)
• 로고
• 포트폴리오 페이지 및 하위 페이지
• 사이트 배경(7.0 버전)

.gif 파일의 옵션은 정적 이미지와 동일할 것입니다. 예를 들어, 사이트의 배너 이미지가 오버레이 텍스트를 지원하면 텍스트가 .gif 배너 위에 표시될 수 있습니다.

참고: .gif를 기본 제공 이미지 에디터로 편집하거나 이미지 효과를 추가하는 경우, .gif 파일이 정적 .jpg로 변환됩니다.

모범 사례

크기를 작게 유지

.gif가 크면 사이트 속도를 느리게 만들 수 있습니다. 애니메이션 .gif를 사이트에 표시할 크기로 포맷하는 것이 좋습니다. Squrespace의 이미지 모범 사례에 따라 .gif 파일 크기 가이드라인을 준수하세요.

.gif 파일이 파일 크기 제한보다 작더라도, 개별 프레임 수가 많으면 업로드가 불가능할 수 있습니다. 서드파티(타사) 이미지 도구를 사용하여 파일을 압축해 볼 수 있습니다. 이것은 Squarespace 지원 범위를 벗어납니다. .gif 압축한 후 품질이 좋지 않다면, .gif를 비디오로 변환하여 사이트에 비디오를 추가하세요.

주의를 산만하게 하는 이미지 피하기

.gif 파일이 주의를 끌거나 역동적인 움직임을 추가하는 훌륭한 방법이 될 수 있지만, 그 움직임이 산만하게 느껴질 수도 있습니다. 다음과 같은 사용은 피하세요.

• 방문자가 텍스트나 기타 콘텐츠에 집중하기를 원하는 곳에 사용
• 한 영역에서 여러 번 사용(움직임의 양이 거슬릴 수 있음)

팁: .gif를 접근성 좋게 만드는 방법에 대해 알아보려면 오디오, 이미지, 비디오의 접근성을 높이는 방법을 방문하세요.

왜곡이나 이상한 색상을 방지하기 위해 압축 설정 확인

.gif가 특히 색상 그라데이션이나 그림자가 있는 영역에서 왜곡되어 보인다면, 이는 압축 때문일 가능성이 높습니다. .gif 파일은 프레임당 256개의 색상만 포함할 수 있으므로, 이미지 편집 도구는 .gif를 만들 때 색상 수를 줄이기 위해 디더링이라는 프로세스를 사용합니다.

이미지 품질 조정은 Squarespace 지원 범위에 포함되지 않습니다. 소스의 품질이 더 높은 .gif를 사용하여 이미지 편집 도구의 압축 또는 디더링 설정을 조정해 보거나 사용 중인 도구의 도움말 문서를 검토해 보세요.

애니메이션 버튼 생성하기

클릭스루 URL은 이미지를 사이트 내 다른 페이지, 외부 페이지 또는 파일로 연결되는 링크로 변환합니다. 이 링크들은 이미지 블록, 갤러리 블록, 그리고 일부 갤러리 페이지에서 사용할 수 있습니다.

팁: 로고에는 홈페이지로 이동하는 클릭 기능이 내장되어 있습니다.

애니메이션 버튼을 만드는 한 가지 방법이 있습니다.

1. 포스터 이미지 블록을 레이아웃 페이지 등 블록을 지원하는 영역에 추가합니다.
2. 콘텐츠 탭에서 .gif를 업로드합니다.
3. 디자인 탭에서 클릭스루 URL 필드에 링크를 추가합니다. 사이트의 페이지에 연결하는 경우 콘텐츠 링크를 만드세요.
4. 포스터 이미지 블록의 제목이나 부제목을 사용하여 텍스트를 추가합니다.
5. 이미지 블록의 스타일을 지정하고 다른 이미지 블록을 추가하여 크기를 조정합니다.

.gif 대신 비디오 URL 사용하기

페이지 섹션, 배너 또는 커버 페이지에 비디오 배경을 추가하여 애니메이션 .gif와 유사한 효과를 만들 수 있습니다.

• .gif처럼, 비디오 배경은 자동으로 재생되고 반복되며 소리를 포함하지 않습니다.
• .gif 파일을 사용하는 대신에 YouTube 비디오 같은 비디오 URL을 연결합니다.
• 비디오 배너는 일부 7.0 버전 템플릿에서만 지원되지만, 페이지 섹션의 비디오 배경은 모든 7.1 버전 사이트에서 지원되며, 커버 페이지의 비디오 배경은 모든 7.0 버전 템플릿에서 지원됩니다.

자세한 내용을 확인하려면 배경 비디오 추가하기를 방문하세요.