스윙 기능 도움말

홈화면에 움짤이미지 넣기

54 views 2018년 4월 6일 2018년 4월 6일 root 2

움잘 화면만들기메인

앱제작 꿀팁- 앱 홈화면에 움짤 화면 넣기

홈화면 제작시 움짤이미지라고 하죠.

gif 파일을 넣어서 움직이는 화면을 만드는 방법을 알려드릴게요.

녹화_2018_04_05_21_11_24_44

홈화면에 움짤.gif 를 넣으면 위의 이미지 처럼 앱이 제작이 됩니다.  ^^


 

1. 홈화면에 움짤이미지 넣기

앱제작 페이지의 페이지메뉴 단계로 이동해주세요. 

움잘 화면1

1) 홈화면을 선택한 뒤 2)메뉴 이름 입력 3) 이미지 메뉴 선택 후 4) 불러오기 버튼을 누르면 이미지 첨부 창이 뜹니다.

창에 보이는 화살표 모양을 선택하시면 파일이 열립니다.

 

★이미지 첨부 전!! 중요 안내 사항을 알려드릴게요.

움잘 화면2

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

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

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

 

움잘 화면3

5) 이미지를 첨부한 뒤 [적용] 누르고, 6) 다시 [적용] 버튼 선택한 다음 7) 상단 [저장] 버튼 누르면 완료됩니다.

 

완성 !! 움짤이미지를 적용한 홈화면입니다.

녹화_2018_04_06_14_32_49_213


 

그런데 여기서!

궁금한게 하나 있으실 거에요.

**프로토타입- 푸터 스타일로 만들었는데 어떻게 툴바(색상이 들어간 영역)없이 이미지 위에메뉴이름만 보이나요?

방법은 바로! 디자인테마- 앱 메인 디자인 스타일에서 ‘투명’으로 스타일을 적용했기 때문입니다.

 

2. 앱 메인 디자인 스타일: 투명으로 적용하기
  • 위에 첨부한 이미지처럼 앱 홈화면에 툴바 영역을 모두 없애고 싶을 경우 앱 메인디자인 스타일 기능을 이용하시면 되요.
  • 앱 메인 디자인 스타일은 앱제작 페이지-  디자인테마 단계에서 확인할 수 있습니다. 

 

1) 기본으로 셋팅

앱 메인 디자인 스타일을 적용하지 않고, 그냥 기본 셋팅된 내용으로 이미지를 넣어볼게요.

움잘 화면4

그럼 원래 스윙에서 셋팅한 디자인대로, 프로토타입: 푸터 스타일이 그대로 적용이 되요.

위의 이미지처럼 핸드폰 화면 상단, 하단에 툴바 영역이 생성되요.

디자인테마에서 설정한 색상도 그대로 보여지구요.

아무래도 고급지게 만든 홈화면에 어울리지 않는 색으로 bar영역이 생기면 예뻐보이지는 않죠? ㅜㅜ

 

2) 앱 메인 디자인 스타일: 투명으로 선택

움잘 화면5

앱 메인 디자인 스타일을 ‘투명’으로 선택하고 ‘저장’ 버튼을 눌러주세요.

그럼 위의 이미지처럼 툴바 영역이 모두 빠지고 화면 전체가 메인페이지로 구성이 됩니다.

홈화면에 적용된 이미지가 더 강조되고 훨씬 더 깔끔하게 보이게 할 수 있어요~!!

메뉴(텍스트) 색상은 다른 색으로 변경가능하니 이미지 위에 텍스트가 잘 보이게끔 글자 색상은 디자인테마 – 컬러에서 수정해주세요.


 

3. 이미지페이지에 움짤이미지 넣기

이미지페이지로도 움짤이미지를 넣을 수 있습니다. 

움잘 화면7

1)홈 화면 선택 후 2)메뉴 이름 입력 3) 사용자페이지 선택 4)불러오기 선택 *이미지 페이지는 이미지페이지제작도구에서 미리 페이지를 만들어주세요 

5) 만들어놓은 이미지페이지 선택 후 [적용] 버튼 선택 6) [적용] 선택 7) [저장] 선택하면 완료됩니다.

 

움잘 화면6

이미지로 넣어도 되지만, 이미지페이지로도 움짤 이미지를 첨부하여 제작할 수 있어요.

이미지 페이지 제작도구의 장점은 웹페이지 처럼 만들 수 있으며, 이미지 위에 배너를 적용하여 링크 연동을 시킬 수 있다는 점이죠!

따라서 해당 기능을 이용하시려면 사용자 페이지- 이미지페이지를 선택해서 움짤이미지를 적용해주세요. 

마찬가지로 이미지 파일을 열 때는 ‘모든 파일’ 로 설정한 뒤 gif파일을 첨부해주시면 됩니다.


 

+보너스

위의 이미지외에도 gif로 제작한 다른 이미지 역시 앱 홈화면에 적용할 수 있어요

녹화_2018_04_05_21_39_51_991

 

녹화_2018_04_05_21_42_28_605


 

★ 주의사항

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

2) 홈 화면에 꽉 차게 이미지가 보이게 위해서는 사이즈는 가로 1024px로 제작하시고, 세로는 가로의 2배가 넘지 않게 1680~1980px로 제작해주시면 됩니다.

프로토타입을 어떤 것을 적용했는지에 따라서 사이즈가 리사이징 되기 때문에, 가상머신에 적용된 이미지를 확인하여 사이즈는 조금씩 조율해주세요

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

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

 

Was this helpful?