이미지 업로드 요구 사항과 모범 사례를 살펴보세요.

Squarespace에서는 이미지의 웹 표시 서식을 지정하는 방법이 직관적입니다. Squarespace는 업로드된 이미지의 변형을 7가지 생성해 다양한 화면 크기에서 최적의 디스플레이를 보장합니다.

이 안내서에서 웹에서 이미지가 어떻게 표시되고, Squarespace의 이미지 요구 사항이 무엇인지 살펴보고, 이미지 서식을 어떻게 지정하는지 알아보세요. 문제 해결 단계를 보려면 이미지 업로드 및 서식 문제 해결을 방문하세요.

원본 파일이 손실될 위험을 줄이려면 사이트에 이미지를 업로드한 후 모든 이미지 파일을 컴퓨터에 보관하세요.

팁: 고품질의 잘 배치된 이미지로 사이트를 돋보이게 만드세요. 자세한 내용을 알아보려면 매력적인 이미지 선택 가이드를 방문하세요.

비디오를 시청하십시오

웹에서 이미지가 표시되는 방법

웹사이트에 이미지가 표시되는 방식에 영향을 주는 몇 가지 요인은 다음과 같습니다.

• 이미지 파일 사양 - 이미지 요구 사항을 검토하여 사이트에 이미지를 업로드할 수 있는지 확인하세요. 사이트에 업로드된 모든 이미지는 WebP 형식으로 변환되도록 기본 설정되어 있습니다.
• 이미지 너비 - 너비가 좁은 이미지는 모바일 기기에서는 보기 좋지만, 컴퓨터에서는 흐릿하게 보일 수 있습니다. 컴퓨터 화면이 모바일 기기보다 더 넓기 때문입니다.
• 이미지 모양 - 이미지의 높이와 너비 간의 관계를 의미하며, 종횡비라고도 합니다. 갤러리에 추가된 이미지는 일반적으로 모든 이미지의 모양이 비슷할 때 가장 깔끔하게 표시됩니다. 더 자세한 정보는 종횡비 이해하기 페이지를 참고하세요. 여기에서 일반적인 종횡비의 예시도 살펴볼 수 있습니다.
• 이미지 컨테이너와 자르기 - 사이트의 모든 이미지는 컨테이너에 담겨 있습니다. 컨테이너는 페이지의 다른 콘텐츠와 관련해 이미지가 어떻게 표시될 것인지를 제어하는 보이지 않는 상자를 말합니다. 예를 들어, 배너에는 직사각형 컨테이너가 있습니다. 이미지가 잘리는 것을 최소화하려면 이미지 모양이 컨테이너의 모양과 일치하도록 해야 합니다. 더 자세한 정보는 자르기 관련 문제 해결 페이지를 참고하세요.
• 반응형 디자인 - 모든 Squarespace 사이트에는 방문자의 기기에 따라 이미지 크기를 자동으로 조정하는 반응형 디자인이 있습니다.

이미지 요구 사항

사이트에 이미지를 업로드하기 전에 이미지가 Squarespace의 이미지 요구 사항에 부합하는지 확인하세요. 이미지를 업로드한 후 이미지 파일 자체를 변경하는 것은 불가능하며, 내장된 이미지 편집기를 사용해 이미지의 모양만 변경할 수 있습니다. 이미지 속성을 변경하려면 컴퓨터에서 이미지 서식을 변경한 후 다시 업로드하세요.

