스윙 기능 도움말

웹 템플릿 페이지 제작방법

370 views 2017년 1월 11일 2018년 1월 16일 root 7

템플릿페이지제목

웹 템플릿 페이지 이용방법 매뉴얼.

템플릿 페이지는 업종별 템플릿 페이지 제작 툴(tool)을  스윙에서 제공하고, 사용자는 tool 가이드라인 대로만 따라서 입력하면 간단하게 웹 페이지가 완성되는 편리한 제작도구입니다.

웹페이지를 만들고 싶은데 기술적인 한계가 있었던 사용자분들은 이제 템플릿페이지로  쉽게 웹페이지를 제작할 수 있습니다.

템플릿 페이지 제작방법 매뉴얼을 함께 봐주세요~!



▶ 웹 템플릿페이지 제작방법 영상으로 확인하기


STEP.1 템플릿 페이지 추가하기
  • 템플릿 페이지 제작도구는  앱제작 마법사에서 이용할 수 있습니다.

템플릿페이지.17.10.12

스윙 앱제작 페이지의 3단계 페이지메뉴 →오른쪽 메뉴설정에서 [사용자페이지 선택 → 불러오기→ 사용자페이지 목록에서  [웹 템플릿 기반 페이지 추가/ 관리] 메뉴 선택

새로운 템플릿을 만들어볼게요~!


 

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

1.템플릿 페이지 만들기

템플릿페이지2.17.10.12

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

사이트 하단의 [+새로만들기] 선택하면 여러 스타일의 템플릿 페이지 창이 열립니다.

현재 10 업종의 디자인스타일(네일, 헬스, 헤어, 레스토랑, 캠핑, 주식, 학원, 배달, 법무법인, 호텔)을 제공하고 있어요.

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

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

앞으로 템플릿 디자인 스타일은 계속 추가될 예정이에요!

 

2. 페이지 영역 수정하기

템플릿 이용방법3

페이지의 각 영역들은 모두 수정이 가능하도록 개발되었습니다.

ex) 메인 페이지

1) 메인타이틀 – 레스토랑 이름 혹은 앱 이름을 기재해주세요.

2) 영업시간  – 레스토랑 운영시간을 기재해주세요.

3) 메뉴(버튼)리스트 – 셋팅해놓은 내용을 그대로 써도 되구요.

원하는 메뉴명으로 변경하고, 링크를 달아서 해당 버튼을 누르면 다른 웹페이지로 이동할 수도 있습니다.

 

템플릿 이용방법4

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

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

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

 

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

템플릿페이지1

 

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

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

 

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

템플릿 이용방법5

페이지 제작도구 상단에 보시면 다양한 메뉴들을 확인할 수 있는데요

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

 

STEP.3 만들어놓은 템플릿 페이지 앱에 적용하기
  • 만든 템플릿 페이지를 앱에 적용해보겠습니다.

템플릿 이용방법6

다시 사용자페이지 버튼을 선택하면 추가된 템플릿 페이지를 확인할 수 있습니다.

(템플릿 페이지가 안보인다면 ‘새로고침’을 한 번 눌러주세요)

만들어놓은 템플릿 페이지 중 적용하고자 하는 메뉴에 페이지를 적용합니다.

 

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

녹화_2017_01_11_20_52_57_393

1) 메인 메뉴 관리에서 적용하고자 하는 메뉴 선택합니다.

2) 오른쪽 메뉴설정에서 [사용자 페이지] 버튼 선택합니다.

3) 하단 [불러오기]를 버튼을 선택해서 만들어놓은 템플릿 페이지를 확인합니다.

4) 적용을 원하는 페이지를 선택 후 [적용] 버튼을 누르고 다시 나와서 [적용] 버튼 후 [저장] 버튼을 눌러주세요

5) 가상머신으로 템플릿페이지가 적용된 앱 화면을 보실 수 있습니다.

 

[앱 실행화면- 레스토랑 템플릿 적용]

레스토랑템플릿

 


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

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

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

Was this helpful?