# 기본 스킨 설정

이 페이지에서는 NHN커머스 부가서비스를 통해 Kollus Live Commerce 서비스를 이용 중인 고객사의 쇼핑몰에 기본 스킨을 설정하는 방법에 대해 안내합니다.

> ### **기본 스킨 설정** <a href="#id-.1" id="id-.1"></a>
>
> Kollus Live Commerce 서비스는 NHN커머스가 제공하는 기본 스킨에 최적화되어 있습니다. NHN커머스 관리자 페이지의 스킨 다운로드를 통해 기본 스킨에 Kollus Live Commerce 서비스를 연동할 수 있습니다.

### **기본 스킨 연동** <a href="#id-.1" id="id-.1"></a>

NHN커머스 관리자 페이지에 접속한 후 **디자인 > 디자인 스킨 리스트** 메뉴의 **스킨 리스트** 영역에서 사용 스킨과 보유 스킨을 확인할 수 있으며, 적용할 스킨을 선택한 후 관리 항목에서 **다운로드** 버튼을 클릭하면 스킨 다운로드 팝업이 나타납니다. 스킨 다운로드 팝업에서 **확인** 버튼을 클릭하면 해당 스킨이 다운로드됩니다.

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FRI5X8dJeWA8Fmgz3jsOB%2F%EA%B8%B0%EB%B3%B8%20%EC%8A%A4%ED%82%A8%20%EC%97%B0%EB%8F%99_1.jpg?alt=media&#x26;token=91b40378-f28f-4cb1-8b96-bf39e08642eb" alt=""><figcaption><p>NHN커머스 관리자 페이지 > 디자인 > 디자인 스킨 리스트 > 사용 스킨/보유 스킨 확인</p></figcaption></figure>

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2F8E1LcCRuUuq6jtWqdZQH%2F%EA%B8%B0%EB%B3%B8%20%EC%8A%A4%ED%82%A8%20%EC%97%B0%EB%8F%99_2.jpg?alt=media&#x26;token=e57b75d4-2be5-4834-9b73-77dfb826133b" alt=""><figcaption><p>NHN커머스 관리자 페이지 > 디자인 > 디자인 스킨 리스트 > 스킨 다운로드</p></figcaption></figure>

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FgJUAU3Z0UUawbBNcNAx5%2F%EA%B8%B0%EB%B3%B8%20%EC%8A%A4%ED%82%A8%20%EC%97%B0%EB%8F%99_3.jpg?alt=media&#x26;token=e0adf1c0-a8f6-4cbb-8cf8-e28d53df93eb" alt=""><figcaption><p>NHN커머스 관리자 페이지 > 디자인 > 디자인 스킨 리스트 > 스킨 다운로드 확인</p></figcaption></figure>

스킨 다운로드가 완료되면 웹 브라우저 화면의 상단 또는 하단의 상태바를 클릭하거나, 내 PC > 다운로드에서 다운로드한 Another 압축 파일을 확인합니다. 파일 확인 후 해당 파일의 압축을 해제합니다.

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FYV5AmGyYmWLJCaLXia2U%2F%E1%84%80%E1%85%B5%E1%84%87%E1%85%A9%E1%86%AB%20%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B5%E1%86%AB%20%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC_4.png?alt=media&#x26;token=5d04c53e-d535-4cb2-8f2a-81e2fc1225c1" alt=""><figcaption><p>내 PC > 다운로드 > Another 폴더</p></figcaption></figure>

