NEW 앱인벤터2 강좌21. 컴포넌트 탐구 – 웹뷰어(Webviewer)

이 글은 읽는데 약 6분이 걸립니다.

전체 강좌 목록:
http://semicolon1.kr/appinventor.html

이번에 알아볼 컴포넌트는 웹사이트를 표시할 수 있는 웹뷰어입니다.


0. 개요

웹뷰어는 웹사이트에 접속하고 그것을 사람이 볼 수 있게 해주는 컴포넌트입니다.
웹브라우저 앱의 가장 기본 틀이라고 할 수 있겠습니다.

주의할 점은 웹뷰어는 말그대로 웹페이지를 보여주고 가장 기본적인 기능만 수행합니다.
뒤로가기로 이전페이지로 이동 등의 기능은 블록을 이용하여 직접 구현해주어야 합니다.
이게 구현이 안되어있는 상태에서 뒤로가기를 누르면 앱이 종료됩니다.

1. 형태

디자이너에 가져다 놓으면 기본적으로 저렇게 가로세로를 꽉 채우는 형태로 배치되고,
화면 중앙 상단에는 지구모양의 아이콘이 고정적으로 떠있습니다.

1. 속성

웹뷰어(WebViewer) 속성

속성명

설명

링크 따라가기 여부(FollowLinks)

페이지 이동을 허용할지 지정합니다.

기본값은 참이며, 만약 거짓이면 앞으로 가기/뒤로 가기를 포함한 URL이동이 안됩니다.

높이(height)

웹뷰어의 높이를 px단위로 지정합니다.

너비(width)

웹뷰어의 너비를 px단위로 지정합니다.

홈 URL(HomeUrl)

웹뷰어가 기본으로 표시할 URL을 입력합니다.

앱 시작시 블록에의한 다른 로드가 없으면 이 속성의 URL이 로드되며, 이것마저 비어있으면 그냥 하얀 화면만 나옵니다.

SSL 오류 무시(IgnoreSslErrors)

SSL오류를 무시할지 지정합니다.

SSL인증서가 있는 페이지를 방문할 때 인증서가 없어 발생하는 오류를 무시합니다.

권한 확인 프롬프트(PromptforPermission)

웹사이트에서 사용자의 위치에 접근할 수 있도록 권한을 요청할 때, 그 요청을 사용자에게 알림창으로 보여줄지 여부를 지정합니다.

이를 거짓으로 하면 위치 정보를 사용하는 사이트(지도 등)에서는 사용자의 현위치를 가져올 수 없습니다.

위치 정보 사용(UsesLocation)

웹뷰어가 자바스크립트를 사용하여 GeoLocation API를 사용하여 사용자의 위치를 가져올 수 있게 할지 지정합니다.

보이기 여부(Visible)

웹뷰어의 보이기 여부를 지정합니다.

2. 블록

웹뷰어(WebViewer) 이벤트 블록

블록

설명

ㄴurl [텍스트]

페이지 로드를 요청받은 후 실제로 페이지가 로드되기 전 실행됩니다.

매개변수 url은 로드할 페이지의 url입니다.

ㄴerrorCode [숫자]

ㄴ설명 [텍스트]

ㄴfailingUrl [텍스트]

웹뷰어 작동 중 오류가 발생한 경우 실행됩니다.

매개변수 errorCode는 에러코드입니다.

매개변수 설명은 오류의 이유나 내용입니다.

매개변수 failingUrl은 오류가 발생한 url입니다.

ㄴurl [텍스트]

페이지가 로드된 후 실행됩니다.

매개변수 url은 로드된 페이지의 url입니다.

ㄴ값 [텍스트]

웹뷰 스트링이 변경될 때 실행됩니다.

웹뷰 스트링에 대해서는 아래에서 설명합니다.

웹뷰어(WebViewer) 함수 블록

블록

설명

현재 페이지에서 뒤로 갈 수 있는 페이지가 있는지 여부를 참 또는 거짓으로 가져옵니다.

현재 페이지에서 앞으로 갈 수 있는 페이지가 있는지 여부를 참 또는 거짓으로 가져옵니다.

RAM과 저장공간에 저장된 웹뷰어의 캐시를 모두 지웁니다.

웹뷰어가 저장하고 있는 쿠키를 지웁니다.

사용자로 부터 받은 위치 접근 권한을 제거합니다.

현재 페이지의 이전 페이지로 이동합니다.

이전 페이지가 없으면 아무일도 일어나지 않습니다.

