이미지 업로드

회사 로고, 제품 이미지, 슬라이드 쇼, 배너, 블로그 게시물 이미지 등 다양한 유형의 이미지를 사용할 수 있습니다. 또한 자르기 및 크기 조정 작업으로 이미지를 변형하고 테마에서 미디어 설정을 사용자 지정하여 스토어에 표시되는 모든 미디어의 테두리나 그림자를 변경할 수 있습니다.

온라인 스토어에 이미지를 원하는 대로 정확하게 표시하려면 올바른 이미지 가로 세로 비율을 사용해야 합니다. 이미지는 Shopify CDN(콘텐츠 전송 네트워크)을 사용하여 스토어프론트에 맞게 자동으로 최적화됩니다.

테마 편집기에서 이미지 업로드

테마 편집기에서 테마에 이미지를 추가할 수 있습니다. Shopify 관리자의 콘텐츠 > 파일 섹션에서도 이미지를 업로드할 수 있습니다. 자세한 내용은 파일 업로드 및 관리를 참조하십시오.

단계:

메타 필드를 사용하여 이미지 추가

이미지에 메타 필드가 설정되어 있는 경우 동적 소스 선택기를 사용하여 온라인 스토어에 이미지를 추가할 수 있습니다. 메타 필드 및 지원되는 이미지 형식에 대한 자세한 내용은 메타 필드에 값 추가를 참조하십시오.

이미지에 초점 설정

초점을 사용하여 온라인 스토어에서 이미지의 가장 중요한 부분을 정의할 수 있습니다. 이미지에 초점을 설정하면 해당 영역이 초점 영역이 됩니다. 레이아웃에 맞게 이미지를 자르는 테마를 사용하더라도 초점은 항상 프레임 안에 표시됩니다. 초점을 사용하면 다양한 화면 크기에서 이미지가 표시되는 방식을 더 효과적으로 제어할 수 있으며, 테마가 서로 다른 가로 세로 비율을 사용하는 경우에도 유용합니다.

이미지당 하나의 초점만 설정할 수 있지만 언제든지 초점을 변경하거나 제거할 수 있습니다.

Shopify 무료 테마와의 초점 호환성

다음 버전의 Shopify 무료 테마에서 초점을 설정할 수 있습니다.

• Horizon 제품군의 모든 테마
• Colorblock 버전 3.0.0 이상
• Craft 버전 5.0.0 이상
• Crave 버전 5.0.0 이상
• Dawn 버전 7.0.0 이상
• Origin 버전 1.0.0 이상
• Publisher 버전 1.0.0 이상
• Refresh 버전 2.0.0 이상
• Ride 버전 3.0.0 이상
• Rise 버전 1.0.0 이상
• Sense 버전 5.0.0 이상
• Spotlight 버전 0.0.1 이상
• Studio 버전 4.0.0 이상
• Taste 버전 4.0.0 이상
• Trade 버전 1.0.0 이상

타사 테마를 사용하는 경우 테마 설명서를 확인하여 테마가 초점 사용을 지원하는지 알아보십시오.

이미지에 초점 추가

이미지에 초점을 추가한 후 온라인 스토어의 여러 위치에서 이미지를 사용하면 이미지를 사용하는 모든 위치에 동일한 초점이 적용됩니다.

테마가 이미지를 자르고 크기를 조정하는 방식에 따라 초점이 항상 시각적으로 중앙에 배치되지 않을 수 있습니다.

단계:

1. Shopify 관리자의 다음 위치 중 하나에서 이미지를 클릭합니다.
   • 콘텐츠 > 파일 섹션.
   • 테마 편집기.
   • 제품 섹션의 제품 등록 정보에 있는 미디어 섹션.
   • Shopify Messaging 이메일 편집기.
   • 이미지를 추가하기 위한 파일 참조 유형의 메타 필드가 있는 모든 리소스의 메타 필드 섹션.
2. 초점을 설정할 이미지 부분을 선택하려면 이미지를 클릭하거나 파란색 점을 드래그합니다.
3. 저장을 클릭합니다.

이미지에서 초점 제거

단계:

1. Shopify 관리자의 다음 위치 중 하나에서 이미지를 클릭합니다.
   • 콘텐츠 > 파일 섹션.
   • 테마 편집기.
   • 제품 섹션의 제품 등록 정보에 있는 미디어 섹션.
   • Shopify Messaging 이메일 편집기.
   • 이미지를 추가하기 위한 파일 참조 유형의 메타 필드가 있는 모든 리소스의 메타 필드 섹션.
2. 제거를 클릭합니다.
3. 새로 저장을 클릭합니다.

