사이트에서 이미지 크기 조정과 관련된 팁을 살펴보세요.

종횡비란 이미지 너비와 높이의 비율적 관계를 말합니다. 종횡비는 본질적으로 이미지의 모양을 형성합니다.

종횡비는 3:2처럼 너비와 높이를 의미하는 공식으로 표시됩니다.

예를 들어, 정사각형 이미지의 종횡비는 1:1입니다. 정사각형은 높이와 너비가 같기 때문입니다. 이미지의 크기는 500×500px이 될 수도 있고 1500×1500px이 될 수도 있지만 종횡비는 1:1로 유지되죠.

또 다른 예로, 증명사진 스타일 이미지의 비율이 2:3이라고 치면 이 종횡비에서 높이는 너비보다 1.5배 깁니다. 따라서 이미지의 크기는 500×750px, 1500×2250px 등이 될 수 있습니다.

비디오를 시청하십시오

종횡비와 Squarespace

다양한 스타일 옵션에서 블로그 게시물의 대표 이미지, 갤러리 이미지, 제품 등 다양한 이미지 유형의 종횡비를 선택할 수 있는 옵션을 제공합니다.

• 예를 들어, 블로그 게시물 대표 이미지의 종횡비로 3:2를 선택하면 블로그 페이지에 표시되는 모든 블로그 게시물 대표 이미지가 이 비율로 잘립니다.
• 이미지는 다양한 브라우저 너비에 맞게 확대되거나 축소되기 때문에 정확한 크기(예: 750×500px)로 특정할 수는 없지만 모양은 항상 동일하게 유지됩니다.
• 동일한 종횡비를 가진 이미지로 시작하면 이미지가 어떻게 잘릴지 예측하는 데 도움이 됩니다.
• 자르기 핸들을 사용해 일부 이미지 블록의 높이를 변경할 수 있습니다. 이미지 자르기와 관련된 더 자세한 정보는 자르기 문제 해결 페이지를 참고하세요.

사용할 수 있는 종횡비 옵션은 사용 중인 버전과 템플릿에 따라 다릅니다. 다음은 Brine 템플릿의 블로그 페이지 예시입니다.

일부 스타일 조정 기능은 종횡비를 무시할 수 있는 옵션을 제공합니다. 이 경우, 이미지는 원래 모양을 유지합니다. 예를 들어, Skye 템플릿의 블로그 페이지에서는 이미지 자르기: 없음을 선택할 수 있습니다.

종횡비에 맞춰 자르기

내장된 스타일 옵션을 사용할 수도 있지만 이미지를 특정 종횡비로 직접 자르고 싶은 경우가 있을 수 있습니다. 예를 들어, 동일한 종횡비를 가진 제품 이미지를 사용하면 이러한 이미지는 사이트에서 모두 동일한 비율로 잘려 표시됩니다.

옵션 1 - 사전 설정된 모양으로 자르기

내장된 이미지 편집기를 사용해 이미지를 특정 모양으로 자르세요. 편집기를 연 후 자르기 도구를 사용해 사전 설정된 종횡비 중 하나를 선택하세요.

팁: 이미지를 업로드하기 전에 이미지를 자르고 싶은 경우, 일부 서드파티(타사) 도구에서 미리 설정된 종횡비 옵션을 사용할 수 있습니다.

옵션 2 - 사용자 지정 크기

내장된 이미지 편집기에서 제공되지 않는 맞춤형 종횡비로 이미지를 자르고 싶다면 서드파티(타사) 편집기를 사용하세요.

이미지의 종횡비가 같더라도 크기까지 동일할 필요는 없기 때문에 정확한 크기를 맞추려고 시도하는 것보다 특정 종횡비로 자르는 것이 더 좋습니다. 최상의 결과를 얻으려면 더 긴 면을 기준으로 짧은 면을 잘라내세요.

• 예를 들어, 1500×1200px의 이미지를 3:1의 종횡비로 만들고 싶다면 짧은 쪽을 잘라내 이미지를 1500×500px로 만드세요.
• 긴 면을 늘리지 마세요. 그러면 화질이 흐려질 수 있습니다.

