스윙 기능 도움말

페이지메뉴-앱 홈화면 제작방법

890 views 2017년 8월 18일 2018년 2월 11일 root 10

홈화면제작방법제목

 앱 홈화면은 스윙에서 제공하는  메뉴들로 다양한 스타일로 제작할 수 있는데요.

홈 화면을 어떻게 만드느냐에 따라 앱의 스타일 및 디자인이 달라집니다.

스윙에서 제공하는 메뉴들로 홈 화면을 어떻게 꾸미고 제작할 수 있는지 홈 화면 제작방법 매뉴얼을 알려드리겠습니다.


[ 홈화면 제작 영상으로 확인하기]


 

1.홈화면- 앱소개 페이지

스윙 앱제작이 처음이시라면!!

홈화면에 이렇게 앱소개 화면이 보일겁니다. – 2017.10.16 신규 업데이트

홈화면-앱소개(도움말용)17.10.17

해당 화면은 [스윙페이지- 앱소개 메뉴]가 적용된 것이구요.

스윙에서 앱제작시 용이하기 위해서 기본 셋팅해놓은 화면이에요.

따라서 해당 홈화면은 당연히!! 사용자분들이 다른 메뉴로 변경해서 이용하실 수 있답니다.

 

2.홈화면에 앱소개 메뉴 적용하기
  • 그런데 만약 다른 메뉴로 홈화면을 사용하다가 다시 앱소개로 홈화면을 사용하고 싶을 경우에는!! 아래 방법을 통해서 적용해주세요.

홈화면-앱소개3(도움말용)17.10.17

앱제작페이지에서 3단계 페이지메뉴로 이동합니다.

1)홈화면 선택 후  2)오른쪽 메뉴에서 스윙페이지 선택  3)불러오기 선택  4)’앱소개’ 선택 후 적용  5)적용  6)저장

 

3.앱 소개 내용 수정하기 
  • 앱소개에 표시되는 앱설명, 사이트주소, 하단 배너에 연동되는 페이지는 모두 수정할 수 있어요!

홈화면-앱소개2(도움말용)17.10.17

앱제작페이지 고급설정 메뉴로 이동합니다.

1)고급설정 2)앱 서비스 정보에서 3)전화번호, 이메일, 사이트주소, 주소, 앱설명 EDIT 버튼을 눌러서 모두 수정할 수 있어요4) 저장한 뒤 5)앱제작 요청을 선택하시면 완료됩니다.

제작완료가 되면 해당 버전으로 받아서 확인하면 변경되어 있습니다.

*앱제작 요청을 하신 뒤, 새 버전으로 받아서 보셔야 변경된 내용을 확인할 수 있어요.

*가상머신에서는 수정된 내용이 보이지 않고, 앱을 설치한 뒤 앱에서 보셔야 수정된 내용을 확인할 수 있습니다. 


1.홈화면 – 웹 링크 적용
  • 홈 화면을 꾸미는 첫 번째 방법!! 웹링크를 적용해서 만들어보겠습니다. 

홈화면제작1

