앱 화면·팝업·네비게이션 구성 가이드 | Appbox SDK

화면 구성•팝업•네비게이션

이미지 뷰어

이미지를 확대하거나 축소해 자세히 확인할 수 있는 전용 뷰어 기능입니다.
전체 화면으로 전환해 이미지를 더 크게 볼 수 있으며, 여러 장의 이미지는 스와이프 방식으로 자연스럽게 넘기며 탐색할 수 있습니다. 이 기능은 상품 상세 이미지, 갤러리, 이벤트 안내 등 시각 정보가 중요한 화면에 활용하기 좋습니다.

이미지 뷰어 오픈

AppboxSDK.ui.imageViewerOpen(...)

Javascript
1 // 이미지 뷰어 오픈
2 AppboxSDK.ui.imageViewerOpen(
3 {
4 selectColor: "#FFFFFF",
5 item: [
6 {
7 imageUrl: "https://www.appboxapp.com/app/orange.jpg"
8 },
9 {
10 imageUrl: "https://www.appboxapp.com/app/grape.jpg"
11 },
12 {
13 imageUrl: "https://www.appboxapp.com/app/fruits1.jpg"
14 }
15 ]
16 }, (err, data) => {
17 if (err) {
18 console.error( "이미지뷰어 실패:", "code:", err.code, "message:", err.message );
19 } else {
20 console.log( "이미지뷰어 OK:", data.result );
21 }
22 });

Request 항목 정의

Response 항목 필수여부 설명 기본값
item imageUrl 필수 노출할 이미지 URL
selectColor - 선택된 이미지 테두리 칼라값 #FFFFFF

item 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.




Response 항목 정의

Response 결과값
data.result 성공 여부 (true | false)





PDF 뷰어

웹에서 PDF 파일을 열어볼 수 있는 네이티브 뷰어 기능입니다.
대용량 PDF도 안정적으로 표시하며, 확대·축소, 스크롤 등 기본 기능을 제공해 문서를 편하게 읽을 수 있습니다. 공지사항, 이용약관, 매뉴얼, 티켓, 안내서 등 PDF 형식의 자료를 앱 내에서 바로 확인할 수 있어 활용도가 높습니다.

PDF 뷰어로 문서 보기

AppboxSDK.ui.pdfViewerOpen(...)

Javascript
1 // PDF 뷰어로 문서 불러오기
2 const url = "https://www.appboxapp.com/storage/mobpa/image/loading/AppBox_IntroductionMobile.pdf";
3 AppboxSDK.ui.pdfViewerOpen( { pdfUrl: url }, (err, data) => {
4 if (err) {
5 console.error( "PDF 뷰어로 PDF 보기 실패:", "code:", err.code, "message:", err.message );
6 } else {
7 console.log( ""PDF 보기 OK:", data.result );
8 }
9 });

Request 항목 정의

Request 항목 필수여부 설명 기본값
pdfUrl 필수 뷰어로 보여줄 PDF의 URL


Response 항목 정의

Response 결과값
data.result 성공 여부 (true | false)





모달 페이지 오픈

현재 화면 위에 새로운 모달 형태의 웹페이지를 띄울 수 있는 기능입니다.
전체 화면 이동 없이 필요한 정보나 추가 기능을 표시할 수 있어, 사용자 흐름을 유지한 채 설정, 상세 안내, 폼 입력 등 다양한 작업을 처리할 수 있습니다.

앱 내 새로운 페이지 열기

AppboxSDK.ui.modalPageOpen(...)

Javascript
1 // 모달 페이지 오픈
2 AppboxSDK.ui.modalPageOpen(
3 {
4 openURL: "https://www.google.com",
5 title: "프로모션"
6 }, (err, data) => {
7 if (err) {
8 console.error( "모달 오픈 실패:", "code:", err.code, "message:", err.message );
9 } else {
10 console.log( "모달 오픈 OK:", data.result );
11 }
12 });

Request 항목 정의

Request 항목 필수여부 설명 기본값
openURL 필수 새로운 모달 페이지로 오픈할 페이지 URL
title - 타이틀 (Android에서만 노출)


Response 항목 정의

Response 결과값
data.result 성공 여부 (true | false)





탭 메뉴

화면 하단에 탭메뉴를 두어 화면 간 이동을 쉽게 하고, 스크롤에 따라 자동으로 숨길 수도 있어요.
화면 하단에 네이티브 탭 메뉴를 생성하여 아이콘과 텍스트를 자유롭게 설정할 수 있습니다. 스크롤 동작에 따라 탭 메뉴를 동적으로 숨기거나 표시할 수 있으며, 항상 고정된 탭 메뉴로 사용자에게 안정감을 제공합니다.

탭메뉴 열기

AppboxSDK.gmenu.openTabsMenu(...)

Javascript
1 // 탭메뉴 열기
2 AppboxSDK.gmenu.openTabsMenu(
3 {
5 backColor: "#FFFFFF",
6 fontSize: 13,
7 defTextColor: "#333333",
8 selTextColor: "#000000",
9 autoHidden: false,
10 menu: [
11 {
12 text: "홈",
13 defIcon: "https://www.appboxapp.com/app/ic01.png",
14 action: "https://www.appboxapp.com/app/html/appbox.html"
15 },
16 {
17 text: "서비스",
18 defIcon: "https://www.appboxapp.com/app/ic02.png",
19 action: "https://www.appboxapp.com"
20 },
21 {
22 text: "헬스케어",
23 defIcon: "https://www.appboxapp.com/app/ic03.png",
24 action: "https://www.google.com/"
25 }
26 ],
27 }, (err, data) => {
28 if (err) {
29 console.error( "탭 메뉴 실패:", "code:", err.code, "message:", err.message );
30 } else {
31 console.log( "탭 메뉴 OK:", data.result );
32 }
33 });

탭메뉴 닫기

AppboxSDK.gmenu.closeTabsMenu()

Javascript
1 // 탭메뉴 닫기
2 AppboxSDK.gmenu.closeTabsMenu();

Request 항목 정의

Request 항목 필수여부 설명 기본값
backColor - 백그라운드 칼라 #FFFFFF
fontSize - 폰트 사이즈 11
defTextColor - 메뉴 기본 텍스트 칼라 #000000
selTextColor - 선택 되었을때 텍스트 칼라 #999999
autoHidden - 자동숨김 (true, false) : 스크롤 시 자동숨김 true
haptic - 메뉴 터치시 진동 햅틱 (true, false) true
menu text - 메뉴명
defIcon - 메뉴 기본 아이콘 URL
selIcon - 메뉴 선택 아이콘 URL
action 필수(탭메뉴 열기) 이동할 URL, 또는 호출할 javascript 함수명을 입력, 예) functionName

