STEP 5. 설정

앱 출시 정보, 앱 설치 혜택 등 모바일앱과 관련한 기본적인 설정 관리를 할 수 있어요.

1. 부가 관리

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

1-1. 비회원 주문 조회

비회원 주문 조회 기능을 제공하는 URI를 기재해 주세요.
사용 중인 솔루션 및 스킨에 따라 URI 값이 다를 수 있습니다.
기본 스킨을 사용하는 경우 비회원 주문 조회 기능을 사용하기 위한 화면을 제공하지만, 이외 스킨을 사용하는 경우 별도 화면 개발이 필요합니다.

고도몰 - 기본 스킨 사용자
- user/data/skin/mobile/{영문스킨명}/member/guest_order.html 을 입력해 주세요.
  - 예시) moment 스킨을 사용하는 경우 user/data/skin/mobile/moment/member/guest_order.html 입력
- ※ 기본 스킨을 사용하더라도 2024-10-29 일자에 업데이트 된 사항에 대해 스킨 패치를 진행하지 않은 경우 위 비회원 주문 조회 페이지 사용이 불가합니다.
- 스킨 패치 가이드 보기 >

샵바이 - 제작사 관리 기본 스킨 사용자
- /pages/order/guest-order.html 을 입력해 주세요.
- ※ 기본 스킨을 기반으로 커스텀하여 사용하고 있더라도 2024-10-10 이전의 기본 스킨을 기반으로 커스텀한 경우 위 비회원 주문 조회 페이지 사용이 불가합니다.
- 오로라 개별형 릴리즈 노트 보기 >
- 오로라 통합형 릴리즈 노트 보기 >

1-2. 비회원 주문

주문페이지 URI(쿼리스트링 포함)를 커스텀한 경우 비회원 주문 기능을 사용하기 위해서는 솔루션에 따라 아래의 작업이 필요합니다.
※ 기본으로 제공되는 주문페이지 URI를 사용 중이라면 별도 작업 없이 사용여부만 사용함으로 설정해 주시면 됩니다.

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

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

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

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

2. 혜택 관리

[1] 지급 혜택 설정

모바일앱을 처음 설치하는 고객을 위한 지급 혜택을 관리할 수 있습니다.
- 혜택 유형은 앱 설치, 푸시 알림 ON, 첫 구매 혜택의 3가지로 구성되어 있으며, 모두 지급 설정이 가능합니다.
- 지급 혜택은 쿠폰 또는 적립금/마일리지 중 1개를 선택하여 지급 가능합니다.

<적립금 / 마일리지>

적립금/마일리지 지급 시, 사용 관련 정책은 쇼핑몰 관리자에 설정된 정보가 반영됩니다.
- 고도몰은 쇼핑몰 마일리지 사용 여부가 사용함으로 설정된 경우에만 해당 혜택이 지급됩니다.
- 적립금/마일리지 지급 내역은 쇼핑몰 관리자에서 조회 가능합니다.
  * 10단위 숫자만 입력 가능하며, 10원~999,990원 까지 지급할 수 있습니다. * 샵바이에서 외부 적립금을 사용할 경우, 지급 실패 시 설정된 앱 혜택을 직접 지급해야 합니다.

<쿠폰>

① 쿠폰 선택 및 쿠폰 등록

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

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

고도몰 : 프로모션 > 쿠폰 관리 > 쿠폰 등록
샵바이 : 프로모션 > 쿠폰 관리 > 쿠폰 관리 > 쿠폰 등록

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

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

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

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

[2] 앱 설치 혜택

지급 여부
- 지급함으로 설정된 시점에 앱에 접속하여 로그인 시, 로그인한 이력이 없는 회원에게 1회 지급되는 혜택입니다.
- 지급 안 함으로 설정된 시점에 앱에 접속하여 로그인한 회원에게는, 로그인한 이력이 없더라도 혜택이 지급되지 않습니다.

[3] 푸시알림 ON 혜택

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

[4] 첫 구매 혜택

지급 여부
- 지급함으로 설정된 시점(결제 완료 기준)에 앱에 접속하여 주문한 이력이 없는 회원에게 1회 지급되는 혜택입니다.
- 지급 안 함으로 설정된 시점에 주문한 회원이 앱 주문 혜택이 설정된 시점에 다시 접속하더라도 앱 주문 혜택이 지급되지 않습니다.

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

