스윙투앱 매뉴얼

앱 홈화면 제작방법

앱 홈화면을 제작하는 방법

앱제작 페이지- 페이지 메뉴에서 가장 먼저 [홈화면]을 제작하게 되는데요.

홈화면은 앱을 실행하면 가장 먼저 나타나는 앱 메인 화면이기 때문에 앱 디자인, 스타일에 맞게 메뉴를 적용해주셔야 합니다.

스윙투앱에서는 홈화면을 구성할 수 있는 다양한 메뉴들을 제공하고 있는데요.

처음 스윙투앱을 접하신 분들이라면, 어떤 메뉴들을 이용해야 하는지 어려움이 있을 것이라 생각되어서!!

오늘 포스팅을 통해서 홈화면에 적용할 수 있는 다양한 메뉴들을 알려드리겠습니다.

▶홈화면에 적용하는 메뉴

1.웹링크 적용
2. 이미지 적용
3. 게시판 적용
4. 사용자 페이지- 이미지 페이지
5. 사용자 페이지- 웹템플릿
6. 사용자 페이지 – 에디터 페이지
7. 앱소개 페이지

▶ 홈화면에 제작방법 영상으로 확인하기

 


 

홈화면 제작은 스윙 앱제작 페이지 → 페이지 메뉴 →  메인&메뉴관리 →  홈화면에서 적용할 수 있습니다.

 

1. 웹링크 적용

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

[제작방법]

1. [홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.

2. 홈 화면 상단의 메뉴 이름을 바꿀 수 있어요.(이름을 바꾸지 않으면 앱이름으로 표시됩니다.)

3. 메뉴 설정에 있는 [웹링크] 메뉴를 선택합니다.

4. 하단 영역에 웹링크 URL을 입력해주세요.

5. 적용을 누르고

6. 저장을 누르면 완료!

 

▶ 움짤로 보시면 이해가 더 쉬울거에요^^

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


 

2.  이미지 적용

  • 두 번째 방법은 이미지 메뉴를 적용하여 홈화면에 이미지를 등록할 수 있습니다.

[제작방법]

1) [홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.

2) 홈 화면 상단의 메뉴 이름을 바꿀 수 있어요.(이름을 바꾸지 않으면 앱이름으로 표시됩니다.)

3) 메뉴 설정에 있는 [이미지] 메뉴를 선택합니다.

4) 하단 영역에 [불러오기] 버튼을 눌러주세요.

5) 이미지 첨부 창이 뜨면, 원하는 이미지 파일 등록 후 [적용] 버튼을 눌러주세요.

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

7) 저장을 누르면 완료!

움짤로 보시면 이해가 더 쉬울거에요^^

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

*이미지이기 때문에 앱에서 이미지를 터치하면 가상머신에서 보는 것 처럼 이미지상세보기가 뜹니다.

앱에서 이 부분이 불편하시다면 이미지페이지로 따로 제작을 해서 넣으시길 권장드립니다.


 

3. 게시판 적용

  • 세번째 방법은 게시판을 홈화면으로 적용시키는 방법이에요!

[제작방법]

1) [홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.

2) 홈 화면 상단의 메뉴 이름을 바꿀 수 있어요.(이름을 바꾸지 않으면 앱이름으로 표시됩니다.)

3) 메뉴 설정에 있는 [게시판] 메뉴를 선택합니다.

4) 하단 영역에 [불러오기] 버튼을 눌러주세요.

5) 게시판 목록 창이 뜨면, 홈 화면에 적용할 게시판을 선택한 뒤 [적용]버튼을 눌러주세요. 

*게시판은 미리 앱운영페이지→ 서비스관리→ 게시판관리 메뉴에서 필요한 게시판들을 모두 만들어주셔야 합니다.

6) [적용] 버튼을 누르고

7) [저장]을 누르면 완료!

 

▶ 움짤로 보시면 이해가 더 쉬울거에요^^

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


 

4.  이미지페이지 적용

  • 네번째 방법은 이미지페이지를 만들어서 홈화면에 적용하는 방법이에요.

[제작방법]

1) [홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.

2) 메뉴 설정에 있는 [사용자페이지] 메뉴를 선택합니다.

3) 하단 영역에 [불러오기] 버튼을 눌러주세요.

4) 사용자 페이지 창이 뜨면, 홈화면에 적용할[이미지 페이지]를 누르고 [적용]버튼을 눌러주세요.

*이때 이미지 페이지는 미리 만들어주셔야 합니다. 

만들어놓은 페이지가 없다면, [이미지 기반 페이지 추가] 를 눌러서 새로 만들어주세요. 

5)[적용] 버튼을 누르고

6) 저장 버튼을 누르면 완료!!

*이미지페이지는 페이지 제작도구에서 입력한 ‘페이지 이름’이 홈화면 이름으로 적용됩니다. 

★ 이미지 기반 페이지 제작방법은 아래 포스팅을 참고해주세요!

 

