이미지 업로드

회사 로고, 제품 이미지, 슬라이드 쇼, 배너, 블로그 게시물 이미지 등의 다양한 이미지를 온라인 스토어에서 사용할 수 있습니다. 이미지를 사용할 방법과 위치에 따라 특정 크기나 형식으로 이미지를 업로드하면 가장 효율적일 수 있습니다.

이미지 업로드

온라인 스토어용 이미지는 두 위치에 업로드할 수 있습니다.

파일 페이지에서 이미지 업로드

Shopify 관리자의 파일 페이지에서 이미지를 업로드할 수 있습니다. 그러면 테마를 편집하면서 이러한 이미지에 액세스할 수 있으므로 유용합니다. 자세히 알아보려면 웹사이트에 파일 업로드를 참조하십시오.

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

테마 편집기에서 테마에 이미지를 추가할 수 있습니다.

단계:

  1. 편집할 테마를 찾은 다음 사용자 지정을 클릭합니다.

  2. 테마 편집기 툴바에서 이미지를 추가할 섹션을 클릭합니다. 이미지 선택기가 포함된 섹션을 선택합니다.

    이미지 선택기가 표시된 테마 편집기 툴바의 섹션. 이미지 선택 버튼과 무료 이미지 살펴보기 링크가 있습니다.

  3. 이미지 선택을 클릭하여 이미지를 추가합니다. 컴퓨터에서 이미지를 업로드하려면 업로드를 클릭합니다. Burst의 무료 스톡 이미지를 사용하려면 무료 이미지를 클릭합니다.

  4. 저장을 클릭합니다.

이미지 형식

Shopify에서 지원하는 이미지 형식은 다음과 같습니다.

  • JPEG 또는 JPG
  • 프로그레시브 JPEG
  • PNG
  • GIF

지원되는 형식이 아닌 이미지를 업로드하면 Shopify에서 해당 이미지를 JPEG 또는 PNG로 변환합니다. 대부분의 이미지 형식은 JPEG로 변환됩니다.

참고: Shopify는 지원되지 않는 형식을 지원되는 형식으로 변환할 때를 제외하면 업로드 시 이미지를 수정하지 않습니다.

JPEG 이미지를 사용해야 하는 경우

복잡한 색상의 사진과 기타 정지 이미지에는 JPEG 이미지를 사용하는 것이 가장 좋습니다. JPEG 형식의 색상표에는 수백만 가지 색상이 포함되어 있습니다. 또한 JPEG는 손실 압축 형식이므로 이미지 품질의 현저한 손실 없이 페이지 로드 시간을 단축할 수 있습니다.

다음 종류의 이미지에는 JPEG 형식을 사용하십시오.

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

PNG 이미지를 사용해야 하는 경우

그라데이션이 없는 단색 그래픽과 아이콘에는 PNG 이미지가 가장 적합합니다. PNG 형식은 투명도도 지원할 수 있습니다.

다음 종류의 이미지에는 PNG 형식을 사용하십시오.

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

압축률

Shopify에서는 로드 시간을 단축하기 위해 온라인 스토어에 표시되는 이미지를 압축합니다. 이미지를 압축하면 페이지를 더 빠르게 로드할 수 있도록 파일 크기가 줄어들고, 압축을 통해 일정량의 디스크 또는 메모리 공간에 이미지를 더 많이 저장할 수 있습니다. 또한 이미지에 액세스하는 데 걸리는 시간도 크게 감소합니다. 압축 시에는 이미지의 형식, 크기 및 원래 품질에 따라 이미지 품질이 변경될 수 있습니다.

압축 후의 Shopify 이미지 품질 수준은 다음과 같습니다.

  • JPEG: 65 - 90 사이
  • PNG: 90
  • GIF: 품질 변화 없음

JPEG 이미지의 경우 압축 이미지의 품질 수준은 원본 JPEG 이미지의 품질과 출력 크기에 따라 다릅니다.

원래 품질 출력 크기 출력 품질
86 이상 높이 또는 너비 1024px 이상 85
65 - 85 높이 또는 너비 1024px 이상 원래 품질
64 이하 높이 또는 너비 1024px 이상 65
76 이상 높이와 폭이 모두 1024px 미만 75
65 - 75 높이와 폭이 모두 1024px 미만 원래 품질
64 이하 높이와 폭이 모두 1024px 미만 65

업로드 한도

Shopify에 이미지를 업로드할 때는 메가픽셀과 파일 크기(메가바이트 단위로 측정됨)가 모두 제한됩니다. 메가픽셀은 이미지를 구성하는 픽셀의 수를 표시하는 데 사용됩니다. 1메가픽셀은 100만 픽셀입니다. 메가바이트는 메모리 또는 디스크 공간에서 이미지가 차지하는 바이트 수를 표시하는 데 사용됩니다. 1메가바이트는 100만 바이트입니다.

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

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

색상 프로

