앱 홈화면 제작방법

앱 홈화면 제작 방법

1. 이미지 적용

2. 게시판 적용

3. 사용자 페이지- 이미지 페이지

4. 사용자 페이지- 웹템플릿

5. 사용자 페이지 – 에디터 페이지

6. 앱소개 페이지

*홈화면에 웹링크(웹사이트)는 적용하지 않도록 해주세요. 웹사이트를 연결하신다면 일반 프로토타입이 아닌 웹뷰, 푸시로 제작해주시기 바랍니다.

홈화면 제작은 앱제작 메이커 → STEP3 페이지 → HOME 화면 설정→ HOME 버튼을 선택해서 제작할 수 있습니다.

페이지 디자인에 제공되는 다양한 기능들을 선택해서 화면을 제작할 수 있습니다.

1.홈화면-이미지 적용

홈화면 적용 첫번째 방법은 이미지를 업로드 하는 방법입니다.

1)STEP3 페이지 메뉴 선택

2)[HOME] 메뉴 선택

3) 메뉴 이름 입력:홈 상단에 보이는 이름을 입력해주세요. *이름을 바꾸지 않으면 앱 이름으로 표시됩니다.

4)메뉴설정에 있는 [기본설정, 권한 설정]은 따로 입력하지 않아도 되는 메뉴이니 다음으로 넘어가 주세요.

*홈화면에는 적용할 수 없는 기능입니다.

5)페이지 디자인에서 [이미지 업로드] 메뉴를 선택합니다.

6) 파일 첨부 창이 뜨면, 원하는 이미지 파일을 선택해주세요.

7) [적용하기] 버튼 선택

8) 화면 상단의 [저장]버튼을 누르면 완료!

2.게시판 적용

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

*안내: 게시판을 홈화면으로 적용시 글쓰기는 제공되지 않습니다.

즉, 홈화면은 게시판 목록 상세글보기만 제공이 되며, 홈화면에 적용된 게시판에서는 게시물 글쓰기를 할 수 없어요.

1)STEP3 페이지 메뉴 선택

2)[HOME] 메뉴 선택

3) 메뉴 이름 입력:홈 상단에 보이는 이름을 입력해주세요. *이름을 바꾸지 않으면 게시판명으로 표시됩니다.

4)메뉴설정에 있는 [기본설정, 권한 설정]은 따로 입력하지 않아도 되는 메뉴이니 다음으로 넘어가 주세요.

*홈화면에는 적용할 수 없는 기능입니다.

5)페이지 디자인에서 UI KIT – 게시판을 선택합니다.

6) 게시판을 선택한 뒤 [적용하기] 버튼을 선택해주세요.

*게시판화면에 마우스를 가져다대면 적용하기 버튼이 보입니다.

7) 화면 상단의 [저장]버튼을 누르면 완료!

만약 만들어놓은 게시판이 없다면, 게시판을 먼저 만든 뒤 앱에 적용해주세요.

위의 [새로 만들기] 를 선택하면 게시판 관리 화면으로 이동합니다.

3.사용자페이지 – 이미지페이지 적용

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

1)STEP3 페이지 메뉴 선택

2)[HOME] 메뉴 선택

3) 메뉴 이름은 변경 하지 않아도 됩니다. *이미지 페이지는 이미지 페이지 제작도구에서 저장한 이름으로 홈화면 상단에 표시됩니다.

4)메뉴설정에 있는 [기본설정, 권한 설정]은 따로 입력하지 않아도 되는 메뉴이니 다음으로 넘어가 주세요.

*홈화면에는 적용할 수 없는 기능입니다.

5)페이지 디자인에서 이미지맵을 선택합니다.

6) 홈화면에 적용할 이미지페이지를 선택한 뒤 [적용하기] 버튼을 선택해주세요.

*이미지페이지 화면에 마우스를 가져다대면 적용하기 버튼이 보입니다.

*만들어놓은 페이지가 없다면, [새로 만들기]버튼을 눌러서 제작해주세요.

7) 화면 상단의 [저장]버튼을 누르면 완료!

만약 만들어놓은 이미지페이지가 없다면, 이미지페이지를 먼저 만든 뒤 앱에 적용해주세요.

위의 [새로 만들기] 를 선택하면 이미지 페이지 제작도구 화면으로 이동합니다.

해당 제작도구에서 이미지페이지를 만든 뒤, 앱에서 적용할 수 있습니다.

4.사용자 페이지 – 웹템플릿 페이지 적용

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

1)STEP3 페이지 메뉴 선택

2)[HOME] 메뉴 선택

3) 메뉴 이름 입력:홈 상단에 보이는 이름을 입력해주세요. *메뉴 이름을 바꾸지 않으면 템플릿페이지 제작시 저장한 이름으로 표시됩니다.

4) 메뉴설정에 있는 [기본설정, 권한 설정]은 따로 입력하지 않아도 되는 메뉴이니 다음으로 넘어가 주세요.

