> For the complete documentation index, see [llms.txt](https://catenoid-support.gitbook.io/klc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://catenoid-support.gitbook.io/klc/userguide/managepage/frontsetting.md).

# 페이지 설정

이 페이지에서는 Kollus Live Commerce 관리 시스템에서 고객사 쇼핑몰에 노출되는 방송 전시 페이지를 확인하고 설정하는 방법에 대해 안내합니다.

> ### **페이지 설정** <a href="#id" id="id"></a>
>
> 페이지 설정에서는 방송 전시 페이지와 리허설 전시 페이지 URL를 확인할 수 있습니다. 또한 방송 전시 페이지에 노출할 여러 항목들을 자유롭게 설정할 수 있습니다.

### **페이지 설정** <a href="#id-.1" id="id-.1"></a>

페이지 설정에서는 방송 전시 페이지와 리허설 전시 페이지 URL를 확인할 수 있습니다. 또한 서비스 계약 시 선택한 스킨 종류에 따라 상단 이미지, 상단 배경 색상, 상단 텍스트 등 여러 항목들을 자유롭게 설정할 수 있습니다. 입력 가능한 항목에 모두 입력한 후, 하단의 **수정** 버튼을 클릭하면 설정이 완료됩니다.

#### **스킨 A로 설정되어 있는 경우**

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2Fd94U14CRnlk7eR4xQxG1%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EC%84%A4%EC%A0%95_%EC%8A%A4%ED%82%A8A.png?alt=media&amp;token=01d10b0e-61e5-45aa-a024-34c4b58e62a9" alt=""><figcaption><p>페이지 관리 > 페이지 설정(스킨 A로 설정되어 있는 경우)</p></figcaption></figure>

<table><thead><tr><th width="192">항목</th><th>설명</th></tr></thead><tbody><tr><td>방송 전시 페이지 URL</td><td>고객사 쇼핑몰의 방송 전시 페이지 URL를 확인할 수 있습니다. 우측의 <strong>확인</strong> 버튼을 클릭하면 방송 전시 페이지가 브라우저 새 창으로 열립니다.</td></tr><tr><td>리허설 전시 페이지 URL</td><td>Kollus Live Commerce 서비스는 실제 라이브 방송을 진행하기 전 카메라, 통신, 음향 등 방송 상태를 점검할 수 있는 리허설(rehearsal) 기능을 제공합니다. 등록한 리허설 정보는 방송 전시 페이지에는 노출되지 않으며, 별도로 제공되는 페이지를 통해 확인할 수 있습니다. 우측의 <strong>확인</strong> 버튼을 클릭하면 리허설 전시 페이지가 브라우저 새 창으로 열립니다.</td></tr><tr><td>헤더 사용 여부</td><td>방송 전시 페이지에 헤더(header)를 사용할지 선택합니다. 헤더 사용 여부에 따라 방송 전시 페이지에 헤더 로고 등이 노출됩니다.</td></tr><tr><td>헤더 타입</td><td>방송 전시 페이지의 헤더 타입을 선택합니다. 이미지와 HTML 중 하나를 선택할 수 있습니다. <strong>이미지</strong>를 선택할 경우에는 헤더 로고와 헤더 로고 URL를 설정할 수 있으며, <strong>HTML</strong>을 선택할 경우에는 HTML 코드를 입력할 수 있습니다.</td></tr><tr><td>헤더 로고</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 헤더에 노출할 로고를 등록합니다. 5 MB 이하의 383×265px 사이즈로 제작된 png, jpg, jpeg 형식 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다.</td></tr><tr><td>헤더 로고 URL (PC)</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 PC Web 헤더 로고에 연결할 URL 주소를 입력합니다. URL 주소는 반드시 https://를 포함하여 입력하도록 합니다.</td></tr><tr><td>헤더 로고 URL (Mobile)</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 Mobile Web 헤더 로고에 연결할 URL 주소를 입력합니다. URL 주소는 반드시 https://를 포함하여 입력하도록 합니다.</td></tr><tr><td>헤더 HTML (PC)</td><td>헤더 타입에서 <strong>HTML</strong>을 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 PC Web 헤더에 설정할 HTML 코드를 입력합니다.</td></tr><tr><td>헤더 HTML (Mobile)</td><td>헤더 타입에서 <strong>HTML</strong>을 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 Mobile Web 헤더에 설정할 HTML 코드를 입력합니다.</td></tr><tr><td>페이지명</td><td>웹 브라우저 상단 탭 영역, 북마크바, 방문 기록 등에 표시되는 방송 상세 페이지의 명칭을 설정할 수 있습니다.</td></tr><tr><td>페이지 아이콘</td><td>페이지명과 함께 웹 브라우저 상단 탭 영역, 북마크바, 방문 기록 등에 표시되는 아이콘인 파비콘(favicon)을 설정할 수 있습니다. 5 MB 이하의 48×48px 사이즈로 제작된 ico 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다. </td></tr><tr><td>고객사 로고</td><td>고객사 로고 이미지를 등록합니다. 5 MB 이하의 720×720px 사이즈로 제작된 png, jpg, jpeg 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다.</td></tr><tr><td>상단 배경 이미지(PC)</td><td>방송 전시 페이지(PC Web) 상단에 노출할 이미지를 등록합니다. 5 MB 이하의 1920×720px 사이즈로 제작된 png, jpg, jpeg 형식 이미지 파일만 등록할 수 있습니다. 참고로 <strong>이미지 제작 가이드라인 다운로드</strong> 버튼을 클릭하면 psd 형식의 디자인 가이드 파일이 다운로드되며, 해당 파일을 활용하여 이미지를 제작하는 것을 권장합니다.</td></tr><tr><td>상단 배경 이미지(Mobile)</td><td>방송 전시 페이지(Mobile Web) 상단에 노출할 이미지를 등록합니다. 5 MB 이하의 360×864px 사이즈로 제작된 png, jpg, jpeg 형식 이미지 파일만 등록할 수 있습니다. 참고로 <strong>이미지 제작 가이드라인 다운로드</strong> 버튼을 클릭하면 psd 형식의 디자인 가이드 파일이 다운로드되며, 해당 파일을 활용하여 이미지를 제작하는 것을 권장합니다.</td></tr><tr><td>지난 LIVE 모아보기 노출 여부</td><td>방송 전시 페이지에 <strong>지난 LIVE 모아보기</strong> 영역을 노출할지 선택합니다. 지난 LIVE 모아보기 영역은 라이브 방송 종료 후 변환된 VOD 방송 또는 추가로 등록한 VOD 방송이 노출되는 영역으로 노출 여부 설정에 따라 방송 전시 페이지에 <strong>지난 LIVE 모아보기</strong> 영역이 노출됩니다.</td></tr></tbody></table>

#### 스킨 B**로 설정되어 있는 경우**

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FLZvxHAeNf6SlKw47ntpV%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EC%84%A4%EC%A0%95_%EC%8A%A4%ED%82%A8B.png?alt=media&amp;token=b955e791-40ae-49d4-8cea-ea3fe9a457ad" alt=""><figcaption><p>페이지 관리 > 페이지 설정(스킨 B로 설정되어 있는 경우)</p></figcaption></figure>

<table><thead><tr><th width="192">항목</th><th>설명</th></tr></thead><tbody><tr><td>방송 전시 페이지 URL</td><td>고객사 쇼핑몰의 방송 전시 페이지 URL를 확인할 수 있습니다. 우측의 <strong>확인</strong> 버튼을 클릭하면 방송 전시 페이지가 브라우저 새 창으로 열립니다.</td></tr><tr><td>리허설 전시 페이지 URL</td><td>Kollus Live Commerce 서비스는 실제 라이브 방송을 진행하기 전 카메라, 통신, 음향 등 방송 상태를 점검할 수 있는 리허설(rehearsal) 기능을 제공합니다. 등록한 리허설 정보는 방송 전시 페이지에는 노출되지 않으며, 별도로 제공되는 페이지를 통해 확인할 수 있습니다. 우측의 <strong>확인</strong> 버튼을 클릭하면 리허설 전시 페이지가 브라우저 새 창으로 열립니다.</td></tr><tr><td>헤더 사용 여부</td><td>방송 전시 페이지에 헤더(header)를 사용할지 선택합니다. 헤더 사용 여부에 따라 방송 전시 페이지에 헤더 로고 등이 노출됩니다.</td></tr><tr><td>헤더 타입</td><td>방송 전시 페이지의 헤더 타입을 선택합니다. 이미지와 HTML 중 하나를 선택할 수 있습니다. <strong>이미지</strong>를 선택할 경우에는 헤더 로고와 헤더 로고 URL를 설정할 수 있으며, <strong>HTML</strong>을 선택할 경우에는 HTML 코드를 입력할 수 있습니다.</td></tr><tr><td>헤더 로고</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 헤더에 노출할 로고를 등록합니다. 5 MB 이하의 383×265px 사이즈로 제작된 png, jpg, jpeg 형식 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다.</td></tr><tr><td>헤더 로고 URL (PC)</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 PC Web 헤더 로고에 연결할 URL 주소를 입력합니다. URL 주소는 반드시 https://를 포함하여 입력하도록 합니다.</td></tr><tr><td>헤더 로고 URL (Mobile)</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 Mobile Web 헤더 로고에 연결할 URL 주소를 입력합니다. URL 주소는 반드시 https://를 포함하여 입력하도록 합니다.</td></tr><tr><td>헤더 HTML (PC)</td><td>헤더 타입에서 <strong>HTML</strong>을 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 PC Web 헤더에 설정할 HTML 코드를 입력합니다.</td></tr><tr><td>헤더 HTML (Mobile)</td><td>헤더 타입에서 <strong>HTML</strong>을 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 Mobile Web 헤더에 설정할 HTML 코드를 입력합니다.</td></tr><tr><td>페이지명</td><td>웹 브라우저 상단 탭 영역, 북마크바, 방문 기록 등에 표시되는 방송 상세 페이지의 명칭을 설정할 수 있습니다.</td></tr><tr><td>페이지 아이콘</td><td>페이지명과 함께 웹 브라우저 상단 탭 영역, 북마크바, 방문 기록 등에 표시되는 아이콘인 파비콘(favicon)을 설정할 수 있습니다. 5 MB 이하의 48×48px 사이즈로 제작된 ico 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다. </td></tr><tr><td>고객사 로고</td><td>고객사 로고 이미지를 등록합니다. 5 MB 이하의 720×720px 사이즈로 제작된 png, jpg, jpeg 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다.</td></tr><tr><td>지난 LIVE 모아보기 노출 여부</td><td>방송 전시 페이지에 <strong>지난 LIVE 모아보기</strong> 영역을 노출할지 선택합니다. 지난 LIVE 모아보기 영역은 라이브 방송 종료 후 변환된 VOD 방송 또는 추가로 등록한 VOD 방송이 노출되는 영역으로 노출 여부 설정에 따라 방송 전시 페이지에 <strong>지난 LIVE 모아보기</strong> 영역이 노출됩니다.</td></tr></tbody></table>

#### 스킨 C**로 설정되어 있는 경우**

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FrK3UQk8yU94Bv7zXsZmg%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EC%84%A4%EC%A0%95_%EC%8A%A4%ED%82%A8C.png?alt=media&amp;token=f3c7d434-5555-4546-921f-4fb877f373cc" alt=""><figcaption><p>페이지 관리 > 페이지 설정(스킨 C로 설정되어 있는 경우)</p></figcaption></figure>

<table><thead><tr><th width="192">항목</th><th>설명</th></tr></thead><tbody><tr><td>방송 전시 페이지 URL</td><td>고객사 쇼핑몰의 방송 전시 페이지 URL를 확인할 수 있습니다. 우측의 <strong>확인</strong> 버튼을 클릭하면 방송 전시 페이지가 브라우저 새 창으로 열립니다.</td></tr><tr><td>리허설 전시 페이지 URL</td><td>Kollus Live Commerce 서비스는 실제 라이브 방송을 진행하기 전 카메라, 통신, 음향 등 방송 상태를 점검할 수 있는 리허설(rehearsal) 기능을 제공합니다. 등록한 리허설 정보는 방송 전시 페이지에는 노출되지 않으며, 별도로 제공되는 페이지를 통해 확인할 수 있습니다. 우측의 <strong>확인</strong> 버튼을 클릭하면 리허설 전시 페이지가 브라우저 새 창으로 열립니다.</td></tr><tr><td>헤더 사용 여부</td><td>방송 전시 페이지에 헤더(header)를 사용할지 선택합니다. 헤더 사용 여부에 따라 방송 전시 페이지에 헤더 로고 등이 노출됩니다.</td></tr><tr><td>헤더 타입</td><td>방송 전시 페이지의 헤더 타입을 선택합니다. 이미지와 HTML 중 하나를 선택할 수 있습니다. <strong>이미지</strong>를 선택할 경우에는 헤더 로고와 헤더 로고 URL를 설정할 수 있으며, <strong>HTML</strong>을 선택할 경우에는 HTML 코드를 입력할 수 있습니다.</td></tr><tr><td>헤더 로고</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 헤더에 노출할 로고를 등록합니다. 5 MB 이하의 383×265px 사이즈로 제작된 png, jpg, jpeg 형식 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다.</td></tr><tr><td>헤더 로고 URL (PC)</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 PC Web 헤더 로고에 연결할 URL 주소를 입력합니다. URL 주소는 반드시 https://를 포함하여 입력하도록 합니다.</td></tr><tr><td>헤더 로고 URL (Mobile)</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 Mobile Web 헤더 로고에 연결할 URL 주소를 입력합니다. URL 주소는 반드시 https://를 포함하여 입력하도록 합니다.</td></tr><tr><td>헤더 HTML (PC)</td><td>헤더 타입에서 <strong>HTML</strong>을 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 PC Web 헤더에 설정할 HTML 코드를 입력합니다.</td></tr><tr><td>헤더 HTML (Mobile)</td><td>헤더 타입에서 <strong>HTML</strong>을 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 Mobile Web 헤더에 설정할 HTML 코드를 입력합니다.</td></tr><tr><td>페이지명</td><td>웹 브라우저 상단 탭 영역, 북마크바, 방문 기록 등에 표시되는 방송 상세 페이지의 명칭을 설정할 수 있습니다.</td></tr><tr><td>페이지 아이콘</td><td>페이지명과 함께 웹 브라우저 상단 탭 영역, 북마크바, 방문 기록 등에 표시되는 아이콘인 파비콘(favicon)을 설정할 수 있습니다. 5 MB 이하의 48×48px 사이즈로 제작된 ico 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다. </td></tr><tr><td>고객사 로고</td><td>고객사 로고 이미지를 등록합니다. 5 MB 이하의 720×720px 사이즈로 제작된 png, jpg, jpeg 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다.</td></tr><tr><td>지난 LIVE 모아보기 노출 여부</td><td>방송 전시 페이지에 <strong>지난 LIVE 모아보기</strong> 영역을 노출할지 선택합니다. 지난 LIVE 모아보기 영역은 라이브 방송 종료 후 변환된 VOD 방송 또는 추가로 등록한 VOD 방송이 노출되는 영역으로 노출 여부 설정에 따라 방송 전시 페이지에 <strong>지난 LIVE 모아보기</strong> 영역이 노출됩니다.</td></tr></tbody></table>

#### 스킨 D**로 설정되어 있는 경우**

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FvfmZD4UJmPMc74vETMXO%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EC%84%A4%EC%A0%95_%EC%8A%A4%ED%82%A8D.png?alt=media&amp;token=d36162a7-bc01-4973-9ada-4cc57055edc2" alt=""><figcaption><p>페이지 관리 > 페이지 설정(스킨 D로 설정되어 있는 경우)</p></figcaption></figure>

<table><thead><tr><th width="192">항목</th><th>설명</th></tr></thead><tbody><tr><td>방송 전시 페이지 URL</td><td>고객사 쇼핑몰의 방송 전시 페이지 URL를 확인할 수 있습니다. 우측의 <strong>확인</strong> 버튼을 클릭하면 방송 전시 페이지가 브라우저 새 창으로 열립니다.</td></tr><tr><td>리허설 전시 페이지 URL</td><td>Kollus Live Commerce 서비스는 실제 라이브 방송을 진행하기 전 카메라, 통신, 음향 등 방송 상태를 점검할 수 있는 리허설(rehearsal) 기능을 제공합니다. 등록한 리허설 정보는 방송 전시 페이지에는 노출되지 않으며, 별도로 제공되는 페이지를 통해 확인할 수 있습니다. 우측의 <strong>확인</strong> 버튼을 클릭하면 리허설 전시 페이지가 브라우저 새 창으로 열립니다.</td></tr><tr><td>헤더 사용 여부</td><td>방송 전시 페이지에 헤더(header)를 사용할지 선택합니다. 헤더 사용 여부에 따라 방송 전시 페이지에 헤더 로고 등이 노출됩니다.</td></tr><tr><td>헤더 타입</td><td>방송 전시 페이지의 헤더 타입을 선택합니다. 이미지와 HTML 중 하나를 선택할 수 있습니다. <strong>이미지</strong>를 선택할 경우에는 헤더 로고와 헤더 로고 URL를 설정할 수 있으며, <strong>HTML</strong>을 선택할 경우에는 HTML 코드를 입력할 수 있습니다.</td></tr><tr><td>헤더 로고</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 헤더에 노출할 로고를 등록합니다. 5 MB 이하의 383×265px 사이즈로 제작된 png, jpg, jpeg 형식 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다.</td></tr><tr><td>헤더 로고 URL (PC)</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 PC Web 헤더 로고에 연결할 URL 주소를 입력합니다. URL 주소는 반드시 https://를 포함하여 입력하도록 합니다.</td></tr><tr><td>헤더 로고 URL (Mobile)</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 Mobile Web 헤더 로고에 연결할 URL 주소를 입력합니다. URL 주소는 반드시 https://를 포함하여 입력하도록 합니다.</td></tr><tr><td>헤더 HTML (PC)</td><td>헤더 타입에서 <strong>HTML</strong>을 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 PC Web 헤더에 설정할 HTML 코드를 입력합니다.</td></tr><tr><td>헤더 HTML (Mobile)</td><td>헤더 타입에서 <strong>HTML</strong>을 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 Mobile Web 헤더에 설정할 HTML 코드를 입력합니다.</td></tr><tr><td>페이지명</td><td>웹 브라우저 상단 탭 영역, 북마크바, 방문 기록 등에 표시되는 방송 상세 페이지의 명칭을 설정할 수 있습니다.</td></tr><tr><td>페이지 아이콘</td><td>페이지명과 함께 웹 브라우저 상단 탭 영역, 북마크바, 방문 기록 등에 표시되는 아이콘인 파비콘(favicon)을 설정할 수 있습니다. 5 MB 이하의 48×48px 사이즈로 제작된 ico 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다. </td></tr><tr><td>고객사 로고</td><td>고객사 로고 이미지를 등록합니다. 5 MB 이하의 720×720px 사이즈로 제작된 png, jpg, jpeg 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다.</td></tr><tr><td>상단 배경 컬러(RGB)</td><td>방송 전시 페이지(PC/Mobile Web) 상단에 노출할 배경 색상을 설정합니다. 컬러 설정 필드를 클릭하면 컬러 팔레트가 나타나며, 컬러 팔레트에서 원하는 컬러를 선택한 후 <strong>선택</strong> 버튼을 클릭하면 컬러 설정 필드에 선택한 컬러와 컬러코드가 노출됩니다.</td></tr><tr><td>지난 LIVE 모아보기 노출 여부</td><td>방송 전시 페이지에 <strong>지난 LIVE 모아보기</strong> 영역을 노출할지 선택합니다. 지난 LIVE 모아보기 영역은 라이브 방송 종료 후 변환된 VOD 방송 또는 추가로 등록한 VOD 방송이 노출되는 영역으로 노출 여부 설정에 따라 방송 전시 페이지에 <strong>지난 LIVE 모아보기</strong> 영역이 노출됩니다.</td></tr></tbody></table>

#### 스킨 E**로 설정되어 있는 경우**

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FIDdNX2oxtr3sKpEmHOLe%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EC%84%A4%EC%A0%95_%EC%8A%A4%ED%82%A8E.png?alt=media&amp;token=7c5a6b7d-dc7f-4fb7-a5f6-c6b7690e6834" alt=""><figcaption><p>페이지 관리 > 페이지 설정(스킨 E로 설정되어 있는 경우)</p></figcaption></figure>

<table><thead><tr><th width="192">항목</th><th>설명</th></tr></thead><tbody><tr><td>방송 전시 페이지 URL</td><td>고객사 쇼핑몰의 방송 전시 페이지 URL를 확인할 수 있습니다. 우측의 <strong>확인</strong> 버튼을 클릭하면 방송 전시 페이지가 브라우저 새 창으로 열립니다.</td></tr><tr><td>리허설 전시 페이지 URL</td><td>Kollus Live Commerce 서비스는 실제 라이브 방송을 진행하기 전 카메라, 통신, 음향 등 방송 상태를 점검할 수 있는 리허설(rehearsal) 기능을 제공합니다. 등록한 리허설 정보는 방송 전시 페이지에는 노출되지 않으며, 별도로 제공되는 페이지를 통해 확인할 수 있습니다. 우측의 <strong>확인</strong> 버튼을 클릭하면 리허설 전시 페이지가 브라우저 새 창으로 열립니다.</td></tr><tr><td>헤더 사용 여부</td><td>방송 전시 페이지에 헤더(header)를 사용할지 선택합니다. 헤더 사용 여부에 따라 방송 전시 페이지에 헤더 로고 등이 노출됩니다.</td></tr><tr><td>헤더 타입</td><td>방송 전시 페이지의 헤더 타입을 선택합니다. 이미지와 HTML 중 하나를 선택할 수 있습니다. <strong>이미지</strong>를 선택할 경우에는 헤더 로고와 헤더 로고 URL를 설정할 수 있으며, <strong>HTML</strong>을 선택할 경우에는 HTML 코드를 입력할 수 있습니다.</td></tr><tr><td>헤더 로고</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 헤더에 노출할 로고를 등록합니다. 5 MB 이하의 383×265px 사이즈로 제작된 png, jpg, jpeg 형식 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다.</td></tr><tr><td>헤더 로고 URL (PC)</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 PC Web 헤더 로고에 연결할 URL 주소를 입력합니다. URL 주소는 반드시 https://를 포함하여 입력하도록 합니다.</td></tr><tr><td>헤더 로고 URL (Mobile)</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 Mobile Web 헤더 로고에 연결할 URL 주소를 입력합니다. URL 주소는 반드시 https://를 포함하여 입력하도록 합니다.</td></tr><tr><td>헤더 HTML (PC)</td><td>헤더 타입에서 <strong>HTML</strong>을 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 PC Web 헤더에 설정할 HTML 코드를 입력합니다.</td></tr><tr><td>헤더 HTML (Mobile)</td><td>헤더 타입에서 <strong>HTML</strong>을 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 Mobile Web 헤더에 설정할 HTML 코드를 입력합니다.</td></tr><tr><td>페이지명</td><td>웹 브라우저 상단 탭 영역, 북마크바, 방문 기록 등에 표시되는 방송 상세 페이지의 명칭을 설정할 수 있습니다.</td></tr><tr><td>페이지 아이콘</td><td>페이지명과 함께 웹 브라우저 상단 탭 영역, 북마크바, 방문 기록 등에 표시되는 아이콘인 파비콘(favicon)을 설정할 수 있습니다. 5 MB 이하의 48×48px 사이즈로 제작된 ico 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다. </td></tr><tr><td>고객사 로고</td><td>고객사 로고 이미지를 등록합니다. 5 MB 이하의 720×720px 사이즈로 제작된 png, jpg, jpeg 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다.</td></tr><tr><td>상단 배경 컬러(RGB)</td><td>방송 전시 페이지(PC/Mobile Web) 상단에 노출할 배경 색상을 설정합니다. 컬러 설정 필드를 클릭하면 컬러 팔레트가 나타나며, 컬러 팔레트에서 원하는 컬러를 선택한 후 <strong>선택</strong> 버튼을 클릭하면 컬러 설정 필드에 선택한 컬러와 컬러코드가 노출됩니다.</td></tr><tr><td>상단 텍스트(1단)</td><td>방송 전시 페이지(PC/Mobile Web) 상단에 노출할 텍스트와 텍스트 컬러를 설정합니다. 상단 텍스트는 2단으로 노출 가능하며, 해당 필드에서는 <strong>1단</strong>에 노출할 텍스트를 입력합니다. 상단 텍스트는 공백 포함 최대 20자까지 입력할 수 있습니다. 이어서 컬러 설정 필드를 클릭하면 컬러 팔레트가 나타나며, 컬러 팔레트에서 원하는 컬러를 선택한 후 <strong>선택</strong> 버튼을 클릭하면 컬러 설정 필드에 선택한 컬러와 컬러코드가 노출됩니다.</td></tr><tr><td>상단 텍스트(2단)</td><td>방송 전시 페이지(PC/Mobile Web) 상단에 노출할 텍스트와 텍스트 컬러를 설정합니다. 상단 텍스트는 2단으로 노출 가능하며, 해당 필드에서는 <strong>2단</strong>에 노출할 텍스트를 입력합니다. 상단 텍스트는 공백 포함 최대 20자까지 입력할 수 있습니다. 이어서 컬러 설정 필드를 클릭하면 컬러 팔레트가 나타나며, 컬러 팔레트에서 원하는 컬러를 선택한 후 <strong>선택</strong> 버튼을 클릭하면 컬러 설정 필드에 선택한 컬러와 컬러코드가 노출됩니다.</td></tr><tr><td>상단 미리보기</td><td><strong>미리보기</strong> 버튼을 클릭하면 설정한 상단 배경 컬러와 텍스트를 미리 확인해 볼 수 있습니다.</td></tr><tr><td>지난 LIVE 모아보기 노출 여부</td><td>방송 전시 페이지에 <strong>지난 LIVE 모아보기</strong> 영역을 노출할지 선택합니다. 지난 LIVE 모아보기 영역은 라이브 방송 종료 후 변환된 VOD 방송 또는 추가로 등록한 VOD 방송이 노출되는 영역으로 노출 여부 설정에 따라 방송 전시 페이지에 <strong>지난 LIVE 모아보기</strong> 영역이 노출됩니다.</td></tr></tbody></table>

#### 스킨 F**로 설정되어 있는 경우**

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FG0MvmvfKlahJPZbv5POG%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EC%84%A4%EC%A0%95_%EC%8A%A4%ED%82%A8F.png?alt=media&amp;token=39acec54-8bfc-46d8-8cee-268612ab25ef" alt=""><figcaption><p>페이지 관리 > 페이지 설정(스킨 F로 설정되어 있는 경우)</p></figcaption></figure>

<table><thead><tr><th width="192">항목</th><th>설명</th></tr></thead><tbody><tr><td>방송 전시 페이지 URL</td><td>고객사 쇼핑몰의 방송 전시 페이지 URL를 확인할 수 있습니다. 우측의 <strong>확인</strong> 버튼을 클릭하면 방송 전시 페이지가 브라우저 새 창으로 열립니다.</td></tr><tr><td>리허설 전시 페이지 URL</td><td>Kollus Live Commerce 서비스는 실제 라이브 방송을 진행하기 전 카메라, 통신, 음향 등 방송 상태를 점검할 수 있는 리허설(rehearsal) 기능을 제공합니다. 등록한 리허설 정보는 방송 전시 페이지에는 노출되지 않으며, 별도로 제공되는 페이지를 통해 확인할 수 있습니다. 우측의 <strong>확인</strong> 버튼을 클릭하면 리허설 전시 페이지가 브라우저 새 창으로 열립니다.</td></tr><tr><td>헤더 사용 여부</td><td>방송 전시 페이지에 헤더(header)를 사용할지 선택합니다. 헤더 사용 여부에 따라 방송 전시 페이지에 헤더 로고 등이 노출됩니다.</td></tr><tr><td>헤더 타입</td><td>방송 전시 페이지의 헤더 타입을 선택합니다. 이미지와 HTML 중 하나를 선택할 수 있습니다. <strong>이미지</strong>를 선택할 경우에는 헤더 로고와 헤더 로고 URL를 설정할 수 있으며, <strong>HTML</strong>을 선택할 경우에는 HTML 코드를 입력할 수 있습니다.</td></tr><tr><td>헤더 로고</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 헤더에 노출할 로고를 등록합니다. 5 MB 이하의 383×265px 사이즈로 제작된 png, jpg, jpeg 형식 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다.</td></tr><tr><td>헤더 로고 URL (PC)</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 PC Web 헤더 로고에 연결할 URL 주소를 입력합니다. URL 주소는 반드시 https://를 포함하여 입력하도록 합니다.</td></tr><tr><td>헤더 로고 URL (Mobile)</td><td>헤더 타입에서 <strong>이미지</strong>를 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 Mobile Web 헤더 로고에 연결할 URL 주소를 입력합니다. URL 주소는 반드시 https://를 포함하여 입력하도록 합니다.</td></tr><tr><td>헤더 HTML (PC)</td><td>헤더 타입에서 <strong>HTML</strong>을 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 PC Web 헤더에 설정할 HTML 코드를 입력합니다.</td></tr><tr><td>헤더 HTML (Mobile)</td><td>헤더 타입에서 <strong>HTML</strong>을 선택하면 설정할 수 있는 항목이며, 방송 전시 페이지 Mobile Web 헤더에 설정할 HTML 코드를 입력합니다.</td></tr><tr><td>페이지명</td><td>웹 브라우저 상단 탭 영역, 북마크바, 방문 기록 등에 표시되는 방송 상세 페이지의 명칭을 설정할 수 있습니다.</td></tr><tr><td>페이지 아이콘</td><td>페이지명과 함께 웹 브라우저 상단 탭 영역, 북마크바, 방문 기록 등에 표시되는 아이콘인 파비콘(favicon)을 설정할 수 있습니다. 5 MB 이하의 48×48px 사이즈로 제작된 ico 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다. </td></tr><tr><td>고객사 로고</td><td>고객사 로고 이미지를 등록합니다. 5 MB 이하의 720×720px 사이즈로 제작된 png, jpg, jpeg 이미지 파일만 등록할 수 있습니다. 단, 텍스트가 포함되지 않은 이미지로 등록하는 것을 권장합니다.</td></tr><tr><td>상단 배경 컬러(RGB)</td><td>방송 전시 페이지(PC/Mobile Web) 상단에 노출할 배경 색상을 설정합니다. 컬러 설정 필드를 클릭하면 컬러 팔레트가 나타나며, 컬러 팔레트에서 원하는 컬러를 선택한 후 <strong>선택</strong> 버튼을 클릭하면 컬러 설정 필드에 선택한 컬러와 컬러코드가 노출됩니다.</td></tr><tr><td>지난 LIVE 모아보기 노출 여부</td><td>방송 전시 페이지에 <strong>지난 LIVE 모아보기</strong> 영역을 노출할지 선택합니다. 지난 LIVE 모아보기 영역은 라이브 방송 종료 후 변환된 VOD 방송 또는 추가로 등록한 VOD 방송이 노출되는 영역으로 노출 여부 설정에 따라 방송 전시 페이지에 <strong>지난 LIVE 모아보기</strong> 영역이 노출됩니다.</td></tr></tbody></table>

### 방송 전시 페이지 확인

페이지 설정에서 등록한 항목들은 방송 전시 페이지에 아래와 같이 노출됩니다.

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FSpi2NtCyBn41D9PYx56C%2F%ED%94%84%EB%A1%A0%ED%8A%B8%20%EC%84%A4%EC%A0%95%20%EC%A0%84%EC%8B%9C%20%ED%99%95%EC%9D%B8.png?alt=media&amp;token=9032ce5a-e702-4c0c-ae89-e8bc5848eac8" alt=""><figcaption><p>방송 전시 페이지 > 헤더 사용 여부에 따른 화면 차이</p></figcaption></figure>

#### **스킨 A로 설정되어 있는 경우**

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FQ3YbilvWeil6DVNE2heO%2F%EC%8A%A4%ED%82%A8%20A.png?alt=media&amp;token=40bd6605-8555-4a19-9057-c7d1242995d4" alt=""><figcaption><p>방송 전시 페이지 > 스킨 A로 설정되어 있는 경우</p></figcaption></figure>

#### **스킨 B로 설정되어 있는 경우**

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2Fa5ihmJdDYnIpOlLfwAgE%2F%EC%8A%A4%ED%82%A8%20B.png?alt=media&amp;token=91f292f8-9ff0-4e8c-80e3-209eae5e1314" alt=""><figcaption><p>방송 전시 페이지 > 스킨 B로 설정되어 있는 경우</p></figcaption></figure>

#### **스킨 C로 설정되어 있는 경우**

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FMgvWh36FQuKMteh9DAP2%2F%EC%8A%A4%ED%82%A8%20C.png?alt=media&amp;token=133894a9-b59e-4d29-b10d-873f94a4b8c1" alt=""><figcaption><p>방송 전시 페이지 > 스킨 C로 설정되어 있는 경우</p></figcaption></figure>

#### **스킨 D로 설정되어 있는 경우**

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FByn9pglS0L4KzOqHdRcL%2F%EC%8A%A4%ED%82%A8%20D.png?alt=media&amp;token=ffd95a2c-4495-45a9-9cf1-f4330aec70a5" alt=""><figcaption><p>방송 전시 페이지 > 스킨 C로 설정되어 있는 경우</p></figcaption></figure>

#### **스킨 E로 설정되어 있는 경우**

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FZ12wNm0nPgCS9ArCsfAJ%2F%EC%8A%A4%ED%82%A8%20E.png?alt=media&amp;token=d1b02f57-3994-444d-8435-9033a1060486" alt=""><figcaption><p>방송 전시 페이지 > 스킨 E로 설정되어 있는 경우</p></figcaption></figure>

#### **스킨 F로 설정되어 있는 경우(단, 해당 스킨은 고객사(멀티) 계정만 사용 가능)**

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2Fv2xXJAPcIwSBvndjcX0Y%2F%EC%8A%A4%ED%82%A8%20F.png?alt=media&amp;token=3aeeb655-bbd3-46c0-a121-5a1d1e731297" alt=""><figcaption><p>방송 전시 페이지 > 스킨 F로 설정되어 있는 경우</p></figcaption></figure>

{% hint style="info" %}
**참고**

* 방송 전시 페이지에 간단하게 배너와 방송 정보만 전시하고 싶은 경우에는 헤더 사용 여부를 **사용 안함**으로 설정하는 것을 권장합니다.
* NHN커머스를 통해 Kollus Live Commerce 서비스를 연동하고 있는 고객사인 경우, [서비스 연동 및 설정](/klc/userguide/linkage_nhncommerce/klc.md)에서 프론트 설정에 관한 더 자세한 내용을 확인하실 수 있습니다.
  {% endhint %}