# 페이지메뉴-메인메뉴 관리

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A9%94%EB%89%B4-%EB%A9%94%EB%89%B4%EA%B4%80%EB%A6%AC.png)

**\[페이지 메뉴]단계에서 메인메뉴를 운영하는 방법**&#x20;

**※페이지메뉴란?**

스윙 앱제작 페이지의 3번째 제작 페이지로 **전체적인 앱의 컨텐츠를 구성하는 단계입니다.**&#x20;

**※메인 메뉴란?**&#x20;

페이지메뉴 단계에서 **앱을 구성하는 메인 홈화면과 카테고리, 메뉴들을 제작합니다.**&#x20;

페이지 메뉴는 앱 제작에서 가장 중요한 단계이자 앱을 구성하는 메인 홈화면과 메뉴들을 적용할 수 있습니다.

페이지 메뉴 단계에서 메인&메뉴를 구성하는 방법을 확인해주세요.

**\*1,2단계 앱제작 방법 매뉴얼은 스윙투앱 앱제작 단계별 매뉴얼을 확인해주세요\~!**

<mark style="background-color:blue;">**▶**</mark> [**스윙투앱 앱제작 매뉴얼 확인하기**](https://blog.naver.com/swing2app/221192509056)

> <mark style="color:blue;">**앱제작 페이지 – 페이지메뉴 단계**</mark>&#x20;

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/Tutorial_ContentsTutorial_17.png)

페이지메뉴 단계는 기본으로 메뉴들이 셋팅되어서 제공됩니다.

해당 메뉴를 수정하거나 삭제하여 자신만의 메뉴를 만들 수 있으며 새 메뉴 추가, 삭제하기 메뉴를 선택해서 메뉴 관리를 할 수 있습니다.

다양한 메뉴들을 이용하여 홈화면을 설정하고 카테고리를 설정할 수 있습니다.

***

### <mark style="color:blue;">**STEP.1 홈화면 제작방법**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/Tutorial_ContentsTutorial_18.png)

홈화면은 앱을 실행하면 보이는 메인화면으로, 사용자가 직접 메인화면을 어떻게 보여지게 할지 구성할 수 있어요.

스윙에서 제공하는 메뉴 – 웹링크, 스윙페이지, 사용자페이지, 게시판, 이미지 등의 메뉴를 적용할 수 있습니다.

**\*홈화면 상세 방법은홈화면 제작 매뉴얼을 확인해주세요 ☞** [**\[홈화면 제작방법 포스팅 보러가기\]**](/manual/v2/pagemenu/home-menu.md)

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EC%A4%841.png)

<mark style="color:green;">**1.홈화면 설정 방법: 웹링크 메뉴 적용하기**</mark>

**홈화면은 다양한 메뉴들을 적용할 수 있는데요. 그 중에서 ‘웹링크’를 적용해보겠습니다.**

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%ED%99%88%ED%99%94%EB%A9%B4-%EC%9B%B9%EB%A7%81%ED%81%AC%EC%A0%81%EC%9A%A9.png)

<mark style="color:blue;">**\[제작방법]**</mark>

1\) \[홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.

2\) 홈 화면 상단의 메뉴 이름을 바꿀 수 있어요.(이름을 바꾸지 않으면 앱이름으로 표시됩니다.)

3\) 메뉴 설정에 있는 \[웹링크] 메뉴를 선택합니다. (스윙 홈페이지 URL: [http://www.swing2app.co.kr](http://www.swing2app.co.kr/) 를 넣었습니다.)

4\) 하단 영역에 웹링크 URL을 입력해주세요.

5\) 적용을 누르고

6\) 저장을 누르면 완료!

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%ED%99%94%EC%82%B4%ED%91%9C-2.png)

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EC%9D%B4%EB%AF%B8%EC%A7%80_1.png)

<mark style="color:red;">**★ 주의사항**</mark>

**웹링크를 적용할 때 가끔씩 퍼가기를 금지해 놓은 사이트가 있어요.**

**\*네이버, 다음 등의 포털 사이트, 유튜브, SNS 사이트(인스타그램, 카카오톡, 페이스북) 등이 퍼가기를 금지해놓은 대표적인 사이트에요!**

**특히 자신이 운영하는 네이버 블로그 혹은 다음 카페 등은 네이버, 다음 자체에서 막아놓기 때문에 홈에 제대로 연동이 안 될 수 있어요**

**따라서 앱 홈화면 웹링크에는 – 이러한 포털사이트, SNS사이트를 피해주세요!**

**홈화면 제작의 더욱 다양하고 자세한 방법은 해당 포스팅을 확인해주세요!**

**☞** [**\[앱 홈화면 제작방법 포스팅 보러가기\]**](/manual/v2/pagemenu/home-menu.md)

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EC%A4%841.png)