이미지 형식

지원되는 이미지 형식은 다음과 같습니다.

• JPEG
• 프로그레시브 JPEG
• PNG
• GIF
• HEIC
• WebP

JPEG 이미지 사용

JPEG 이미지는 사진 및 복잡한 색상의 기타 정지 이미지에 적합합니다. JPEG 형식에는 수백만 가지 색상의 팔레트가 있습니다. 또한 JPEG는 손실 압축을 사용하므로 이미지 품질의 눈에 띄는 손실 없이 페이지 로드 시간을 빠르게 유지하는 데 도움이 될 수 있습니다. 다음과 같은 유형의 이미지에 JPEG 형식을 사용하십시오.

• 제품
• 배너 또는 슬라이드 쇼
• 페이지 및 블로그 게시물

PNG 이미지 사용

PNG 이미지는 단색이고 그라데이션이 없는 그래픽과 아이콘에 이상적입니다. PNG 형식은 이미지의 투명도도 지원합니다. 다음과 같은 유형의 이미지에는 PNG 형식을 사용하십시오.

• 로고
• 아이콘
• 테두리 및 트림

자동 이미지 압축 및 형식 선택

Shopify 관리자에 이미지를 업로드할 때 이미지가 압축되지 않으므로 원본 품질을 유지하는 데 도움이 됩니다. 그러나 고객의 페이지 로드 시간을 빠르게 유지하기 위해 다음 현상이 발생할 수 있습니다.

• 스토어 테마를 통해 이미지를 제공할 때 고품질 이미지를 위해 압축이 진행될 수 있습니다.
• Shopify는 이미지를 전송할 때 사용할 수 있는 최상의 파일 형식을 자동으로 결정합니다.
• 고객의 웹 브라우저가 WebP 및 AVIF(AV1 이미지 파일 형식)와 같은 최신 이미지 형식을 지원하는 경우 이미지는 해당 형식으로 전송됩니다.
• GIF는 파일 크기를 줄여 실적을 개선하기 위해 애니메이션 WebP 형식으로 자동 변환됩니다.

최고의 이미지 품질을 위해 다음 조치를 고려하십시오.

• 최대 5000px x 5000px 또는 25메가픽셀의 고해상도 이미지를 업로드하십시오.
• 선화, 텍스트, 투명도가 있는 상징적인 그래픽에는 PNG와 같이 손실이 적은 이미지 유형을 선택하십시오.
• 제품 이미지나 슬라이드 쇼에는 JPEG를 사용하십시오.
• SVG 파일은 지원되지만 제한 사항이 있습니다. 래스터화된 형식(JPEG, WebP, PNG)을 요청하지 않으면 변환(크기 조정, 자르기 등)할 수 없습니다.

PSD(Photoshop 문서), TIFF(태그 이미지 파일 형식), BMP(비트맵)와 같은 기타 파일 형식도 허용되지만 업로드 시 JPEG/PNG로 변환됩니다.

이미지 업로드 제한

Shopify에 이미지를 업로드하는 데는 메가픽셀(MP) 및 메가바이트(MB)로 측정되는 파일 크기 모두에 대한 제한이 있습니다. 메가픽셀은 이미지를 구성하는 수백만 픽셀 수를 나타내는 데 사용됩니다. 메가바이트는 이미지가 차지하는 메모리 또는 디스크 공간의 수백만 바이트를 나타내는 데 사용됩니다.

Shopify에 업로드되는 이미지는 다음 제한 중 하나를 초과할 수 없습니다.

• 20메가픽셀
• 20메가바이트

이미지의 메가픽셀 값을 찾으려면 다음 방정식을 사용할 수 있습니다.

(픽셀 너비 x 픽셀 높이)/1,000,000

예를 들어, 해상도가 4900px x 6930px인 이미지는 (4900x6930)/1,000,000 = 33.9MP 방정식에 따라 33.9메가픽셀입니다.

이미지 색상 프로필

온라인 스토어에서 이미지를 볼 때 이미지의 색상이 Shopify에 업로드한 원본 이미지의 색상과 다르게 표시될 수 있습니다. 이 현상은 이미지에 색상 프로필이 있는 경우에 발생할 수 있습니다. 색상 프로필은 .ICC 또는 .ICM 확장명의 파일에 저장된 데이터 세트입니다.

색상 프로필은 여러 장치에서 색상이 표시되는 방식을 표준화하는 데 도움이 되도록 이미지에 포함되는 경우가 많습니다. 온라인 스토어에 이미지가 표시되면 색상 프로필이 제거됩니다.

색상 프로필은 다음과 같은 이유로 제거됩니다.