그다음 [Kollus Live Commerce - 관리 시스템](https://bms-commerce.kollus.com/)에 접속한 후, **계정 관리 > 고객사 정보 > 사이트 정보** 영역의 **스크립트 다운로드** 항목에서 **KLC 서비스 연동** 버튼과 **프론트 화면 연동** 버튼을 클릭하여 **klc\_connect.html** 파일과 **livemall.html** 파일을 모두 다운로드합니다.

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FcRu5uiECO70cVqpvpfi7%2F%EC%BB%A4%EC%8A%A4%ED%85%80%20%EC%8A%A4%ED%82%A8%20%EC%97%B0%EB%8F%99_5.png?alt=media&#x26;token=c4008512-3666-48e8-b68d-53d80ad3df17" alt=""><figcaption><p>계정 관리 > 고객사 정보 > 사이트 정보 > 스크립트 다운로드</p></figcaption></figure>

다운로드한 두 개의 HTML 파일을 압축을 해제한 Another 폴더로 이동합니다.

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FcauUaFBrHrVKx1U2wh1f%2F%E1%84%80%E1%85%B5%E1%84%87%E1%85%A9%E1%86%AB%20%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B5%E1%86%AB%20%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC_6.png?alt=media&#x26;token=cac2286f-1c26-41e8-a030-f1f57f0f74ff" alt=""><figcaption><p>내 PC > 다운로드 > Another 폴더 > HTML 파일 이동</p></figcaption></figure>

이동한 다음, **klc\_connect.html** 파일과 **livemall.html** 파일이 모두 포함된 폴더를 다시 zip 파일로 압축합니다. 그다음 다시 **NHN커머스 관리자 페이지**의 **디자인 > 디자인 스킨 리스트** 메뉴로 돌아간 후, 스킨 리스트의 **사용 스킨** 영역에서 **스킨정보 수정** 버튼을 클릭하면 스킨을 업로드할 수 있는 팝업이 나타납니다. 스킨명을 영문으로 입력한 후, 업로드의 **파일찾기** 버튼을 클릭하여 압축한 zip 파일을 업로드합니다. 썸네일 이미지 등록은 선택 사항이며, 이미지를 등록하고 싶다면 안내 가이드에 맞춰 제작한 후 업로드를 진행합니다.

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2F65Mv13H3Uv7cNlWZsmsI%2F%EA%B8%B0%EB%B3%B8%20%EC%8A%A4%ED%82%A8%20%EC%A0%95%EB%B3%B4%20%EC%88%98%EC%A0%95.jpg?alt=media&#x26;token=83e7f1d3-a637-4166-9ca0-1c630fce676b" alt=""><figcaption><p>NHN커머스 관리자 페이지 > 디자인 > 디자인 스킨 리스트 > 스킨 리스트 > 사용 스킨 > 스킨정보 수정</p></figcaption></figure>

### **기본 스킨 확인** <a href="#id-.1" id="id-.1"></a>

스킨 파일을 업로드한 후, [Kollus Live Commerce - 관리 시스템](https://bms-commerce.kollus.com/)으로 돌아가 **계정 관리 > 고객사 정보 > 사이트 정보** 영역의 **KLC 서비스 연동** 항목에서 **프론트 설치 확인** 버튼을 클릭하여 스크립트 검사 결과를 확인합니다. 정상적으로 연동 스크립트가 설치된 경우, 스크립트 검사 결과 팝업에 **정상** 메시지가 나타납니다. **정상** 메시지가 나타날 때까지 최대 5분 정도 소요될 수 있습니다. 연동 스크립트 설치 이후에도 오류 메시지가 노출되는 경우, 영업 담당자(AM)에게 문의하시면 도움을 받으실 수 있습니다.

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FiTeQp9j9HK2w7wXP2f8l%2F%EA%B8%B0%EB%B3%B8%20%EC%8A%A4%ED%82%A8%20%ED%99%95%EC%9D%B8_1.png?alt=media&#x26;token=f0fedfb2-2571-42e3-9def-d64916f3527d" alt=""><figcaption><p>계정 관리 > 고객사 정보 > 사이트 정보 > 프론트 설치 확인</p></figcaption></figure>

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FEVQs2ZTTNWGIVjWNK1Dn%2F%EC%97%B0%EB%8F%99%20%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20%EC%84%A4%EC%B9%98_5.png?alt=media&#x26;token=74f47e82-c8fe-4a5e-a8a6-da4e5f60ea1b" alt=""><figcaption><p>계정 관리 > 고객사 정보 > 사이트 정보 > 프론트 설치 확인 > 스크립트 검사 결과 팝업</p></figcaption></figure>

<figure><img src="https://2220260358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh7xwbU7K6FFsg94OOZCj%2Fuploads%2FoHLetlOv4Ru1dGMimoXF%2F%E1%84%89%E1%85%B5%E1%86%AB%E1%84%80%E1%85%B2%20%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B5%E1%86%AB%20%E1%84%92%E1%85%AA%E1%86%A8%E1%84%8B%E1%85%B5%E1%86%AB_3.png?alt=media&#x26;token=b96a60ce-e7a1-4aa8-99a5-1e384da7774a" alt=""><figcaption><p>고객사 쇼핑몰 > 방송 전시 페이지(프론트 페이지) 예시</p></figcaption></figure>