Skip to content

기본 위젯 설정 ​

레거시 방식입니다

이 방식은 옵션을 바꿀 때마다 코드를 다시 만들어 쇼핑몰에 재삽입해야 합니다. 위젯 스튜디오에서 프리셋으로 만들면 설치 코드는 그대로 두고 스타일과 콘텐츠만 바꿔도 바로 반영됩니다. 새로 시작하신다면 스튜디오를 쓰세요.

이미 이 방식으로 붙여둔 코드는 그대로 두어도 계속 동작합니다.

콘텐츠 모양 선택하기 ​

[위젯 설정] - [세부 설정] 화면 상단의 '콘텐츠 모양'. 인스타그램 스토리 모양 / 유튜브 쇼츠 모양 중 하나를 고른다. 아래로 게시 순서, 쇼츠 제목 표시, 자동 롤링 기능, 읽음 표시 재생성, 비회원 쇼츠 뷰 제한(Premium), 크기 설정이 이어진다.

[위젯 설정] - [세부 설정] 화면 상단의 '콘텐츠 모양'. 인스타그램 스토리 모양 / 유튜브 쇼츠 모양 중 하나를 고른다. 아래로 게시 순서, 쇼츠 제목 표시, 자동 롤링 기능, 읽음 표시 재생성, 비회원 쇼츠 뷰 제한(Premium), 크기 설정이 이어진다.

위젯 설정의 “세부설정”에서 쇼츠의 위젯모양을 변경하실 수 있습니다.

인스타그램 스토리 모양 예시

인스타그램 스토리 모양 적용 예시. 쇼핑몰 상단 메뉴 바로 아래에 원형 썸네일이 가로로 늘어서고, 각 썸네일 아래 쇼츠 제목이 붙는다.

인스타그램 스토리 모양 적용 예시. 쇼핑몰 상단 메뉴 바로 아래에 원형 썸네일이 가로로 늘어서고, 각 썸네일 아래 쇼츠 제목이 붙는다.

유튜브 쇼츠 모양 예시

유튜브 쇼츠 모양 적용 예시. 9:16 세로 카드가 가로로 나열되고 카드 아래 쇼츠 제목이 붙는다.

유튜브 쇼츠 모양 적용 예시. 9:16 세로 카드가 가로로 나열되고 카드 아래 쇼츠 제목이 붙는다.

html
<shorts-works access-key="af46c25af51e1627d80e2b99a3ddb3b3959c4a00" shape="shorts" width="500" posting-id="clw9cu37f004g421clmgrsoo6, clw9cqt7z0034420fjtms24rn"></shorts-works>

↑ 위 코드가 실제로 렌더링된 모습입니다.

콘텐츠 게시 순서 변경하기 ​

[위젯 설정] - [세부 설정] 의 '게시 순서'. 최신순 · 과거순 · 무작위 중 하나를 고른다.

[위젯 설정] - [세부 설정] 의 '게시 순서'. 최신순 · 과거순 · 무작위 중 하나를 고른다.

[위젯 설정]- [세부설정]에서 설정한 위젯 내 노출되는 콘텐츠의 게시 순서를 선택하실 수 있습니다.

  • 최신순: 게시한 콘텐츠 중 가장 최근에 게시한 쇼츠가 제일 먼저 표시됩니다.
  • 과거순: 게시한 콘텐츠 중 가장 오래전에 게시한 쇼츠가 제일 먼저 표시됩니다.
  • 무작위: 게시한 콘텐츠의 날짜에 관계 없이 무작위로 쇼츠 콘텐츠를 보여줍니다.

일부 쇼츠가 공지로 지정된 경우는 게시순서의 설정에 관계 없이 공지글이 먼저 보여지고, 나머지 쇼츠가 게시순서에 따라 표시됩니다.

쇼츠 제목 표시하기 ​

TIP

쇼츠 제목이란?

위젯 내에 보이는 썸네일 하단 부분에 노출되는 타이틀을 말합니다.

쇼츠 아이콘 아래에 보이는 타이틀이 쇼츠 타이틀이며, 현재 10글자 내외까지 쓰실 수 있습니다.

쇼츠 아이콘 아래에 보이는 타이틀이 쇼츠 타이틀이며, 현재 10글자 내외까지 쓰실 수 있습니다.

쇼츠 제목 표시 설정에 따라서 쇼츠 제목을 보이게 하거나 감출 수 있습니다.

[위젯 설정] - [세부 설정] 의 '쇼츠 제목 표시' 스위치. 켜면 썸네일 아래 제목이 노출되고, 끄면 감춰진다.

[위젯 설정] - [세부 설정] 의 '쇼츠 제목 표시' 스위치. 켜면 썸네일 아래 제목이 노출되고, 끄면 감춰진다.

자동 롤링 - 위젯 내 썸네일 위치 자동 변경 ​

TIP

자동 롤링 기능 위젯영역 안에 위치한 쇼츠의 썸네일 위치가 자동으로 변경됩니다.

롤링 조건은 아래와 같습니다.

  • 위젯의 영역이 쇼츠 썸네일들이 있는 영역보다 작아지면 보이지 않는 영역에 위치한 썸네일들이 자동으로 위치 변경됩니다.