현재 페이지의 다음 페이지로 이동합니다.

다음 페이지가 없으면 아무일도 일어나지 않습니다.

홈 URL속성에 지정된 URL로 이동합니다.

홈 URL 값이 변경되도 자동으로 실행됩니다.

ㄴurl [텍스트]

해당 url로 이동합니다.

현재 페이지를 새로고침(리로드)합니다.

ㄴjs [텍스트]

입력받은 자바스크립트 코드를 현재 페이지에서 실행합니다.

페이지 로드를 중지합니다.

웹뷰어(WebViewer) 속성 지정 블록

블록

입력형식

설명

논리

링크 따라가기 여부를 지정합니다.

숫자

웹뷰어의 높이를 px로 지정합니다.

숫자

웹뷰어의 높이를 현재 스크린의 높이에 대한 비율(%)로 지정합니다.

텍스트

홈 URL을 지정합니다.

이 값을 변경하면 해당 페이지가 로드됩니다.

논리

SSL 오류를 무시할지 지정합니다.

논리

위치 권한 요청 알림창을 보일지 지정합니다.

논리

웹뷰어의 보이기 여부를 지정합니다.

텍스트

웹뷰 스트링을 지정합니다.

숫자

웹뷰어의 너비를 px로 지정합니다.

숫자

웹뷰어의 너비를 현재 스크린의 너비에 대한 비율(%)로 지정합니다.

웹뷰어(WebViewer) 속성 블록

블록

반환형식

텍스트

텍스트

논리

숫자

텍스트

논리

논리

논리

텍스트

숫자

컴포넌트

3. 웹뷰 스트링이란?

내용이 길어져 분리했습니다.
다음 글을 참고해주세요:
https://m.blog.naver.com/edisondl/222076153809



4. 자바스크립트 실행이란?

웹뷰 내에서 해당 페이지에 대해 자바스크립트 코드를 실행할 수 있습니다.
크게 쓸때는 없어보이지만 있어도 나쁘지는 않죠..

사실 웹뷰어에서 자바스크립트를 실행하는 방법은 2가지가 있습니다.

하나는 RunJavaScript 블록을 이용, 다른 하나는 URL이동 블록에다가 실행할 코드 앞에 javascript: 를 붙여서 쓰는 방식입니다.
둘다 똑같이 작동하지만 쓸 일이 있다면 RunJavaScript 블록을 쓰는게 더 안정적이겠죠?

5. 권한 확인 프롬프트와 위치에 대해 자세히 알아보기

네이버 지도처럼 주로 지도 사이트 혹은 기타 사용자의 현위치 정보가 필요한 사이트들이 있습니다.
그러나 웹사이트는 그저 서버에서 받아온 파일을 보여줄 뿐 웹브라우저와 사용자의 동의 없이는 사용자의 위치를 알 수 있는 방법이 없습니다.
그나만 가능한게 접속 IP로 대략적인 위치 추정이지만 이마저도 정확하지 않습니다.

그래서 이런 웹사이트는 자바스크립트의 GeoLocation API와 웹브라우저를 통해 사용자의 위치를 가져올 수 있으며, 이는 민감한 정보이기에 반드시 사용자의 동의가 필요합니다.
권한 확인 프롬프트는 이러한 동의를 받는데 쓰이는 알림창입니다.

당장 웹뷰어 하나 만들어서 네이버 지도 사이트(https://m.map.naver.com/)에 접속해서 현위치 버튼을 눌러봅시다.

웹뷰 속성 중 위치 정보 사용이 해제된 상태라서 사용자의 현위치를 가져오지 못합니다.

그럼 이제 권한 확인 프롬프트속성과 위치 정보 사용속성을 모두 활성화 후 다시 시도해봅시다.

이렇게 위치 사용 동의 여부를 묻는 창이 뜹니다.
영어에다 메시지를 못 바꾸는게 흠이긴 합니다.
동의는 Allow, 거절은 Refuse 입니다.

또한 휴대폰의 위치가 꺼져있으면 권한을 줘도 따로 알려주지 않고 그냥 못찾는다고만 뜨니, 이를 해결하려면 센서 컴포넌트 중 위치 센서컴포넌트를 이용해 현재 기기의 위치 설정 켜짐 상태를 체크 후, 꺼져있으면 먼저 켜라고 알림창을 띄워주면 됩니다.




이렇게 웹뷰어에 대해 알아보았습니다.

댓글

제목과 URL을 복사했습니다