온라인 스토어에서 이미지를 볼 때는 이미지의 색상이 Shopify에 업로드한 원본의 색상과 다르게 보일 수 있습니다. 이미지에 색상 프로필이 포함되어 있으면 이러한 현상이 발생할 수 있습니다. 색상 프로필이란 확장자가 .ICC 또는 .ICM인 파일에 저장된 데이터 집합입니다. 색상 프로필은 여러 장치에서 색상이 표시되는 방식을 표준화하기 위해 이미지에 포함되는 경우가 많습니다. 이미지가 온라인 스토어에서 표시되면 색상 프로필은 제거됩니다.

색상 프로필이 제거되는 몇 가지 이유는 다음과 같습니다.

  • 모든 장치에서 .ICC 또는 .ICM 색상 프로필을 읽을 수 있는 것은 아니므로 색상 프로필을 그대로 유지하면 장치 전반에서 이미지 색상이 일치하지 않을 수 있습니다.
  • 업로드한 이미지에 색상 프로필이 포함되어 있지 않으면 웹 브라우저는 웹에서 이미지를 표시하는 데 가장 흔히 사용되는 색상 프로필인 sRGB가 사용된다고 가정합니다. 그러므로 널리 사용되는 모든 웹 브라우저와 장치에서 이미지가 동일하게 표시됩니다.
  • 색상 프로필은 디스크 공간을 많이 차지할 수 있으므로 로드 시간이 길어질 수 있습니다.

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

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

Adobe Illustrator 또는 Adobe Photoshop을 사용하여 색상 프로필 제거

Adobe Illustrator 또는 Adobe Photoshop을 사용하여 색상 프로필을 제거하려면 다음 단계를 수행합니다.

  1. 편집 > 프로필 할당을 클릭합니다.

  2. 이 문서의 색상을 관리하지 않음을 선택합니다.

  3. 확인을 클릭합니다.

Adobe InDesign을 사용하여 색상 프로필 제거

Adobe InDesign을 사용하여 색상 프로필을 제거하려면 다음 단계를 수행합니다.

  1. 편집 > 프로필 할당을 클릭합니다.

  2. RGB 프로필 및 CMYK 프로필의 경우에는 버리기(현재 작업 공간 사용)를 선택합니다.

  3. 확인을 클릭합니다.

자세한 내용은 색상 프로필 관련 Adobe 문서에서 확인할 수 있습니다.

슬라이드 쇼 및 전체 폭 이미지용 모범 사례

대다수 Shopify 테마에는 브라우저 높이에 맞게 확장되거나(BoundlessBrooklyn) 화면 크기에 맞게 조정되는(Venture) 큰 이미지나 슬라이드 쇼가 포함되어 있습니다.

이러한 테마 중 하나를 사용하거나 큰 슬라이드 쇼 또는 배경 이미지를 포함하는 경우에는 가장 적절하게 표시되는 이미지 유형을 파악해야 합니다.

큰 이미지가 제대로 표시되지 않는 장치도 있으므로, 사용 중인 장치에 따라서는 이미지의 일부분만 표시되는 경우도 있습니다. 이미지 슬라이드 쇼에 큰 이미지가 많이 포함되어 있으면 이미지의 일부분이 표시되지 않을 수 있습니다.

권장 사항

이미지가 테마에서 적절하게 표시되도록 하려는 경우 다음의 몇 가지 사항을 고려해야 합니다.

  • 이미지에서 초점이 설정되는 부분을 지정하는 데 사용할 수 있는 이미지 위치 설정이 포함된 테마도 있습니다. 사용 중인 테마에 이러한 설정이 없으면 각 이미지의 초점이 가운데에 설정되어 있는지 확인하십시오. 일부 화면에서 이미지가 잘리면 초점이 있는 위치가 표시되고 그 주위의 영역은 숨겨집니다.

  • 슬라이드 쇼나 배경에 사용하는 이미지에는 텍스트가 없어야 합니다. 이미지 자체에 텍스트가 포함되어 있으면 테마에 따라 텍스트가 이동되거나 잘리거나 조정될 수도 있습니다. 테마 편집기를 사용하여 슬라이드 쇼에 텍스트와 링크를 추가하십시오.

  • 겹쳐 표시되는 텍스트를 쉽게 읽을 수 있도록 슬라이드 쇼나 배경에 사용하는 이미지로는 단순한 이미지를 선택합니다.

세로로 긴 화면에 가로로 긴 이미지 표시

가로로 긴 이미지를 보는 데 사용하는 장치의 화면이 세로로 긴 경우(예: 휴대폰, 태블릿)에는 해당 이미지의 좌우가 잘릴 수 있습니다.

세로로 긴 화면에 가로로 긴 이미지 표시

가로로 긴 화면에 세로로 긴 이미지 표시

세로로 긴 이미지를 보는 데 사용하는 장치의 화면이 가로로 긴 경우(예: 노트북, 데스크톱)에는 해당 이미지의 아래위가 잘릴 수 있습니다.

가로로 긴 화면에 세로로 긴 이미지 표시

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험