이미지 속성	사양	노트
파일 유형	.jpg, .gif, .png, .webp만 가능	.pdf, .psd, 및 .doc 파일은 호환되지 않습니다. Squarespace 이메일 캠페인은 .webp 형식을 지원하지 않습니다.
파일 크기	20MB 제한	사이트가 빠르게 로드되도록 하려면 500KB 이하의 이미지를 업로드하는 것을 권장합니다.
파일 이름	문자, 숫자, 밑줄, 하이픈만 사용하세요.	악센트 부호가 있는 문자, 물음표, 퍼센트 기호 및 앰퍼샌드는 업로드되지 않거나 예기치 않은 문제를 일으킬 수 있습니다.
이미지 너비	이미지 대부분의 경우, 이상적인 너비는 2500px입니다.	너비가 2500px인 이미지를 업로드하면 Squarespace가 생성하는 모든 유형의 크기 조정된 이미지를 사용할 수 있고, 업로드 시간도 최소화됩니다. 너비가 이보다 좁은 이미지를 업로드해 사이트에 표시될 최대 해상도를 제한할 수도 있습니다. 이 방식은 일부 기기에서 사이트 로드 시간을 단축하고 방문자가 다운로드할 수 있는 이미지 화질을 제한하는 데는 유용하지만, 너비가 1500px 미만인 이미지는 흐릿하게 보일 수 있습니다. 사이트 로고, 브라우저 아이콘, 이메일 캠페인의 너비를 다르게 설정할 것을 권장합니다.
해상도	120MP(메가픽셀) 제한	이미지 해상도를 찾으려면 이 계산기를 사용하거나 치수를 곱하고 1백만으로 나누세요. 예를 들어, 1500픽셀 x 1650픽셀의 이미지는 2.47메가픽셀입니다.
색상 모드	RGB(빨강, 녹색, 파랑)	CMYK 색상 모드는 인쇄물에만 사용되며 대부분의 브라우저에서는 올바르게 표시되지 않습니다. Mac에서는 이 속성을 색상 프로필 또는 색 공간이라고 합니다.
색상 프로필	sRGB	모바일 기기에서 이미지가 올바르게 보이지 않는다면, sRGB 색상 프로필이 없을 수 있습니다.
DPI 및 PPI	해당 없음	DPI 및 PPI는 웹 디스플레이가 아닌 이미지의 인쇄 품질에만 영향을 미치기 때문에 걱정할 필요가 없습니다.

위에 설명된 요구 사항과 권장 사항을 참고해 이미지가 사이트에 잘 표시되도록 하세요. 사이트에 큰 이미지가 많고 사이트 로드 속도가 느리다고 느껴진다면 페이지 크기를 축소해 로드 속도 단축하기 페이지를 살펴보세요.

팁: TinyIMG 확장을 연결하여 이미지 크기를 최적화하세요. TinyIMG는 크기가 큰 이미지를 압축된 버전으로 교체하여 이미지 품질을 유지하면서 페이지 로딩 속도를 빠르게 합니다. Squarespace는 Squarespace Extensions가 제대로 작동하도록 서드파티(타사) 서비스와 협력하고 있지만, 확장 프로그램은 지원 범위에 포함되지 않습니다. 확장 프로그램을 연결하거나 연결 해제하는 데 도움을 드릴 수 있습니다. 기타 문의 사항이 있는 경우, 확장 서비스 제공업체에 직접 문의해 주세요.

WebP 파일 형식

사이트의 성능을 최적화하기 위해 Squarespace 사이트의 모든 이미지는 자동으로 WebP 형식으로 변환되어 표시됩니다. WebP 이미지 형식은 화질은 그대로 유지하면서 로드 시간을 개선합니다. WebP 파일은 비슷한 화질의 .jpg, .png 파일에 비해 크기가 작아 많은 이미지를 표시할 때 유용합니다. 

사용자가 Squarespace에 이미지를 업로드하면 Squarespace는 이미지를 WebP 형식으로 변환해 해당 버전을 사용자의 사이트 콘텐츠에 표시합니다. 원본 파일은 사용자의 애셋 라이브러리에 그대로 유지되며, 파일과 관련된 모든 수정 사항은 사이트의 WebP 버전에 적용됩니다. WebP 형식의 파일을 사이트에 직접 업로드할 수도 있습니다.

이미지를 WebP 파일로 변환하고 싶지 않다면 아래 단계에 따라 이 설정을 비활성화할 수 있습니다.

1. 이미지 설정 패널을 엽니다.
2. WebP 이미지 형식 토글을 끕니다.

사이트에 업로드된 모든 이미지는 24시간 이내에 원래 형식으로 복원됩니다.

이미지 세부 정보 찾기

사이트에 사용하려는 이미지가 Squarespace의 요구 사항에 부합하는지 확인하려면 이미지 파일의 정보를 살펴보세요.

Mac

이미지 파일의 정보를 찾는 방법은 다음과 같습니다.

1. 컴퓨터에서 이미지 파일을 선택합니다.
2. Command + I를 누릅니다.
3. 창이 열리면 자세히 보기를 클릭합니다.

Windows

이미지 파일의 정보를 찾는 방법은 다음과 같습니다.

1. 컴퓨터에서 이미지 파일을 선택합니다.
2. Alt + Enter 키를 누르세요.
3. 열리는 창에서 세부 정보를 클릭하세요.

모바일 기기

이미지 정보를 표시하는 방법은 앱, 기기, 및 운영 체제에 따라 다릅니다. 모바일 기기에서 사진을 보거나 편집하는 데 사용하는 응용 프로그램에 대한 설명서를 살펴보세요.