탭메뉴 열기 일때, menu 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다. menu 배열중 action 항목은 필수입니다.




Response 항목 정의

Response 결과값
data.result 성공 여부 (true | false)





햄버거 메뉴

햄버거 메뉴는 많은 항목을 한 화면에 펼쳐 보여주고, 프로필 사진이나 아이콘도 함께 표시할 수 있습니다.
네이티브 햄버거 메뉴를 상황에 맞게 동적으로 생성할 수 있으며, 프로필 사진과 아이콘을 포함할 수 있습니다. 메뉴 항목도 필요에 따라 완전히 커스터마이징할 수 있습니다.

햄버거 메뉴 띄우기

AppboxSDK.gmenu.openHamburgerMenu(...)

Javascript
1 // 햄버거 메뉴
2 AppboxSDK.gmenu.openHamburgerMenu(
3 {
4 direction: "right",
6 profileText: "안녕하세요",
10 menu: [
11 {
12 text: "홈",
13 defIcon: "https://www.appboxapp.com/app/ic01.png",
15 action: "https://m.naver.com/"
16 },
17 {
18 text: "설정",
19 defIcon: "https://www.appboxapp.com/app/ic19.png",
20 action: "https://m.naver.com/"
21 },
22 {
23 text: "설정",
24 defIcon: "https://www.appboxapp.com/app/ic20.png",
25 action: "https://m.naver.com/"
26 }
27 ]
28 }, (err, data) => {
29 if (err) {
30 console.error( "햄버거 메뉴 실패:", "code:", err.code, "message:", err.message );
31 } else {
32 console.log( "햄버거 메뉴 OK:", data.result );
33 }
34 });

Request 항목 정의

Request 항목 필수여부 설명 기본값
direction 필수 노출 위치 선택 (left, right) right
profileText 필수 프로파일 텍스트
profileTexColor - 프로파일 텍스트 칼라 #000000
profileIcon - 프로파일 아이콘 이미지 URL
profileFontSize - 프로파일 텍스트 사이즈 17
profileAction - 프로파일 터치시 이동 URL
backColor - 백그라운드 칼라 #FFFFFF
fontSize - 메뉴 폰트 사이즈 14
defTextColor - 메뉴 기본 텍스트 칼라 #000000
selTextColor - 선택되었을때 텍스트 칼라 #999999
haptic - 메뉴 터치시 진동 햅틱 (true, false) true
menu text 필수 메뉴명
defIcon - 메뉴 기본 아이콘 URL
selIcon - 메뉴 선택 아이콘 URL
action 필수 이동할 URL, 또는 호출할 javascript 함수명을 입력, 예) functionName

