이미지 업로드

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

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

이 페이지의 정보

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

테마 편집기에서 테마에 이미지를 추가할 수 있습니다. Shopify 관리자의 콘텐츠 > 파일 섹션에서 이미지를 업로드할 수도 있습니다. 자세히 알아보려면 파일 업로드 및 관리를 참조하세요.

단계:

데스크톱

Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
이미지를 업로드하려는 테마에 대해 맞춤 설정을 클릭합니다.
선택 사항: 홈페이지 외의 스토어 페이지에 이미지를 추가하려면 홈페이지 드롭다운 메뉴를 클릭한 다음 편집하려는 템플릿을 선택합니다.
테마 편집기 사이드바에서 이미지를 추가하려는 섹션이나 블록을 클릭합니다.
이미지 필드에서 다음 중 하나를 수행합니다.
- 컴퓨터에서 이미지를 업로드하려면 다음 단계를 완료합니다.
  1. 이미지 선택 > 이미지 추가를 클릭합니다.
  2. 컴퓨터에서 이미지를 찾아 엽니다.
  3. 완료를 클릭합니다.

- Burst의 무료 스톡 이미지를 사용하려면 다음 단계를 완료합니다. 1. 무료 이미지 살펴보기를 클릭합니다. 2. 사용하려는 이미지를 찾습니다. 3. 선택을 클릭합니다.

저장을 클릭합니다.

iPhone

Shopify 앱에서 … 버튼을 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
이미지를 업로드하려는 테마에 대해 맞춤 설정을 탭합니다.
선택 사항: 홈페이지 외의 스토어 페이지에 이미지를 추가하려면 홈페이지 드롭다운 메뉴를 탭한 다음 편집하려는 템플릿을 선택합니다.
섹션을 탭한 다음 이미지를 추가하려는 섹션 또는 블록을 탭합니다.
이미지 필드에서 다음 중 하나를 수행합니다.
- 장치에서 이미지를 업로드하려면 다음 단계를 완료합니다.
  1. 이미지 선택 > 이미지 추가를 탭합니다.
  2. 장치에서 이미지를 찾아 엽니다.
  3. 완료를 탭합니다.

- Burst의 무료 스톡 이미지를 사용하려면 다음 단계를 완료합니다. 1. 무료 이미지 살펴보기를 탭합니다. 2. 사용하려는 이미지를 찾습니다. 3. 완료를 탭합니다.

저장을 탭합니다.

Android

Shopify 앱에서 ☰ 버튼을 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
이미지를 업로드하려는 테마에 대해 맞춤 설정을 탭합니다.
선택 사항: 홈페이지 외의 스토어 페이지에 이미지를 추가하려면 홈페이지 드롭다운 메뉴를 탭한 다음 편집하려는 템플릿을 선택합니다.
섹션을 탭한 다음 이미지를 추가하려는 섹션 또는 블록을 탭합니다.
이미지 필드에서 다음 중 하나를 수행합니다.
- 장치에서 이미지를 업로드하려면 다음 단계를 완료합니다.
  1. 이미지 선택 > 이미지 추가를 탭합니다.
  2. 장치에서 이미지를 찾아 엽니다.
  3. 완료를 탭합니다.

✓를 탭합니다.

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

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

이미지에 초점 설정

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

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

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

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

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 이상

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

이미지에 초점 추가

이미지에 초점을 추가한 다음 해당 이미지를 온라인 스토어의 여러 곳에서 사용하는 경우 이미지를 사용하는 모든 곳에 동일한 초점이 적용됩니다.

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

단계:

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

이미지에서 초점 제거

단계:

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

이미지 형식

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

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

JPEG 이미지 사용

복잡한 색상의 사진과 기타 정지 이미지에는 JPEG 이미지가 적합합니다. JPEG 형식의 색상표에는 수백만 가지 색상이 있습니다. 또한 JPEG는 손실 압축 형식이므로 이미지 품질의 현저한 손실 없이 페이지 로드 시간을 단축할 수 있습니다. 다음 종류의 이미지에는 JPEG 형식을 사용하세요.

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

PNG 이미지 사용

그라데이션이 없는 단색 그래픽과 아이콘에는 PNG 이미지가 적합합니다. PNG 형식은 이미지의 투명도도 지원합니다. 다음 종류의 이미지에는 PNG 형식을 사용하세요.

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

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

Shopify에서는 페이지 로드 시간을 단축하기 위해 온라인 스토어에 이미지가 표시될 때 이미지를 자동으로 압축합니다. 이미지를 압축하면 파일 크기가 줄어들어 페이지를 더 빠르게 로드할 수 있습니다.

또한 Shopify는 이미지를 전달할 때 가장 적합한 파일 형식을 자동으로 결정합니다. 예를 들어 고객의 웹 브라우저에서 WebP 및 AVIF(AV1 이미지 파일 형식)와 같은 최신 이미지 형식을 지원하는 것이 감지되면 해당 형식으로 이미지가 전달됩니다.

파일 크기를 줄여 성능을 개선하기 위해 GIF는 애니메이션 WebP 형식으로 자동 변환됩니다.

이미지 업로드 한도

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

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

20메가픽셀
20메가바이트

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

(pixel width x pixel height)/1,000,000

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

이미지 색상 프로필

온라인 스토어에서 이미지를 볼 때 이미지의 색상이 Shopify에 업로드한 원본 이미지의 색상과 다르게 표시될 수 있습니다. 이미지에 색상 프로필이 포함되어 있으면 이러한 현상이 발생할 수 있습니다. 색상 프로필이란 확장자가 .ICC 또는 .ICM인 파일에 저장된 데이터 집합입니다.

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

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

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

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

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

색상 프로필 할당 및 제거(Illustrator, Photoshop) 및 색상 프로필 할당 또는 제거(InDesign) 방법에 대한 Adobe 설명서를 확인하세요.

대부분의 Shopify 테마에서는 큰 이미지나 슬라이드 쇼를 브라우저의 높이나 화면 크기에 맞게 조정합니다.

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

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

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

이미지가 테마에 잘 어울리도록 하려면 다음 사항을 염두에 두세요.

슬라이드 쇼나 배경에 사용하는 이미지에는 텍스트가 없어야 합니다. 텍스트가 이미지 자체에 포함되어 있으면 테마에 따라 텍스트가 이동되거나, 잘리거나, 조정될 수 있습니다. 테마 편집기를 사용하여 슬라이드 쇼와 배경에 텍스트와 링크를 추가하세요.
겹쳐 표시되는 텍스트를 쉽게 읽을 수 있도록 슬라이드 쇼나 배경에 사용하는 이미지로는 단순한 이미지를 선택하세요.

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

가로로 긴 이미지를 보는 장치의 화면이 세로로 긴 경우(예: 세로 모드로 보는 휴대폰 또는 태블릿) 해당 이미지의 좌우가 잘릴 수 있습니다. 아래 예에서는 이미지의 가장 중요한 부분이 인물인 경우 이미지 오른쪽에 초점을 설정할 수 있습니다.

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

세로로 긴 이미지를 보는 데 사용하는 장치의 화면이 가로로 긴 경우(예: 노트북 또는 데스크톱 모니터) 해당 이미지의 위아래가 잘릴 수 있습니다. 아래 예에서는 이미지의 가장 중요한 부분이 신발인 경우 이미지 아래쪽에 초점을 설정할 수 있습니다.