스윙 기능 도움말

플래시 스타일 홈화면 제작

50 views 2018년 4월 9일 2018년 4월 19일 root 3

플래시화면제목

웹 템플릿페이지 응용 TIP- 플래시 홈화면 만들기

이번 매뉴얼에서는 웹템플릿 응용 TIP으로

웹템플릿 제작도구를 이용하여 플래시 스타일 홈화면을 제작하는 방법을 알려드릴게요~!

 

웹템플릿 응용 TIP

녹화_2018_04_06_17_26_07_896

템플릿 페이지를 적용하여 상단 헤더 이미지에 미리 만들어놓은 gif이미지를 적용했습니다.

위의 앱 홈화면처럼 앱을 제작하는 방법을 알려드릴게요.


 

1.웹템플릿 페이지 만들기
  • 앱제작 페이지의 페이지메뉴 단계로 이동해주세요.

웹템플릿응용1

1) 홈화면을 선택한 뒤 2)사용자 페이지 선택  3) 불러오기 선택 후 4) 사용자 페이지 창에서 [웹템플릿 기반 페이지 추가/ 관리]를 선택해주세요.


2.웸템플릿 제작도구 

1)웸템플릿 제작도구 페이지

웹템플릿응용2

하단의 +새로만들기 버튼을 선택하면, 스윙에서 제공하는 다양한 업종의 페이지 툴 종류를 확인할 수 있어요 (10개 업종 템플릿 제공)

여기서 원하는 페이지를 선택해서 [추가] 버튼을 눌러주시면 됩니다.

*저는 여기서 네일 업종의 [상세] 페이지를 선택했어요.

해당 매뉴얼과 동일한 페이지를 선택하지 않아도 되구요.

생각해놓은 앱 디자인에 맞게 원하는 페이지를 선택해서 작업해주시면 되요!

 

웹템플릿응용3

네일 – 상세 페이지가 열렸습니다.

*웹템플릿 페이지는 스윙에서 제공하는 템플릿 툴(tool)에 이미지, 텍스트를 수정하여 적용하는 제작도구에요.

화면 왼쪽의 페이지 수정영역을 확인하고, 오른쪽의 웹 수정화면에서 앱 성격에 맞게 이미지, 텍스트를 수정하여 주시면 됩니다.

 

2)이미지 첨부하기

웹템플릿응용4

자, 이미지를 첨부하기 전에 먼저 해야 할 작업이 있어요!!

위에서 보여드린 앱 홈화면처럼 작업하기 위해서는 먼저 움짤이라고 하죠. 

움직이는 gif파일을 먼저 만들어놓으셔야 합니다. 

**헤더 이미지 사이즈 보이시죠? 1080 x 718 픽셀사이즈를 확인하여 만들어주셔야 합니다. 

사이즈를 맞게 작업해놓지 않으면 gif 파일이 일반 그림 파일(png,jpg)로 들어가요.

미리 꼭 사이즈에 맞게 작업해주세요~!

 

헤더 이미지 부분을 선택하면 파일 첨부 창이 열리구요. 

여기서 [이미지 업로드] 버튼을 선택하여, 원하는 이미지 파일 선택 후 [적용]을 눌러주시면 됩니다. 

 

★주의사항

웹템플릿응용5

gif 파일은 일반 파일에서는 보이지 않아요.

따라서 파일 창 하단에 ‘모든 파일’로 설정을 변경해주셔야 gif 파일을 확인할 수 있습니다.

모든 파일로 변경 한뒤 미리 작업해놓은 gif파일을 선택해주세요.

 

3) 텍스트 수정하기

웹템플릿응용6

헤더에 gif 이미지를 첨부했다면 나머지 텍스트 부분에 해당되는 멘트(문구)를 앱에 맞게 수정해주세요.

 

녹화_2018_04_09_14_25_53_231

헤더 이미지 부분에 보이는 메인제목, 부제목 문구를 수정하는데요.

만약 저처럼 해당 내용이 필요 없다면, 위의 움짤에서 보시는 것처럼 기존 문구를 다 지워주시면 됩니다.

 

4)저장하기

웹템플릿응용7

템플릿 페이지의 다른 내용들도 모두 수정을 해주세요.

*텍스트는 옆의 [폰트] 버튼을 선택하면 글자크기, 색상 등의 옵션을 설정할 수 있어요. 

기본 셋팅된 옵션 말고 다른 옵션을 주고 싶다면 폰트 버튼을 선택해서 수정해주세요.

템플릿 내용 입력이 완료되면 상단의 [데이터 저장] 버튼을 선택해서 저장해주세요.

 

★페이지명도 수정해주셔야 하는 것!! 잊지마세요.

페이지명대로 앱에 표시됩니다. 


 

3. 제작한 웸템플릿 앱에 적용하기
  • 위에서 제작한 웹템플릿을  앱에 적용해볼게요.

웹템플릿응용8

1)홈화면 선택 후 2) 메뉴 이름 입력 3) 사용자페이지 선택 4)불러오기 선택 5) 만들어놓은 웹템플릿 선택 후 [적용] 버튼 선택

6) 적용 버튼 7)저장 버튼을 선택하면 앱 적용이 완료됩니다.

 

녹화_2018_04_06_17_24_43_688

가상머신에서 보시는 것처럼 상단 헤더이미지가 슬라이드 스타일(자동 이미지 페이지 전환)로 적용된 것을 확인할 수 있어요.


 

+보너스 

다른 스타일의 웹템플릿 페이지를 적용하시면 또 다른 슬라이드 스타일을 적용할 수 있어요!

녹화_2018_04_09_15_08_46_754

녹화_2018_04_09_15_08_25_786

헤어 업종의 메인페이지를 선택했구요.

가운데 이미지에 gif 이미지 파일을 넣어서 만들었습니다. ^^

 

이처럼 스윙 사용자 여러분들도 다양한 웹템플릿 페이지를 이용하여 슬라이드 스타일 화면을 제작해보세요 ^^


 

★ 주의사항

1) 움짤 이미지는 사용자가 직접 제작해주셔도 되고, 별도의  gif파일을 쓰셔도 됩니다.

2) 다만, 웹템플릿 페이지에 들어가는 이미지는 권장 사이즈가 기재되어 있어요.

따라서 해당 사이즈에 맞게 이미지를 만들어주셔야 합니다.

3) 파일 용량 5MB 이내로만 업로드 가능합니다.

4) 파일 업로드시 ‘모든 파일’ 열기로 설정하셔야 gif파일이 열립니다.

Was this helpful?