# 페이지 기능 - UI KIT
**UI KIT란?**
스윙투앱에서 제공하는 **게시판 유형의 기능**을 모아놓은 키트입니다.
일반 게시판 UI와 위치등록(지도)게시판, 그룹채팅, 캘린더, 스탬프 게시판 기능을 해당 메뉴에서 확인하고 앱에 적용할 수 있습니다.
아래에서 각 게시판 UI를 앱에 적용하는 방법을 알려드리겠습니다.
## **1.게시판**
게시판은 앱 내 커뮤니티 용도로 관리자가 글을 쓸 수 있고, 앱을 이용하는 사용자들도 글을 등록할 수 있는 기능입니다.
스윙투앱에서는 다양한 게시판 스타일 UI 를 제공하고 있습니다.
각 UI별 스타일에 맞게 게시판을 생성하고 앱에 게시판을 적용하여 이용할 수 있습니다.
1\)앱제작 화면 STEP3 페이지 선택
2\)메뉴 선택
\*메뉴를 만들기 전이라면, 새 메뉴를 만들어주세요. (+ 모양 버튼 선택하여 메뉴 추가)
3\) 메뉴 이름을 입력해주세요.
4\) 페이지 디자인에서 \[UI KIT] 선택
5\)\[게시판]을 선택해주세요.
6\) 등록할 게시판을 확인한 뒤 \[적용하기] 버튼을 선택해주세요. (페이지에 마우스 커서를 가져다 대면 적용하기 버튼이 열립니다)
\*게시판은 내가 만들어놓지 않았는데 게시판이 있는 것을 확인할 수 있어요.
스윙투앱에서 샘플로 기본 제공해드리는 게시판이에요.
따라서 게시판을 이용하기 전에는 \*앱운영-서비스관리- 게시판관리에서 사용할 게시판만 만들어주시고 사용하지 않는 게시판은 삭제해주세요.
게시판 운영 정리를 모두 한 뒤 앱에 적용할 게시판을 등록해주세요.
7\) 화면 상단 \[저장]버튼을 누르면 앱에 적용됩니다.
{% hint style="info" %}
미리보기 버튼을 선택하면 해당 페이지가 어떻게 보여지는지 웹 미리보기(가상머신)으로 확인가능하구요.
\*페이지 적용 후에 가상머신을 통해서도 해당 페이지가 어떻게 앱에 적용되는지 확인 가능합니다.
\*제작 단계 중 메뉴 아이콘 , 메뉴 설정은 필수 입력 항목이 아닙니다.
해당 매뉴얼에서는 입력 없이 진행했으며, 앱 제작시 필요할 경우 추가로 적용해주세요.
{% endhint %}
**게시판을 만들고 앱에 적용하는 방법 상세 매뉴얼을 확인해주세요.**
**☞** [**게시판 만들기 매뉴얼**](https://wp.swing2app.co.kr/documentation/appmanage/board/boardeditor/)
## **2.위치등록**
위치등록은 지도게시판으로, 앱 내에 주소를 넣어야 할 때\~!! 고객들에게 지도 및 오시는 길 안내를 해야 할 때 사용할 수 있는 위치등록 기능이구요.
지도 기능은 카카오맵과 연동하여 제공하고 있습니다.
지도 게시판은 지도map 제공 뿐만 아니라 업체의 주소, 업체 설명, 길 찾기, 홈페이지, 전화걸기, 사진(이미지) 등 다양한 상세 정보를 입력할 수 있습니다.
1\)앱제작 화면 STEP3 페이지 선택
2\)메뉴 선택
\*메뉴를 만들기 전이라면, 새 메뉴를 만들어주세요. (+ 모양 버튼 선택하여 메뉴 추가)
3\) 메뉴 이름을 입력해주세요.
4\) 페이지 디자인에서 \[UI KIT] 선택
5\)\[위치등록]을 선택해주세요.
6\) 만들어놓은 위치등록 게시판을 확인한 뒤 \[적용하기] 버튼을 선택해주세요. (페이지에 마우스 커서를 가져다 대면 적용하기 버튼이 열립니다)
\*위치등록게시판을 먼저 만들어주세요. 만들어놓은 위치등록 게시판이 없을 경우 화면에 뜨지 않으며, 앱에 적용할 수 없습니다.
\*UI KIT 화면에 있는 \[새로 만들기] 버튼을 선택하거나, 앱운영-서비스관리- 게시판관리에서도 게시판을 만들 수 있습니다.
7\) 화면 상단 \[저장]버튼을 누르면 앱에 적용됩니다.
{% hint style="info" %}
\*미리보기 버튼을 선택하면 해당 페이지가 어떻게 보여지는지 웹 미리보기(가상머신)으로 확인가능하구요.
\*페이지 적용 후에 가상머신을 통해서도 해당 페이지가 어떻게 앱에 적용되는지 확인 가능합니다.
\*제작 단계 중 메뉴 아이콘 , 메뉴 설정은 필수 입력 항목이 아닙니다.
해당 매뉴얼에서는 입력 없이 진행했으며, 앱 제작시 필요할 경우 추가로 적용해주세요.
{% endhint %}
**위치등록(지도) 게시판 이용방법 상세 매뉴얼을 확인해주세요.**
**☞** [**위치등록(지도)게시판 매뉴얼**](https://wp.swing2app.co.kr/documentation/appmanage/board/map-board/)
## **3.그룹채팅**
앱 내에서 여러명의 사용자가 동시에 채팅을 진행할 수 있고, 관리자와 다수의 사용자의 채팅도 가능합니다.
또한 회원 그룹별로 채팅방 권한을 설정할 수 있으며, 비밀번호를 입력해야 입장이 가능한 비밀채팅방을 설정할 수도 있습니다.
1\)앱제작 화면 STEP3 페이지 선택
2\)메뉴 선택
\*메뉴를 만들기 전이라면, 새 메뉴를 만들어주세요. (+ 모양 버튼 선택하여 메뉴 추가)
3\) 메뉴 이름을 입력해주세요.
4\) 페이지 디자인에서 \[UI KIT] 선택
5\)\[채팅]을 선택해주세요.
6\) 만들어놓은 채팅방을 확인한 뒤 \[적용하기] 버튼을 선택해주세요. (페이지에 마우스 커서를 가져다 대면 적용하기 버튼이 열립니다)
\*그룹채팅게시판을 먼저 만들어주세요. 만들어놓은 그룹채팅 게시판이 없을 경우 화면에 뜨지 않으며, 앱에 적용할 수 없습니다.
\*UI KIT 화면에 있는 \[새로 만들기] 버튼을 선택하거나, 앱운영-서비스관리- 게시판관리에서도 게시판을 만들 수 있습니다.
7\) 화면 상단 \[저장]버튼을 누르면 앱에 적용됩니다.
{% hint style="info" %}
\*미리보기 버튼을 선택하면 해당 페이지가 어떻게 보여지는지 웹 미리보기(가상머신)으로 확인가능하구요.
\*페이지 적용 후에 가상머신을 통해서도 해당 페이지가 어떻게 앱에 적용되는지 확인 가능합니다.
\*제작 단계 중 메뉴 아이콘 , 메뉴 설정은 필수 입력 항목이 아닙니다.
해당 매뉴얼에서는 입력 없이 진행했으며, 앱 제작시 필요할 경우 추가로 적용해주세요.
{% endhint %}
**그룹채팅방을 만드는 방법, 채팅방 이용 방법 상세 내용은 아래 매뉴얼을 참고해주세요.**
**☞**[**그룹채팅방 매뉴얼**](https://wp.swing2app.co.kr/documentation/appmanage/board/groupchat/)
## **4.캘린더**
캘린더에 주요 일정을 간편하게 등록할 수 있고, 예약 관리가 필요한 업체에서는 날짜, 시간별로 예약현황을 기록할 수 있어요.
또한 중요한 소식, 공지사항을 기재할 수 있습니다.
1\)앱제작 화면 STEP3 페이지 선택
2\)메뉴 선택
\*메뉴를 만들기 전이라면, 새 메뉴를 만들어주세요. (+ 모양 버튼 선택하여 메뉴 추가)
3\) 메뉴 이름을 입력해주세요.
4\) 페이지 디자인에서 \[UI KIT] 선택
5\)\[캘린더]를 선택해주세요.
6\) 만들어놓은 캘린더를 확인한 뒤 \[적용하기] 버튼을 선택해주세요. (페이지에 마우스 커서를 가져다 대면 적용하기 버튼이 열립니다)
\*캘린더게시판을 먼저 만들어주세요. 만들어놓은 스탬프가 없을 경우 화면에 뜨지 않으며, 앱에 적용할 수 없습니다.
\*UI KIT 화면에 있는 \[새로 만들기] 버튼을 선택하거나, 앱운영-서비스관리- 게시판관리에서도 게시판을 만들 수 있습니다.
7\) 화면 상단 \[저장]버튼을 누르면 앱에 적용됩니다.
{% hint style="info" %}
\*미리보기 버튼을 선택하면 해당 페이지가 어떻게 보여지는지 웹 미리보기(가상머신)으로 확인가능하구요.
\*페이지 적용 후에 가상머신을 통해서도 해당 페이지가 어떻게 앱에 적용되는지 확인 가능합니다.
\*제작 단계 중 메뉴 아이콘 , 메뉴 설정은 필수 입력 항목이 아닙니다.
해당 매뉴얼에서는 입력 없이 진행했으며, 앱 제작시 필요할 경우 추가로 적용해주세요.
{% endhint %}
**캘린더 이용방법 상세 매뉴얼은 아래 매뉴얼을 확인해주세요.**
**☞** [**캘린더 이용방법 매뉴얼**](https://wp.swing2app.co.kr/documentation/appmanage/board/calander/)
## **5.스탬프**
스탬프는 모바일 쿠폰으로 관리자가 사용자의 앱으로 스탬프(도장)를 추가할 수 있는 기능입니다.
쿠폰과 연결해서 사용할 수 있구요.
스탬프 게시판 등록시 자동으로 생성되는 QR코드와 회원번호로 스탬프를 추가할 수 있습니다.
1\)앱제작 화면 STEP3 페이지 선택
2\)메뉴 선택
\*메뉴를 만들기 전이라면, 새 메뉴를 만들어주세요. (+ 모양 버튼 선택하여 메뉴 추가)
3\) 메뉴 이름을 입력해주세요.
4\) 페이지 디자인에서 \[UI KIT] 선택
5\)\[스탬프]를 선택해주세요.
6\) 만들어놓은 스탬프를 확인한 뒤 \[적용하기] 버튼을 선택해주세요. (페이지에 마우스 커서를 가져다 대면 적용하기 버튼이 열립니다)
\*스탬프 게시판을 먼저 만들어주세요. 만들어놓은 스탬프가 없을 경우 화면에 뜨지 않으며, 앱에 적용할 수 없습니다.
\*UI KIT 화면에 있는 \[새로 만들기] 버튼을 선택하거나, 앱운영-서비스관리- 게시판관리에서도 게시판을 만들 수 있습니다.
7\) 화면 상단 \[저장]버튼을 누르면 앱에 적용됩니다.
{% hint style="info" %}
\*미리보기 버튼을 선택하면 해당 페이지가 어떻게 보여지는지 웹 미리보기(가상머신)으로 확인가능하구요.
\*페이지 적용 후에 가상머신을 통해서도 해당 페이지가 어떻게 앱에 적용되는지 확인 가능합니다.
\*제작 단계 중 메뉴 아이콘 , 메뉴 설정은 필수 입력 항목이 아닙니다.
해당 매뉴얼에서는 입력 없이 진행했으며, 앱 제작시 필요할 경우 추가로 적용해주세요.
{% endhint %}
**스탬프 게시판 등록 및 스탬프 이용방법 상세 매뉴얼은 아래 매뉴얼을 참고해주세요.**
**☞** [**스탬프 이용 및 등록방법 매뉴얼**](https://wp.swing2app.co.kr/documentation/appmanage/board/stamp/)
---
# 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/v3/step3-page/ui-kit.md?ask=
```
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.