안녕하세요, 공대 하누니 입니다.
오늘은 저번 글에서 설명한 앱인벤터를
설치해보려고 해요!!!
그 전에 앱인벤터에 대해 복습해볼까요?
☞앱인벤터란? ☞접기
A-2) 앱인벤터가 뭐예요?
앱인벤터(App Inventor)는 앱 을 직접 제작할 수 있는 프로그램 매사추세츠 공과대학교(MIT)에서 제작되었고 구글이 제공하는 오픈 소스를 사용하고 있어요. 위의 말이 어려울 수 있는데요. 미국의 MIT에서 만든 프로그램이고 영어를 사용하면서 누구나 쉽게 만들수 있다는 말... 이지만 한국어 외에 다양한 언어로도 사용이 가능하답니다.^^
앱인벤터는 구글과 크롬환경에 최적화되어 있어요.
때문에 앱인벤터를 사용하기 위한 준비물은
준비물 : 구글 계정, 크롬 설치, 안드로이드 스마트폰 이예요.
초등학교 때 썻던 알림장이 생각나네요..ㅎㅎ
또한, 앱인벤터는 앱의 디자인을 담당하 는 디자이너 화면 (위 사진이 앱인벤터의 기본화면이자 디자이너 화면이에요! ) ,
앱의 동작을 지정하기 위한 블록 코딩이 가능한 블록 화면
디자이너 화면에서는 어떤 모양의 앱을 만들지 그림을 그리고
블록화면에서는 그림에 동작을 넣어주는 기능을 합니다 !
여기서 블록 코딩은 블록 맞추기 놀이를 하듯이 명령어를 하나하나 맞춰 전체 어플의 동작을 구성하는 것을 말해요.
블록 하나로는 무언가를 만들기 어렵지만 블록이 여러개가 조립되면 집과 자동차 같은 커다란 물체도 만들 수 있겠죠?
앱을 완성한 후, 확인하는 방법에는
에뮬레이터, USB, AI Companion(어플) 이렇게 3가지가 있어요.
에뮬레이터는 자신의 컴퓨터에 가상의 스마트폰을 띄워 컴퓨터 화면에서 결과를 확인하는 방법이고,
USB와 AI Companion(어플)은 자신의 안드로이드 스마트폰을 이용해 확인하는 방법이예요.
이 세가지 방법은 설치에 나오는 부분이니 그냥 세가지가 있구나~정도만 아시면 될 것 같아요ㅎ
각각 다른 환경에서 사용할 수 있는 방법이니 자신에게 맞는 방법으로 골라서 사용하면 됩니다.ㅎㅎ
☞접기
자, 그럼 앱인벤터를 설치해볼까요?
앱인벤터는 구글과 크롬환경에서 사용할 수 있기 때문에
구글계정과 크롬설치가 필요하답니다!
☞크롬설치 및 구글 계정 만들기 ☞접기
먼저 크롬을 설치해볼까요?
크롬은 우리가 평소에 사용했던 인터넷 익스플로러와 같은 웹 브라우저로
이런 모양으로 생겼어요.
http://www.google.co.kr/chrome 에 접속 후,
바로 보이는 chrome 다운로드는 클릭하면 쉽게 다운받을 수 있어요~
구글 계정 만들기도 금방 할 수 있어요.
http://www.google.co.kr 에 접속 후,
회원가입만 해주시면 끝입니다!
☞접기
구글 계정과 크롬설치를 완료하셨다면,
크롬으로 앱인벤터 페이지인 http://ai2.appinventor.mit.edu 에 접속해볼까요?
이 때, 자신의 구글 계정이 연결되어 있지 않다면
로그인 페이지가 뜰거예요.
이런 화면이 뜰텐데요.
당황하지 말고~ 자신의 구글 계정을 입력해주면 됩니다.
그럼 아래와 같이 저희가 앞으로 앱인벤터를 만들게 될 화면을 볼 수 있어요!
앱을 만들기 전에,
완성된 앱을 확인할 수 있는 에뮬레이터를 설치 해야겠죠?
저번 글에서 에뮬레이터에는 3가지 종류가 있다고 말했었는데요.
오늘 그 3가지를 모두 보여드릴거예요!
이 3가지 중 자신 에게 가장 적합한 환경의 에뮬레이터 를 설치하여 사용하면 됩니다.
먼저, 에뮬레이터를 설치하기 위해
http://appinventor.mit.edu/ 에 접속해 주세요.
들어가시면 다음과 같은 화면이 보일텐데요.
가운데 동영상은 조금 다를 수 있어요.
아래로 내려보면
사진과 같이 Get Started라고 적혀있는 초록 깃발을 발견할 수 있어요.
여기서 start 버튼을 클릭해 줍니다.
그럼 영어로 뭐라뭐라 나올텐데요.
프로그램 결과를 테스트하기 위한 방법을 설정하는 창입니다.
저희는 핸드폰이나 컴퓨터를 통해 결과를 확인하는 경우 이기 때문에
1. Setup Instructions 를 클릭합니다.
이제 제가 전에 말했던 에뮬레이터의 3가지 종류가 나오는데요.
옵션 번호
Optino One
Option Two
Option Three
환경
컴퓨터, 안드로이드 스마트폰
와이파이(Wi-Fi)
QR코드
스마트폰 어플 (AI Companion)
컴퓨터
aiStarter
(와이파이나 스마트폰을 사용하지 않는 경우)
컴퓨터, 안드로이드 스마트폰
USB 케이블
aiStarter
(와이파이 없이 스마트폰만 사용하는 경우)
단점
결과를 확인하고 싶을 때마다 QR코드를 발급받고 앱을 설치하는 과정을 반복.
앱을 스마트폰으로 확인하기 위해서는 스마트폰과 앱 설치 과정 필요.
USB 케이블, USB 드라이버 설치 필요.
장점
앱을 자신의 스마트폰으로 실행시킴으로써 결과를 직접 확인 가능.
앱을 만들거나 수정을 하고 난 후, 컴퓨터 화면을 통해 빠르게 결과를 확인 가능.
USB 케이블만 있으면 Option One의QR코드 발급과 같은 과정 생략 가능.
위의 표는 제가 생각하는 환경, 단점과 장점이므로 사용자마다 차이가 있을 수 있습니다.
이 3가지 방법 중 자신에게 해당되는 또는 자신이 사용하기 편한 방법으로 1가지 이상 설치 하시면 됩니다!
(저는 Option One과 Option Two를 병합하여 사용하고 있습니다.)
☞Option One 설치방법 ☞접기
Option One은 와이파이와 스마트폰이 있는 경우 사용할 수 있는 방법으로,
컴퓨터에서 발급받은 QR코드를 스마트폰의 어플인 AI Companion로 인식하여 자신의 앱을 다운받는 형식입니다.
설치가 가장 빠르시만 수정에 용이하지 못하다는 단점이 있습니다.
먼저, Option One의 Instructions를 클릭합니다.
클릭 후, 화면의 QR코드를 스마트폰으로 인식하거나
스토어에 AI Companion을 입력하여 어플을 다운받습니다.
설치가 완료되면 다음과 같은 어플이 생성됩니다.
설치는 완료되었습니다.
앱을 실행하는 방법은,
크롬의 앱인벤터 페이지로 돌아와 메뉴에서 Connect의 AI Companion
또는 Build의 QR코드 발급을 클릭합니다.
잠시 기다리면 화면에 다음과 같이 QR코드 창이 나타납니다.
스마트폰에 설치한 AI Companion 어플을 실행하여
scan QR code를 클릭한 후, 발급받은 QR코드를 인식시킵니다.
(또는 위 코드와 함께 발급된 'Your code is:~'의 코드를 텍스트창에 입력한 후,
connect with code를 선택하여도 됩니다.)
☞접기
☞Option Two 설치방법 ☞접기
Option Two는 스마트폰을 사용하지 않는 경우,
컴퓨터 화면에 가상의 스마트폰 화면을 띄워 결과를 확인할 수 있습니다.
Option One과 같이 스마트폰으로 직접 결과를 확인할 순 없지만
수정 후, 컴퓨터 화면을 통해 결과 확인을 빠르게 할 수 있습니다.
먼저, Option Two의 Instructions를 클릭합니다.
그 후, 자신의 소프트웨어 환경에 맞춰 Instructions for ~ 를 클릭합니다.
다음 창에서 Download the Installer를 클릭한 후,
MIT_App_Inventor_Tools_2.3.0_win_setup.exe를 실행시켜 설치합니다.
(자신의 소프트웨어 환경에 따라 exe 파일명이 다를 수 있습니다.)
설치를 완료하면 다음과 같은 아이콘이 생성됩니다. 클릭하여 설치합니다.
설치가 완료되면 다음과 같은 아이콘이 생성됩니다.
위의 아이콘을 실행시켰을 때, 다음과 같은 창이 나타난다면
설치가 정상적으로 완료된 것입니다.
앱을 실행하는 방법은,
크롬의 앱인벤터 페이지에서 Connect의 Emulator를 클릭합니다.
클릭 후, 잠시 기다리면
다음과 같은 가상의 스마트폰 화면으로 앱의 결과를 확인할 수 있습니다.
☞접기
☞Option Three 설치방법 ☞접기
Option Three는 스마트폰은 있지만 와이파이 환경이 없는 경우,
USB 케이블을 이용하여 앱의 결과를 확인할 수 있는 방법입니다.
먼저, Option Three의 Instructions를 클릭합니다.
그 후, 자신의 소프트웨어 환경에 맞춰 Instructions for ~ 를 클릭합니다.
다음 창에서 Download the Installer를 클릭한 후,
MIT_App_Inventor_Tools_2.3.0_win_setup.exe를 실행시켜 설치합니다.
(자신의 소프트웨어 환경에 따라 exe 파일명이 다를 수 있습니다.)
설치를 완료하면 다음과 같은 아이콘이 생성됩니다. 클릭하여 설치합니다.
설치가 완료되면 다음과 같은 아이콘이 생성됩니다 .
위의 아이콘을 실행시켰을 때, 다음과 같은 창이 나타난다면
설치가 정상적으로 완료된 것입니다.
앱인벤터와 스마트폰의 USB연결을 설정하기 위해
스마트폰의 기본 어플인 설정에 들어갑니다.
설정의 디바이스 정보를 누릅니다.
디바이스 정보의 빌드번호를 연속으로 3회 터치하면 '개발 설정 완료 4단계 전입니다.' 라는 알림이,
7~8회 터치 시 '개발자 모드를 실행하였습니다.' 라는 알림이 뜹니다.
(이전에 개발자 모드를 했었던 분들이나 처음하시는 분들도 개발 설정 완료 4단계 전입니다가
안뜰 수 있어요. 7~8회 터치후 '개발자 모드를 실행하였습니다.' 라는 알림만 떠도
괜찮습니다! 저는 그렇더라구요..ㅎㅎ)
(빌드번호가 바로 보이지 않을 경우, 설정의 소프트웨어 정보를 누르면 빌드번호를 찾을 수 있습니다.)
설정으로 돌아가면 개발자 옵션이 나타난 것을 발견할 수 있습니다.
개발자 옵션을 누릅니다.
개발자 옵션에서 USB 디버깅을 누릅니다.
USB 디버깅을 누른 후, 다음과 같은 화면이 나타나면
확인 버튼을 눌러 디버깅을 허용해 줍니다.
aiStarter를 실행시킨 후, USB 케이블을 이용해 PC와 스마트폰을 연결하면
다음과 같은 안내문이 나타납니다.
확인을 누릅니다.
앱을 실행하는 방법은,
USB케이블로 PC와 스마트폰을 연결한 후,
크롬의 앱인벤터 화면에서 Connect의 USB를 클릭합니다 .
다음과 같은 안내문이 나타나면서 PC와 USB의 연결을 확인한 후,
연결된 스마트폰으로 결과를 확인할 수 있습니다.
☞접기
다음 글에서는 앱인벤터의 구성과 간단한 앱 만들기로 만나요!^^
※ 오타와 기타 수정 및 부족한 부분을 댓글로 달아주시면 큰 도움 이 됩니다!
다 읽으셨나요?? 공감도 한번 꾸욱 눌러주시면 감사합니당 ^^ ☞
