# 쇼핑몰 앱 홈화면 구성방법
쇼핑몰 앱에 구성할 수 있는 앱 홈화면 스타일을 알려드립니다.
스윙샵을 이용하시는 분들은 아래 매뉴얼을 참고해주셔서 앱 화면을 구성해주세요.
스윙샵 이용시 기본으 제공되는 쇼핑몰 페이지로 적용 하셔도 되고, 사용자 페이지를 이용해서 다양한 방법으로 응용하실 수 있습니다.
## **1. 쇼핑몰 메인 페이지 적용**
\*쇼핑몰 메인 페이지는 가장 기본적인 쇼핑몰 디자인 UI이며, 많은 사용자들이 스윙샵 앱제작시 이용하고 있습니다.
쇼핑몰 메인 페이지 스타일과, 앱 홈화면에 적용하는 방법을 알려드릴게요.
쇼핑몰 메인 페이지를 적용한 스윙샵 앱 메인 홈화면입니다.
기본적인 쇼핑몰 UI로 제공되구요.
\*\* 스윙샵- 상점관리에서 등록한 기본정보, 상품관리에서 등록한 상품이 메인 페이지로 구성됩니다.
따라서 상점관리에서 기본 정보를 등록하고, 상품을 등록해야만 메인페이지가 완벽히 보여질 수 있습니다.
**쇼핑몰 메인 페이지 – 앱 홈화면에 적용하는 방법**
1\)앱제작 - STEP3 페이지 선택
2\)HOME 선택
3\)메뉴 이름 입력
4\)페이지 디자인에서 \[쇼핑몰 기능] 선택
5\)\[페이지] 선택해주세요.
6\)'쇼핑몰 메인' 페이지 \[적용하기] 버튼을 선택해주세요.
(페이지에 마우스 커서를 가져다 대면 적용하기 버튼이 열립니다)
7\) 화면 상단 \[저장]버튼을 누르면 앱에 적용됩니다.
##  **2. 쇼핑몰 정보 페이지 적용**
\*쇼핑몰 정보 페이지는 상점의 정보: 운영시간, 상점 소개말, 아이콘 이미지, 공유하기/전화 걸기 등의 아이콘 배너가 보여지는 페이지입니다.
쇼핑몰 정보 페이지 스타일과, 앱 홈화면에 적용하는 방법을 알려드릴게요.
쇼핑몰 정보 페이지를 적용한 스윙샵 앱 메인 홈화면입니다.
\*\*쇼핑몰 정보페이지는 스윙샵 – 상점관리에서 등록한 기본정보가 보여지게 됩니다.
따라서 상점관리에서 기본정보를 등록하고, 이후 수정도 해당 메뉴에서 작업해주시면 됩니다.
**쇼핑몰 정보 페이지 – 앱 홈화면에 적용하는 방법**
1\)앱제작 - STEP3 페이지 선택
2\)HOME 선택
3\)메뉴 이름 입력
4\)페이지 디자인에서 \[쇼핑몰 기능] 선택
5\)\[페이지] 선택해주세요.
6\)'쇼핑몰'정보 페이지 \[적용하기] 버튼을 선택해주세요.
(페이지에 마우스 커서를 가져다 대면 적용하기 버튼이 열립니다)
7\) 화면 상단 \[저장]버튼을 누르면 앱에 적용됩니다.
##  **3. 사용자 페이지 이용하기**
**만약 위에서 알려드린 스윙샵 페이지 – 쇼핑몰 메인 페이지, 쇼핑몰 정보 페이지가 마음에 들지 않는다면??**
**당연히!! 홈화면은 다른 페이지로 응용해서 제작할 수 있답니다. \~!!**
스윙투앱에서 제공하는 사용자페이지 제작도구를 이용하신다면 원하는 스타일에 맞게 작업하실 수 있는데요.
사용자페이지에서는 링크마법사 기능(웹링크, 앱 메뉴 연동 등)을 제공하기 때문에 스윙샵에서 만들어놓은 메뉴로도 연동할 수 있어요.
샘플앱을 통해서 제작방법을 알려드릴게요!
### **1)템플릿 페이지 이용하기**
먼저 웹템플릿 페이지를 이용해서, 스윙샵에서 등록한 상품을 각 배너(버튼)마다 연동하는 방법을 알려드릴게요.
웹템플릿은 스윙에서 제공하는 사용자페이지로 다양한 업종별 디자인 템플릿을 제공하는데요.
디자인이 다 입혀져서 제공이 되기 때문에 사용자는 텍스트, 이미지, 링크만 변경해서 사용할 수 있어요.
**호텔 샘플앱에서는 웹템플릿을 홈화면 메인으로 걸고, 해당 버튼마다 예약하기 링크를 적용해서 예약상품을 구매할 수 있도록 했어요.**
**웹 템플릿 페이지-스윙샵 상품을 넣어서 제작하는 방법**
**앱제작 페이지에- 페이지 메뉴- 사용자 페이지 불러오기 선택 후 ‘웹 템플릿 기반 페이지 추가’를 선택해주세요.**
**웹 템플릿 페이지 제작도구 창이 열리면, 아래 방법대로 진행해주세요.**
1\)하단 \[새로 만들기] 버튼을 눌러주세요.
2\) 페이지 타입 선택: 호텔로 선택했구요. 다양한 업종 템플릿을 제공하오니 디자인별로 원하는 스타일로 선택해주세요.
3\) 리스트 페이지 선택 \*저는 리스트 페이지로 제작했는데요. 페이지 선택은 사용자분들께서 원하시는 스타일로 선택해주세요!
4\) 추가 버튼을 눌러주세요.
5\) 템플릿에서 링크를 적용할 버튼을 선택합니다.
6\)\[링크마법사] 버튼을 선택해주세요.
7\)링크마법사 창에서 \[스윙 기능] 을 선택하구요.
**\*판매하는 상품을 바로 연결한다면 – 상품을 선택한 뒤 상품 이름 검색하여 링크 적용하구요.**
**\*상품 카테고리를 선택하여 카테고리 자체를 연결할 수도 있습니다.**
8\)예약상품 예약하기 메뉴를 선택한 뒤
**\*샘플에서 보여드린 앱은 호텔앱으로 예약 상품을 판매하는 쇼핑몰이라서 예약상품예약하기를 선택했구요.**
**스윙샵 상품 유형에 따라서 -디지털 상품 구매하기를 선택할 수 있고, 판매되는 상품을 바로 연결할 수 있습니다.**
9\)\[반영]버튼을 누르면, 버튼에 해당 링크가 적용됩니다.
\*사용자페이지에서 제공하는 \[링크 마법사] 버튼을 선택하면 스윙샵 운영과 관련된 모든 메뉴들을 적용할 수 있어요.
스윙 기능, 상품, 상품 카테고리를 적용하면, 앱에서 버튼을 누르면 해당 링크로 이동됩니다.
**템플릿 페이지 앱에 적용하기**
1\)앱제작 화면 - STEP3 페이지 단계로 이동합니다.
2\)홈화면 – HOME 선택
3\)메뉴 이름 입력 (홈화면 상단에 보여질 이름)
4\)페이지 디자인에서 \[업종별 템플릿]을 선택해주세요.
5\)오른쪽에 있는 ‘새로고침’ 버튼을 선택하면 만들어놓은 템플릿을 확인할 수 있습니다.
6\)\[적용하기] 를 선택합니다. (페이지에 마우스 커서를 가져다 대면 적용하기 버튼이 열립니다)
7\)화면 상단 \[저장]버튼을 누르면 앱에 적용됩니다.
\*홈화면을 선택해서 템플릿 페이지를 적용했지만, 홈화면 외에 메뉴에도 적용이 가능해요. 메뉴에도 템플릿 페이지를 적용할 수 있습니다.
\*미리보기 버튼을 선택하면 페이지가 어떻게 보여지는지 웹 미리보기(가상머신)으로 확인가능하구요.
\*페이지 적용 후에 가상머신을 통해서도 페이지가 어떻게 앱에 적용되는지 확인 가능합니다.
\*제작 단계 중 메뉴 아이콘 , 메뉴 설정은 HOME에는 적용 불가하며, 필수 입력 항목이 아닙니다.
**★응용 TIP**
다른 스타일의 웹템플릿으로도 예약상품 페이지를 구성할 수 있어요.
다른 업종 템플릿의 \[정보 페이지]를 사용했구요.
이미지와 텍스트를 수정한 뒤 하단 버튼에 – 예약하기 링크를 생성해서 해당 버튼을 선택하면 예약하기 링크로 이동합니다.
이렇게 다양한 웹템플릿 디자인을 이용해서 쇼핑몰 화면을 구성할 수 있어요!
### **2)이미지 페이지 이용하기**
두 번째는 이미지 페이지를 이용해서, 스윙샵에서 등록한 상품을 각 배너(버튼)마다 연동하는 방법을 알려드릴게요.
이미지 페이지 역시 스윙에서 제공하는 사용자페이지로, 이미지 위에 배너를 설정하여 링크를 연결할 수 있는 기능이에요.
사용자가 직접 이미지를 만들기 때문에 툴(tool)대로만 사용하는 것이 불편하다면 자유롭게 이미지를 이용해서 구성할 수 있습니다.
**학원 샘플앱에서는 이미지 페이지를 홈화면 메인으로 걸고, 해당 배너마다 상품을 적용해서 구매할 수 있도록 했어요.**
**이미지 페이지-스윙샵 상품을 넣어서 제작하는 방법**
**앱제작 페이지에- 페이지 메뉴- 사용자 페이지 불러오기 선택 후 ‘이미지 기반 페이지 추가’를 선택해주세요.**
**이미지 페이지 제작도구 창이 열리면, 아래 방법대로 진행해주세요.**
(1)상단 \[새로 만들기] 버튼을 눌러주세요. \*만들어놓은 이미지를 첨부해주세요.
(2) 왼쪽의 툴 모양 버튼을 이용해서, 배너를 적용할 부분에 영역을 만들어주세요
\*구매하기를 눌렀을 때 상품 구매 페이지로 넘어갈 수 있게 해당 영역만 블록을 잡았어요.
(3)오른쪽 링크 액션에서 \[링크 마법사] 버튼을 선택합니다.
(4)링크 마법사 창에서 \[상품]을 선택합니다.
(5) 상품 검색에, 해당 페이지에서 보여질 상품 이름을 입력해주세요.
\*스윙샵 상품등록에서 상품을 등록해야만, 해당 메뉴에서 상품이 검색됩니다.
따라서 스윙샵 – 상품관리에서 상품 등록이 모두 완료된 후 적용해주세요.
(6)\[반영] 버튼을 눌러주세요.
(7) 상단 \[저장] 버튼을 누르면, 이미지페이지 제작이 완료됩니다.
**이미지 페이지 – 앱 홈화면에 적용하는 방법**
1\)앱제작 화면 - STEP3 페이지 단계로 이동합니다.
2\)홈화면 – HOME 선택
3\)메뉴 이름은 변경하지 않아도 됩니다.
\*이미지 페이지는 이미지 페이지 제작도구에서 저장한 이름으로 홈화면 상단에 표시됩니다.
4\)페이지 디자인에서 \[이미지맵]을 선택해주세요.
5\)오른쪽에 있는 ‘새로고침’ 버튼을 선택하면 만들어놓은 템플릿을 확인할 수 있습니다.
6\)\[적용하기] 를 선택합니다. (페이지에 마우스 커서를 가져다 대면 적용하기 버튼이 열립니다)
7\)화면 상단 \[저장]버튼을 누르면 앱에 적용됩니다.
##  **4.** 앱제작 V2버전 이용시
***
{% tabs %}
{% tab title="앱제작 V2버전 매뉴얼" %}
앱제작 V2 버전 이용시 아래 방법으로 이용해주세요.
**1.쇼핑몰 메인 페이지 – 앱 홈화면에 적용하는 방법**
앱제작 → 페이지 메뉴 이동
1\)홈화면 선택
2\)메뉴명 입력 (상단에 노출)
3\)스윙페이지 선택
4\)링크마법사 버튼 선택
5\)’쇼핑몰 메인’ 선택 후 \[적용]버튼 선택
6\)\[적용]버튼 선택
7\) \[저장]버튼 앱 적용 완료됩니다.
**2.쇼핑몰 정보 페이지 – 앱 홈화면에 적용하는 방법**
앱제작 → 페이지 메뉴 이동
(1)홈화면 선택
(2)메뉴명 입력 (상단에 노출)
(3)스윙페이지 선택
(4)링크마법사 버튼 선택
(5)’쇼핑몰 정보’ 선택 후 \[적용]버튼 선택
(6)\[적용]버튼 선택
(7)\[저장]버튼 앱 적용 완료됩니다.
**3.템플릿 페이지 – 앱 홈화면에 적용하는 방법**
앱제작 → 페이지 메뉴 이동
(1)\[홈 화면]메뉴를 마우스로 클릭합니다.
(2)메뉴명: 홈화면 상단에 보여질 이름을 입력합니다.
(3)메뉴 유형에서 \[사용자 페이지]메뉴를 선택합니다.
(4) \[링크마법사] 버튼을 눌러주세요.
(5)링크 마법사 창에서 \[페이지 템플릿] 메뉴 선택
(6)홈화면에 적용할 템플릿 페이지 선택 후 \[반영] 버튼 선택
만들어놓은 페이지가 안보인다면, 새로고침을 한 번 해주세요!
(7)페이지 하단의 \[적용] 버튼을 누르고
(8)\[저장] 버튼을 누르면 완료됩니다.
**4.이미지 페이지 – 앱 홈화면에 적용하는 방법**
앱제작 → 페이지 메뉴 이동
(1)\[홈 화면]메뉴를 마우스로 클릭합니다.
2\)메뉴명은 변경 하지 않아도 됩니다.
\*중요\* 이미지 페이지는 이미지 페이지 제작도구에서 저장한 이름으로 홈화면 상단에 표시됩니다.
3\)메뉴 유형에서 \[사용자 페이지]메뉴를 선택합니다.
4\)연필 모양 아이콘 \[불러오기] 버튼을 눌러주세요.
5\)링크 마법사 창에서 \[이미지맵] 메뉴 선택
6\)홈화면에 적용할 이미지 페이지 선택 후 \[반영] 버튼 선택
만들어놓은 페이지가 안보인다면, 새로고침을 한 번 해주세요!
(7)페이지 하단의 \[적용] 버튼을 누르고
(8)\[저장] 버튼을 누르면 완료
\*이미지페이지는 페이지 제작도구에서 입력한 ‘페이지 이름’이 홈화면 이름으로 적용됩니다.
{% endtab %}
{% endtabs %}
이상으로 스윙샵 쇼핑몰 앱에 구성할 수 있는 앱 홈화면 스타일을 알려드렸어요.
스윙샵을 이용하시는 분들은 위의 매뉴얼을 참고해주셔서 앱 화면을 구성해주세요.
기본 제공되는 쇼핑몰 페이지로 적용하셔도 되구요.
사용자페이지를 이용해서 다양한 방법으로 응용하실 수 있습니다.
---
# 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/shop/swingshop/app.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.
