라이브테스팅 앱인벤터 2 의라이브테스팅 이문서는 http://appinventor.mit.edu/explore/ai2/setup.html 에있는영어문서를한글로번역한것이다. 1. 개요앱인벤터개발사이트 (http://ai2.appinventor.mit.edu) 에접속하여앱개발을시작하기까지걸리는시간은 1~2분에불과하다. 웹브라우저를통해디자이너와블록에디터를사용하여클라우드방식으로앱프로그래밍을한다. 앱을만드는도중에앱이제대로작동하는지그때그때확인해보는일을 라이브테스팅 이라부르는데, 다음절차에따라손쉽게라이브테스팅기능을사용할수있다. 세가지방식의라이브테스팅첫째, 안드로이드폰을가지고있고와이파이연결이가능한상황에서는컴퓨터에특정소프트웨어를설치할필요가없다. 단지안드로이드폰에 <MIT AI2 Companion> 앱만설치하면된다. [ 그림 1-1] 에해당하는데, 가급적이방식을사용할것을권장한다. 둘째, 안드로이드폰이없는상황에서는컴퓨터에프로그램하나를설치해야한다. 설치하고나면컴퓨 터화면에안드로이드폰모양의에뮬레이터가나타난다. [ 그림 1-2] 에해당한다. 학교에서앱인벤터 를배울때안드로이드폰이없는학생은이에뮬레이터를사용하면된다. 셋째, 안드로이드폰은있는데와이파이를사용할수없는상황에서는컴퓨터에특정프로그램을설치해야한다. 설치를마치면폰을 USB에연결하여라이브테스트를실행할수있다. 방화벽때문에와이파이연결이원활하지않은경우에도이방식을사용한다. 이방식은사용법이복잡한편인데, 특히윈도우즈운영체제에서더욱그렇다. 따라서앞의두가지방식을모두사용할수없는불가피한상황에서만사용한다. 컴퓨터에서앱을제작한다. 폰에서실시간으로라이브테스팅을한다. [ 그림 1-1] 안드로이드폰이있고와이파이연결이가능할때 - 1 -
컴퓨터에서앱을제작한다. 컴퓨터에서에뮬레이터로라이브테스팅을한다. [ 그림 1-2] 안드로이드폰이없을때 USB 케이블로연결 컴퓨터에서앱을제작한다. 폰에서실시간으로라이브테스팅을한다. [ 그림 1-3] 안드로이드폰은있는데와이파이를사용할수없을때 시스템요구사항 웹브라우저로익스플로러는사용할수없고, 크롬이나파이어폭스를사용해야한다. 구체적인시스템 사양은다음과같다. [ 컴퓨터와운영체제 ] 매킨토시 ( 인텔프로세서장착 ): 맥 OS X 10.5 이상윈도우즈 : 윈도우즈 XP, Vista, 7 GNU/ 리눅스 : Ubuntu 8 이상, Debian 5 이상 [ 브라우저 ] 모질라파이어폭스 3.6 이상 (NoScript 확장자를사용하는경우 extension을 off로설정 ) 애플사파리 5.0 이상구글크롬 4.0 이상 마이크로소프트의익스플로러는지원안됨. [ 안드로이드폰또는태블릿 ] 안드로이드운영체제 2.3(Gingerbread) 이상 - 2 -
2. 안드로이드폰이나태블릿을와이파이로연결하는방식 컴퓨터에는소프트웨어를설치할필요가없고, 안드로이드폰에 <MIT AI2 Companion> 이라는앱을 설치한다. 설치한후앱인벤터화면에서 [Connect] [AI Companion] 순서로메뉴를선택하고, 폰에서는 <MIT AI2 Companion> 앱을실행하여서로연결한다. 구체적인연결방법은다음과같다. 1 단계 : 폰에 <MIT AI2 Companion> 앱설치 안드로이드폰에서 QR 코드스캐너를실행시키고, [ 그림 2] 의왼쪽에있는코드를스캔하면플레 이스토어에서 <MIT AI2 Companion> 앱을다운로드받을수있다. 플레이스토어에서 MIT AI2 Companion 으로검색하여앱을설치해도된다. 플레이스토어를이용할수없는상황이라면, [ 그림 2] 의오른쪽에있는코드를스캔하여 <MIT AI2 Companion> 앱을바로다운로드한다. 주의 [ 그림 2] 의오른쪽코드를쓸경우플레이스토어가아닌다른사이트에서다운로드받는셈이다. 이럴경우폰의설정에들어가 알수없는곳 메뉴를체크하여다른사이트에서다운로드받는것을허용해야한다. 플레이스토어용 ( 자동업데이트가지원되므로이방법을권장한다.) APK 파일 ( 수동으로업데이트해야한다.) [ 그림 2] <MIT AI2 Companion> 앱을다운로드받을때쓰는 QR 코드 <MIT AI2 Companion> 앱을다운로드받은후에는정해진절차에따라폰에앱을설치한다. 이앱 은한번만설치해두면계속사용할수있다. 2단계 : 컴퓨터와폰을같은와이파이네트워크에연결 1단계를성공적으로마쳤다면만들고있는앱의실행화면을폰에나타낼준비가끝난셈이다. 이때반드시앱인벤터를실행하고있는컴퓨터와안드로이드폰이 같은와이파이 에연결되어있어야한다. 안드로이드폰의와이파이를켜고, 컴퓨터가연결되어있는와이파이에접속한다. 이에대한자세한내용은다음사이트 (http://appinventor.mit.edu/explore/support/explain-wifi-connection. html) 의 < 안드로이드폰은어떻게와이파이에연결되는가?(How does my android device connect over wifi?)> 문서를참조한다. 3단계 : 프로젝트를폰과연결만들고있는프로젝트에서 [ 그림 3] 처럼 [Connect] [AI Companion] 메뉴를선택한다. 3
[ 그림 3] 프로젝트를폰에연결하는화면 그러면 [ 그림 4] 의왼쪽그림과같이 QR 코드창이컴퓨터화면에나타난다. 안드로이드폰에서 <MIT AI2 Companion> 앱을실행시키면 [ 그림 4] 의오른쪽그림과같은화면이나타나는데, 이때 scan QR code 라는버튼을클릭하고, 컴퓨터화면에있는 QR 코드를스캔한다. [ 그림 4] QR 코드를스캔하여프로젝트와폰을연결 만들고있는앱의실행화면이폰에나타나면라이브테스팅이성공적으로연결된것이다. 이제앱인벤 터에서프로그램을수정하면즉시폰에반영된다. 주의 폰에 QR 코드를스캔하는앱이설치되어있지않거나 QR 코드를스캔하는데어려움이있다면, [ 그림 4] 의왼쪽그림에있는문자열코드를폰의텍스트창에직접입력해도된다. 이코드는 Your code is 라는문장밑에여섯자로나타난다. 이코드를입력한다음 connect with code 라고표기된주황색버튼을누른다. 여섯자다음에 Enter 키를입력하면안된다. 문제해결 만들고있는앱의실행화면이폰에나타나지않는다면, 다음이유때문일가능성이높다. 4
폰에설치된 <MIT AI2 Companion> 앱이너무오래전버전이다. 최신버전을새로설치한다. 폰이와이파이에연결되지않았다. <MIT AI2 Companion> 앱의화면밑에 IP 주소가있는지확인한다. 연결되었다면 IP 주소가있어야한다. 컴퓨터와안드로이드폰이같은와이파이에연결되지않았다. 컴퓨터와폰을같은와이파이에연결한다. 소속기관의네트워크프로토콜이와이파이연결을막고있다. 폰대신에뮬레이터를사용하거나폰을 USB 케이블로연결하는방식을사용한다. 3. 안드로이드폰이없을때에뮬레이터사용하는방식안드로이드폰이나태블릿이없어도앱인벤터로앱을제작할수있고, 라이브테스팅기능도사용할수있다. 앱인벤터는컴퓨터화면에서동작하는가상의안드로이드폰, 즉에뮬레이터를제공한다. 에뮬레이터를사용하여만든앱도다른방식으로만든앱과똑같이동작하고, 플레이스토어를비롯한여러방법으로배포할수있다. 따라서학교현장에서는학생들에게에뮬레이터를쓰게하고, 완성된앱을최종테스트할때사용할안드로이드폰몇대만준비하면된다. 에뮬레이터를사용하려면컴퓨터에 앱인벤터셋업 이라는소프트웨어를설치해야한다. 사용하는운 영체제에따라설치하는절차가약간다르므로, 자신의운영체제에맞게 1 단계의설명을잘따라하기 바란다. 1 단계 : 앱인벤터셋업소프트웨어설치하기 윈도우즈, 맥 OS X, GNU/ 리눅스중자신의운영체제에맞는절차를따라설치한다. [ 윈도우즈 ] 다음순서에따라앱인벤터셋업소프트웨어를설치한다. 1 다음사이트 (http://appinv.us/aisetup_windows) 에접속하여소프트웨어를다운로드받는다. 2 다운로드한 MIT_Appinventor_Tools_2.3.0( 약 80MB) 파일이어느폴더에있는지찾는다. 브라우저의환경에따라파일이저장되는폴더가다르다. 3 파일을연다. 4 설치프로그램이지시하는절차를그대로따라한다. 이때설치할폴더이름은변경하지않아야한다. 폴더위치는윈도우즈버전에따라다르게지정되며, 나중을위해이설치폴더를메모해둔다. 5 [ 그림 5] 와같이 알수없는프로그램이컴퓨터를변경할수있게할것인지 물어보는창이뜨면, Yes를클릭한다. 5
[ 그림 5] 설치도중나타나는화면 (Yes 클릭 ) 주의 1 대부분의경우앱인벤터는다운로드한소프트웨어를자동으로찾아준다. 하지만가끔위치를묻는창이나타나는데, "C:\Program Files\Appinventor\commands-for-Appinventor" 라고입력하면된다. 만일사용중인컴퓨터가 64 비트라면, 경로에있는 Program Files 대신 Program Files (x86) 이라고입력한다. 주의 2 설치에실패했다면관리자권한이있는계정인지확인한다. 아직까지는관리자권한외에서설치하는것이허용되지않는다. 주의 3 이전버전이설치되어있는경우라면, 새로설치하기전에반드시언인스톨 (uninstall) 기능을사용하여이전버전을지워야한다. 이에대한보다구체적인내용은다음사이트 (http://appinventor.mit.edu/explore/ ai2/update-setup-software.html) 의 < 앱인벤터셋업소프트웨어갱신 (How to Update the App Inventor Setup Software)> 이라는문서를참조한다. 최신버전을사용하고있는지확인하려면다음사이트 (http:// appinventor.mit.edu/test/) 를클릭한다. [ 맥 OS X ] 다음순서에따라앱인벤터셋업소프트웨어를맥 OS X 설치한다. 1 다음사이트 (http://appinv.us/aisetup_mac) 에접속하여소프트웨어를다운로드받는다. 2 파일을더블클릭하여설치프로그램을실행한다. 파일이름은 AppInventor_Setup_v_X.X.dmg 이다. 여기서 X.X는버전이름이다. 3 설치프로그램이지시하는대로따라한다. 이때설치할폴더이름은변경하지않아야한다. 4 성공적으로설치되면 [ 그림 6] 과같은화면이나타난다. [ 그림 6] 성공적인설치를알리는창 6
[ GNU/ 리눅스 ] 이운영체제에서는 sudo 권한이있어야설치가가능하다. 주의 설치할소프트웨어는 32 비트용이다. 64 비트컴퓨터를사용하고있다면, 32 비트소프트웨어실행을가능하게해주는라이브러리를설치해야한다. "sudo apt-get install lib32z1" 이라는명령어를실행하는방법이있는데, 이방법은모든 GNU/ 리눅스배포판에적용되지는않으므로, 이때는자신의시스템에맞는방법을찾아내야한다. 이전에설치한적이있다면, 새로설치하기전에다음명령어를사용하여이전버전을지워야한다. sudo rm -rf /usr/google/appinventor sudo rm rf ~/.appinventor Debian 패키지를설치할수있는시스템에서는다음절차를따른다. 주의 이전에설치한적이있다면, 새소프트웨어와충돌이일어날가능성이있으므로새로설치하기전에지워야한다. 이때는 "sudo apt-get remove appinventor-setup" 이라는명령어를실행하면된다. 1 다음사이트 (http://commondatastorage.googleapis.com/appinventordownloads/ appinventor2-setup_1.1_all.deb) 에접속하여소프트웨어를다운로드받는다. 파일명은 appinventor2-setup_1.1_all.deb이다. 파일이있는폴더는브라우저환경에따라달라지는데, 보통은 Downloads라는폴더아래에있다. 2 파일클릭방식을쓰는시스템이라면, 클릭하여설치를시작한다. 3 클릭방식이아닌시스템이라면, 파일이있는폴더로이동한다음아래명령어를실행한다. sudo dpkg --install appinventor2-setup_1.1_all.deb 두방식모두 deb 파일과디렉토리는 world readable과 world executable 모드여야한다. 4 소프트웨어는 /usr/google/appinventor에설치된다. 5 시스템을 폰을찾을수있는 상태로설정해야하는경우도있다. 이때는다음사이트 (http:// developer.android.com/guide/developing/device.html#setting-up) 를참조한다. If you're developing on Ubuntu Linux 밑에있는 set up your system to detect your device 라는항목의안내문을따라한다. 다른 GNU/ 리눅스시스템의경우다음절차를따른다. 1 다음사이트 (http://commondatastorage.googleapis.com/appinventordownloads/ appinventor2-setup_1.1.tar.gz) 를클릭하여소프트웨어를다운로드받는다. 파일명은 appinventor2-setup_1.1.tar.gz 이며, Gzip 으로압축된 tar 파일이다. 2 사용하고있는운영체제에맞는방법으로파일을설치한다. 주의 어떤운영체제를사용하든문제가발생하면 < 문제해결 (http://appinventor.mit.edu/explore/ai2/support/ troubleshooting.html)> 을참조하거나 < 앱인벤터사용자포럼 (http://appinventor.mit.edu/explore/forums.html)> 에도 7
움을청한다. 2단계 : aistarter 구동 ( 윈도우즈와 GNU/ 리눅스에해당 ) 에뮬레이터를사용하는경우와 USB 케이블을사용하는경우에는 aistarter라는프로그램이필요하다. 이프로그램은브라우저가에뮬레이터나 USB 케이블과통신하는일을도와준다. 1단계에서앱인벤터셋업소프트웨어를성공적으로설치했다면, aistarter도설치되어있을것이다. 운영체제에따라 aistarter 프로그램을실행시키는방식이조금씩다르니, 운영체제에맞는절차를따라실행한다. 윈도우즈에서는 < 바탕화면 > 에 [ 그림 7] 의왼쪽그림과같은아이콘이생긴다. 이아이콘을더블클릭하면실행되는데, < 시작프로그램 > 폴더에들어있는경우에는윈도우즈가부팅될때자동으로실행되기때문에아무일도할필요가없다. 오른쪽그림과같은창이나타나면 aistarter가성공적으로실행된것이다. [ 그림 7] aistarter 프로그램의아이콘과실행화면 ( 윈도우즈운영체제 ) 매킨토시에서는로그인할때자동으로 aistarter 가실행된다. 화면에는보이지않지만, 백그라운드 프로세스로동작하므로이단계에서할일은없다. GNU/ 리눅스에서는 /usr/google/appinventor/commands-for-appinventor 라는폴더에있 는 aistarter 를수동으로실행시켜줘야한다. 다음명령어를입력하면된다. /usr/google/appinventor/commands-for-appinventor/aistarter & 주의 aistarter 가제대로작동하지않을경우다음절차에따라문제를진단할수있다. 콘솔에 aistarter 라는명령어를실행시키면다음과같은형식의응답이나타난다. 127.0.0.1 - - [01/Dec/2013 11:28:30} "GET /replstart/emulator-5554 HTTP/1.1" 2000 포트막힘 (blocked ports) 이라는진단이내려질경우에는포트를다른프로그램이점유하고있는지확인해본다. adb(android Debug Bridge) 라는진단이내려질경우도있는데, 여기서 adb 는컴퓨터에연결되어있는안드로이드폰을제어하는프로그램이다. 연결에문제가있을경우 adb 프로그램은혼란에빠지기도한다. 만일이문제라고의심되면, 콘솔창을띄운다음앱인벤터폴더로이동하여 adbrestart 라는명령을수행하고도움을받는다. 8
3 단계 : 프로젝트와에뮬레이터를연결하기 만들고있는프로젝트에서 [ 그림 8] 처럼 [Connect] [Emulator] 를선택한다. [ 그림 8] 프로젝트를에뮬레이터와연결하기 그러면 [ 그림 9] 와같은알림창이나타난다. 에뮬레이터가시작될때까지몇분이소요될수도있는데, 그동안여러정보가나타난다. [ 그림 9] 에뮬레이터와연결하는도중에나타나는화면 처음에는 [ 그림 10] 의 1 번그림처럼검은바탕의에뮬레이터가나타난다. 조금기다리면 2 번그림과 같은컬러화면이뜨고, 그다음에는 3 번과같이 SD 카드를준비하고있다는내용이나온다. 조금더 기다리면에뮬레이터실행이시작되며, 4 번과같이만들고있는앱이나타난다. 9
1 2 3 4 [ 그림 10] 에뮬레이터가나타나는순서 이제에뮬레이터가성공적으로연결되었다. 신나게앱을만들어보자. 주의 1 앱인벤터셋업소프트웨어를설치한후에뮬레이터를처음실행하면, 에뮬레이터를업데이트하라는메시지가나타날수도있다. 이럴경우화면에나타난명령어에따라업데이트를수행하고, 에뮬레이터를처음부터다시연결하면된다. 새로운버전의앱인벤터셋업소프트웨어가공개될때마다이와같은에뮬레이터업데이트를수행해야한다. 주의 2 aistarter 에서문제가발생하거나에뮬레이터가제대로연결되지않을경우에는 < 에뮬레이터연결문제해결 (Help with problems connecting the emulator)> 이라는문서 (http://appinventor.mit.edu/ explore/ai2/connection-help.html) 를살펴보고원인을찾아해결한다. 4. 안드로이드폰이나태블릿을 USB 케이블로연결하는방식안드로이드폰이나태블릿을가지고있고와이파이연결이가능하다면, 앞에서설명한 <MIT AI2 Companion> 앱을사용하는것이가장좋다. 하지만호텔, 회의장, 학교등에서와이파이를사용할수없는상황이발생할수있다. 또는시스템관리자가어떤이유때문에두장비사이의연결을허용하지않을수도있다. 이런경우무선라우터를구입하여지역네트워크를구축함으로써문제를해결할수있다. 또는와이파이라우터기능이있는컴퓨터로네트워크를구축하여문제를해결할수도있다. 이런해결책조차가능하지않은상황에서는지금부터설명하는절차에따라 USB 케이블을이용하여안드로이드폰이나태블릿을컴퓨터와연결할수있다. USB 케이블로안드로이드장치과컴퓨터를연결할때에는귀찮은일이몇가지있다. 특히안드로이드장치를연결할때특별한드라이버프로그램을필요로하는윈도우즈운영체제에서더욱그렇다. 맥 OX X나리눅스운영체제에서는별도의드라이버프로그램이필요없다. 하지만구글과마이크로소프트는일부표준모델에해당하는장치를빼고는업자가스스로드라이버를제작하여배포하게하는정책을고수하고있어안드로이드장치마다각기다른드라이버프로그램이필요하다. 따라서자신의폰 10
에해당하는드라이버프로그램을인터넷에서찾아설치해야한다. 다음여섯단계중에서 1단계와 3단계는에뮬레이터를사용하는방식과비슷하다. 또한 2단계는와이파이를사용하는방식과같다. 1단계 : 앱인벤터셋업소프트웨어와드라이버프로그램설치하기먼저두개의소프트웨어를설치해야한다. 1 앱인벤터셋업소프트웨어설치 : 에뮬레이터를사용하는방식과똑같으므로여기서는생략한다. 2 자신의폰에맞는드라이버프로그램설치 드라이버프로그램을설치하는요령을살펴보자. 앱인벤터셋업소프트웨어를설치하면구글 USB 드 라이버도같이설치되는데, 다음기종을지원한다. T-Mobile G1* / ADP1 T-Mobile mytouch 3G* / Google Ion / ADP2 Verizon Droid(not Droid X) Nexus One Nexus S 자신의폰이위기종중하나라면, 드라이버프로그램이이미설치된것이므로바로 2단계로가면된다. 하지만이들기종이아니라면, 인터넷에서해당 USB 드라이버프로그램을찾아컴퓨터에설치해야한다. 이때 http://developer.android.com/sdk/oem-usb.html 에접속하면많은기종의드라이버프로그램을찾을수있다. 만일이곳에없다면제조사의웹사이트에서찾아보자. 드라이버를설치한다음에는다음절차에따라드라이버프로그램이제대로동작하는지확인한후 2 단 계로넘어간다. 1 cmd 명령어를입력하여명령어프롬프트창을연다. 2 cd 명령어를사용하여소프트웨어가설치된폴더로이동한다. 예를들어 32비트운영체제의관리자모드에서소프트웨어를설치했다면 C:\Program Files\AppInventor\commandsfor-Appinventor 디렉토리에설치되어있다. 64비트라면 C:\Program Files (x86)\ AppInventor\commands-for-Appinventor에설치되어있다. 3 dir 명령어를사용하여 adb.exe 파일이있는지확인한다. 만일없다면, 다른폴더에있거나소프트웨어를제대로설치하지못한것이다. 11
4 안드로이드폰을컴퓨터의 USB 포트에꽂은다음폰에 USB에연결되었다 는메시지가나타나는지확인한다. 5 adb devices 라는명령어를실행한다. daemon not running 과 daemon stated successfully 라는메시지다음에 list of devices attached 라는메시지가나타나야한다. 리스트에자신의안드로이드폰기종 ( 예를들어 HT99TP800054와같은 ) 이나타나면폰이제대로연결된것이다. 이제컴퓨터와폰이통신할수있는상태가되었다. 6 만일리스트가비어있다면, 연결에실패한것이니다시시도해야한다. 2단계 : 폰에 <MIT AI2 Companion> 앱설치하기이단계는폰을와이파이로연결하는방식과같다. 3단계 : aistarter 구동 ( 윈도우즈와 GNU/ 리눅스에해당 ) 이단계는에뮬레이터를사용하는방식과같다. 4단계 : 폰의 USB 디버깅을허용안드로이드폰에서 [ 설정 ] [ 개발자옵션 ] 으로이동한후개발자옵션을켜짐으로설정한다. 또한 USB 디버깅에체크표시한다. 5단계 : 컴퓨터에폰연결하기 [ 그림 1-3] 과같이 USB 케이블로안드로이드폰을컴퓨터에연결한다. 이때 media device 가아니라 mass storage device 로연결해야하며, 폰은드라이브로설정되지않아야한다. 윈도우즈에서는 내컴퓨터 에드라이브로표시되어있다면, 이를강제로끊어야한다. 안드로이드 4.2.2 이상의버전에서는컴퓨터에처음연결할때 Allow USB Debugging? 이라는팝 업창이뜬다. 이때 예 를선택하면된다. 이렇게하면컴퓨터는폰을인증하는셈이되고, 이제부터 컴퓨터는폰과통신할수있다. 팝업창은폰을처음연결할때만뜨고, 다음부터는뜨지않는다. 6 단계 : 제대로연결되었는지확인하기 연결검사하기페이지 MIT App Inventor 2 Connection Test (http://appinventor.mit.edu/test) 에서컴퓨터 General Connection 가폰을인식한다는확인메시지가나타나는지검사해본다. 실패했으면연결도움말 Help (http://appinventor.mit.edu/explore/ai2/connection-help.html) 에서원인을찾아본다. 성공했다면라이브테스팅연결이완성된것이다. 12