<mark style="color:green;">**2. 홈화면 적용 움짤로 확인하기**</mark><br>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EB%85%B9%ED%99%94_2019_12_15_14_45_50_345.gif)

**홈화면을 적용해보았다면 이어서 메뉴를 적용해보겠습니다.**

### <mark style="color:blue;">**STEP.2 메뉴 관리**</mark>

스윙투앱에서는 사용자들이 앱을 제작하실 때 도움이 될 수 있도록 메뉴들을 기본 셋팅해놓고 있습니다.

내가 넣어놓은 메뉴들이 아닌데 의아해하실 수 있으나,

<mark style="color:orange;">**\*\* 셋팅된 메뉴이니  다 삭제하시고 새로 만드셔도 되고 기존의 메뉴들을 활용하셔도 됩니다.**</mark>

<mark style="color:green;">**1. 메뉴 삭제**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/Tutorial_ContentsTutorial_21.png)

<mark style="background-color:blue;">**▶**</mark> <mark style="color:orange;">**기본 셋팅된 메뉴들을 삭제하는 방법**</mark>

**\*필요 없는 메뉴는 삭제해서 메뉴를 정리할 수 있습니다.**

친해지기라는 메뉴를 삭제할 경우, \[친해지기] 카테고리를 선택한 뒤 휴지통 모양(삭제) 버튼을 선택합니다.

이러한 방법으로 메뉴들을 삭제할 수 있습니다.

<mark style="background-color:blue;">**▶**</mark> <mark style="color:orange;">**움짤 이미지로 메뉴 삭제방법 확인하기**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EB%A9%94%EB%89%B4%EC%82%AD%EC%A0%9C.gif)

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EC%A4%841.png)

<mark style="color:green;">**2. 새 메뉴 추가 (카테고리 추가)**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/Tutorial_ContentsTutorial_20.png)

새로운 카테고리를 추가하는 방법을 알려드릴게요.

**1.\[카테고리 추가] 버튼을 선택합니다.**

**2. 해당 카테고리 이름을 입력합니다.**

**4. 메뉴 유형: 어떤 메뉴를 적용할 것인지 선택합니다.**

**5.적용**

**6.저장**

<mark style="color:orange;">**=가상머신을 통해서 새 메뉴가 생성된 것을 확인할 수 있습니다.**</mark>

<mark style="background-color:blue;">**▶**</mark> <mark style="color:orange;">**움짤 이미지로 카테고리 추가방법 확인하기**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EB%85%B9%ED%99%94_2019_12_15_15_13_12_966.gif)

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EC%A4%841.png)

<mark style="color:green;">**3. 메뉴 이동: 상위 고정, 하위 고정**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/Tutorial_ContentsTutorial_22.png)

만들어놓은 메뉴 아래로 하위 메뉴를 추가하는 방법을 알려드릴게요.

이동할 메뉴를 선택하고 이동할 위치로 마우스를 드래그 해주세요.

드래그하는 위치로 메뉴 이동이 완료됩니다. – 하위 혹은 상위 메뉴로 구성할 수 있어요.

<mark style="color:blue;">**<= 상단으로 메뉴 배치**</mark>

<mark style="color:blue;">**+ 메뉴를 다른 메뉴의 하위로 배치**</mark>

​

<mark style="background-color:blue;">**▶**</mark> <mark style="color:orange;">**움짤 이미지로 메뉴 이동방법 확인하기**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EB%85%B9%ED%99%94_2019_12_15_15_14_19_953.gif)

페이지메뉴 단계는 메뉴들의 이용방법 및 활용법을 먼저 파악을 해야만 앱제작이 좀 더 수월해집니다.

따라서 각 메뉴별 이용방법을 먼저 확인해주시기 바랍니다.

​

**\* 고급설정은 제작에서 필요한 내용이 아니기 때문에 3단계 페이지메뉴까지만 작업해주세요.**

페이지메뉴까지 제작이 완료되면 앱제작 요청 버튼을 눌러서 앱제작을 완료해주세요.

​

페이지 메뉴는 위에서 설명해드린 기본 제작 방법 외에도

<mark style="color:red;">\* 메뉴 유형에서 제공하는: 스윙페이지, 사용자 페이지, 게시판 등 다양한 메뉴를 제공하고 있어요.</mark>

해당 메뉴 이용방법 역시 매뉴얼로 이용방법을 모두 제공하고 있으니 앱제작 전 먼저 확인해주시면 제작 및 운영에 도움이 되실거에요.

> <mark style="color:blue;">**앱제작 완료!**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/Tutorial_ContentsTutorial_25.png)

최종 작업이 다 되면 \[앱제작요청] 버튼을 눌러서 제작하기를 완료해주세요.


---

# 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://documentation.swing2app.co.kr/manual/v2/pagemenu/mainmenu.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.