[제작방법]
1. [홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.
2. 홈 화면 상단의 메뉴 이름을 바꿀 수 있어요.(이름을 바꾸지 않으면 앱이름으로 표시됩니다.)
3. 메뉴 설정에 있는 [웹링크] 메뉴를 선택합니다.
4. 하단 영역에 웹링크 URL을 입력해주세요.
5. 적용을 누르고
6. 저장을 누르면 완료!

 

▶ 움짤 이미지를 통해서 홈화면을 변경하는 과정을 확인해주세요!!

홈화면-웹링크

오른쪽 핸드폰 가상머신을 보시면 스윙 홈페이지가 홈화면으로 적용된 것을 확인할 수 있어요


 [[
2.홈화면 – 이미지 적용
  • 두 번째는 이미지 메뉴를 적용하여 홈화면에 이미지를 등록해보겠습니다.

홈화면제작2

[제작방법]
1. [홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.
2. 홈 화면 상단의 메뉴 이름을 바꿀 수 있어요.(이름을 바꾸지 않으면 앱이름으로 표시됩니다.)
3. 메뉴 설정에 있는 [이미지] 메뉴를 선택합니다.
4. 하단 영역에 [불러오기] 버튼을 눌러서 홈화면에 넣을 이미지를 등록합니다.
5. 적용을 누르고
6. 저장을 누르면 완료!

 

▶ 움짤 이미지를 통해서 홈화면을 변경하는 과정을 확인해주세요!!

녹화_2017_01_03_17_14_34_642

오른쪽 핸드폰 가상머신을 보시면 이미지가 홈화면으로 적용된 것을 확인할 수 있어요

*이미지이기 때문에 앱에서 이미지를 터치하면 가상머신에서 보는 것 처럼 이미지상세보기가 뜹니다.
앱에서 이 부분이 불편하시다면 이미지페이지로 따로 제작을 해서 넣으시길 권장드립니다.


 

3. 홈화면 – 게시판 적용
  • 세번째 방법은 게시판을 홈화면으로 적용시키는 방법입니다.

★홈화면에 게시판을 적용할 때는, 앱운영페이지에서 게시판을 먼저 제작을 해주셔야 합니다.

게시판 제작방법 매뉴얼 보러가기

홈화면게시판적용 수정1[제작방법]
1. [홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.
2. 홈 화면 상단의 메뉴 이름을 바꿀 수 있어요.(이름을 바꾸지 않으면 앱이름으로 표시됩니다.)
3. 메뉴 설정에 있는 [게시판] 메뉴를 선택합니다.
4. 하단 영역에 [불러오기] 버튼을 눌러서 홈 화면에 적용할 게시판을 선택해주세요.
5. 적용을 누르고
6. 저장을 누르면 완료!

 

▶ 움짤 이미지를 통해서 홈화면을 변경하는 과정을 확인해주세요!!

홈화면-게시판적용

오른쪽 핸드폰 가상머신을 보시면 게시판이 홈화면으로 적용된 것을 확인할 수 있어요


 

4. 홈화면 – 이미지페이지 적용
  • 네번째 방법은 사용자페이지-이미지페이지를 만들어서 홈화면에 적용하는 방법입니다.

★홈화면에 이미지페이지를 적용할 때는, 먼저 이미지 페이지를 제작해주셔야 합니다.

 이미지페이지 제작방법 보러가기

홈화면제작4

[제작방법]
1. [홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.
2. 홈 화면 상단의 메뉴 이름을 바꿀 수 있어요.(이름을 바꾸지 않으면 앱이름으로 표시됩니다.)
3. 메뉴 설정에 있는 [사용자페이지] 메뉴를 선택합니다.
4. 하단 영역에 [불러오기] 버튼을 눌러서[이미지 기반 페이지 추가]를 누릅니다.
5. 이미지페이지 제작도구에서 원하는 스타일의 이미지페이지를 제작해주세요.
6. 저장한 뒤 다시 새로고침을 하면 만든 이미지페이지를 확인할 수 있어요.
7. 해당 이미지페이지를 선택한 뒤 적용
8. 저장 버튼을 누르면 완료!!

 

▶ 움짤 이미지를 통해서 홈화면을 변경하는 과정을 확인해주세요!!

녹화_2017_01_03_17_19_46_437

오른쪽 핸드폰 가상머신을 보시면 이미지페이지가 홈화면으로 적용된 것을 확인할 수 있어요
저는 기존에 만들어놓은 이미지페이지를 불러오기했는데요.
이미지페이지 제작 방법은 하단의 포스팅을 참고해주시면 좋을 것 같아요.
이미지페이지는 위의 이미지를 업그레이드 한 메뉴로 이미지 특정 영역에 링크를 적용할 수도 있고, 툴팁도 적용할 수 있어요.
따라서 이미지를 잘 만들어서 영역별로 효과를 주면 배너스타일의 홈화면도 제작할 수 있으니 다양하게 활용해보세요.


 

5. 홈화면 – HTML UI페이지 적용
  • 다섯번째 방법은 사용자페이지- HTML UI페이지를 만들어서 적용하는 방법입니다.

★홈화면에 HTML UI페이지를 적용할 때는, 먼저 HTML UI 페이지를 제작해주셔야 합니다.

 HTML UI 마법사페이지 제작방법 보러가기

홈화면제작5

[제작방법]
1. [홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.
2. 홈 화면 상단의 메뉴 이름을 바꿀 수 있어요.(이름을 바꾸지 않으면 앱이름으로 표시됩니다.)
3. 메뉴 설정에 있는 [사용자페이지] 메뉴를 선택합니다.
4. 하단 영역에 [불러오기] 버튼을 눌러서[HTML페이지 추가]를 누릅니다.
5. HTML페이지 제작도구에서 웹페이지를 제작해주세요.
6. 저장한 뒤 다시 새로고침을 하면 만든 HTML페이지를 확인할 수 있어요.
7. 해당 HTML페이지를 선택한 뒤 적용
8. 저장 버튼을 누르면 완료!!

 

오른쪽 핸드폰 가상머신을 보시면 HTML페이지가 홈화면으로 적용된 것을 확인할 수 있어요
* 저는 기본 셋팅된 HTML페이지를 불러오기했어요.
HTML페이지 제작 방법은 위에 첨부해드린 포스팅을 참고해주시면 좋을 것 같아요.
( HTML페이지는 웹사이트 구현방식을 그대로 따라가고 있어서 전문가가 아니면 제작시 조금 어려울 수 있어요!!)
HTML페이지는 웹사이트가 없으신 분들에게 웹사이트와 같은 효과를 낼 수 있기 때문에 만들어놓으면 다양하게 활용할 수 있습니다.


 

6. 홈화면 -웹 템플릿 페이지 적용
  • 여섯번째 방법은 사용자페이지- 웹 템플릿 페이지를 만들어서 적용하는 방법입니다.

★홈화면에 템플릿페이지를 적용할 때는, 먼저 웹템플릿 추가 페이지에서 페이지를 저장 한 후, 불러오기 해주세요

 웹 템플릿페이지 제작방법 보러가기 

홈화면-템플릿페이지

[제작방법]
1. [홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.
2. 홈 화면 상단의 메뉴 이름을 바꿀 수 있어요.(이름을 바꾸지 않으면 앱이름으로 표시됩니다.)
3. 메뉴 설정에 있는 [사용자페이지] 메뉴를 선택합니다.
4. 하단 영역에 [불러오기] 버튼을 눌러서[웹템플릿 페이지 추가/관리]를 누릅니다.
5. 웹템플릿 페이지 제작도구에서 원하는 스타일의 템플릿페이지를 선택하여 저장해주세요.
6. 저장한 뒤 다시 새로고침을 하면 사용자페이지 리스트에 저장한 템플릿 페이지를 확인할 수 있어요.
7. 해당 템플릿 페이지를 선택한 뒤 적용
8. 저장 버튼을 누르면 완료!!


 

Was this helpful?