> For the complete documentation index, see [llms.txt](https://store-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://store-help.nhn-commerce.com/app/marketing/myapp/design/footer-bar.md).

# 하단바 관리

## <mark style="background-color:$warning;">이해하기</mark> <a href="#ec-9d-b4-ed-95-b4-ed-95-98-ea-b8-b0-6" id="ec-9d-b4-ed-95-b4-ed-95-98-ea-b8-b0-6"></a>

앱 실행 시 보여지는 하단바를 관리하는 메뉴입니다. 하단바는 구성에 따라 사용 편의성과 구매 전환율에 직접적인 영향을 주는 중요한 요소입니다. 쇼핑몰 고객이 상품을 쉽게 찾고, 빠르게 구매할 수 있도록 홈·검색·장바구니·마이페이지 등의 메뉴를 하단바에 배치하여 주요 이용 동선을 단순화할 수 있습니다.

## <mark style="background-color:$warning;">활용 예시</mark> <a href="#ed-99-9c-ec-9a-a9-ec-98-88-ec-8b-9c-1" id="ed-99-9c-ec-9a-a9-ec-98-88-ec-8b-9c-1"></a>

이벤트 중심으로 운영하는 쇼핑몰이라면 '기획전' 으로 페이지 이동 기능을 추가하여 고객이 할인 행사나 프로모션 페이지로 빠르게 이동하도록 구성합니다. 자세한 내용은 실무 가이드를 참고해 주시기 바랍니다.

## <mark style="background-color:$warning;">제공 기능</mark> <a href="#ec-a0-9c-ea-b3-b5-ea-b8-b0-eb-8a-a5-1" id="ec-a0-9c-ea-b3-b5-ea-b8-b0-eb-8a-a5-1"></a>

하단바 관리 메뉴에서는 다음의 기능을 제공합니다.

* 하단바 유형
* 메뉴 추가/수정
  * 기능
  * 메뉴명
  * 아이콘
* 메뉴 순서 변경(드래드앤드롭)
* 메뉴 삭제

## <mark style="background-color:$warning;">상세 설명</mark> <a href="#ec-83-81-ec-84-b8-ec-84-a4-eb-aa-85-2" id="ec-83-81-ec-84-b8-ec-84-a4-eb-aa-85-2"></a>

### **하단바 관리**

![](https://nhnent.dooray.com/files/4324968003334536938)

① 하단바 메뉴를 추가하거나 삭제하고, 하단바 UI 및 메뉴별 적용사항에 대해 미리보기 기능을 지원합니다. \
마이앱에서 제공하는 하단바가 아닌 모바일웹에서 사용 중인 하단바를 앱에도 적용하고 싶다면 ② 하단바 유형을 '커스텀형(직접 개발)' 로 설정하면 됩니다. ③ '설정' 기능은 마이앱에서 제공하는 설정 메뉴입니다. 설정 메뉴에 제공할 기능은 디자인>설정 메뉴 관리에서 관리할 수 있습니다.\
기본형 하단바를 사용하지 않거나, 설정 기능을 하단바 메뉴에 추가하고 싶지 않다면 명령어를 통해 설정 메뉴 화면을 호출할 수 있습니다. 자세한 내용은 ④ 하단바 제공 기능 내용을 참고해 주시기 바랍니다.

① 메뉴 추가/삭제

\+ 메뉴 추가: 하단바 메뉴 추가

(-): 선택된 메뉴 삭제

메뉴 드래그앤드롭: 메뉴 순서 변경

② 하단바 유형

기본형(마이앱 네이티브): 마이앱에서 제공하는 네이티브 형태의 하단바

커스텀형(직접 개발): 직접 개발한 하단바

{% hint style="info" %}
'기본형(마이앱 네이티브)'로 설정하고 모바일웹 하단바도 노출한다면 하단바가 이중으로 노출됩니다.

앱에서 모바일웹에 적용된 하단바를 미노출 하고 싶다면 userAgent 정보가 MYAPP\_WEBVIEW\_APP 인 경우에는 하단바가 노출되지 않도록 쇼핑몰 스킨에 적용하여 개발해야 합니다.
{% endhint %}

{% hint style="warning" %}
'커스텀형(직접개발)' 하단바 사용 시에는 자체 제작한 하단바 또는 쇼핑몰 스킨에 반드시 설정 메뉴 바로가기 아이콘을 추가해야 합니다. 설정 메뉴 바로가기 추가 방법은 '④ 하단바 제공 기능\_설정 메뉴 화면 호출 명령어'를 참고해 주시기 바랍니다.
{% endhint %}

③ 설정

디자인>설정 메뉴 관리에서 설정한 페이지

④ 하단바 제공 기능

페이지 이동, 이전, 다음, 새로고침, 맨위로, 설정, 알림 내용 보기, 페이지 링크 공유 중 선택

{% hint style="info" %}
하단바에서 제공하는 기능을 쇼핑몰 스킨에서 제공하고 싶다면 명령어를 통해 관련 기능의 화면을 호출할 수 있습니다.

**설정 메뉴 화면 호출 명령어**

샵바이: window\.myapp.handler.send({key: "SHOW\_SETTING",});

고도몰: myappGodomall.bridge({ action: "SHOW\_SETTING" });

**알림 내용 보기 화면 호출 명령어**

샵바이: window\.myapp.handler.send({ key: "SHOW\_NOTIFICATION",});

고도몰: myappGodomall.bridge({ action: "SHOW\_NOTIFICATION" });
{% endhint %}

⑤ 아이콘

기본 아이콘: 마이앱에서 제공하는 아이콘

추가 아이콘: 직접 디자인한 아이콘

{% hint style="info" %}
추가 아이콘 권장 사이즈는 100px\*100px 입니다.
{% endhint %}

## <mark style="background-color:$warning;">실무 가이드</mark> <a href="#ec-8b-a4-eb-ac-b4-ea-b0-80-ec-9d-b4-eb-93-9c-2" id="ec-8b-a4-eb-ac-b4-ea-b0-80-ec-9d-b4-eb-93-9c-2"></a>

하단바에는 사용자가 자주 사용하는 쇼핑몰의 핵심 기능이나 구매와 직접 연결되어 전환율을 높여줄 수 있는 기능을 제공하는 것이 좋습니다. 실제 상황에 따른 운영 방법입니다.

<table data-header-hidden="false" data-header-sticky><thead><tr><th>상황</th><th>운영</th></tr></thead><tbody><tr><td>고객이 앱푸시를 잘 확인했으면 좋겠어요</td><td>'알림 내용 보기' 기능 추가</td></tr><tr><td>고객이 원하는 상품을 빨리 찾았으면 좋겠어요</td><td>'페이지 이동' 기능을 추가하여 상품 '검색' 페이지로 연결</td></tr><tr><td>이벤트 유입을 늘리고 싶어요</td><td>'페이지 이동' 기능을 추가하여 기획적 또는 이벤트 페이지로 연결</td></tr></tbody></table>

## <mark style="background-color:$warning;">자주 하는 질문</mark> <a href="#ec-9e-90-ec-a3-bc-ed-95-98-eb-8a-94-ec-a7-88-eb-ac-b8-2" id="ec-9e-90-ec-a3-bc-ed-95-98-eb-8a-94-ec-a7-88-eb-ac-b8-2"></a>

**Q. 메뉴 순서는 어떻게 변경하나요?**

A. 순서 변경하려는 메뉴를 클릭한 후 드래그하여 원하는 위치로 이동하면 돼요.

***

**Q. 하단바 메뉴를 많이 추가할수록 좋나요?**

A. 아니요. 하단바 메뉴는 핵심 기능을 위주로 최소한으로 제공하는 것이 좋아요.

***

**Q. 아이콘을 직접 제작해서 사용할 수 있나요?**

A. 아이콘 추가 기능을 사용하면 돼요. 다만 직접 제작한 추가 아이콘의 색상 변경은 마이앱 관리자에서 불가하기 때문에 색상이 적용된 아이콘으로 추가해야 해요. 아이콘은 아래의 규격에 맞춰서 제작해 주세요.

<table data-header-hidden="false" data-header-sticky><thead><tr><th>사이즈</th><th>파일 확장자</th><th>용량</th></tr></thead><tbody><tr><td>100*100px</td><td>png</td><td>1MB</td></tr></tbody></table>