> For the complete documentation index, see [llms.txt](https://onestore-dev.gitbook.io/dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://onestore-dev.gitbook.io/dev/webshop/builder.md).

# 웹샵 빌더

사용자가 보는 ONEshop 판매 페이지를 꾸미는 메뉴예요. 샵 정보, 히어로 배너, 섹션, 테마, 웹샵 설정을 편집하고, 발행된 버전을 확인하거나 이전 버전으로 되돌리는 작업을 이 메뉴에서 진행할 수 있어요.

| 화면        | 메뉴 위치                               | 하는 일                  |
| --------- | ----------------------------------- | --------------------- |
| 웹샵 빌더     | `ONEconsole > Webshop > 웹샵 > 웹샵 빌더` | 웹샵 화면을 편집하고 드래프트로 저장  |
| 웹샵 이력     | `ONEconsole > Webshop > 웹샵 > 웹샵 이력` | 발행된 버전 확인, 이전 버전 불러오기 |
| 전체화면 미리보기 | 웹샵 이력의 버전 상세에서 열기                   | 콘솔 메뉴 없이 실제 창 크기로 확인  |

{% hint style="info" %}
**드래프트와 발행**

* 웹샵 빌더에서 저장하는 내용은 **드래프트(임시저장) 한 벌**이에요. 저장할 때마다 버전이 쌓이지 않고 드래프트를 덮어써요.
* 웹샵 빌더에는 발행 버튼이 없어요. 드래프트는 `검증 요청`(판매 후에는 `타이틀 현황`) 화면의 \[**퍼블리시**] 또는 \[**재퍼블리시**]로 발행돼요. 발행하면 드래프트가 새 버전(v1, v2 …)으로 쌓이고, 그 버전이 실제 웹샵에 반영돼요.
* 자세한 내용은 검증 요청하기를 참고해 주세요.
  {% endhint %}

### 웹샵 빌더

웹샵 화면을 구성하고 오른쪽 미리보기로 결과를 바로 확인하는 화면이에요. 화면 제목은 **ONEshop Editor**로 표시돼요.

#### 화면 구성

<table><thead><tr><th width="155.81640625">영역</th><th>내용</th></tr></thead><tbody><tr><td>왼쪽 위</td><td>편집 언어 선택, 언어 관리, 기기 미리보기(PC / 태블릿 / 모바일), [<strong>테마</strong>], [<strong>웹샵 설정</strong>]</td></tr><tr><td>왼쪽 목록</td><td>샵 정보(1개) → 히어로 배너(1개) → 섹션 순서로 표시. 섹션은 끌어서 순서를 바꿀 수 있고, 섹션 옆 숫자는 담긴 상품 수예요</td></tr><tr><td>왼쪽 아래</td><td>[<strong>+ 섹션 추가</strong>]로 그리드 / 카드 / 배너 섹션 추가</td></tr><tr><td>오른쪽</td><td>실시간 미리보기. 오른쪽 아래에서 판매 국가 중 접속 국가를 골라 볼 수 있어요(선택값은 저장되지 않아요)</td></tr></tbody></table>

#### 저장 규칙

* **자동 저장**: 섹션 추가·삭제·순서 변경 같은 목록 구조 변경과 언어 목록 변경은 바로 자동 저장돼요.
* \[**저장**]: 패널 안에서 입력한 문구·이미지·상품·테마 등은 패널 아래 \[**저장**]을 눌러야 저장돼요. \[**저장**]은 바뀐 내용이 있을 때만 활성화돼요.
* 섹션을 삭제하면 목록에서 확인 카드가 열리고, \[**삭제**]를 눌러야 삭제돼요.

{% hint style="warning" %}
**유의사항**

판매 중인 타이틀은 드래프트를 저장해 발행된 웹샵과 달라지면 \[**재퍼블리시**]가 필요해요. 저장만으로는 실제 웹샵이 바뀌지 않아요.
{% endhint %}

#### 패널별 항목

<table><thead><tr><th width="235.552734375">패널</th><th>설정 항목</th></tr></thead><tbody><tr><td>샵 정보</td><td>타이틀, 설명, 헤더 이미지(투명 PNG 권장), 버튼 텍스트(언어별), 버튼 링크, 헤더 스타일(미니멀 / 카드)</td></tr><tr><td>히어로 배너</td><td>자동재생, 전환 간격(초), 페이지네이션(도트 / 숫자 / 알약). 슬라이드별 이미지(3:1 권장, 예: 1500×500px), 제목·설명·뱃지 텍스트(언어별), 텍스트 정렬, 링크(상품 / 내부 / 외부), 장식용 버튼 유무</td></tr><tr><td>섹션 (카드 / 그리드 / 배너)</td><td>섹션 이름(언어별), 구성 상품(여러 개 선택, 끌어서 순서 변경, 이름 검색). 그리드는 페이지 배경 이미지(비우면 첫 상품 이미지), 배너는 타입(클래식 / 스포트라이트 / 캐러셀)과 자동재생</td></tr><tr><td>테마</td><td>프리셋(다크 / 라이트 / 네이비), 브랜드 컬러</td></tr><tr><td>웹샵 설정</td><td>SEO(og:title, og:description, og:image 1200×630px, twitter:image 1200×600px), 배경(색 또는 이미지 1920×1080px 이상), 카드(효과, Hover 설명, 그림자, 색상, 테두리, 둥글기, 투명 이미지 배경), 팝업 둥글기</td></tr></tbody></table>

#### 이미지

<table><thead><tr><th width="217.7060546875">항목</th><th>기준</th></tr></thead><tbody><tr><td>포맷</td><td>PNG, JPG, WebP</td></tr><tr><td>용량</td><td>최대 5MB</td></tr><tr><td>파일명</td><td>확장자 포함 100자 이하</td></tr><tr><td>해상도</td><td>패널별 안내 값은 권장 크기예요</td></tr></tbody></table>

* 파일을 올리거나 **URL로 직접 입력**할 수 있어요.
* 언어별 이미지를 비워 두면 기본 언어 이미지가 쓰여요.

#### 언어

* 편집 언어를 바꾸면 모든 문구·이미지 입력칸과 미리보기가 그 언어로 바뀌어요.
* 언어 관리에서 언어 목록을 바꾸면 타이틀 정보와 같은 타이틀 언어 목록에 함께 저장돼요.
* 기본 언어가 아닌 언어를 편집할 때 \[**AI 번역**]을 누르면, 기본 언어 값이 있고 현재 언어가 비어 있는 칸만 채워져요. 번역 결과는 패널 \[**저장**]을 눌러야 저장돼요.

#### 편집 잠금

타이틀이 검증 중, 판매대기, 예약됨, 판매불가 상태이면 왼쪽 편집 영역이 잠겨요. 잠긴 상태에서도 미리보기는 볼 수 있어요.

***

### 웹샵 이력

\[**퍼블리시**]·\[**재퍼블리시**]로 쌓인 발행 버전과 현재 드래프트를 확인하는 화면이에요.

| 행          | 표시                                                           |
| ---------- | ------------------------------------------------------------ |
| 드래프트 (맨 위) | 현재 빌더에 저장된 드래프트                                              |
| vN         | 현재 웹샵에 반영된 버전은 **배포중**, 나머지는 **이전 버전**. 배포일은 UTC+0 기준으로 표시돼요 |

#### 버전 상세

* 왼쪽에 버전 상태, \[**전체화면 미리보기**], \[**이 버전 불러오기**]\(발행 버전만)가 있어요.
* 지금 그 버전을 불러오면 드래프트에서 무엇이 바뀌는지(텍스트, 섹션, 상품 구성, 테마, 언어, SEO) 요약해서 보여 줘요.
* 오른쪽에는 그 버전이 실제로 보이는 모습이 표시돼요.

#### 이전 버전 불러오기

\[**이 버전 불러오기**]를 누르고 확인 팝업에서 \[**되돌리기**]를 누르면 빌더의 드래프트가 그 버전 내용으로 덮어써져요.

{% hint style="warning" %}
**유의사항**

* 불러오기는 **드래프트만** 바꿔요. 실제 웹샵은 그대로이고, \[**재퍼블리시**]를 해야 반영돼요.
* 드래프트에 아직 발행하지 않은 편집 내용이 있으면, 불러온 뒤에는 그 편집 내용을 복구할 수 없어요.
  {% endhint %}

***

### 전체화면 미리보기

콘솔 메뉴 없이 선택한 버전을 실제 창 크기 그대로 새 탭에서 보여 줘요. 오른쪽 아래 \[**✕ 미리보기 닫기**]로 닫을 수 있어요.

* 접속 국가는 콘텐츠에 한국어가 있으면 대한민국, 없으면 미국으로 고정돼요.

{% hint style="info" %}
테스트 ID로 웹샵에 로그인하면 퍼블리시 전 드래프트 화면도 확인할 수 있어요. 자세한 내용은 웹샵 테스트를 참고해 주세요.
{% endhint %}