이미지 업로드
회사 로고, 제품 이미지, 슬라이드 쇼, 배너 및 블로그 게시물 이미지와 같은 다양한 유형의 이미지를 사용할 수 있습니다. 잘라내기 및 크기 조정 작업을 사용하여 이미지를 변환할 수 있습니다. 테마에서 미디어 설정을 사용자 지정하여 스토어에 표시되는 모든 미디어의 테두리나 그림자를 변경할 수 있습니다.
온라인 스토어에 이미지를 원하는 대로 정확히 표시하려면 이미지의 가로 세로 비율을 올바르게 사용해야 합니다.
이 페이지의 정보
테마 편집기에서 이미지 업로드
테마 편집기에서 테마에 이미지를 추가할 수 있습니다. Shopify 관리자의 파일 페이지에서 이미지를 업로드할 수도 있습니다. 자세히 알아보려면 웹사이트에 파일 업로드를 참조하십시오.
단계:
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 사용자 지정하려는 테마 옆의 사용자 지정을 클릭합니다.
- 드롭다운 메뉴를 사용하여 편집할 템플릿을 선택합니다.
- 테마 편집기 사이드바에서 이미지를 추가할 섹션이나 블록을 클릭합니다.
-
이미지 선택을 클릭한 후 다음 중 하나를 수행합니다.
- 컴퓨터에서 이미지를 업로드하려면 업로드를 클릭합니다.
- Burst의 무료 스톡 이미지를 사용하려면 무료 이미지 살펴보기를 클릭합니다.
이미지를 클릭하여 테마에서 이미지의 미리 보기를 확인합니다. 사용할 이미지를 찾은 후 선택을 클릭합니다.
저장을 클릭합니다.
메타 필드를 사용하여 이미지 추가
이미지에 메타 필드가 설정되어 있으면 다이나믹 소스 선택기를 사용하여 이미지를 추가할 수 있습니다. 메타 필드 및 지원되는 이미지 형식에 대한 자세한 내용은 메타 필드 콘텐츠 유형 및 값을 참조하십시오.
이미지 배너
이미지 배너는 다음과 같은 요소를 사용하여 생성할 수 있습니다.
- 이미지 1~2개
- 텍스트
- 실행 버튼
데스크톱 컴퓨터에서 배너 이미지는 가로로 나란히 표시됩니다. 이러한 형식은 모바일 장치에 적합하지 않기 때문에 이미지 배너 테마 설정에서 모바일 스택 이미지를 선택하여 이미지 배너 그림을 스택할 수 있습니다. 이미지 배너 및 슬라이드 쇼에 대한 자세한 내용은 슬라이드 쇼 및 이미지 배너의 모범 사례를 참조하십시오.
테마 이미지에 초점 설정
초점을 사용하여 온라인 스토어 테마에서 이미지의 가장 중요한 부분을 정의할 수 있습니다. 이미지에 초점을 설정하면 초점 영역이 됩니다. 이미지를 레이아웃에 맞게 자르는 테마가 있는 경우에도 초점이 항상 프레임에 표시됩니다. 초점을 사용하면 테마에서 다양한 가로 세로 비율을 사용할 때 이미지가 표시되는 방식과 다양한 화면 크기를 더 세부적으로 제어할 수 있습니다.
이미지당 초점을 하나만 사용할 수 있지만 언제든지 초점을 변경하거나 제거할 수 있습니다.
초점 설정은 다음과 같은 버전의 무료 Shopify 테마에서 사용할 수 있습니다.
- Craft 버전 5.0.0 이상
- Crave 버전 5.0.0 이상
- Colorblock 버전 3.0.0 이상
- Dawn 버전 7.0.0 이상
- Refresh 버전 2.0.0 이상
- Ride 버전 3.0.0 이상
- Sense 버전 5.0.0 이상
- Studio 버전 4.0.0 이상
- Taste 버전 4.0.0 이상
타사 테마를 이용하는 경우 테마 설명서를 확인하여 테마에서 초점을 사용하는지 알아보십시오.
이미지에 초점 추가
파일 섹션 및 테마 편집기에서 이미지에 초점을 추가할 수 있습니다. 이미지에 초점을 추가한 다음 해당 이미지를 여러 곳에서 사용하는 경우 모두 동일한 초점을 사용하게 됩니다.
테마 이미지에만 초점을 추가할 수 있습니다. 제품, 블로그 또는 컬렉션 이미지에는 초점을 추가할 수 없습니다.
단계:
- 테마 편집기에서 이미지가 있는 섹션 또는 블록을 클릭합니다.
- 이미지에서 편집을 클릭합니다.
- 초점 추가를 클릭합니다.
- 파란색 원형을 클릭하고 드래그하거나 이미지의 가장 중요한 부분을 클릭하여 초점을 설정합니다.
- 완료를 클릭합니다.
단계:
- 테마 편집기에서 이미지가 있는 섹션 또는 블록을 탭합니다.
- 이미지에서 편집을 탭합니다.
- 초점 추가를 탭합니다.
- 이미지의 가장 중요한 부분을 탭하여 초점을 설정합니다.
- 완료를 탭합니다.
단계:
- 테마 편집기에서 이미지가 있는 섹션 또는 블록을 탭합니다.
- 이미지에서 편집을 탭합니다.
- 초점 추가를 탭합니다.
- 이미지의 가장 중요한 부분을 탭하여 초점을 설정합니다.
- 완료를 탭합니다.
초점 제거
단계:
- 테마 편집기에서 이미지가 있는 섹션 또는 블록을 클릭합니다.
- 이미지에서 편집을 탭합니다.
- 초점 제거를 클릭합니다.
- 완료를 클릭합니다.
단계:
- 테마 편집기에서 이미지가 있는 섹션 또는 블록을 탭합니다.
- 이미지에서 편집을 탭합니다.
- 초점 제거를 탭합니다.
- 완료를 탭합니다.
단계:
- 테마 편집기에서 이미지가 있는 섹션 또는 블록을 탭합니다.
- 이미지에서 편집을 탭합니다.
- 초점 제거를 탭합니다.
- 완료를 탭합니다.
이미지 형식
Shopify에서 지원하는 이미지 형식은 다음과 같습니다.
- JPEG
- 프로그레시브 JPEG
- PNG
- GIF
- HEIC
- WebP
JPEG 이미지를 사용해야 하는 경우
복잡한 색상의 사진과 기타 정지 이미지에는 JPEG 이미지를 사용하는 것이 가장 좋습니다. JPEG 형식의 색상표에는 수백만 가지 색상이 포함되어 있습니다. 또한 JPEG는 손실 압축 형식이므로 이미지 품질의 현저한 손실 없이 페이지 로드 시간을 단축할 수 있습니다.
다음 종류의 이미지에는 JPEG 형식을 사용하십시오.
- 제품
- 배너 또는 슬라이드 쇼
- 페이지 및 블로그 게시물
PNG 이미지를 사용해야 하는 경우
그라데이션이 없는 단색 그래픽과 아이콘에는 PNG 이미지가 가장 적합합니다. PNG 형식은 투명도도 지원할 수 있습니다.
다음 종류의 이미지에는 PNG 형식을 사용하십시오.
- 로고
- 아이콘
- 테두리 및 트리밍
자동 이미지 압축 및 형식 선택
Shopify에서는 로드 시간을 단축하기 위해 온라인 스토어에 표시되는 이미지를 자동으로 압축합니다. 이미지를 압축하면 페이지를 더 빠르게 로드할 수 있도록 파일 크기가 줄어듭니다.
또한 Shopify는 이미지를 전달할 때 가장 적합한 파일 형식을 자동으로 결정합니다. 예를 들어 고객의 웹 브라우저에서 WebP, AVIF(AV1 이미지 파일 형식)와 같은 최신 이미지 형식을 지원하는 것이 감지되면 Shopify에서 해당 형식으로 이미지를 전달합니다.
파일 크기를 줄여 성능을 개선하기 위해 GIF는 애니메이션 WebP 형식으로 자동 변환됩니다.
업로드 한도
Shopify에 이미지를 업로드할 때는 메가픽셀과 파일 크기(메가바이트 단위로 측정됨)가 모두 제한됩니다. 메가픽셀은 이미지를 구성하는 픽셀의 수를 표시하는 데 사용됩니다. 1메가픽셀은 100만 픽셀입니다. 메가바이트는 메모리 또는 디스크 공간에서 이미지가 차지하는 바이트 수를 표시하는 데 사용됩니다. 1메가바이트는 100만 바이트입니다.
Shopify에 업로드하는 이미지는 다음 한도를 초과할 수 없습니다.
- 25메가픽셀
- 20메가바이트
이미지의 메가픽셀을 찾으려면 (pixel width x pixel height)/1,000,000의 공식을 사용하면 됩니다. 예를 들어, 해상도가 4900x6930이면 (4900x6930)/1,000,000 = 33.9 MP 공식에 따라 33.9메가픽셀이 나옵니다.
색상 프로
온라인 스토어에서 이미지를 볼 때는 이미지의 색상이 Shopify에 업로드한 원본의 색상과 다르게 보일 수 있습니다. 이미지에 색상 프로필이 포함되어 있으면 이러한 현상이 발생할 수 있습니다. 색상 프로필이란 확장자가 .ICC 또는 .ICM인 파일에 저장된 데이터 집합입니다. 색상 프로필은 여러 장치에서 색상이 표시되는 방식을 표준화하기 위해 이미지에 포함되는 경우가 많습니다. 이미지가 온라인 스토어에서 표시되면 색상 프로필은 제거됩니다.
색상 프로필이 제거되는 몇 가지 이유는 다음과 같습니다.
- 모든 장치에서
.ICC또는.ICM색상 프로필을 읽을 수 있는 것은 아니므로 색상 프로필을 그대로 유지하면 장치 전반에서 이미지 색상이 일치하지 않을 수 있습니다. - 업로드한 이미지에 색상 프로필이 포함되어 있지 않으면 웹 브라우저는 웹에서 이미지를 표시하는 데 가장 흔히 사용되는 색상 프로필인 sRGB가 사용된다고 가정합니다. 그러므로 널리 사용되는 모든 웹 브라우저와 장치에서 이미지가 동일하게 표시됩니다.
- 색상 프로필은 디스크 공간을 많이 차지할 수 있으므로 로드 시간이 길어질 수 있습니다.
이미지에서 색상 프로필 제거
이미지를 Shopify에 업로드하기 전에 색상 프로필을 포함하지 않고 저장하면 이미지에서 색상 프로필을 제거할 수 있습니다. 이 프로세스는 이미지 편집 프로그램에 따라 다릅니다.
Adobe Illustrator 또는 Adobe Photoshop을 사용하여 색상 프로필 제거
Adobe Illustrator 또는 Adobe Photoshop을 사용하여 색상 프로필을 제거하려면 다음 단계를 수행합니다.
편집 > 프로필 할당을 클릭합니다.
이 문서의 색상을 관리하지 않음을 선택합니다.
확인을 클릭합니다.
Adobe InDesign을 사용하여 색상 프로필 제거
Adobe InDesign을 사용하여 색상 프로필을 제거하려면 다음 단계를 수행합니다.
편집 > 프로필 할당을 클릭합니다.
RGB 프로필 및 CMYK 프로필의 경우에는 버리기(현재 작업 공간 사용)를 선택합니다.
확인을 클릭합니다.
자세한 내용은 색상 프로필 관련 Adobe 문서에서 확인할 수 있습니다.
슬라이드 쇼, 이미지 배너, 전체 너비 이미지 모범 사례
대부분의 Shopify 테마에서는 큰 이미지나 슬라이드 쇼를 브라우저의 높이나 화면 크기에 맞게 조정합니다.
이러한 테마 중 하나를 사용하거나 큰 슬라이드 쇼 또는 배경 이미지를 포함하는 경우에는 가장 적절하게 표시되는 이미지 유형을 파악해야 합니다.
큰 이미지가 제대로 표시되지 않는 장치도 있으므로, 사용 중인 장치에 따라서는 이미지의 일부분만 표시되는 경우도 있습니다. 이미지 슬라이드 쇼에 큰 이미지가 많이 포함되어 있으면 이미지의 일부분이 표시되지 않을 수 있습니다.
권장 사항
이미지가 테마에서 적절하게 표시되도록 하려는 경우 다음의 몇 가지 사항을 고려해야 합니다.
슬라이드 쇼나 배경에 사용하는 이미지에는 텍스트가 없어야 합니다. 이미지 자체에 텍스트가 포함되어 있으면 테마에 따라 텍스트가 이동되거나 잘리거나 조정될 수도 있습니다. 테마 편집기를 사용하여 슬라이드 쇼에 텍스트와 링크를 추가하십시오.
겹쳐 표시되는 텍스트를 쉽게 읽을 수 있도록 슬라이드 쇼나 배경에 사용하는 이미지로는 단순한 이미지를 선택합니다.
세로로 긴 화면에 가로로 긴 이미지 표시
가로로 긴 이미지를 보는 데 사용하는 장치의 화면이 세로로 긴 경우(예: 휴대폰, 태블릿)에는 해당 이미지의 좌우가 잘릴 수 있습니다.아래 예제에서는 이미지의 가장 중요한 부분이 인물인 경우 이미지 오른쪽에 초점을 설정할 수 있습니다.
가로로 긴 화면에 세로로 긴 이미지 표시
세로로 긴 이미지를 보는 데 사용하는 장치의 화면이 가로로 긴 경우(예: 노트북, 데스크톱)에는 해당 이미지의 아래위가 잘릴 수 있습니다.아래 예제에서는 이미지의 가장 중요한 부분이 신발인 경우 이미지 아래쪽에 초점을 설정하여 잘리지 않게 할 수 있습니다.
