# 사용자 페이지- 웹 템플릿 페이지

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

**웹 템플릿 페이지 제작방법 안내**

템플릿 페이지는 사용자페이지에서 제공하는 웹페이지 제작도구로 – 업종별 디자인 템플릿 제작 툴(tool)이구요.

사용자는 디자인이 입혀진 페이지에서 가이드라인 대로만 텍스트, 이미지 등만 입력하면 웹페이지를 제작할 수 있습니다.

디자인측면으로 직접 제작이 어려운 웹페이지를 각 스타일별, 업종별 템플릿을 제공함으로 사용자분들은 보다 간편하게 페이지를 제작할 수 있습니다.

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%ED%98%B8%ED%85%943-886_2019.07.png)

![](https://wp.swing2app.co.kr/wp-content/uploads/2019/04/%EC%A4%84%EB%9D%BC%EC%9D%B8.png)

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EB%8B%A8%EB%9D%BD1-1.png)**템플릿 페이지 제작 단계**

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/KR-%ED%8E%98%EC%9D%B4%EC%A7%80-%ED%85%9C%ED%94%8C%EB%A0%9B.png)

**\[템플릿 페이지 제작하기]**

1\)앱제작v2 화면으로 이동해주세요.

2\)상단 \[사용자페이지 설정] 버튼 선택

3\)설정 창에서 \[페이지 템플릿] 메뉴 선택 후  \[+새로 만들기] 버튼을 선택해주세요.

4\)템플릿 페이지 제작도구에서 원하는 디자인의 업종별 템플릿을 선택해서 제작해주세요. 

**\[제작한 템플릿 페이지 앱에 적용하기]**

템플릿 페이지 제작을 했다면, 앱에 적용해야 하겠죠?

템플릿 제작 후 다시 앱제작 페이지 – 페이지 메뉴로 돌아오구요.

1\)홈화면 선택 \*웹템플릿을 어디에 적용하는지에 따라 하위 메뉴를 선택하거나, 홈화면을 선택하면 됩니다.

2\) 메뉴 유형: \[사용자 페이지] 선택 선택 후

3\) \[불러오기] 버튼 선택

4\) 사용자페이지: 페이지 템플릿에서 만들어놓은 템플릿 중 하나를 선택 한 뒤 \[반영] 버튼을 선택해주세요.

(만들어놓은 페이지가 안보인다면, 새로고침을 한 번 해주세요!)

5\)하단 \[적용]버튼 선택 후

6\)\[저장] 버튼을 누르면 완료됩니다.

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EC%BA%A1%EC%B2%98-3.png)

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EB%8B%A8%EB%9D%BD1-1.png)**앱 실행화면 -템플릿 페이지 적용**

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

스윙 호텔 샘플앱을 실행한 화면이에요.

홈화면부터 각 메뉴들은 모두 웹템플릿에서 제공하는 호텔03 템플릿페이지를 이용해서 앱에 적용했습니다.

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/10/%EC%BA%A1%EC%B2%9822.png)

**▶ 업종별 템플릿 스타일 보러가기**

[**https://wp.swing2app.co.kr/template-page/**](https://wp.swing2app.co.kr/template-page/)

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EB%8B%A8%EB%9D%BD1-1.png) **템플릿 페이지 제작방법 영상으로 확인하기**

{% embed url="<https://youtu.be/N7GXahXzjt0>" %}

###

### ![](https://wp.swing2app.co.kr/wp-content/uploads/2020/04/%EB%8B%A8%EB%9D%BD1-1.png) <mark style="color:blue;">**STEP.1 웹템플릿 페이지 새로 제작하기**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%ED%85%9C%ED%94%8C%EB%A6%BF%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%93%B1%EB%A1%9D.png)

페이지 템플릿 만들기는 앱제작 화면 상단에 \[사용자페이지 설정] 버튼을 선택하여 이용 가능합니다.

\[사용자페이지 설정] 버튼을 탭하고, <mark style="color:blue;">**페이지 템플릿**</mark> 메뉴 선택해주세요.&#x20;

<mark style="color:blue;">\[+새로만들기]</mark>를 클릭하면 페이지 제작도구 화면이 열립니다.

페이지 템플릿 제작이 완료후,  다시 앱에 적용하는 방법을 알려드릴게요!

***

