스윙투앱 매뉴얼

팝업 이용방법

▶ 팝업이란? 

앱 실행시 새로운  이미지 창을 띄어서 앱 공지나 이벤트 등을 보여줄 수 있는 기능입니다.

스윙에서 팝업 서비스를 제공하고 있으며, 다양한 스타일 중에서 원하는 스타일을 선택해서 팝업을 앱에 적용할 수 있습니다.

*팝업은 푸시, 웹뷰 프로토타입에서는 이용할 수 없습니다.

 슬라이드,탑,푸터,드롭메뉴에서만 사용할 수 있는 기능입니다.

매뉴얼을 통해서 팝업을 적용하는 방법을 확인해주세요.


팝업관리 페이지 이동

앱운영 페이지 → 서비스관리 → 팝업관리 메뉴 이동

스윙에서 제공하는 팝업 스타일은 총 4가지 입니다.

사용자가 원하는 팝업을 선택해서 제작해주세요.

아래에서 각 스타일별로 팝업을 적용해볼게요.


 

1.첫 번째 팝업 스타일

팝업 첫번째 스타일은 이미지 한 장을 넣어서 팝업을 만들 수 있어요.

이미지에 링크 등을 연동하여 해당 페이지로 이동할 수 있습니다.

1)’팝업켜기’에 체크 

2) 첫번째 팝업스타일 체크 

3)핸드폰이미지를 선택해서 팝업 이미지를 등록해주세요. 

*권장 해상도를 꼭 지켜주세요. (1024*1920 px)

 

이미지가 등록되면  [링크 이미지 설정] 창이 뜹니다.

링크 이미지 설정은 팝업창 이미지를 선택시, 연동된 페이지로 이동하게 하는 기능이에요.

웹사이트, 앱 내의 페이지, 게시판, 게시물, 파일 첨부 등 어디로 연동을 할지 선택을 해주시면 됩니다.

4)‘링크마법사’ 버튼 선택  

5)연동할 페이지 선택 후 반영 

6)‘링크적용’ 버튼 선택 

7)‘변경사항저장’ 버튼을 누르면 완료됩니다.

*연결할 링크가 없으면 ‘링크없음’에 체크합니다

*이미지 변경, 이미지 삭제: 해당 팝업 이미지를 다른 이미지를 변경할 수 있고, 이미지를 삭제할 수도 있습니다.

 

[앱 실행화면 – 팝업 실행]

 

[움짤 이미지 확인하기]

앱을 실행하면 팝업 화면을 확인할 수 있어요.

팝업에 적용시킨 이미지가 큰 이미지로 보여집니다.


 

2. 두 번째 팝업 스타일

두 번째 팝업은 이미지가 총 3장이 등록됩니다. 슬라이드하여 해당 이미지를 확인할 수 있구요.

다양한 이미지 팝업을 보여줘야 할 때 활용할 수 있습니다.

적용방법은  첫번째 방법과 동일합니다.

두 번째 스타일은 이미지를 3장을 등록해야 하니, 미리 팝업에 적용할 이미지를 준비해주세요.

*각 이미지마다 링크마법사를 실행하여 연동할 페이지를 적용할 수 있습니다.

 

[앱 실행화면 – 팝업 실행]

 

[움짤 이미지 확인하기]

팝업이 적용된 앱 실행화면입니다.

팝업 이미지는 슬라이드하여 팝업 다른 이미지도 확인할 수 있어요.


 

3. 세 번째 팝업 스타일

세번째 스타일은 위, 아래에 이미지가 등록되는 스타일입니다.

두칸으로 나뉘어져서 팝업 이미지가 등록됩니다.

‘+’ 아이콘을 눌러서 이미지를 등록합니다.

이미지는 위, 아래 총 2장을 등록해야 합니다.  권장 해상도를 잘 지켜주세요.

 

[앱 실행화면 – 팝업 실행]

 

[움짤 이미지 확인하기]

팝업이 적용된 앱 실행화면입니다.

앱 실행화면처럼 위 아래에 이미지가 등록된 모습을 확인할 수 있습니다.


 

4. 네 번째 팝업 스타일

네번째 팝업 스타일은 이미지가 총 9장이 들어가는 스타일로 하단 이미지를 선택하면해당 이미지가 크게 보이는 스타일입니다.

다량의 이미지를 많이 추가해야 할 때 활용할 수 있는 팝업 스타일입니다.

‘+’ 아이콘을 눌러서 이미지를 등록합니다.

이미지는 9장 모두 등록해주셔야 합니다. 권장 해상도를 지켜주세요.

 

[앱 실행화면 – 팝업 실행]

 

[움짤 이미지 확인하기]

팝업이 적용된 앱 실행화면입니다.

9장의 이미지가 보이구요.

하나의 이미지를 선택하면 상단 – 메인헤더 부분에 해당 이미지로 보여지구요.

해당 이미지 선택시 연동해놓은 페이지로 이동합니다. 


 

– 팝업을 중단하고 싶을 때는  팝업 관리 페이지 상단의 ‘팝업켜기’에 체크를 풀고 하단의 [변경사항 저장] 버튼을 선택해주시면 됩니다.

-팝업 이미지 수정 및 링크 수정도 가능합니다.