주관
대한상공회의소 부산인력개발원
교육과정
디지털 선도기업 아카데미 양성훈련 - [인텔] AI융합 DX마스터 클래스
진행 장소
대한상공회의소 부산인력개발원(부산광역시 동구 중앙대로 176 예광기업빌딩)
교육 대상
국민내일배움카드 보유자 또는 발급 가능자(K-Digital Training 수강신청이 가능한 자)
대한민국 국적 청년 구직자
교육 과정 설명
IoT 기반 공정설비모니터링 프로그래밍과 AI, 파이썬을 활용한 로봇 프로그래밍을 위해 라즈베리파이, 아두이노로 센서 프로그래밍하는 방법과 Node-RED를 활용한 센서 프로그래밍 방법, ESP32를 마이크로 파이썬으로 제어하여 로봇 프로그래밍에 대해 학습하고 최종 프로젝트를 진행
담당 교수
경성대학교 LINC3.0 인공지능 융합전공 손정호 교수님
직위
보조 강사
참여기간
2024.08.19 ~ 2024.08.28
참여시간
49시간
보조 강사 발표
주제 : Android Studio의 WebView를 이용해 Android용 Node-RED Dashboard를 위한 Web App 제작하기
발표자료
발표대본
안녕하세요, 경성대학교 소프트웨어학과에 재학 중인 보조 강사 김다빈입니다.
이번 시간에는 저와 함께 앱의 종류, 웹뷰, 그리고 웹 앱을 만드는 방법에 대해 한 번 알아보겠습니다.
저번 주에는 노드레드를 설치해서 이렇게 노드레드의 대시보드에 웹으로 접속하는 방법까지 배워봤습니다. 그런데 나중에 실제 실무에서도 매번 이렇게 웹페이지로 일일이 주소를 쳐서 접속할까요?
아니죠. 조금 더 간단하게 사용할 겁니다. 바로 앱을 이용해서 말이에요.
이렇게 앱으로 서비스를 구현하면 디바이스의 하드웨어, 소프트웨어에 직접 접근할 수 있어 웹보다 더 빠르고 원활한 서비스를 제공할 수 있고, 디바이스의 카메라, GPS, 마이크 등 디바이스의 다양한 기능에 직접 접근 및 활용이 가능하기 때문에 웹에서보다 더 많은 서비스를 제공할 수 있습니다.
우리는 이제 서비스를 제공받는 소비자 입장이 아니라 생산자의 입장에 있기 때문에 관점을 바꿔서 생각할 필요가 있습니다.
자, 그러면 앱에 대해 자세히 한번 알아보겠습니다.
앱은 크게 3가지 종류로 구분할 수 있습니다.
네이티브 앱, 웹 앱, 하이브리드 앱 세 가지가 있는데요, 우선 네이티브 앱부터 알아보겠습니다.
네이티브 앱은 게임, 카메라 어플, 지도 어플 등 기능 구현 위주의 서비스에 많이 사용됩니다. 카카오톡, 인스타그램, 네이버 앱을 예시로 들 수 있겠습니다.
기기에 최적화된 기능 구현이 가능하고, 인터넷 연결이 끊어져도 서비스를 사용할 수 있지만, Android, iOS 에 맞는 앱 버전을 각각 만들어야하고, 앱 내에서 수정사항이 생기면 수정 후 앱스토어의 심사를 거쳐 재배포해야해서 조금 까다롭습니다.
또한 그리고 앱 안에 서비스에 필요한 내용들을 거의 다 포함하도록 하기 때문에 상대적으로 앱의 용량이 좀 큰 편입니다.
두번째로 웹 앱입니다. 웹 앱은 브라우저를 통해 서비스에 접근하게 하지만, UI/UX를 네이티브 앱처럼 보이게 만들어서 네이티브와 유사한 동작과 화면 전환 효과를 보여주는 방식으로 동작합니다. 대표적인 예로는 구글 독스, 지메일이 있습니다.
모든 OS, 브라우저에서 접근이 가능하고, 별도의 설치나 앱 스토어 승인과정을 거치지 않아도 서비스를 이용할 수 있습니다. 그래서 서비스 유지보수하기가 편리합니다.
하지만 네이티브 앱과 다르게 앱 내에서 웹 브라우저에 접속하게끔 동작하기 때문에 네트워크가 연결되지 않으면 서비스를 이용할 수 없고, 페이지 로딩 속도가 상대적으로 느리다는 단점이 있습니다.
마지막으로 하이브리드 앱입니다. 하이브리드 앱은 앞에서 본 네이티브 앱과 웹 앱의 특징을 모두 갖는 앱이라고 보시면 됩니다. 주로 실시간으로 신규 콘텐츠와 정보를 노출해야하는 서비스에서 사용되는 방식이고, 대표적으로 페이스북, 구글, 에어비앤비가 있습니다.
웹 영역에 수정이 있을 경우 별다른 재배포 없이 바로 반영이 가능하고, 안드로이드와 iOS 모두 동일한 웹 페이지를 사용할 수 있어서 개발 비용 및 시간이 네이티브에 비해 적게 소요됩니다.
하지만 네이티브 앱보다는 동적인 요소의 구현이나 디자인 부분이 좀 미미한 구석이 있고 네트워크 환경과 웹사이트의 용량에 따라 실행 속도가 달라진다는 특징이 있습니다.
이걸 이렇게 벤다이어그램으로 만들면 이렇게 그릴 수 있습니다. 네이티브 앱과 웹 앱, 그리고 그 둘의 특징을 공통적으로 갖는 것이 하이브리드 앱.
여기까지 앱에 대한 특징을 알아보았습니다. 혹시 여기까지 질문 있으실까요?
없다면 우선 넘어가겠습니다.
이제 오늘 같이 알아볼 안드로이드 앱에 대해 알아보겠습니다.
일반적으로 우리가 아는 모바일용 OS에는 안드로이드, iOS가 있습니다.
여기서 안드로이드 앱은 Android OS에서 사용가능한 앱을 말합니다.
흔히 우리가 구글 플레이 스토어에서 보던 어플들이 다 안드로이드용 앱이라고 보시면 됩니다.
안드로이드 앱은 주로 Android Studio를 이용해 Java 혹은 Kotlin 언어로 개발해서 개발한 빌드 파일을 플레이 스토어에 업로드하는 식으로 배포가 가능합니다.ㅠ빌드 파일이란 개발 완료 후 만들어진 소스 파일이라고 이해해주시면 됩니다.
스토어에 파일을 업로드하면 배포가 가능한 파일인지 여러 기준에 따라 심사해서 적절하다 판단되면 정식으로 구글 플레이 스토어에 등록됩니다.
참고로 iOS의 앱스토어에서도 이렇게 배포 시 심사를 거쳐 스토어에 정식 등록을 해주는데, iOS는 안드로이드보다 조금 더 까다롭습니다.
iOS 앱은 Apple의 공식 개발 IDE인 Xcode에서 Objective-C, Swift 언어로 개발한 앱을 말합니다. iOS용 앱이므로 개발 후 애플의 앱 스토어에 등록해 배포하면 되는데, 방금 말씀드렸듯이 상대적으로 배포 기준이 까다롭기도 하고, 개발하는 데도 시간이 좀 더 소요되어서 보통 안드로이드용 앱을 먼저 개발합니다.
구글 플레이 스토어에는 있는 앱이 앱스토어는 간혹 없는 경우가 아마 이 때문일지도 모르겠습니다.
이제 오늘 하이라이트인 웹앱을 만들기 위해, 오늘 사용해 볼 WebView 기술에 대해 알아보겠습니다.
웹 뷰는 프레임워크에 내장된 웹 브라우저 컴포넌트로 뷰(View)의 형태로 앱에 임베딩하는 기술이라고 정의할 수 있는데요, 쉽게 말해 앱에서 웹 브라우저를 이용해 화면을 보여주는 기술입니다.
다들 오른쪽에 있는 화면이 뭔가 익숙하시죠? 카카오톡에서 검색어 입력 기능을 이용하면 나오는 화면입니다.
참고로 이 부분은 앱 내의 기능이 아니라, 사용자가 입력한 검색어를 디바이스의 웹 브라우저에서 처리하도록 시켜서 받아온 결과를 보기좋게 화면에 나타낸 것입니다.
그러니까 이 부분은 웹의 기능을 이용한 거라는 거죠. 그래서 사실 카카오톡이 처음 시작이 네이티브 앱이었기에 앞에서 네이티브라고 설명하긴 했지만 서비스가 발전하면서 이렇게 웹을 이용한 기능도 포함하게 되었기에 이제는 엄밀히 따지자면 하이브리드 앱으로 분류하는 것이 맞습니다.
웹뷰를 이용하면 웹 앱 혹은 하이브리드 앱을 만들 수 있습니다.
웹과 앱을 한번에 개발할 수 있기 때문에 개발 속도가 빠르고 사용자에게 같은 UI/UX를 접속 디바이스에 맞춰 반응형으로 동작하게끔 하기 때문에 사용자가 이용하기에 편리하다는 장점이 있습니다.
여기서 반응형이라는 건 (애플뮤직 페이지 열기)
웹에 접속한 디바이스의 종류에 따라 페이지를 그 디바이스의 화면에 맞게 조정해서 보여주는 서비스를 말합니다. (개발자 도구 열어서 반응형 보여주기)
하지만 이렇게 웹 뷰로 앱을 만들면 페이지를 이동하거나 새로고침했을 때 화면이 깜빡이는 현상이 생겨서 사용 감도가 떨어지고, 네이티브 앱처럼 디바이스의 카메라, 마이크 등의 기능을 충분히 이용할 수 없습니다.
웹뷰는 안드로이드 스튜디오 말고도 리액트 네이티브, 코르도바, 일렉트론에서도 사용가능한데, 오늘은 가장 기본적인 안드로이드 스튜디오로 작업하는 방법을 알려드리겠습니다.
우선 제 노트북으로 작업하는 것을 보여드릴텐데 혹시 안드로이드 스튜디오가 설치되어있으시다면 같이 실습 따라와주시면 감사하겠습니다.
안드로이드 스튜디오 공식 사이트에 가서 설치 프로그램부터 다운을 받고 프로그램을 설치해줍니다. 세팅은 다 되어있다고 가정하고 이 부분은 우선 넘기겠습니다.
설치가 다 되면 새 프로젝트를 만들어주기 위해 Empty Views Activity를 선택하고 이름, 사용할 언어를 설정해서 새 프로젝트를 만들어줍니다.
안드로이드 스튜디오에서는 에뮬레이터라고 하는 걸 이용해서 실제 앱 서비스 화면을 미리 확인할 수 있는데, 이 에뮬레이터도 한 번 추가해보겠습니다.
에뮬레이터는 배포 전에 앱을 테스트할 때 앱 서비스 화면, 동작을 미리 확인할 수 있게 하는 가상화된 휴대폰이라고 생각하시면 됩니다.
Device Manager에서 Create Virtual Device를 선택하고 원하는 디바이스를 선택하고 추가로 필요한 프로그램을 설치해줍니다. 필요한 설정값을 모두 작성하고 나서 설정 내용을 확인하고 Finish를 누르면 이렇게 에뮬레이터가 생성됩니다.
그래서 이렇게 기본 세팅이 완료된 안드로이드 스튜디오를 보시면 좌측에는 이렇게 전체 프로젝트 구조를 트리로 확인할 수 있고, 가운데에는 파일 내 소스 코드, 오른쪽에는 에뮬레이터가 띄워진 걸 보실 수 있습니다. 버전에 따라 조금씩 위치가 달라질 수도 있지만 최신 버전은 대부분 비슷한 구조일 거예요.
이제 여기서 파일을 세 개 수정해줘야 합니다. 저는 일단 로컬에서 돌아가고 있는 노드레드 서버에 접근하도록 작성했는데, 라즈베리파이에서 돌아가고 있는 노드레드에 접근하도록 할 때도 똑같이 url만 잘 작성해주시면 됩니다.
(activity_main.xml, MainActivity.java, AndroidManifest.xml을 순서대로 수정)
그러고 여기 메뉴를 눌러서 Build - Make Project를 클릭해주면 프로젝트가 빌드됩니다. 방금 제가 수정한 내용들이 모두 실행되어서 실제 프로젝트 동작에 적용되었다는 의미입니다.
빌드가 완료되면 우측의 app - Run App 아니면 초록색 시작 버튼을 눌러 만들어진 앱을 테스트해봅니다.
(오류 발생 시)
오류 수정하는데 시간이 좀 많이 걸렸어서 우선 결과 화면은 슬라이드로 대체하겠습니다.
정상적으로 실행되면 이렇게 에뮬레이터가 제 노트북에서 돌아가고 있는 노드레드 서버의 대시보드에 접속하게 됩니다.
여기까지 해서 대시보드를 웹 앱으로 구현하는 방법에 대해 알아보았습니다.
이건 제가 발표 준비하면서 참고한 자료들인데,나중에 공부하실 때 한번씩 보시면 많이 도움이 될 것 같습니다.
이상으로 발표 마무리하겠습니다. 감사합니다.
실습 사진