3. 마케팅 관리

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

[1] 배너 UI 설정

1-1. 노출 여부 설정

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

1-2. 배너 타입 선택

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

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

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

myappConfig 변수명은 마이앱 환경에서 사용하는 예약어이므로 직접 선언해서 사용할 수 없습니다.

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

[2] 샵바이 예시 코드

<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>

[3] 고도몰 예시코드

<script>
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') && 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();
}
</script>

[4] 참고사항

Option 타입

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

key

type

설명

isEnabled

boolean

배너 사용 유무

textColor

string

텍스트 색상

paddingColor

string

여백 색상

imageUrl

string

배너 이미지 주소 (이미지 배너 타입)

scriptImageUrl

string

배너 이미지 주소 (스크립트 배너 타입)

styles

object

배너영역 스타일 커스텀옵션

CSS 속성명 camelCase 변환 필요
ex) background-color -> backgroundColor

인터페이스

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

1. 이미지 주소만 사용 시

// 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. 이미지 주소 옵션 사용 시

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

3. 옵션만 사용 시

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

4. 배너영역 스타일 커스텀 예시

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

생성된 스크립트 삽입 시 체크사항

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

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

4. 출시 정보

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

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

각 운영체제별 스토어에 앱을 출시하기 위해서는 개발자 계정이 필요하며, 개발자 계정 생성은 직접 해주셔야 합니다.
- Android 개발자 계정은 조직 계정으로 기재 추천 드리며, 개인 계정을 입력할 경우 테스트 절차가 필요하여 출시 일정이 지연될 수 있습니다.
- Android 개발자 계정의 경우 반드시 구글 2단계 인증 사용을 중지해 주시기 바랍니다.
자세한 개발자 계정 생성 안내는 [개발자 계정 생성 가이드]를 참고 부탁드립니다.

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

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

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

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

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

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

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

활용 안내
- 디자인 미리보기 제공 : 앱 관리자 [디자인] 하위 메뉴에서 설정한 값은 미리보기 앱에서도 확인 및 조정 가능하며, 출시 전 앱 디자인을 미리 체험할 수 있습니다.
- 스크린샷 이미지 제작 : 앱 관리자 [설정 > 출시정보 > 제작정보] 메뉴에서 스토어 등록에 필요한 스크린샷 이미지를 제작할 수 있습니다.   ※ 스크린샷 이미지란? 앱 실제 화면을 캡쳐하여 권장 사이즈에 맞게 디자인한 이미지 
활용 시 이점
- 스토어 등록 심사에서 스크린샷 이미지는 중요한 역할을 하며, 엄격한 기준을 충족해야 합니다. 실제로 스크린샷 이미지의 오류로 심사가 거절되는 사례가 다수 발생하고 있습니다.
- 스크린샷 이미지는 앱의 실제 화면을 기반으로 제작해야 하며, 규격 사이즈에 맞게 첨부되어야 합니다.
  - 마이앱 미리보기 기능을 사용하면 별도의 디자인 툴 없이 앱의 실제 화면을 확인하고 스크린샷 이미지를 제작할 수 있습니다.
  - 다양한 디바이스(예: 스마트폰, 아이패드 등)에서 앱을 테스트해볼 수 있어, 등록하려는 디스플레이 단말기에 최적화된 이미지를 손쉽게 확인할 수 있습니다.

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

판매 정보: 모바일앱을 다운로드 받을 시 보여지는 정보를 입력합니다.
- 아이콘: 권장 사이즈 1024*1024px, 1MB 이내 png 형식, 색상 공간 sRGB
- 앱 이름(스토어 노출 이름)
- 앱 이름(디바이스 노출 이름)
- 대표 설명
- 상세 설명
- 이메일 주소
- 검색 키워드

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

가이드라인 위반 시 출시 및 업데이트가 제한될 수 있습니다.
확장자: 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] 스플래시 화면 설정: 모바일앱 처음 실행 시 보여지는 화면의 정보를 저장합니다.

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

PreviousSTEP 4. 통계 Next[FAQ] 자주 묻는 질문

Last updated 15 days ago

Was this helpful?