### ![](https://wp.swing2app.co.kr/wp-content/uploads/2020/04/%EB%8B%A8%EB%9D%BD1-e1611212616323.png) <mark style="color:blue;">**STEP.2 템플릿 페이지 만들기**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EC%9B%B9%ED%85%9C%ED%94%8C%EB%A6%BF%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%97%85%EB%8E%831.png)

새로 만들기 버튼을 선택하면 -> 템플릿 제작도구 화면으로 이동합니다.&#x20;

여기에서 템플릿 페이지를 추가해서 제작을 해주시면 됩니다.

아래에서 상세 이용방법 알려드릴게요\~!

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%ED%85%9C%ED%94%8C%EB%A6%BF2_19.09.png)

1\)제작화면 왼쪽에 있는 \[새로만들기] 버튼을 선택해주세요.

2\) 페이지 타입을 누르면 다양한 페이지 스타일을 확인할 수 있습니다.

**\*스윙투앱은 업종별 페이지를 계속해서 업데이트하여 제공하고 있구요.**

**\*사용자분들은 원하는 디자인의 페이지를 선택할 수 있습니다.**

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%ED%85%9C%ED%94%8C%EB%A6%BF3_19.09.png)

3\) 페이지를 선택한 뒤 \[추가] 버튼을 눌러주세요.

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%ED%85%9C%ED%94%8C%EB%A6%BF4_19.09.png)

4\) 제작도구 화면에 이렇게 추가된 템플릿 페이지를 확인할 수 있구요.

화면 오른쪽에 보시면, 각 항목들을 모두 수정해서 사용할 수 있습니다.

\*화면 왼쪽 하단의 \[복사], \[삭제] 버튼 이용 가능하구요.

\*\[기본값] 버튼은 최초 셋팅된 템플릿 스타일로 다시 되돌리는 버튼이에요.

<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_09_25_16_46_33_274.gif)

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

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

-상단의 페이지명은 앱에서 표시되는 페이지 이름이니 수정해서 사용해주시구요.

-영역에 들어가는 모든 내용 수정 당연히 가능하구요.

-텍스트: 글자 크기, 색상 모두 지정 가능하며, 타이틀 영역은 여백까지 조율할 수 있도록 제공하고 있어요.

-버튼 추가 및 삭제 모두 가능하구요.

-각 영역마다 \[링크마법사]를 이용해서 원하는 페이지로 링크를 걸 수도 있어요,

-항목이 필요없다면 활성화 여부에서 ‘비활성화’를 체크하면 해당 영역이 템플릿에서 삭제됩니다.&#x20;

이미 툴이 다 입혀진 템플릿 위에서 수정만해서 사용하면 되기 때문에 이렇게 간단한 앱제작은 또 없겠죠?^^

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

<mark style="background-color:blue;">**▶**</mark> <mark style="color:orange;">**다른 스타일의 템플릿 페이지 제작**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%ED%85%9C%ED%94%8C%EB%A6%BF5_19.09.png)

5\) 다른 스타일의 템플릿도 동일하게, 페이지를 선택하면 화면에 표시가 되구요.

오른쪽에 보시면 수정할 수 있는 영역들에서 하나씩 수정해서 적용할 수 있습니다.

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%ED%85%9C%ED%94%8C%EB%A6%BF6_19.09.png)

**6)이미지 첨부 하실 때에도, 이미지 버튼 누르면 원하는 이미지 등록할 수 있어요.**

각 템플릿마다 이미지는 기재된 이미지 사이즈가 있는데요. 사이즈대로 이미지를 맞춰서 넣어주시면 좋구요

만약 사이즈 수정이 안되었어도, 이미지 수정 버튼을 누르면 \[이미지 편집도구] 창이 열리구요.

여기서 해당 이미지 사이즈에 맞게 조율해서 등록이 가능하답니다.

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%ED%85%9C%ED%94%8C%EB%A6%BF8_19.09.png)

**7) 링크마법사는 각 배너(버튼)마다 적용할 수 있는 링크를 말하는데요.**

\[링크마법사] 버튼을 선택하시면 위의 이미지처럼 연동할 페이지(링크)를 선택할 수 있어요.

스윙투앱은 일반 웹사이트 웹링크 외에도, 앱 내에서 사용되는 모든 기능들을 연동할 수 있습니다.

