# 메인 비쥬얼

* 쇼핑몰에서 제일 처음 보여지는 영역에 영상을 추가해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_main.png" alt=""><figcaption><p>고도몰 무료스킨 > 블리스</p></figcaption></figure>

### ● PC

* 찰나 > 라이브러리에서  추가하려는 영상의 디스플레이어 코드를 복사해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla09.png" alt=""><figcaption></figcaption></figure>

* 고도몰 어드민 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정 페이지에 접속해요.
* 페이지 왼쪽 아래 '메인' 왼쪽 + 버튼을 클릭 후 '쇼핑몰 메인본문'을 클릭해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla10.png" alt=""><figcaption><p>고도몰 어드민 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정</p></figcaption></figure>

* 메인 본문 '\<div class="main\_visual">' 내용을 찰나에서 복사한 디스플레이어 코드로 수정해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla11.png" alt=""><figcaption><p>고도몰 어드민 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정 > 메인 > 쇼핑몰 메인본문</p></figcaption></figure>

* 코드 수정 후 \[디자인 페이지 저장] 버튼을 클릭해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla12.png" alt=""><figcaption><p>고도몰 어드민 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정</p></figcaption></figure>

### ● 모바일

* 찰나 > 라이브러리에서  추가하려는 영상의 디스플레이어 코드를 복사해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla09.png" alt=""><figcaption></figcaption></figure>

* 고도몰 어드민 > 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 페이지에 접속해요.
* 페이지 왼쪽 아래 '메인' 왼쪽 + 버튼을 클릭 후 '쇼핑몰 메인본문'을 클릭해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla14.png" alt=""><figcaption><p>고도몰 어드민 > 모바일샵 > 디자인 페이지 수정</p></figcaption></figure>

* 메인 본문 > 메인 배너 '\<div class="main-banner">' 내용을 찰나에서 복사한 디스플레이어 코드로 수정해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla15.png" alt=""><figcaption><p>고도몰 어드민 > 모바일샵 > 모바일샵 디자인 관리 > 메인 > 쇼핑몰 메인본문</p></figcaption></figure>

* 코드 수정 후 \[디자인 페이지 저장] 버튼을 클릭해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla16.png" alt=""><figcaption><p>고도몰 어드민 > 모바일샵 > 디자인 페이지 수정</p></figcaption></figure>

{% hint style="success" %}

1. 쇼핑몰 메인본문 상단 '최근 저장 내역 보기'에서 이전에 저장된 내용들을 확인할 수 있어요.
2. 쇼핑몰 메인본문 하단 '편집된 소스와 원본 소스 비교'에서 원본 소스와 수정된 소스 내용을 비교해서 볼 수 있어요.
   {% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://godomall-help.nhn-commerce.com/beginner/design/video/shop/main.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
