> 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/linkage_nhncommerce/defaultskin.md).

# 기본 스킨 설정

이 페이지에서는 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="/files/dW0rSPD7nFQoHCFeOWUS" alt=""><figcaption><p>NHN커머스 관리자 페이지 > 디자인 > 디자인 스킨 리스트 > 사용 스킨/보유 스킨 확인</p></figcaption></figure>

<figure><img src="/files/pb0avznZNdCna64FS2Lx" alt=""><figcaption><p>NHN커머스 관리자 페이지 > 디자인 > 디자인 스킨 리스트 > 스킨 다운로드</p></figcaption></figure>

<figure><img src="/files/IGfG3LLtCGR7wZkFDnk8" alt=""><figcaption><p>NHN커머스 관리자 페이지 > 디자인 > 디자인 스킨 리스트 > 스킨 다운로드 확인</p></figcaption></figure>

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

<figure><img src="/files/h4h7gnQi0bDbApeI5YIH" 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="/files/yvFSbMxe5I5JtdZoHrWI" alt=""><figcaption><p>계정 관리 > 고객사 정보 > 사이트 정보 > 스크립트 다운로드</p></figcaption></figure>

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

<figure><img src="/files/4f5qhuS1X3kIvFgWUezg" alt=""><figcaption><p>내 PC > 다운로드 > Another 폴더 > HTML 파일 이동</p></figcaption></figure>

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

<figure><img src="/files/9VqdfcwSsZWHrZy9h4Rw" 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="/files/5AzIba5NLSzc354XJB3J" alt=""><figcaption><p>계정 관리 > 고객사 정보 > 사이트 정보 > 프론트 설치 확인</p></figcaption></figure>

<figure><img src="/files/6xgDE5gE4bQRxJf8aE9x" alt=""><figcaption><p>계정 관리 > 고객사 정보 > 사이트 정보 > 프론트 설치 확인 > 스크립트 검사 결과 팝업</p></figcaption></figure>

<figure><img src="/files/V6ZLV2q4G4CvOBrBJT7J" alt=""><figcaption><p>고객사 쇼핑몰 > 방송 전시 페이지(프론트 페이지) 예시</p></figcaption></figure>