위젯 스튜디오
위젯 스튜디오란?
위젯을 프리셋으로 한 번 만들어 설치 코드를 붙여두면, 이후에는 스튜디오에서 스타일과 노출 콘텐츠만 바꾸면 됩니다. 그 위젯아이디를 넣어둔 모든 페이지에 설치 코드를 다시 건드리지 않아도 바로 반영됩니다.
쇼핑몰에 위젯을 넣는 방법은 두 가지입니다. 새로 시작하신다면 스튜디오를 쓰세요.
| 위젯 스튜디오 (권장) | 위젯 삽입 (레거시) | |
|---|---|---|
| 설치 코드 | widget-id 를 넣어 한 번만 붙임 | 옵션을 바꿀 때마다 다시 붙여야 함 |
| 스타일 변경 | 스튜디오에서 바꾸면 즉시 반영 | 쇼핑몰 HTML 에서 코드 교체 필요 |
| 노출 콘텐츠 변경 | 프리셋의 그룹·쇼츠만 바꾸면 됨 | 코드의 posting-id 를 직접 수정 |
| 위젯 여러 개 운영 | 프리셋 목록에서 한눈에 관리 | 코드마다 따로 관리 |
프리셋 만들기
프리셋 목록 화면입니다. 만들어 둔 위젯들이 카드로 쌓이고, 각 카드에서 설치 코드를 바로 복사할 수 있습니다.
- 관리자 화면에서 [위젯 설정] - [위젯 스튜디오] 로 들어갑니다.
- 오른쪽 위 [+ 프리셋 추가] 를 누릅니다.
- 프리셋 이름과 위젯아이디를 정합니다.
- 위젯아이디는 직접 지정하는 값입니다. 설치 코드에 들어가는 것이 이 값이라 프리셋 이름을 바꿔도 위젯아이디는 그대로 유지됩니다.
- 쓰임새가 드러나는 이름을 권합니다 —
main-story,sangsepeiji-shorts처럼요.
- 오른쪽 미리보기에서 PC / 모바일을 오가며 결과를 확인합니다. 설정은 자동 저장됩니다.
- 아래 설치 코드를 복사해 쇼핑몰의 원하는 위치에 붙여넣습니다.
<shorts-works access-key="발급받은 액세스키" widget-id="main-story"></shorts-works>설치 코드는 한 번만
같은 위젯아이디를 여러 페이지에 붙여도 됩니다. 이후 스타일·콘텐츠 변경은 전부 스튜디오에서 하면 되고, 쇼핑몰 HTML 은 다시 건드리지 않습니다.
프리셋 상세 설정
[설정 편집] 을 누르면 열리는 화면입니다. 왼쪽에서 값을 바꾸면 오른쪽 미리보기에 바로 반영됩니다.
형태와 크기
- 형태 — 스토리(원형) 또는 쇼츠(카드)
- 크기 — 작게 / 기본 / 크게 / 커스텀
- 모서리 둥글기 — 스토리 형태일 땐 무시됩니다. 비우면 원형이고
0을 넣으면 각지게 됩니다 (px, % 모두 가능) - 노출 기기 — PC·모바일 모두 / 특정 기기에만
- 커스텀 스타일 (CSS) — 위젯 바깥
style속성으로 나가는 값입니다. 여백 조정처럼 스튜디오 설정으로 표현할 수 없는 것만 넣으세요. 크기·정렬은 위 설정으로 하는 편이 안전합니다
동작
| 설정 | 하는 일 |
|---|---|
| 화면 고정 위젯 (sticky) | 위젯 하나를 방문자 화면 위에 계속 띄웁니다 |
| 노출 개수 | 여러 콘텐츠를 나열할지, 하나만 보여줄지 |
| 쇼츠 제목 | 위젯 아래에 쇼츠 제목 표시 |
| 쇼츠 카드 테두리 | 쇼츠 형태 카드에 브랜드 컬러 테두리 적용 |
| 표시 방식 | 고정 표시(선택한 순서 그대로) 또는 자동 롤링 |
| 미리보기 방식 | 영상 미리보기 인디케이터 방식 |
| 재생 방식 | 팝업 재생 등. 스토리는 원형 형태라 팝업 재생만 지원합니다 |
| 플레이어 컨트롤 숨김 | 재생·일시정지 등 하단 컨트롤 감추기 |
| 재생 아이콘 표시 | 썸네일 위에 재생 버튼을 얹어 영상임을 알립니다 |
| 좋아요 숨김 · 쇼츠 제목 숨김 | 재생 화면의 요소 감추기 |
| 인스타그램 작성자 표시 | 인스타그램에서 가져온 콘텐츠에 작성자 프로필 함께 노출 |
| 상품 태그 숨김 · 테마 · 할인율 표시 | 영상 위에 뜨는 상품 태그의 노출과 밝기, 할인율 표기 |
브랜드 컬러
스토리 테두리와 강조 요소에 쓰이는 색입니다. 준비된 팔레트(ShortsWorks · Mono · Fresh · Signal · Pop) 중에 고르거나, 시작 색상과 끝 색상을 직접 지정해 그라데이션을 만들 수 있습니다.
콘텐츠 연결
이 프리셋이 무엇을 보여줄지 정합니다. 그룹 · 쇼츠 · 상품을 프리셋 단위로 저장합니다.
- 그룹으로 묶어두면 콘텐츠가 늘어도 프리셋은 안 건드려도 됩니다 (그룹 관리 참고)
- 특정 쇼츠만 노출하려면 쇼츠를 직접 고릅니다
상세페이지에 붙일 때 어떤 상품의 콘텐츠를 보여줄지는 상품 연결 방식에서 정합니다.
이미 붙여둔 코드가 있다면
스튜디오 이전에 손으로 만들어 붙여둔 <shorts-works …> 코드가 있다면 그대로 옮길 수 있습니다.
- 스튜디오 오른쪽 위 [가져오기] 를 누릅니다.
- 기존 설치 코드를 그대로 붙여넣고 [프리셋으로 가져오기] 를 누릅니다.
- 그 설정 그대로인 프리셋이 만들어집니다. 위젯아이디는 새로 발급됩니다.
기존 페이지는 안 깨집니다
가져오기를 해도 쇼핑몰에 이미 붙어 있는 코드는 그대로 두어도 계속 동작합니다. 프리셋으로 관리하려면 편할 때 새 설치 코드로 교체하시면 됩니다.
전체 위젯 ON / OFF
스튜디오 오른쪽 위 [전체 위젯 ON] 토글은 계정 전체의 위젯 노출을 한 번에 끄고 켭니다. 쇼핑몰 점검처럼 잠깐 전부 내려야 할 때 쓰세요. 프리셋마다 있는 개별 토글로는 그 위젯 하나만 끕니다.
기본 위젯 설정과는 뭐가 다른가요
- 기본 위젯 설정 은 계정 전체의 기본값입니다.
- 위젯아이디가 없는 기존 설치 코드는 계속 기본 위젯 설정을 따릅니다.
- 프리셋에 지정한 값은 그 위젯아이디를 쓴 곳에만 적용됩니다.