팝업 이용방법

팝업이란?

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

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

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

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

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

팝업 스타일

스윙투앱에서 제공하는 팝업 스타일은 총 4가지이구요.

원하는 팝업 스타일을 선택해서 제작할 수 있습니다.

팝업 1) 화면에 꽉차는 전체 이미지 한 장

팝업 2) 화면에 꽉차는 전체 이미지 3장, 슬라이딩으로 넘길 수 있음 (손가락으로 터치하여 넘김, 자동 넘김 구현X)

팝업 3) 화면 위/ 아래에 등록된는 이미지 2장, 2가지의 다른 팝업 이미지 제공

팝업 4) 총 9개의 분할 이미지 등록, 하단 이미지 선택시 상단에 이미지가 확대되어 보이는 스타일

1. 팝업관리 페이지 이동

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

2. 팝업 적용하기

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

2)팝업 활성화 체크

3)”이미지 해상도” 라고 기재된 핸드폰 이미지 영역을 마우스로 선택하면, 이미지를 등록할 수 있습니다.

*팝업 이미지 해상도를 보시고, 팝업에 사용할 이미지는 먼저 만들어주셔야 합니다. (1024px*1920px)

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

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

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

4)[링크마법사] 버튼 선택

5)링크마법사 창에서 연동할 페이지 선택 후 [반영] 버튼을 누릅니다.

해당 포스팅에서는 웹링크- 블로그 링크를 연결할게요.

웹링크 연결시에는 반드시 “새창으로 열기” or “새 앱으로 열기”를 선택해주세요.

6)[링크적용] 버튼 선택

​

7)[변경 사항 적용하기] 버튼을 누르면 완료됩니다.

*링크 마법사 이용시 연결할 링크가 없으면 ‘링크 없음’에 체크합니다

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

앱 실행화면 – 팝업 적용 화면

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

팝업에 적용시킨 이미지를 선택하면, 연동된 블로그 페이지로 이동합니다.

3. 앱 실행화면)팝업 스타일

두번째 팝업 스타일

화면에 꽉차는 전체 이미지 3장을 등록하구요.

적용방법은 위와 동일합니다.

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

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

*3개의 이미지는 자동으로 넘어가는 스타일이 아니에요. 손으로 터치하여 넘기는 슬라이드 형식으로만 제공됩니다.

세번째 팝업 스타일

2가지의 다른 팝업 이미지가 위 아래로 보여지는 팝업 스타일입니다.

이미지는 위, 아래 총 2장을 등록해야 합니다. 이미지 해상도는(1024px*960px)입니다.

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

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

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

네번째 팝업 스타일

총 9개의 분할 이미지가 등록되며, 하단 이미지 선택시 상단에 이미지가 확대되어 보이는 스타일입니다.

이미지는 9장 모두 등록해주셔야 합니다. 권장 해상도(1024px*960px)입니다.

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

​

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

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

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