*홈화면에는 적용할 수 없는 기능입니다.

5) 페이지 디자인에서 업종별 템플릿을 선택합니다.

6) 홈화면에 적용할 템플릿을 선택한 뒤 [적용하기] 버튼을 선택해주세요.

*템플릿 페이지 화면에 마우스를 가져다대면 적용하기 버튼이 보입니다.

*만들어놓은 페이지가 없다면, [새로 만들기]버튼을 눌러서 제작해주세요.

7) 화면 상단의 [저장]버튼을 누르면 완료!

만약 만들어놓은 이미지페이지가 없다면, 템플릿 페이지를 먼저 만든 뒤 앱에 적용해주세요.

위의 [새로 만들기] 를 선택하면 템플릿 페이지 제작도구 화면으로 이동합니다.

해당 제작도구에서 템플릿 페이지를 만든 뒤, 앱에서 적용할 수 있습니다.

5.사용자 페이지 – HTML에디터 페이지 적용

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

1)STEP3 페이지 메뉴 선택

2)[HOME] 메뉴 선택

3) 메뉴 이름 입력:홈 상단에 보이는 이름을 입력해주세요. *메뉴 이름을 바꾸지 않으면 에디터페이지 제작시 저장한 이름으로 표시됩니다.

4) 메뉴설정에 있는 [기본설정, 권한 설정]은 따로 입력하지 않아도 되는 메뉴이니 다음으로 넘어가 주세요.

*홈화면에는 적용할 수 없는 기능입니다.

5) 페이지 디자인에서 [HTML 에디터]를 선택합니다.

6) 홈화면에 적용할 에디터 페이지를 선택한 뒤 [적용하기] 버튼을 선택해주세요.

*에디터 페이지 화면에 마우스를 가져다대면 적용하기 버튼이 보입니다.

*만들어놓은 페이지가 없다면, [새로 만들기]버튼을 눌러서 제작해주세요.

7) 화면 상단의 [저장]버튼을 누르면 완료!

만약 만들어놓은 HTML 에디터 페이지가 없다면, 페이지를 먼저 만든 뒤 앱에 적용해주세요.

위의 [새로 만들기] 를 선택하면 HTML 에디터 페이지 제작도구 화면으로 이동합니다.

해당 제작도구에서 에디터 페이지를 만든 뒤, 앱에서 적용할 수 있습니다.

6.앱소개 페이지 적용

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

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

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

1)STEP3 페이지 메뉴 선택

2)[HOME] 메뉴 선택

3) 메뉴 이름 입력:홈 상단에 보이는 이름을 입력해주세요. *메뉴 이름을 바꾸지 않으면 앱 이름으로 자동 표시됩니다.

4) 메뉴설정에 있는 [기본설정, 권한 설정]은 따로 입력하지 않아도 되는 메뉴이니 다음으로 넘어가 주세요.

*홈화면에는 적용할 수 없는 기능입니다.

5) 페이지 디자인에서 [기본기능] – [페이지] 메뉴를 선택합니다.

6) 앱소개를 선택한 뒤 [적용하기] 버튼을 선택해주세요.

*앱소개 화면에 마우스를 가져다대면 적용하기 버튼이 보입니다.

7) 화면 상단의 [저장]버튼을 누르면 완료!

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

앱제작 페이지의 [고급설정] 메뉴에서 앱소개 페이지의 항목을 수정할 수 있습니다.

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

[수정 방법]

1)앱제작 페이지 상단의 [고급설정] 메뉴 선택

2)설정:앱서비스 정보

3)항목별 [EDIT]버튼 눌러서 수정 할 수 있습니다.

4)수정 후 상단 [저장] 버튼을 누르면 앱에 반영됩니다.

최초 앱 제작때는 [앱제작하기] 해주야 반영됩니다. 제작해놓은 앱에 다시 수정할 때는 저장시 앱에 자동반영됩니다.

​

배너 버튼들을 모두 지우고 싶을 경우 각 항목의 [초기화] 버튼을 누른 뒤[저장] 누르면 앱에서 배너가 제거됩니다.

앱소개 타이틀 문구 수정은 최초 1회 수정시 저장 후 [앱제작 요청] 버튼을 눌러서 새 버전으로 업데이트 받아주셔야 반영됩니다.

1회 수정 이후에는 저장만 하시면 그때부터는 앱에 자동 반영되요.

★사이트주소 입력은 하단의 [공유] 아이콘 버튼과, 중간에 들어가는 사이트 링크 주소와 함께 연동됩니다.

따라서 사이트주소 입력하시면 공유버튼과 사이트 주소가 함께 표시되구요.

삭제하시면 공유버튼, 사이트주소 함께 제거됩니다.

★앱소개 페이지의 대표 이미지는 앱 아이콘이미지와 연동이 되어서 보여집니다. *별도 수정 및 제거가 불가합니다.