• 일부 장치에서는 .ICC 또는 .ICM 색상 프로필을 읽을 수 없으므로 프로필을 그대로 유지하면 장치 간에 이미지 색상이 일치하지 않을 수 있습니다.
• 업로드된 이미지에 색상 프로필이 포함되어 있지 않으면 웹 브라우저는 웹에 이미지를 표시하는 데 사용되는 가장 일반적인 색상 프로필인 sRGB를 가정합니다. 이렇게 하면 모든 주요 웹 브라우저 및 장치에서 이미지가 동일하게 표시됩니다.
• 색상 프로필은 많은 디스크 공간을 차지하여 페이지 로드 시간이 길어질 수 있습니다.

이미지에서 색상 프로필 제거

Shopify에 업로드하기 전에 색상 프로필 없이 이미지를 저장하여 이미지에서 색상 프로필을 제거할 수 있습니다. 이 프로세스는 이미지 편집 프로그램에 따라 다릅니다.

Adobe 설명서에서 색상 프로필 할당 또는 제거(Illustrator, Photoshop) 및 색상 프로필 할당 또는 제거(InDesign) 방법을 확인하십시오.

슬라이드 쇼, 이미지 배너, 전체 너비 이미지에 대한 모범 사례

많은 Shopify 테마는 브라우저 높이에 맞춰 확장되거나 화면 크기에 맞춰 조정되는 대형 이미지 또는 슬라이드 쇼를 제공합니다.

이러한 테마 중 하나를 사용하거나 대형 슬라이드 쇼 또는 배경 이미지가 있는 경우 어떤 유형의 이미지가 가장 잘 표시되는지 알아야 합니다.

대형 이미지는 모든 장치에 맞지 않으므로 사용 중인 장치에 따라 Shopify에서 이미지의 일부만 표시하는 경우가 있습니다. 이미지 슬라이드 쇼에 대형 이미지가 많이 포함되어 있으면 이미지의 일부가 보이지 않을 수 있습니다.

슬라이드 쇼 또는 이미지 배너에 이미지 사용 시 고려 사항

이미지가 테마와 잘 어울리도록 하려면 다음 사항에 유의하십시오.

• 슬라이드 쇼 또는 배경에 사용하는 이미지에는 텍스트가 포함되어서는 안 됩니다. 텍스트가 이미지 자체의 일부인 경우 테마에 따라 위치가 바뀌거나 잘리거나 조정될 수 있습니다. 테마 편집기를 사용하여 슬라이드 쇼와 배경에 텍스트와 링크를 추가하십시오.

• 슬라이드 쇼나 배경에 사용하는 이미지의 경우 겹쳐진 텍스트를 쉽게 읽을 수 있도록 간단한 이미지를 선택하십시오.

세로가 긴 화면의 가로가 넓은 이미지

이미지를 보는 데 사용되는 장치가 휴대폰이나 세로 모드의 태블릿처럼 세로가 긴 화면인 경우 가로로 넓은 이미지는 좌우가 잘릴 수 있습니다. 아래 예에서 인물이 이미지의 가장 중요한 부분이라면 이미지 오른쪽에 초점을 배치할 수 있습니다.

가로가 넓은 화면의 세로가 긴 이미지

이미지를 보는 데 사용되는 장치가 노트북이나 데스크톱 모니터처럼 가로가 넓은 화면인 경우 세로로 긴 이미지는 상하가 잘릴 수 있습니다. 아래 예에서 신발이 이미지의 가장 중요한 부분이라면 이미지 하단에 초점을 배치할 수 있습니다.

이미지 로드 동작

온라인 스토어의 페이지를 방문하면 이미지가 처음에는 약간 흐릿하다가 잠시 후 선명해지는 것을 확인할 수 있습니다. 이는 스토어의 로딩 속도와 사용자 환경을 개선하는 데 도움이 되는 예상된 동작입니다.

Shopify 테마는 lazy loading이라는 기술을 사용합니다. 이 기술은 백그라운드에서 전체 해상도 이미지를 로드하는 동안 더 작은 버전의 이미지를 먼저 로드합니다. 이를 통해 고객은 대용량 이미지가 완전히 로드될 때까지 기다리지 않고 즉시 콘텐츠를 검토할 수 있습니다. 이 과정은 일반적으로 1초 미만이 소요되지만 스토어 로드 속도가 더 빠른 것처럼 느껴지게 합니다.

이 기술은 초기 페이지 로드 시간을 크게 개선하고 고객에게 즉각적인 시각적 피드백을 제공하므로 이미지가 많은 스토어에 특히 유용합니다.

이미지 문제 해결