위젯 설정의 “세부설정”에서 “자동 롤링 기능”을 활성화 하실 수 있습니다.

[위젯 설정] - [세부 설정] 의 '자동 롤링 기능' 스위치. 켜면 위젯 영역보다 썸네일이 많을 때 안 보이는 썸네일이 자동으로 자리를 바꾼다.

[위젯 설정] - [세부 설정] 의 '자동 롤링 기능' 스위치. 켜면 위젯 영역보다 썸네일이 많을 때 안 보이는 썸네일이 자동으로 자리를 바꾼다.

스토리 롤링 시 위와 같이 보입니다

스토리 롤링 시 위와 같이 보입니다

쇼츠 형태의 위젯 롤링 시 위와 같이 보입니다.

쇼츠 형태의 위젯 롤링 시 위와 같이 보입니다.

html
<shorts-works access-key="af46c25af51e1627d80e2b99a3ddb3b3959c4a00" shape="embed" width="500" posting-id="clw9d0h340073420tkyaqmpa7"></shorts-works>

↑ 위 코드가 실제로 렌더링된 모습입니다.

크기 설정하기 ​

TIP

크기 설정이란? 선택한 콘텐츠 모양의 썸네일의 크기를 선택할 수 있습니다.

크기 설정에서 지정하는 크기는 실제 웹사이트에서 보이는 크기와 동일합니다. 크기 설정은 스몰, 기본, 라지의 세 종류를 지원하며 해당 크기 이외에 커스텀하게 크기 변경을 원하실 경우 위젯 삽입하기 에서 커스텀 설정을 확인해보세요. 삽입되는 위젯 코드에서 변경하실수도 있습니다.

1) 인스타그램 스토리형

TIP

스몰: 60픽셀 기본: 80픽셀 라지: 100픽셀

스토리형 크기 비교. 위에서부터 스몰(60px) · 기본(80px) · 라지(100px) 원형 썸네일이 실제 크기 그대로 표시되며, 왼쪽 라디오 버튼으로 고른다.

스토리형 크기 비교. 위에서부터 스몰(60px) · 기본(80px) · 라지(100px) 원형 썸네일이 실제 크기 그대로 표시되며, 왼쪽 라디오 버튼으로 고른다.

2) 유튜브 쇼츠형

TIP

쇼츠 모양은 9:16대 비율의 크기에요. 너비를 기준으로 크기를 알려드릴께요. 스몰: 120픽셀 기본: 160픽셀 라진: 200픽셀

쇼츠형 크기 비교. 위에서부터 스몰(120px) · 기본(160px) · 라지(200px) 세로 카드가 실제 크기 그대로 표시된다.

쇼츠형 크기 비교. 위에서부터 스몰(120px) · 기본(160px) · 라지(200px) 세로 카드가 실제 크기 그대로 표시된다.

스토리 테두리 라인(읽음 표시) 설정하기 ​

TIP

스토리 테두리 라인(읽음 표시)란? 스토리 형태의 위젯의 경우는 읽음 여부에 따라서 스토리 아이콘 주변에 테두리가 보입니다. 보통 인스타그램에서 읽지 않은 스토리에 테두리가 있는것과 비슷하다고 보시면 됩니다. 가입 시 읽은 표시 재생성 시간은 기본적으로 “24시간”으로 설정되어 있습니다.

1. 읽음 표시 재생성 시간 설정 ​

[위젯 설정] - [세부 설정] 의 '읽음 표시 재생성'. 기본값은 24시간이며, 드롭다운에서 다시 읽지 않음 표시로 되돌릴 주기를 고른다.

[위젯 설정] - [세부 설정] 의 '읽음 표시 재생성'. 기본값은 24시간이며, 드롭다운에서 다시 읽지 않음 표시로 되돌릴 주기를 고른다.

읽음 표시 재생성 메뉴를 통해서 다음의 설정이 가능합니다.

  • 읽음 상태 유지: 방문객이 쇼츠를 한번 보고 나면 읽음 상태가 저장됩니다. 방문객이 읽음 상태를 계속 유지하고자 하는 경우 해당 옵션을 선택해주세요.
  • 12/24/36/48 시간: (방문객이 이전에 본 쇼츠라고 하더라도) 지정한 시간 이후에 읽음 표시가 다시 표시됩니다
  • 항상 표시: (방문자의 읽음 상태에 상관 없이) 항상 쇼츠 아이콘 테투리가 표시됩니다. 방문을 할때마다 테두리가 활성화된 상태를 원하시는 경우 해당 옵션을 선택해주세요.

2. 커스텀 컬러 설정 기능 ​

커스텀 컬러를 켜면 아래 읽음 표시 테두리 색상을 지정할 수 있습니다. 위젯이 들어갈 웹사이트의 디자인과 어울리는 컬러를 지정해보세요. 스토리와 쇼츠 모두에 테두리 컬러를 커스텀으로 지정해 사용할 수 있습니다.

html
<shorts-works access-key="af46c25af51e1627d80e2b99a3ddb3b3959c4a00" shape="embed" width="500" posting-id="clw9cqt7z0034420fjtms24rn"></shorts-works>

↑ 위 코드가 실제로 렌더링된 모습입니다.