참고: iOS 11 이상에서 실행되는 iPhone 및 iPad는 고효율 형식(HEIF)으로 이미지를 캡처하여 .heic 파일을 생성합니다. 이들은 Squarespace 앱을 포함한 여러 장소에서 가져오거나 공유할 때 자동으로 .jpg로 변환되지만, 휴대폰 설정을 조정하여 이미지를 기본적으로 .jpg로 캡처할 수 있습니다. 자세한 내용은 Apple 설명서를 참조하세요.

투명한 배경

로고처럼 배경이나 배경색이 없는 이미지가 필요하시면 .png 또는 .webp 형식의 배경이 투명한 파일을 사용하세요. 배경이 투명한 파일은 서드파티(타사) 소프트웨어를 사용해 만들거나 Squarespace 로고를 사용해 자동으로 만들 수도 있습니다.

이미지 위의 텍스트

이미지 위에 텍스트를 추가하려면, 이미지에 삽입하는 대신 오버레이로 추가하는 것을 권장합니다. 이렇게 하면 텍스트를 검색할 수 있게 하고, 작은 기기에서 이미지가 잘릴 경우에도 텍스트가 계속 보입니다. 이미지 블록, 배너, 갤러리 페이지, 갤러리 블록에 오버레이 텍스트를 추가하는 팁을 방문하세요.

이미지에 텍스트가 포함되어 있으면 .png 파일로 저장하세요. .jpg 파일의 텍스트는 이미지가 압축될 때 파일이 자주 흐릿해집니다. .png 파일은 일반적으로 선명도를 유지하며, 특히 이미지가 원래 크기로 표시될 때 그렇습니다.

대체 텍스트

이미지를 만들 때 대체 텍스트 모범 사례 를 염두에 두세요. 대체 텍스트는 스크린 리더를 사용하는 방문자가 콘텐츠에 더 쉽게 접근할 수 있도록 하기 때문에 이미지에 추가하는 것이 중요합니다. 대체 텍스트는 검색 엔진에 이미지의 내용을 알려주어 사이트가 이미지 검색에 표시될 가능성을 높입니다.

이미지에 대체 텍스트를 추가하지 않으면, 이미지 블록과 자동 레이아웃을 제외하고 파일 이름이 대체 텍스트로 사용됩니다. 애셋 라이브러리에서 이미 업로드한 이미지의 파일 이름을 변경할 수 있습니다.

다른 장치에 맞게 이미지 크기를 조정하려면 어떻게 해야 하나요?

이미지를 업로드하면 Squarespace는 해당 이미지의 버전을 각각 다른 너비로 최대 7개까지 생성합니다. 이미지의 모양을 유지하기 위해 너비에 따라 높이가 변경됩니다. Squarespace의 내장 반응형 디자인은 방문자의 화면에 따라 적절한 이미지 크기를 자동으로 선택합니다. Squarespace에서 만드는 너비는 다음과 같습니다.

• 100픽셀
• 300픽셀
• 500픽셀
• 750픽셀
• 1000픽셀
• 1500픽셀
• 2500픽셀

모바일 기기에서 사이트가 어떻게 보이는지 미리 보려면 기기 화면 보기를 사용하세요.

이미지의 치수가 정확해야 하나요?

아니요. Squarespace 시스템은 다양한 기기 너비에 맞게 이미지를 자동으로 크거나 작게 조정하므로, 750px × 500px와 같은 정확한 크기로 이미지를 포맷할 필요가 없습니다. 예를 들어 이미지 블록에는 특정 이미지 높이 및 너비 요구 사항이 없으며 갤러리 섹션의 이미지에는 다른 요구 사항이 있습니다. 이미지가 흐릿해지지 않도록 이미지 너비 팁을 따라주세요.

귀하의 이미지가 원하는 방식으로 표시되지 않는 경우:

• Squarespace의 이미지 요구 사항을 준수하세요
• 이미지 스타일 지정
• 이미지 서식 문제 해결

더 많은 도움

Squarespace에 이미지를 추가하는 방법에 대해 자세히 알아보려면 다음 가이드를 참조하세요.

• 비디오 시리즈: 이미지에 대한 모든 것
• 이미지 추가 및 크기 조정
• 이미지 업로드와 서식 지정 관련 문제 해결
• 사이트 로고 추가하기
• 귀하의 사이트에서 이미지 편집하기
• 오디오, 이미지 및 비디오의 접근성 높이기
• 스톡 이미지 검색 및 추가
• 스톡 이미지 모범 사례
• 이미지 메타데이터 가져오기

위의 가이드 외에도 이미지 형식을 지정하는 데 도움이 되는 다른 리소스를 제공합니다.

• Squarespace Forum 커뮤니티에서 조언을 받으세요.
• Squarespace Expert를 고용하여 도움을 받으세요.