스윙 기능 도움말

이미지페이지 활용. 배너스타일 만들기

405 views 2016년 7월 13일 2018년 1월 16일 root 2

배너제목

이미지페이지 활용편

이미지페이지 에디터를 이용해서 배너 스타일(버튼 형태로 해당 버튼을 눌렀을 때 링크 이동)의 앱 홈화면을 만들어보겠습니다.

* 버튼 형태로 각각의 메뉴마다 링크를 적용해놓고, 해당 버튼을 눌렀을 때 미리 적용된 링크로 페이지가 이동하는 시스템이에요.

앱제작에서 많이 활용하고 있는 기능이구요. 스윙에서도 이미지페이지 기능을 통해서 배너 스타일을 작업할 수 있습니다.


▶ 이미지페이지-배너스타일로 제작하는 방법은 영상을 보시면 훨씬 쉽게 따라하실 수 있어요!!


 

STEP.1 이미지페이지 제작도구 실행
  • 먼저 이미지페이지 제작도구를 실행합니다.

배너1

상단의 [새로만들기] 버튼을 선택해서 제작하고자 하는 이미지를 새로 추가해주세요.

 

[배너 제작 방법]

배너2

위의 이미지를 보시면 각각 메뉴들이 있습니다. 이 메뉴들에 영역을 지정한 뒤 링크를 설정합니다.

따라서 메뉴를 선택하면 해당 링크로 페이지가 이동하게끔 합니다.

활용 TIP: 웹사이트 링크, [링크마법사]- 게시판, 스윙 기능, 전화번호, 이메일 링크


 

STEP.2 이미지페이지 링크 작업하기

1. 스윙앱제작 서비스 소개 – 기능 링크 적용 하기

  • 가장 먼저 ‘스윙 앱제작 서비스 소개’ 메뉴에 링크를 적용하겠습니다.

배너3

사각형 모양 툴을 선택해서 해당 메뉴 만큼 영역을 드래그하여 설정해줍니다.

영역 설정 후 [링크액션] 으로 이동하여

1) 마우스오버: 아무것도 안함

2) 클릭 수행동작: 링크 이동

3) 링크 마법사 버튼을 선택합니다.

 

배너4

링크 마법사 창에서

1) 스윙 기능을 선택 한 후

2) ‘앱소개’를 선택한 뒤 ‘반영’을 누르고 돌아옵니다.

** 이제 같은 방법으로 영역을 설정한 후 [링크액션]에서 연동하고자 하는 링크를 선택해서 적용하면 됩니다.

 

2. 스윙 앱제작 방법 – 게시판 링크 적용하기

  • 앱제작방법은 게시판으로 링크로 적용해볼게요.

배너5

동일하게 해당 메뉴에 영역을 지정한 뒤  [링크액션] 으로 이동하여

1) 마우스오버: 아무것도 안함

2) 클릭 수행동작: 링크 이동

3) 링크 마법사 버튼을 선택합니다.

 

배너6

링크마법사 창에서

1) 게시판을 선택 한 후

2) ‘스윙앱제작 방법’ 게시판을 선택한 뒤 ‘반영’을 누르고 돌아옵니다.

밑의 사각형 안의 메뉴 역시 동일하게 링크를 적용해보겠습니다.

 

3. 홈페이지 – 웹사이트 링크 적용하기

배너7

사각형 메뉴 틀에 맞게 영역을 설정한 후 [링크 액션]으로 이동합니다.

1) 마우스오버: 아무것도 안함

2) 클릭 수행동작: 링크 이동

3) Link: 홈페이지 URL 링크를 입력해주세요.

(새 창으로 이동하기는 필요할 경우 선택해주세요. )

 

4. 블로그- 웹사이트 링크 적용하기

  • 블로그 역시 홈페이지와 같은 방법으로 URL링크를 입력합니다.

배너8

사각형 메뉴 틀에 맞게 영역을 설정한 후 [링크 액션]으로 이동합니다.

1) 마우스오버: 아무것도 안함

2) 클릭 수행동작: 링크 이동

3) Link: 블로그 URL 링크를 입력해주세요.

 

5. 고객센터 – 전화번호 링크 적용하기

배너9

사각형 메뉴 틀에 맞게 영역을 설정한 후 [링크 액션]으로 이동합니다.

1) 마우스오버: 아무것도 안함

2) 클릭 수행동작: 링크 이동

3) 링크마법사를 선택한 후 웹링크 – 전화번호 걸기 – 수신자 전화번호를 입력한 후 반영버튼을 눌러주세요.

 

6. 이메일 -이메일 링크 적용하기

배너10

사각형 메뉴 틀에 맞게 영역을 설정한 후 [링크 액션]으로 이동합니다.

1) 마우스오버: 아무것도 안함

2) 클릭 수행동작: 링크 이동

3) 링크마법사를 선택한 후 웹링크 – 이메일 발송 – 수신자 이메일주소를 입력한 후 반영버튼을 눌러주세요.

** 모든 메뉴 링크 적용이 다 끝났다면 [저장] 버튼을 눌러주세요 ~!!**

 

7. 이미지페이지 제작 TIP

배너11

1) 페이지 이름은 미리 이름을 지정해주세요 (여러 이미지페이지를 만들 경우 헷갈릴 수 있습니다.)

2) 반응형 페이지 여부 3) 툴팁 제한의 체크란을 유지해주세요.

4) 영역 투명도는 ‘0’으로 해주세요.

메뉴를 선택했을 때 메뉴 위에 지정해 놓은 영역 색상을 정하는 것인데 투명하게 만들어야 훨씬 깔끔해요.


 

STEP.3 제작한 이미지페이지 앱에 적용하기
  • 방금 만든 이미지페이지를 앱 ‘홈화면’ 으로 적용하겠습니다.

1. 이미지페이지 적용하기

배너12

앱제작마법사 – 3단계 페이지 메뉴로 이동합니다.

1) 홈화면 선택 2)사용자페이지 메뉴 선택 후 3) 불러오기 버튼을 선택합니다. 4) 만들어놓은 이미지페이지를 선택 후 적용 버튼 선택

5)메뉴로 돌아와서 다시 적용버튼을 누

른 뒤, 상단의 저장 버튼을 누르면 완료!

 

2. 반영된 홈화면 이미지

배너13

이미지페이지가 반영된 앱 홈화면입니다.

 

[링크마법사 실행화면]

녹화_2016_07_13_11_02_23_446


 

이미지페이지 활용방법을 통해서 여러분들도 배너 스타일의 홈화면을 만들어보세요.

이제 여러분들도 앱제작 전문가가 될 수 있습니다. ^^

Was this helpful?