짧은 면의 길이를 계산하고 싶다면 이 계산기와 같은 종횡비 계산기를 사용하세요. 참고로 이 계산기는 Squarespace 지원 범위에 포함되지 않는 서드파티(타사) 애플리케이션입니다.

1. 컴퓨터에서 이미지의 크기를 확인합니다.
2. 종횡비 계산기에서 왼쪽에 있는 W1과 H1에 값을 입력해 현재 종횡비를 확인합니다.
3. 원하는 비율을 찾을 때까지 짧은 면을 조정합니다.

페이지 배너

페이지 배너는 종횡비나 크기가 미리 설정되어 있지 않습니다. 배너는 다양한 브라우저에 맞게 늘어나고 모양이 변하기 때문입니다. 다음 사항을 참고하세요.

• 배너에 이미지를 업로드하기 전에 배너 이미지 서식 지정 관련 팁을 살펴보세요.
• Squarespace에 내장된 이미지 편집기를 사용해 이미지를 자르고 싶다면 자르기 문제 해결 페이지에서 배너 자르기 관련 도움말을 살펴보세요.
• 대부분의 템플릿에서 배너 크기를 변경할 수 있는 옵션이 제공되며 여기에는 높이도 포함됩니다.
• Montauk이나 Skye 템플릿처럼 높이가 고정된 배너의 경우, 모든 배너 이미지의 종횡비가 같아야 균일한 모양을 유지할 수 있습니다.

제품 이미지의 종횡비

제품 이미지는 잠재 고객들에게 매력적으로 보여야 합니다. 이를 위해 스토어 페이지와 제품 상세 정보 페이지에서 제품 이미지의 종횡비를 설정할 수 있습니다. 제품 이미지 스타일을 지정하는 방법은 제품 이미지 페이지를 참고하세요.

제품 이미지가 잘린 것처럼 보인다면 자르기 문제 해결 페이지를 참고하세요.

비디오의 종횡비

사이트에 직접 업로드하는 동영상의 경우, 동영상의 종횡비 비율은 업로드한 파일의 종횡비 비율과 동일하게 설정됩니다. 대부분의 업로드된 비디오는 16:9 화면 비율의 동영상 플레이어에 표시됩니다. 따라서 화면 비율이 16:9가 아닌 비디오의 측면에는 검은색 막대나 빈 공간이 표시될 수 있습니다. 섹션 배경에 업로드된 비디오는 배경 크기에 맞게 자르고 확대/축소됩니다.

임베드된 비디오의 경우, 동영상 호스팅 서비스의 섬네일 이미지가 비디오의 종횡비를 결정합니다. 비디오 블록을 행으로 배치하거나 그리드 갤러리를 사용할 경우, 행의 높이가 불규칙할 수 있습니다.

갤러리 블록과 갤러리 페이지(버전 7.0만 해당)를 사용 중이고 비디오가 정상적으로 표시되지 않는 경우, 아래 설명에 따라 사이트 스타일을 변경하세요.

• 갤러리 블록의 경우, 이미지 자르기를 활성화해 동영상에 일관된 종횡비를 적용하세요.
• 갤러리 페이지의 경우, 종횡비를 자동이 아닌 다른 옵션으로 설정하세요.

종횡비에 따른 백분율

Brine 템플릿 그룹에서 색인 그리드 갤러리의 경우, 종횡비 조정 기능이 슬라이더로 조정할 수 있는 백분율로 표시됩니다.

• 슬라이더에는 0에서 160까지의 값이 표시됩니다.
• 슬라이더를 100으로 설정하면 정사각형 이미지가 됩니다.
• 값을 100 미만으로 설정하면 가로 이미지가 됩니다.
• 값을 100보다 크게 설정하면 세로 이미지가 됩니다.

정확한 종횡비를 계산하려면 높이를 너비로 나눠보세요. 예를 들면 다음과 같습니다.

• 2:3 종횡비: 3을 2로 나누면 1.5이므로 슬라이더를 150으로 맞춥니다.
• 3:2 종횡비: 2를 3으로 나누면 0.667이므로 슬라이더 옆에 66.7을 입력합니다.

종횡비 예시

다음은 보편적으로 사용되는 종횡비와 각 종횡비가 적용된 이미지입니다.