이미지 제작 가이드(세로모드)

Shoplive에서 세로모드 형식의 방송을 진행하는 경우 다음 가이드를 참고하여 이미지를 제작 및 이용해주세요.

로고 이미지

플레이어 상단에 노출되는 로고 이미지입니다. 로고의 가로 사이즈에는 제한이 없으나 630px 이하로 만드는 것을 권장합니다. 세로는 144px로 제작하고 배경을 투명하게 만들어야 합니다. 화면에 보이는 이미지는 최대 세로 44px 사이즈로 고정됩니다.

---

방송 예고/방송중/종료 이미지

방송중 사용되는 이미지는 모두 가로900px, 세로 1600px로 고정한 이미지로 제작하시기 바랍니다 (9:16 비율). 그러나 노치가 있는 아이폰 (9:19.5 비율)은 우측과 같이 좌우 영역이 크롭되어 보입니다. 이미지 내 콘텐츠가 크롭되는 것을 방지하기 위해, 이미지에 들어가는 내용을 가로 738px 세로 1600px 내에서 제작하는 것을 권장드립니다.

📘

Shoplive Plugin을 설치한 경우

모바일에서 Shoplive Plugin이 설치된 페이지를 실행시키면 방송 미리보기 화면이 노출됩니다.

이때 미리보기 화면의 표시비율은 1:1.5 입니다.
따라서 중요한 콘텐츠는 표시비율 내에서 제작하는 것을 권장드립니다.

---

상품 이미지

플레이어에 노출되는 상품 썸네일과 상품 목록에서 표시되는 상품 이미지입니다. 출력사이즈 가로 64px, 세로 80px의 상품 이미지를 권장합니다.

상품 이미지가 128x160 사이즈보다 크거나 작을 경우에 대한 크기 변환은 상단 예시와 같이 적용됩니다.

---

상품 목록 상단 배너 이미지

상품 목록 상단에 노출되는 배너 이미지입니다. 가로 1020px, 세로 168px의 사이즈를 권장합니다. 화면 사이즈에 따라 이미지의 크기도 축소 또는 확대됩니다.

---

팝업 > 쿠폰

쿠폰 팝업에 사용되는 이미지입니다. 쿠폰의 표시 영역은 최대 가로 390px, 세로 360px이나 가로 390px, 세로 180px의 사이즈를 권장드립니다. 라이브 플레이어 UI에 맞는 사이즈를 정하여 쿠폰 이미지를 만들고 배경을 투명하게 처리하여 제작하시기 바랍니다(png 파일).

---

팝업 > 배너

배너 팝업에 사용되는 이미지입니다. 배너가 노출될 때 플레이어 양쪽의 여백을 감안하여 배너 이미지의 사이즈는 가로 900px(3배수 이미지)로 고정하고 세로 사이즈는 유동적으로 설정할 수 있습니다. 화면에 노출되는 배너의 사이즈는 가로 315px이며 화면의 크기가 다른 디바이스에서 확대 또는 축소 됩니다.

• 디바이스 화면 사이즈가 375px 미만: 화면 비율대로 축소
• 디바이스 화면 사이즈가 375px 이상: 315px로 유지
  
  

---

팝업 > 더보기 팝업 - 이미지

사용자가 공지, 쿠폰, 배너 등의 팝업을 클릭할 때 하단에서 이미지 팝업을 띄울 수 있습니다. 이미지의 가로 사이즈를 900px으로 고정하고 세로는 원하는 사이즈로 설정할 수 있습니다. 세로의 길이가 긴 이미지 팝업은 스크롤하여 볼 수 있습니다. 화면에 노출되는 이미지 팝업의 사이즈는 가로 300px(가로 전체 영역) 이며 화면의 크기가 다른 디바이스에서 확대 또는 축소 됩니다.

• 디바이스의 화면 사이즈가 375px 미만: 배너의 사이즈는 화면 비율대로 축소됩니다.
• 디바이스의 화면 사이즈가 375px 이상: 배너의 사이즈는 화면 비율대로 확대됩니다.
  
  

---

팝업 > 이벤트 당첨 팝업 (팝업 내의 "이벤트 당첨 발표 아이콘")

이벤트 당첨자 팝업 상단에 노출되는 이미지입니다. 가로 420px, 세로 132px로 고정된 사이즈의 이미지를 권장합니다. 화면 사이즈 375px 기준 최대 높이는 80px입니다.

---

퀴즈 썸네일

퀴즈 팝업에 노출되는 썸네일 이미지입니다. 가로 144px, 세로 144px의 사이즈를 권장합니다. 퀴즈 썸네일 이미지는 화면 사이즈와 관계없이 46px로 고정 됩니다.

퀴즈 이미지 격자 유형

퀴즈 팝업에 이미지 격자 유형에 사용되는 이미지입니다. 권장 사이즈는 가로 450px, 세로 336px 입니다. 권장 사이즈가 초과될 경우 이미지가 가로 450px, 세로 336px로 자동 축소됩니다.

---

이미지 리소스 규격

📘

아래의 이미지 권장 사이즈는 실제 화면에서 보이는 이미지 사이즈의 3배수를 반영한 것입니다. 이는 고해상도의 모바일 장비에서 고품질의 이미지를 표시하기 위한 것으로 아래의 권장 사이즈 대로 이미지를 제작하시면 됩니다.