menu 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.




Response 항목 정의

Response 결과값
data.result 성공 여부 (true | false)





브라우저 메뉴

화면 하단에 브라우저 기능을 툴바 형태로 제공하는 기능입니다.
사용자는 뒤로 가기, 앞으로 가기, 새로고침 등 핵심 웹 탐색 기능을 빠르게 사용할 수 있어, 웹뷰 환경에서도 익숙하고 편리한 탐색 경험을 제공합니다.

브라우저 메뉴 오픈

AppboxSDK.gmenu.openBrowserMenu(...)

Javascript
1 // 브라우저 메뉴 오픈
2 AppboxSDK.gmenu.openBrowserMenu(
3 {
4 autoHidden: true,
5 menu: [
6 { function: "back" },
7 { function: "forward" },
8 { function: "home" },
9 { function: "refresh" },
10 { function: "share" }
11 ]
12 }, (err, data) => {
13 if (err) {
14 console.error( "브라우저 메뉴 실패:", "code:", err.code, "message:", err.message );
15 } else {
16 console.log( "브라우저 메뉴 OK:", data.result );
17 }
18 });

브라우저 메뉴 닫기

AppboxSDK.gmenu.closeBrowserMenu()

Javascript
1 // 브라우저 메뉴 닫기
2 AppboxSDK.gmenu.closeBrowserMenu();

Request 항목 정의

Request 항목 필수여부 설명 기본값
visible 필수 노출여부 (true, false) : false 이면 이후 항목은 모두 비필수 true
backColor - 백그라운드 칼라 #FFFFFF
autoHidden - 자동 숨김 (true, false) true
haptic - 메뉴 터치시 진동 햅틱 (true, false) true
menu function 필수 기능 (back:백 버튼, forward:앞 버튼, home:홈버튼, refresh:새로고침, share:공유버튼)
icon - 기본으로 노출되는 아이콘이 있으며,커스텀으로 변경하고 싶을때 아이콘 URL 입력

menu 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.




Response 항목 정의

Response 결과값
data.result 성공 여부 (true | false)





플로팅 메뉴

화면 오른쪽 아래에 항상 떠 있는 플로팅 메뉴를 추가하세요.
화면 우측 하단에 고정된 플로팅 버튼을 만들고, 메뉴를 터치하면 서브 메뉴가 확장돼요. 플로팅 메뉴 아이콘도 자유롭게 커스터마이징할 수 있습니다.

플로팅 메뉴 노출하기

AppboxSDK.gmenu.openFloatingMenu(...)

Javascript
1 // 플로팅 메뉴 오픈
2 AppboxSDK.gmenu.openFloatingMenu(
3 {
4 icon: "https://www.appboxapp.com/app/floating00.png",
5 menu: [
6 {
7 icon: "https://www.appboxapp.com/app/floating01.png",
8 action: "temp"
9 },
10 {
11 icon: "https://www.appboxapp.com/app/floating02.png",
12 action: "testFunction"
13 }
14 ],
15 }, (err, data) => {
16 if (err) {
17 console.error( "플로팅 메뉴 실패:", "code:", err.code, "message:", err.message );
18 } else {
19 console.log( "플로팅 메뉴 OK:", data.result );
20 }
21 });

플로팅 메뉴 닫기

AppboxSDK.gmenu.closeFloatingMenu()

Javascript
1 // 플로팅 메뉴 숨김
2 AppboxSDK.gmenu.closeFloatingMenu();

Request 항목 정의

Request 항목 필수여부 설명 기본값
visible 필수 노출 여부 (true, false) : false 이면 이후 항목은 모두 비필수 true
haptic - 메뉴 터치시 진동 햅틱 (true, false) true
menu icon 필수 노출할 아이콘 URL
action - 이동할 URL, 또는 호출할 javascript 함수명을 입력, 예) functionName 또는 https://example.com

menu 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.




Response 항목 정의

Response 결과값
data.result 성공 여부 (true | false)





앱 데모체험
지금 웹사이트 주소를 입력하고
데모 앱을 체험해 보세요!
앱으로 바꾸고 싶은 당신의 웹사이트 주소를 입력해 보세요. 즉각 체험할 수 있는 데모 앱을 받을 수 있습니다.

QR 코드
QR 코드를 찍고 앱으로 바뀐
웹사이트를 지금 바로 확인해 보세요!
www.naver.com
QR 코드를 촬영하면 입력하신 주소의
앱 예시 화면을 테스트할 수 있습니다.
* 스캔 후 바로 앱 다운로드 이동합니다.