# STEP 5. 설정

## 1. **부가 관리** 

* 모바일앱 대표 색상 및 로그인 화면을 설정할 수 있습니다. 
* 설정한 대표 색상은 로그인 화면, 알림창 등 주요 버튼에 노출됩니다. 
* 로그인 화면 설정이 사용함 상태일 때, 앱 전용 로그인 화면에서 회원 및 비회원이 부가 기능을 사용할 수 있는 버튼이 노출됩니다.

<figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2FWvEPmTdr7H725GPrtXlo%2FGroup%203.png?alt=media&#x26;token=385bf31f-56d6-4e54-8fa2-b6e8578b2206" alt=""><figcaption></figcaption></figure>

### 1-1. 비회원 주문 조회

* 비회원 주문 조회 기능을 제공하는 URI를 기재해 주세요.&#x20;

* 사용 중인 솔루션 및 스킨에 따라 URI 값이 다를 수 있습니다.&#x20;

* 기본 스킨을 사용하는 경우 비회원 주문 조회 기능을 사용하기 위한 화면을 제공하지만, 이외 스킨을 사용하는 경우 별도 화면 개발이 필요합니다.

* **고도몰 - 기본 스킨 사용자**&#x20;
  * user/data/skin/mobile/{영문스킨명}/member/guest\_order.html 을 입력해 주세요.&#x20;
    * 예시) moment 스킨을 사용하는 경우 user/data/skin/mobile/moment/member/guest\_order.html 입력&#x20;
  * ※ 기본 스킨을 사용하더라도 2024-10-29 일자에 업데이트 된 사항에 대해 스킨 패치를 진행하지 않은 경우 위 비회원 주문 조회 페이지 사용이 불가합니다.&#x20;
  * [스킨 패치 가이드 보기 >](https://www.nhn-commerce.com/customer/patch-view.gd?sno=4458)

* **샵바이 - 제작사 관리 기본 스킨 사용자**&#x20;
  * /pages/order/guest-order.html 을 입력해 주세요.&#x20;
  * ※ 기본 스킨을 기반으로 커스텀하여 사용하고 있더라도 2024-10-10 이전의 기본 스킨을 기반으로 커스텀한 경우 위 비회원 주문 조회 페이지 사용이 불가합니다.
  * [오로라 개별형 릴리즈 노트 보기 >](https://nhnent.dooray.com/share/pages/mBkooLTRTNCCyxUNdS9_HA/3910792426095599113)&#x20;
  * [오로라 통합형 릴리즈 노트 보기 > ](https://app.gitbook.com/s/zb2POZP1LT3VOvd5zC5X/)

### 1-2. 비회원 주문

* <mark style="color:red;">주문페이지 URI(쿼리스트링 포함)를 커스텀한 경우</mark> 비회원 주문 기능을 사용하기 위해서는 <mark style="color:red;">솔루션에 따라 아래의 작업이 필요</mark>합니다.

* ※ 기본으로 제공되는 주문페이지 URI를 사용 중이라면 별도 작업 없이 사용여부만 사용함으로 설정해 주시면 됩니다.

* **고도몰**
  * 비회원이 주문페이지 진입 시 앱에서 발생한 요청인지 구분할 수 있는 로직을 추가해야 합니다.
  * 주문페이지에 MyappUtil 클래스의 isMyappGuestOrder() 함수를 이용하여 아래의 로직을 추가해 주시기 바랍니다.

```
if (MyappUtil::isMyappGuestOrder()) {
    $goodsNo = Request::get()->get('goodsNo');
    $newGuestOrderPageUrl = URI_MOBILE . "사용 중인 주문페이지 URI.php?goodsNo=" . $goodsNo;
    $this->redirect($newGuestOrderPageUrl);
}
```

* **샵바이**
  * 마이앱에서는 회원/비회원 모두 동일한 주문서 Url로 이동하도록 처리되어 있기 때문에 <mark style="color:red;">주문서 경로는 회원/비회원 모두 동일</mark>해야 합니다.
  * 비회원 주문 기능이 정상적으로 작동하기 위해서 기본 스킨에는 주문서 페이지로 이동하기 직전에 아래의 스크립트가 실행되도록 개발되어 있습니다.

```
window.myapp.handler.send({
  key: 'LOGINVIEW',
  option: {
    returnUrl: '쇼핑몰도메인/pages/order/order-sheet-form.html?ordersheetNo=',
    showGuestOrder: true,
  },
});
```

***

## **2. 혜택 관리**&#x20;

**\[1] 지급 혜택 설정**

* 모바일앱을 처음 설치하는 고객을 위한 지급 혜택을 관리할 수 있습니다.

  * 혜택 유형은 앱 설치, 푸시 알림 ON, 첫 구매 혜택의 3가지로 구성되어 있으며, 모두 지급 설정이 가능합니다.

  <figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2FIgLiz1b2xR0RtbJ1k2Oy%2F1%20%EB%A7%88%EC%9D%B4%EC%95%B1%20%ED%98%9C%ED%83%9D%20%EA%B4%80%EB%A6%AC.png?alt=media&#x26;token=a9140766-e24a-467d-ac07-02f4fe1216ee" alt=""><figcaption></figcaption></figure>

  * 지급 혜택은 쿠폰 또는 적립금/마일리지 중 1개를 선택하여 지급 가능합니다.

**<적립금 / 마일리지>**

* 적립금/마일리지 지급 시, 사용 관련 정책은 쇼핑몰 관리자에 설정된 정보가 반영됩니다.
  * <mark style="color:red;">고도몰</mark>은 <mark style="color:red;">쇼핑몰 마일리지 사용 여부가 사용함</mark>으로 설정된 경우에만 해당 혜택이 지급됩니다.&#x20;
  * 적립금/마일리지 지급 내역은 쇼핑몰 관리자에서 조회 가능합니다.

    <figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2F7U9teo6ROeFnJTBY2gRv%2F%EC%A0%81%EB%A6%BD%EA%B8%88%20%EB%A7%88%EC%9D%BC%EB%A6%AC%EC%A7%80.png?alt=media&#x26;token=71632d85-b90f-4196-9445-82faff36b661" alt=""><figcaption></figcaption></figure>

    <mark style="background-color:yellow;">\* 10단위 숫자만 입력 가능하며, 10원\~999,990원 까지 지급할 수 있습니다.</mark>\ <mark style="background-color:yellow;">\* 샵바이에서 외부 적립금을 사용할 경우, 지급 실패 시 설정된 앱 혜택을 직접 지급해야 합니다.</mark><br>

**<쿠폰>**

① 쿠폰 선택 및 쿠폰 등록

* 고도몰 : 발급방식이 '수동 발급'이고, 발급상태가 ’발급중’인 쿠폰만 조회 및 선택 가능합니다.&#x20;
* 샵바이 : 발급유형이 '자동 발급'인 쿠폰 중 발급수량의 제한이 없고, 발급상태가 ’발급중’인 쿠폰만 
조회 및 선택 가능합니다.

<figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2FWdWWnFhLQDbXX4gYPeqL%2FGroup%204.png?alt=media&#x26;token=7d45f465-e7ee-4b5f-a1db-a1219e74671f" alt=""><figcaption></figcaption></figure>

② 쿠폰 등록 시, 새 창으로 로그인한 솔루션의 쿠폰 등록 화면으로 이동합니다.&#x20;

* 고도몰 : 프로모션 > 쿠폰 관리 > 쿠폰 등록&#x20;
* 샵바이 : 프로모션 > 쿠폰 관리 > 쿠폰 관리 > 쿠폰 등록

<figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2F66Je1EbZRSzsMQMWntVZ%2FGroup%2019.png?alt=media&#x26;token=512cafd8-7bdc-471f-b468-3004278bff6c" alt=""><figcaption></figcaption></figure>

③ 쿠폰 지급 시, 사용 관련 정책은 쇼핑몰 관리자에 설정된 정보가 반영됩니다.&#x20;

* 쿠폰 내역은 쇼핑몰 관리자에서 조회 가능합니다.&#x20;
* 쿠폰 등록 화면으로 이동 시 진입한 솔루션에 따라 쿠폰 발급 가능한 조건이 디폴트값으로 표시됩니다. 이 때, 제공된 디폴트값을 다른 값으로 변경할 경우, 등록한 쿠폰이 마이앱 관리자에서 조회되지 않을 수 있으니 유의하시기 바랍니다.<br>

④ 쿠폰 등록 후, 반드시 앱 전용 혜택으로 등록해야만 고객에게 지급이 가능합니다.&#x20;

* 앱 전용 혜택으로 등록하지 않을 경우, 쿠폰 지급이 정상적으로 이루어지지 않을 수 있으니 꼭 확인해 주세요.

**\[2] 앱 설치 혜택**

* 지급 여부
  * <mark style="background-color:yellow;">지급함</mark>으로 설정된 시점에 앱에 접속하여 로그인 시, 로그인한 이력이 없는 회원에게 1회 지급되는 혜택입니다.&#x20;
  * <mark style="background-color:yellow;">지급 안 함</mark>으로 설정된 시점에 앱에 접속하여 로그인한 회원에게는, 로그인한 이력이 없더라도 혜택이 지급되지 않습니다.

<figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2FFN6W8oLV8l4I2OvQi8wy%2Fimage%203.png?alt=media&#x26;token=cedb7dfa-cf8c-49b2-a92a-3215861be534" alt=""><figcaption></figcaption></figure>

**\[3] 푸시알림 ON 혜택**

* 지급 여부
  * 지급여부가 <mark style="background-color:yellow;">지급함</mark>으로 설정된 시점에 정보성/광고성 알림이 모두 ON인 상태+푸시알림 ON 
혜택 지급 이력이 없는 회원에게 1회 지급되는 혜택입니다.&#x20;
  * 만약 위 조건에 해당하여 혜택을 지급받은 회원이, 이후 알림 설정을 해제하여도 별도로 쿠폰을 회수하지 않습니다.
* 지급 여부
  * 지급여부가 <mark style="background-color:yellow;">지급 안 함</mark>으로 설정된 시점에 푸시알림을 ON으로 설정한 회원에게는 앱 알림 혜택이 지급되지 않습니다.
  * 만약 해당 회원이 앱 알림 혜택이 설정된 시점에 다시 접속하여도 앱 알림 혜택을 지급받은 이력이 없을 경우 지급이 가능합니다.

<figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2FhyBw3wrrownZ0fZ3Bs92%2Fimage%204.png?alt=media&#x26;token=537c53e8-6c5a-47cd-a021-f75c8cb9e2a6" alt=""><figcaption></figcaption></figure>

**\[4] 첫 구매 혜택**

* 지급 여부
  * <mark style="background-color:yellow;">지급함</mark>으로 설정된 시점(결제 완료 기준)에 앱에 접속하여 주문한 이력이 없는 회원에게 1회 지급되는 혜택입니다.&#x20;
  * <mark style="background-color:yellow;">지급 안 함</mark>으로 설정된 시점에 주문한 회원이 앱 주문 혜택이 설정된 시점에 다시 접속하더라도 앱 주문 혜택이 지급되지 않습니다.

<figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2FflJsJQMNUfkmhvoliOxh%2Fimage%2016.png?alt=media&#x26;token=752508ef-37d2-44a0-a3f3-d3f385221d91" alt=""><figcaption></figcaption></figure>

* 모바일앱을 처음 설치하는 고객을 위한 지급 혜택을 관리할 수 있습니다.
  * 지급 혜택은 쿠폰 또는 적립금/마일리지 중 1개를 선택하여 지급 가능합니다.&#x20;
  * &#x20;`지급함` 으로 설정된 시점에 앱에 접속하여 로그인 시, 로그인한 이력이 없는 회원에게 1회 지급되는 혜택입니다.
  * `지급안함` 으로 설정된 시점에 앱에 접속하여 로그인한 회원에게는, 로그인한 이력이 없더라도 혜택이 지급되지 않습니다.
* 적립금/마일리지 지급 시, 사용 관련 정책은 쇼핑몰 관리자에 설정된 정보가 반영됩니다.&#x20;
  * <mark style="color:red;">고도몰</mark>은 <mark style="color:red;">쇼핑몰 마일리지 사용 여부가 사용함</mark>으로 설정된 경우에만 해당 혜택이 지급됩니다.&#x20;
  * 적립금/마일리지 지급 내역은 쇼핑몰 관리자에서 조회 가능합니다.&#x20;
* 쿠폰 지급 시, 사용 관련 정책은 쇼핑몰 관리자에 설정된 정보가 반영됩니다.
  * <mark style="color:red;">샵바이</mark>는 쿠폰 발급 유형이 <mark style="color:red;">자동 발급</mark>인 경우에만 지급 가능합니다.&#x20;
  * <mark style="color:red;">고도몰</mark>은 쿠폰 발급 유형이 <mark style="color:red;">수동 발급</mark>인 경우에만 지급 가능합니다.&#x20;
  * 쿠폰 내역은 쇼핑몰 관리자에서 조회 가능합니다.

<figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2FflJsJQMNUfkmhvoliOxh%2Fimage%2016.png?alt=media&#x26;token=752508ef-37d2-44a0-a3f3-d3f385221d91" alt=""><figcaption></figcaption></figure>

***

## **3. 마케팅 관리**

앱 주문권장 기능은 모바일 웹에서 상품상세페이지에 접속했을 때, 앱을 통해 구매하도록 유도하는 배너를 설정하는 기능입니다. 이 기능을 활용하면 브랜드 이미지나 프로모션 목적에 맞는 배너를 손쉽게 구성할 수 있습니다. 배너는 ① 기본 배너 ② 이미지 ③ 스크립트 중 선택하여 설정할 수 있습니다. 기본 배너나 이미지 타입의 배너를 선택한 경우 설정이 적용된 배너 이미지를 좌측 미리보기 영역에서 바로 확인할 수 있습니다.<br>

### **\[1] 배너 UI 설정**

**1-1. 노출 여부 설정**

* 앱 주문권장 배너의 노출 여부를 노출함으로 설정 시 모바일 상품 상세페이지에 배너가 표시됩니다.
* 배너를 통해 앱으로 유입 시 사용자 디바이스 내 앱의 설치여부에 따라 다르게 동작합니다.
  * 설치 사용자: 모바일 앱 실행 후 웹에서 조회하고 있던 상품 상세페이지로 이동
  * 미설치 사용자: 앱을 설치할 수 있도록 OS별 앱스토어로 이동

**1-2. 배너 타입 선택**

![기본 배너](https://nhnent.dooray.com/files/4198098094387650884)

* 기본 배너: 앱 아이콘, 문구, 버튼명, 닫기 버튼으로 구성된 고정 레이아웃으로 설정하는 방식입니다. 좌측에 표시되는 앱 아이콘은 설정>출시정보>\[T]판매정보에 등록된 이미지를 사용하며, 판매정보에서 아이콘을 변경하면 주문권장 배너의 아이콘도 자동으로 함께 변경됩니다. 쇼핑몰별 맞춤형 메시지를 전달할 수 있도록 배너의 문구, 버튼명, 텍스트 색상, 버튼 색상, 배경 색상을 자유롭게 설정할 수 있습니다.

![이미지 배너](https://nhnent.dooray.com/files/4198098093215573003)

* 이미지: 레이아웃을 자유롭게 구성하여 직접 제작한 배너를 이미지로 등록하는 방식입니다. 이미지 사이즈(320\*100px)가 고정되어 있기 때문에 모바일웹에 접속한 디바이스에 따라 배너 좌우로 여백이 발생하게 되며, 여백을 채울 배경 색상을 선택할 수 있습니다.

![스크립트 배너](https://nhnent.dooray.com/files/4198098091874217576)

* 스크립트: 직접 개발한 스크립트 코드로 등록하는 방식입니다. 앱 주문권장 배너에 특정 이벤트 혹은 추적 코드를 추가하거나, 배너의 위치나 형태를 기본 띠배너 외의 다른 형태로 변경하고 싶을 때 유용합니다. 이 방식을 사용하면 배너의 디자인과 동작을 자유롭게 커스터마이징할 수 있어 브랜드 컨셉이나 원하는 디자인 스타일에 맞는 배너를 구현할 수 있습니다.

{% hint style="danger" %}
`myappConfig` 변수명은 마이앱 환경에서 사용하는 예약어이므로 직접 선언해서 사용할 수 없습니다.

스크립트를 작성할 때는 아래의 예시 코드와  참고사항을 확인해 주시기 바랍니다.
{% endhint %}

### **\[2] 샵바이 예시 코드**

{% code lineNumbers="true" expandable="true" %}

```javascript
<script>
try {
  if (!myapp?.helpers?.isMyApp() && !document.querySelector("#myapp-banner")){  

    myapp.banner.fetchMyappBannerConfig({ myappNo: myappConfig.myappNo, pageType: myappConfig.pageType })
    .then((config) => {      

      if (!config.isEnabled || sessionStorage.getItem(myapp.constants.BANNER_CLOSE_SIGNAL) === 'true') return;
      const banner =  myapp.banner.createImageBanner(config.scriptImageUrl);
    
      const bannerClickHandler = myapp.banner.getBannerClickHandler(myapp.banner.getPlatformSpecificAppScheme(config));
      banner.addEventListener('click', bannerClickHandler);
      
      const closeBtn = banner.querySelector('#myapp-banner-close-container');
      const bannerCloseHandler = myapp.banner.getBannerCloseHandler(banner);
      closeBtn.addEventListener('click', bannerCloseHandler);
      
      if (banner instanceof HTMLElement) {
        document.body.insertAdjacentElement('afterbegin', banner);
      }
    });
  }
} catch(e) {
  console.group('마이앱 외부 스크립트 오류 로그');
  console.error(e);
  console.groupEnd();
}
</script>
```

{% endcode %}

### **\[3] 고도몰 예시코드**

<pre class="language-javascript" data-line-numbers data-expandable="true"><code class="lang-javascript"><strong>&#x3C;script>
</strong>try {
  if (!myapp.helpers.isMyApp()) {
     myapp.banner
      .fetchMyappBannerConfig({ myappNo: myappConfig.myappNo, pageType: myappConfig.pageType })
      .then((config) => {
        const header = document.querySelector('#header.fix');
        const headerBox = document.querySelector('header .header_box');
        const headerTag = document.querySelector('header');
        
        if (!config.isEnabled || sessionStorage.getItem(myapp.constants.BANNER_CLOSE_SIGNAL) === 'true') return;
        const banner =  myapp.banner.createImageBanner(config.scriptImageUrl);
    
        const bannerClickHandler = myapp.banner.getBannerClickHandler(myapp.banner.getPlatformSpecificAppScheme(config));
        banner.addEventListener('click', bannerClickHandler);
      
        const closeBtn = banner.querySelector('#myapp-banner-close-container');
        const bannerCloseHandler = myapp.banner.getBannerCloseHandler(banner);
        closeBtn.addEventListener('click', bannerCloseHandler);
        
        if (!document.getElementById('myapp-banner') &#x26;&#x26; banner instanceof HTMLElement) {
          if (header) {
            header.insertAdjacentElement('afterbegin', banner);
          } else {
            headerBox.style.position = 'relative';
            headerTag.insertAdjacentElement('afterbegin', banner);
          }
        }
      });
  }
} catch (e) {
  console.group('마이앱 외부 스크립트 오류 로그');
  console.error(e);
  console.groupEnd();
}
&#x3C;/script>
</code></pre>

### \[4] 참고사항

#### Option 타입 <a href="#option-ed-83-80-ec-9e-85" id="option-ed-83-80-ec-9e-85"></a>

* Option 값은 자유롭게 설정 가능
* `textColor`, `paddingColor`, `imageUrl`은 마이앱 어드민의 배너 UI 설정에 세팅된 값
  * `myapp.banner.fetchMyappBannerConfig` 함수를 통해 반환되는 값

| key            | type    | 설명                                                                                                                                                   |
| -------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| isEnabled      | boolean | 배너 사용 유무                                                                                                                                             |
| textColor      | string  | 텍스트 색상                                                                                                                                               |
| paddingColor   | string  | 여백 색상                                                                                                                                                |
| imageUrl       | string  | 배너 이미지 주소 (이미지 배너 타입)                                                                                                                                |
| scriptImageUrl | string  | 배너 이미지 주소 (스크립트 배너 타입)                                                                                                                               |
| styles         | object  | <p>배너영역 스타일 커스텀옵션<br></p><ul><li>CSS 속성명 <strong>camelCase</strong> 변환 필요</li><li>ex) background-color -> <strong>backgroundColor</strong></li></ul> |

### 인터페이스 <a href="#ec-9d-b8-ed-84-b0-ed-8e-98-ec-9d-b4-ec-8a-a4" id="ec-9d-b8-ed-84-b0-ed-8e-98-ec-9d-b4-ec-8a-a4"></a>

```java
// myapp.banner
createImageBanner(imageUrl: string); // 이미지 주소만 사용시
createImageBanner(imageUrl: string, option: object); // 이미지주소, 옵션 사용시
createImageBanner(option: object); // 옵션만 사용시
```

#### 1. 이미지 주소만 사용 시 <a href="#id-1.-ec-9d-b4-eb-af-b8-ec-a7-80-ec-a3-bc-ec-86-8c-eb-a7-8c-ec-82-ac-ec-9a-a9-ec-8b-9c" id="id-1.-ec-9d-b4-eb-af-b8-ec-a7-80-ec-a3-bc-ec-86-8c-eb-a7-8c-ec-82-ac-ec-9a-a9-ec-8b-9c"></a>

```java
// case 1) 주소 직접 사용
const banner = myapp.banner.createImageBanner("https://sample.com/sample.png");

// case 2) 스크립트 배너타입 이미지 사용
const config = { imageUrl: "", scriptImageUrl: "https://sample.com/sample.png" }; // 마이앱 어드민 설정값 샘플
const banner = myapp.banner.createImageBanner(config.scriptImageUrl);
```

#### 2. 이미지 주소 옵션 사용 시 <a href="#id-2.-ec-9d-b4-eb-af-b8-ec-a7-80-ec-a3-bc-ec-86-8c-2c-ec-98-b5-ec-85-98-ec-82-ac-ec-9a-a9-ec-8b-9c" id="id-2.-ec-9d-b4-eb-af-b8-ec-a7-80-ec-a3-bc-ec-86-8c-2c-ec-98-b5-ec-85-98-ec-82-ac-ec-9a-a9-ec-8b-9c"></a>

```java
const config = { textColor: "#ffffff", paddingColor: "#aaf0c4", imageUrl: "" }; // 마이앱 어드민 설정값 샘플
const banner = myapp.banner.createImageBanner("https://sample.com/sample.png", config); // 어드민 설정값 샘플에 있는 imageUrl은 무시되고 첫번째 인자로 전달받은 이미지 주소로 사용됨
```

#### 3. 옵션만 사용 시 <a href="#id-3.-ec-98-b5-ec-85-98-eb-a7-8c-ec-82-ac-ec-9a-a9-ec-8b-9c" id="id-3.-ec-98-b5-ec-85-98-eb-a7-8c-ec-82-ac-ec-9a-a9-ec-8b-9c"></a>

```java
const config = { textColor: "#ffffff", paddingColor: "#aaf0c4", imageUrl: "https://sample.com/sample.png" }; // 마이앱 어드민 설정값 샘플
const banner = myapp.banner.createImageBanner(config);
```

#### 4. 배너영역 스타일 커스텀 예시 <a href="#id-4.-eb-b0-b0-eb-84-88-ec-98-81-ec-97-a-d-ec-8a-a4-ed-83-80-ec-9d-bc-ec-bb-a4-ec-8a-a4-ed-85-80-ec-98" id="id-4.-eb-b0-b0-eb-84-88-ec-98-81-ec-97-a-d-ec-8a-a4-ed-83-80-ec-9d-bc-ec-bb-a4-ec-8a-a4-ed-85-80-ec-98"></a>

```java
// 마이앱 어드민 설정 모두 무시하고 특정 스타일만 반영하고자 할 경우 예시 (배경색상 변경)
const banner = myapp.banner.createImageBanner("https://sample.com/sample.png", { styles: { backgroundColor: "#000000" } });
```

### 생성된 스크립트 삽입 시 체크사항 <a href="#ec-83-9d-ec-84-b1-eb-90-9c-ec-8a-a4-ed-81-ac-eb-a6-bd-ed-8a-b8-ec-82-bd-ec-9e-85-ec-8b-9c-ec-b2-b4-e" id="ec-83-9d-ec-84-b1-eb-90-9c-ec-8a-a4-ed-81-ac-eb-a6-bd-ed-8a-b8-ec-82-bd-ec-9e-85-ec-8b-9c-ec-b2-b4-e"></a>

* 마이앱 어드민에서 배너 활성화 유무 설정 가능
* 사용자가 배너를 닫았을 경우 세션 유지기간동안 배너 미노출

```java
// 배너 삽입 여부 체크
if (!config.isEnabled || sessionStorage.getItem(myapp.constants.BANNER_CLOSE_SIGNAL) === 'true') return;
const banner = myapp.banner.createImageBanner("https://sample.com/sample.png");
```

***

## **4. 출시 정보**

* 출시 정보는 기본 정보와 제작 정보로 구성되어 있으며, 필수 항목을 모두 입력해야 앱 제작 및 심사 요청이 가능합니다.&#x20;
  * <mark style="color:red;background-color:red;">가이드라인 위반 시,  출시 및 업데이트가 제한될 수 있습니다.</mark>
  * 심사를 요청할 경우, 앱 제작 진행상태 및 결과는 기본정보 내 입력된 담당자 메일로 발송됩니다.
  * 심사가 반려될 경우, 반려 사유를 보완 후 재심사 요청을 진행해야 합니다.&#x20;
* 출시 완료 후, 앱스토어 내 정보 수정이 필요할 경우에는 다시 한번 심사 절차를 거친 후 수정된 정보가반영됩니다.&#x20;

**\[1] 기본 정보:  iOS/Android 스토어 내 앱 등록 대행을 위해 필요한 정보를 입력합니다.**&#x20;

* 각 운영체제별 스토어에 앱을 출시하기 위해서는 개발자 계정이 필요하며, <mark style="color:red;">개발자 계정 생성은 직접 해주셔야 합니다.</mark>&#x20;
  * Android 개발자 계정은 조직 계정으로 기재 추천 드리며, 개인 계정을 입력할 경우 테스트 절차가 필요하여 출시 일정이 지연될 수 있습니다.&#x20;
  * Android 개발자 계정의 경우 반드시 구글 2단계 인증 사용을 중지해 주시기 바랍니다.
* 자세한 개발자 계정 생성 안내는 [\[개발자 계정 생성 가이드\]](https://store-help.nhn-commerce.com/app/marketing/myapp/developer)를 참고 부탁드립니다. \ <br>

**\[2] 앱 미리보기 : 쇼핑몰 모바일 앱을 출시하기 전, 운영중인 쇼핑몰 앱 화면으로 확인할 수 있습니다.**

* 이용조건&#x20;
  * 앱 출시 이력이 없고, \[설정 > 출시정보 > 정보 등록] 메뉴에 기본정보가 저장된 경우에만 확인 가능합니다.
  * 기본정보가 저장되어 있지 않거나 앱 미리보기 서비스가 만료된 경우, 미리보기 영역은 노출되지 않습니다.
* 유효기간
  * 앱 미리보기는 제작   일시로부터 30일간 사용 가능하며, 앱이 실제로 스토어에 출시되면 해당 서비스는 종료됩니다.&#x20;
  * 제작 일시로부터 30일이 경과하여 앱 미리보기 서비스가 만료된 경우, 재신청을 통해 다시 이용할 수 있습니다.<br>
* 앱 미리보기 확인 방법

(1)   \[설정 > 출시 정보 > 기본정보]에서 스토어 계정 정보와 담당자 정보를 입력한 후, 저장 버튼을 클릭합니다.\ <mark style="color:red;">※ 만약 앱 출시 이력이 없고, \[설정 > 출시 정보] 메뉴에 저장된 기본정보가 존재한다면 화면 상단에 ‘앱 미리보기 확인’ 버튼이 노출됩니다.</mark> 
\ <mark style="color:red;">※ 앱 출시 전 미리보기 단계에서는 기본정보 검증 없이 이용 가능합니다.</mark>

<figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2Fp7Y5t9ehKPJqYAoYmYPK%2F1.png?alt=media&#x26;token=9e92e131-2de9-4886-ae4f-039036d80ec1" alt=""><figcaption></figcaption></figure>

(2) 상단에 표시된 '앱 미리보기 확인' 버튼을 클릭합니다.

<figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2FO494ZKmtIvkZ5CNs3BRp%2F2.png?alt=media&#x26;token=fab0a62f-303b-42eb-840c-ac856eae5fff" alt=""><figcaption></figcaption></figure>

(3) 앱을 확인하고자 하는 디바이스에서 생성된 QR코드를 스캔한 후, 스토어 링크에 접속하여 앱을 다운로드합니다. \ <mark style="color:red;">※ 앱이 이미 설치되어 있는 경우, 최신 버전으로 업데이트해 주세요.</mark>&#x20;

<figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2F7EEgJCaTUqvfo58VJypy%2F3.png?alt=media&#x26;token=c9a81f45-52b8-4c36-9d02-ca410845dcb2" alt=""><figcaption></figcaption></figure>

(4) ‘앱 미리보기 확인’ 팝업창에서 앱 고유번호와 쇼핑몰 인증번호를 확인합니다.

<figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2FQtS3vyCtxqji19P4szkQ%2F4.png?alt=media&#x26;token=c0c402d4-03eb-493a-a7b1-c380f79185d3" alt=""><figcaption></figcaption></figure>

(5) 다운로드한 앱을 실행한 후, 앱 고유번호와 쇼핑몰 인증번호를 입력하여 사용자 인증을 완료하면, 앱 미리보기를 확인할 수 있습니다.<br>

<figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2FuP25hytEmoswPAR5Jfjs%2F5.png?alt=media&#x26;token=fd74ff69-4e94-4cc1-9160-7ffef021ac4e" alt=""><figcaption></figcaption></figure>

* 활용 안내
  * 디자인 미리보기 제공 \
    : 앱 관리자 \[디자인] 하위 메뉴에서 설정한 값은 미리보기 앱에서도 확인 및 조정 가능하며, 출시 전 앱 디자인을 미리 체험할 수 있습니다.
  * 스크린샷 이미지 제작 \
    : 앱 관리자 \[설정 > 출시정보 > 제작정보] 메뉴에서 스토어 등록에 필요한 스크린샷 이미지를 제작할 수 있습니다.  
\ <mark style="color:red;">※ 스크린샷 이미지란? 앱 실제 화면을 캡쳐하여 권장 사이즈에 맞게 디자인한 이미지</mark>

* 활용 시 이점
  * 스토어 등록 심사에서 스크린샷 이미지는 중요한 역할을 하며, 엄격한 기준을 충족해야 합니다. 실제로 스크린샷 이미지의 오류로 심사가 거절되는 사례가 다수 발생하고 있습니다.&#x20;
  * 스크린샷 이미지는 앱의 실제 화면을 기반으로 제작해야 하며, 규격 사이즈에 맞게 첨부되어야 합니다.
    * 마이앱 미리보기 기능을 사용하면 별도의 디자인 툴 없이 앱의 실제 화면을 확인하고 스크린샷 이미지를 제작할 수 있습니다.
    * 다양한 디바이스(예: 스마트폰, 아이패드 등)에서 앱을 테스트해볼 수 있어, 등록하려는 디스플레이 단말기에 최적화된 이미지를 손쉽게 확인할 수 있습니다.\ <br>

**\[3] 제작 정보: 모바일앱 제작을 위해 필요한 정보를 입력합니다.**&#x20;

* 판매 정보: 모바일앱을 다운로드 받을 시 보여지는 정보를 입력합니다.&#x20;

  * 아이콘: 권장 사이즈 1024\*1024px, 1MB 이내 png 형식, 색상 공간 sRGB
  * 앱 이름(스토어 노출 이름)
  * 앱 이름(디바이스 노출 이름)&#x20;
  * 대표 설명
  * 상세 설명
  * 이메일 주소
  * 검색 키워드

**\[4] 이미지 정보: 모바일앱이 스토어에서 보여질 때의 이미지를 저장합니다.**&#x20;

* 가이드라인 위반 시 출시 및 업데이트가 제한될 수 있습니다.
* 확장자: jpg, png(24비트, 투명 비포함), 색상 공간: sRGB 로 제작해야 합니다.

| 종류                 | 사이즈          |
| ------------------ | ------------ |
| iOS 5.5형 스크린샷      | 1242\*2208px |
| iOS 6.5형 스크린샷      | 1242\*2688px |
| iOS 12.9형 스크린샷     | 2048\*2732px |
| Android(휴대전화 스크린샷) | 1242\*2208px |
| Android(그래픽 이미지)   | 1024\*500px  |
| Android(패드 스크린샷)   | 2554\*1440px |

**\[5] 스플래시 화면 설정: 모바일앱 처음 실행 시 보여지는 화면의 정보를 저장합니다.**&#x20;

* 이미지: 권장 사이즈: 2732\*2732px, 8MB 이내 jpg, png 형식의 파일&#x20;

<figure><img src="https://1819318178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC0jxYS3cZ07BC3ROfGpj%2Fuploads%2FiVSRwZM4n80JodlgSQ4b%2Fimage%2017.png?alt=media&#x26;token=1c5a67e4-69b7-4299-85be-6be4cf280055" alt=""><figcaption></figcaption></figure>