**8) 작업이 모두 완료되면 반드시&#x20;**<mark style="color:blue;">**\[저장하기]**</mark>**&#x20;버튼을 눌러주세요.**

저장을 눌러주셔야 해당 페이지가 완벽하게 저장이 됩니다.!!

항목들은 수정시 즉시, 페이지에 반영이 되구요.

모든 작업이 끝나면 \[저장하기] 버튼을 누르면 페이지가 작업 내용대로 저장이 완료됩니다.

***

### ![](https://wp.swing2app.co.kr/wp-content/uploads/2020/04/%EB%8B%A8%EB%9D%BD1-1.png) <mark style="color:blue;">**STEP.3 만들어놓은 웹템플릿 페이지 앱에 적용하기**</mark>

**제작한 웹템플릿 페이지를 앱에 적용해야 하겠죠?**

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EC%9B%B9%ED%85%9C%ED%94%8C%EB%A6%BF-NEW2-1.png)

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

1\)\[홈 화면]메뉴를 마우스로 클릭합니다.

<mark style="color:red;">\*저는 홈화면을 선택해서 템플릿 페이지를 적용했지만, 홈화면 외에 메뉴에도 적용이 가능해요.</mark>

<mark style="color:red;">따라서 적용하고자 하는 카테고리를 추가한 뒤 템플릿 페이지를 적용해주세요.</mark>&#x20;

2\)메뉴명: 홈화면 상단에 보여질 이름을 입력합니다.

3\)메뉴 유형에서 \[사용자 페이지]메뉴를 선택합니다.

4\) \[링크마법사] 버튼을 눌러주세요.

5\)링크 마법사 창에서 \[페이지 템플릿] 메뉴 선택

6\)홈화면에 적용할 템플릿 페이지 선택 후 \[반영] 버튼 선택

<mark style="color:red;">만들어놓은 페이지가 안보인다면, 새로고침을 한 번 해주세요!</mark>

7\)페이지 하단의 \[적용] 버튼을 누르고

8\)\[저장] 버튼을 누르면 완료됩니다.&#x20;

<mark style="background-color:blue;">**▶**</mark> <mark style="color:orange;">**움짤로 적용방법 확인하기**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%ED%85%9C%ED%94%8C%EB%A6%BF-1.gif)

![](https://wp.swing2app.co.kr/wp-content/uploads/2020/05/%EC%BA%A122.jpg)

**▶ 앱 실행화면) 템플릿 페이지 적용화면**

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

***

### ![](https://wp.swing2app.co.kr/wp-content/uploads/2020/04/%EB%8B%A8%EB%9D%BD1-e1611212616323.png) <mark style="color:blue;">**STEP. 4 템플릿은 다시 어​떻게 수정하나요? (편집 방법)**</mark>

<mark style="color:orange;">**템플릿 수정은 동일하게  사용자페이지- 페이지 템플릿에서  \[편집]으로 들어가서 만들어놓은 페이지 위에 덮어서 수정해주시면 됩니다.**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EC%9B%B9%ED%85%9C%ED%94%8C%EB%A6%BF-NEW3.png)

​앱제작 – 페이지메뉴- 사용자페이지 -불러오기 버튼을 선택하시면,  **만들어놓은 템플릿에 \[편집] 버튼이 있어요.**

해당 버튼을 누르면 웹템플릿 페이지 제작도구 화면으로 이동합니다.

<mark style="color:purple;">템플릿 수정도 별도의 페이지가 따로 있는 것이 아니구요.</mark>

<mark style="color:purple;">제작페이지와 동일하게 들어가서, 기존에 만들어놓은 페이지 위에 덮어서 수정을 하는 방법으로 업데이트할 수 있어요.</mark>

***

이상으로 앱제작 스윙투앱에서 사용자 페이지 기능 중 하나인 ‘웹템플릿 페이지 ‘ 이용방법을 알려드렸어요.

웹템플릿페이지는 매뉴얼에서 보는 것보다 훨씬 쉽게 작업하실 수 있어요.

제작 tool을 다 제공하고 있기 때문에 사용자분들은 tool대로만 따라서 입력해주시면 됩니다. ^^

그리고 계속해서 업종별로 다른 디자인 페이지를 추가해나갈 예정이오니 더욱 더 많은 관심 부탁드리겠습니다.