▶ 움짤로 보시면 이해가 더 쉬울거에요^^

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


 

5.  웹템플릿 페이지 적용

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

[제작방법]

1) [홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.

2) 홈 화면 상단의 메뉴 이름을 바꿀 수 있어요.(이름을 바꾸지 않으면 앱이름으로 표시됩니다.)

3) 메뉴 설정에 있는 [사용자페이지] 메뉴를 선택합니다.

4) 하단 영역에 [불러오기] 버튼을 눌러주세요.

5) 사용자 페이지 창이 뜨면, 홈화면에 적용할 [웹템플릿 페이지]를 선택하고 [적용]버튼을 눌러주세요.

*이때 웹 템플릿 페이지는 미리 만들어주셔야 합니다.

만들어놓은 페이지가 없다면, [웹 템플릿 기반 페이지 추가/관리] 를 눌러서 새로 만들어주세요.

6) [적용] 버튼을 누르고

7) 저장 버튼을 누르면 완료!!

★ 웹템플릿 페이지 제작방법은 아래 포스팅을 참고해주세요!

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

 

▶ 홈화면에 웹템플릿페이지 적용하는 방법 움짤로 보기.gif

.
6.  에디터 페이지 적용
  • 여섯번째 방법은 사용자페이지- 에디터 페이지를 만들어서 적용하는 방법입니다.

[제작방법]

1) [홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.

2) 홈 화면 상단의 메뉴 이름을 바꿀 수 있어요.(이름을 바꾸지 않으면 앱이름으로 표시됩니다.)

3) 메뉴 설정에 있는 [사용자페이지] 메뉴를 선택합니다.

4) 하단 영역에 [불러오기] 버튼을 눌러주세요.

5) 사용자 페이지 창이 뜨면, 홈화면에 적용할 [에디터 페이지]를 선택하고 [적용]버튼을 눌러주세요.

*이때 에디터 페이지는 미리 만들어주셔야 합니다. 

만들어놓은 페이지가 없다면, [HTML에디터 페이지 추가/관리] 를 눌러서 새로 만들어주세요. 

6) [적용] 버튼을 누르고

7) 저장 버튼을 누르면 완료!!

★ 에디터 페이지 제작방법은 아래 포스팅을 참고해주세요!

[에디터 페이지 제작방법 보러가기]

 

▶ 홈화면에 에디터페이지 적용하는 방법 움짤로 보기.gif


.
.
7.  앱소개 페이지 적용
  • 여섯번째 방법은 사용자페이지- 에디터 페이지를 만들어서 적용하는 방법입니다.

앱 소개 페이지는 처음 스윙투앱에서 앱을 제작할 때 홈화면으로 기본 셋팅이 되는 홈화면이에요.

따라서 사용자분들은 해당 앱소개페이지를 그대로 쓰셔도 되고, 위의 방법대로 다양한 스타일로 홈화면을 변경할 수 있습니다~!

만약에 다른 스타일로 홈화면을 사용하다가, 다시 앱소개페이지로 홈화면을 적용하실 경우 아래 방법으로 적용해주세요. 

[제작방법]

1) [홈 화면]을 마우스로 살짝 클릭하시면 오른편에 메뉴설정 페이지가 뜹니다.

2) 메뉴 설정에 있는 [스윙 페이지] 메뉴를 선택합니다.

3) 하단 영역에 [불러오기] 버튼을 눌러주세요.

4) 스윙 페이지 창이 뜨면, 홈화면에 적용할 [앱 소개]를 선택하고 [적용]버튼을 눌러주세요.

5) [적용] 버튼을 누르고

6) 저장 버튼을 누르면 완료!!

*앱소개 페이지를 홈화면으로 적용시, 홈 이름은 ‘앱 이름’으로 표시됩니다.

▶ 홈화면에 앱소개 페이지 적용하는 방법 움짤로 보기.gif


 

▶앱소개 페이지에 기재되는 설명이나 주소, 이메일주소, 전화번호, 웹사이트 주소 등은 고급설정에서 수정해서 사용할 수 있습니다.

앱제작 페이지의 [고급설정] 단계

설정 – 앱 서비스 정보를 선택하시면 홈화면에 보이는 전화, 이메일, 주소, 앱 설명, 웹사이트 주소 등을 수정할 수 있습니다.

▶움짤로 적용 방법 살펴보기

이상으로 홈화면을 제작하는 방법에 대해서 알려드렸어요.

홈화면을 구성하는 다양한 메뉴들이 많이 있으니, 다양한 스타일로 홈화면을 꾸며보세요~!

기본 셋팅된 앱소개 메뉴를 외에 다른 메뉴들로 수정해서 쓰시는 것을 권장드립니다.

*푸시, 웹뷰 스타일로 만드신 사용자는 앱에 해당 웹사이트 링크를 적용하여서 만드는 것이니 별도로 홈화면을 제작하지 않아도 됩니다. ^^