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>

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