스윙투앱 매뉴얼

웹 템플릿 페이지 제작방법

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

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

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

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

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

☞ http://swing2app.blog.me/221045563307

 

 템플릿 페이지 제작방법은 영상으로도 확인이 가능합니다.


웹 템플릿 페이지 적용 화면

스윙에서 제공하는 웹 템플릿 중 [학원] 업종 메인 페이지를 적용한 모습이에요~!


 

STEP.1 템플릿 페이지 추가하기

앱제작 페이지 – 페이지 메뉴 단계에서

1)홈화면 선택 후

2)사용자페이지 선택 3)불러오기 버튼을 선택해주세요

4)사용자 페이지 창에서 ‘웹 템플릿 기반 페이지 추가/관리’ 버튼을 선택해주세요.


 

STEP.2 템플릿 페이지 제작도구

1. 페이지 새로 만들기

템플릿 페이지 제작도구 사이트입니다.

사이트 하단의 [+새로만들기] 선택하면 ‘페이지 새로 만들기’ 창이 떠요.

페이지 선택 후 [추가]버튼을 선택해주세요.

 

현재 스윙에서는 다양한 업종의 템플릿 페이지를 제공하고 있어요.

네일, 헬스, 헤어, 학원, 레스토랑, 법무법인, 배달, 호텔, 스파, 이사, 시장  등등 등…

템플릿은 계속해서 추가하여 업데이트 되고 있습니다.

만들고자 하는 앱과 동일하거나 비슷한 스타일의 디자인이 있다면 해당 페이지 타입을 선택하시면 됩니다.

각 템플릿에는 메인 페이지, 리스트 페이지, 정보 페이지가 있으니 운영용도에 맞게 활용해주세요 ^^

 

2.페이지 영역 수정하기​​

저는 다양한 업종 중에서 ‘레스토랑’ 업종 템플릿을 선택해서 작업해볼게요.

​1) 레스토랑 메인페이지 수정

​페이지의 각 영역들은 모두 수정이 가능하도록 개발되었습니다.
ex) 메인 페이지
1) 메인타이틀 – 레스토랑 이름 혹은 앱 이름을 기재해주세요.
2) 영업시간  – 레스토랑 운영시간을 기재해주세요.
3) 메뉴(버튼)리스트 – 셋팅해놓은 내용을 그대로 써도 되구요.
원하는 메뉴명으로 변경하고, 링크를 달아서 해당 버튼을 누르면 다른 웹페이지로 이동할 수도 있습니다.

​1) 레스토랑 리스트페이지 수정


리스트 페이지 역시 각 항목별 이미지와 제목, 내용 영역을 선택하면 모든 항목을 수정할 수 있습니다.

이미지는 꼭 기재된 사이즈에 맞게 작업한 뒤 업로드 해주세요 !

내용 입력이 완료되면 [데이터 저장] 버튼을 눌러서 수정한 내용을 저장해주세요.

▶움짤로 보시면 더욱 쉽게 이해가 되실거에요!


항목을 누르면 수정영역이 표시 되기 때문에 어떤 메뉴를 수정하고 있는지 찾기 쉽구요.

제공되는 디자인, 스타일, tool 모두를 제공하고 있기 때문에 사용자는 수정사항에 기재된 내용만 따라서 작업해주시면 됩니다.

3. 템플릿 페이지 상단 메뉴

[제작방법]

페이지 제작도구 상단에 보시면 다양한 메뉴들을 확인할 수 있어요
1)새창에서 보기 – 해당 템플릿 페이지 새창으로 열어서 볼 수 있습니다.
2)수정영역 표시되지 않음 – 수정영역은 블록으로 잡히는데요. 작업하는데 불편하다면 해당 버튼을 눌러서 블록을 없앨수 있어요.
3)데이터저장 – 페이지 수정작업이 끝나면 데이터저장 버튼을 눌러서 내용을 저장해주세요.
4)페이지삭제 – 해당 페이지가 필요없다면 삭제 버튼을 눌러서 지울 수 있습니다.
5)페이지초기화 – 아무 것도 없이 작업하고 싶을 경우 tool만 그대로 두고, 셋팅된 내용을 다 지울 수 있습니다.
6)기본 데이터로 변경 – 작업하다가 다시 원래 페이지로 돌리고 싶다면 페이지 초기화를 통해서 원래 셋팅된 페이지로 돌아갈 수 있어요.

4. 링크 마법사 이용하기

템플릿 페이지의 각 메뉴에 링크를 연동할 수 있습니다.

템플릿의 버튼 선택 후 오른쪽 [링크마법사] 버튼을 선택하면, 링크마법사 창이 새로 뜹니다.

여기서 일반 인터넷 주소(웹링크), 스윙에서 만들어놓은 게시판, 사용자페이지, 특정 게시물, 파일첨부 등 다양한 메뉴를 적용할 수 있습니다.


STEP.3 앱에 템플릿 적용하기

자, 이제 위에서 템플릿을 다 수정했다면!! 만든 템플릿 페이지를 앱에 적용하셔야 하겠죠? ^^

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

1)홈화면 선택 (홈화면 외에 다른 메뉴에 추가할 경우, 추가 버튼을 선택해서 메뉴 추가 한 뒤 적용해주세요)

2)’사용자페이지’ 선택 후 3) [불러오기] 버튼 선택 

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

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

5)하단 [적용]버튼 선택 후  6)상단의 저장 버튼을 누르면 완료됩니다.

▶ 움짤 이미지를 통해서앱에 템플릿을 적용하는 방법을 확인해주세요.

가상머신을 통해서 템플릿 페이지가 적용된 모습을 확인할 수 있어요~!!

 

▶ 앱 실행화면 – 레스토랑 템플릿 적용

템플릿페이지는 매뉴얼에서 보는 것보다 훨씬 쉽게 작업하실 수 있어요.
제작 tool을 다 제공하고 있기 때문에 사용자분들은 tool대로만 따라서 입력해주시면 됩니다. ^^
그리고 계속해서 업종별로 다른 디자인 페이지를 추가해나갈 예정이오니 더욱 더 많은 관심 부탁드리겠습니다.