NEW 앱인벤터2 강좌 – 앱을 테스트하는 3가지 방법(에뮬레이터/USB/WIFI)

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

post_std_04_000.png

이번에는 앱인벤터로 제작 중인 앱을 테스트하는 방법을 알아보도록 하겠습니다.


0. 개요

앱인벤터로 앱을 만들다 보면 앱이 제대로 작동할 수 있는 상태인지, 화면이 내가 원하는 대로 나오고 있는지를 수시로 확인해야 할 때가 있습니다.
물론 빌드 메뉴에서 계속 apk 파일을 생성해서 기기에 설치해서 테스트를 해볼 수도 있지만, 만약 실제 기기가 없을 수도 있고, 할 때마다 apk를 빌드하고 설치하는 과정도 매우 귀찮고 번거로운 과정입니다.

이를 위해 앱인벤터는 3가지 앱을 테스트할 수 있는 방법을 제공합니다.
게다가 연결된 상태에서는 앱인벤터에서 디자인이나 블록을 변경할 때마다 실시간으로 적용이 되어 개발이 잘 되고 있는지 확인하기에 매우 편리합니다.
이제부터 이 방법들을 사용하는 법을 알아보도록 하겠습니다.

1. WIFI를 이용해서 연결하기 (추천)

첫 번째는 먼저, WIFI를 이용하는 방법입니다.
앱인벤터에서 공식적으로도 추천하는 방법입니다.
앱인벤터를 사용 중인 PC와 테스트할 실제 기기를 같은 네트워크 상에 연결 후, 컴패니언 앱을 통해 통신하는 것입니다.

-여기서 잠깐, 같은 네트워크?
여기서 말하는 같은 네트워크는 다음을 뜻합니다.
ㆍPC와 연결한 안드로이드 기기가 같은 공유기에서 나오는 와이파이/이더넷에 연결되어야 합니다.
물론 대부분의 가정집에서는 웬만해서는 이렇게 연결돼있으니 신경 안 쓰셔도 됩니다.
제가 네트워크 쪽은 지식이 많이 없는지라 자세히는 설명을 못하겠네요…
간단히 말하면
ㆍPC에 연결된 공유기로부터 나오는 와이파이에 안드로이드 기기를 연결합니다.

1. MIT AI2 Companion 앱 설치
테스트할 안드로이드 기기에 다음 앱을 설치합니다.
https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3

2. 동일 네트워크 연결
둘을 동일한 네트워크에 연결했는지 확인합니다.

3. 연결

post_std_04_001.png

연결할 프로젝트를 열고, 상단 메뉴에서 연결 -> AI 컴패니언을 선택합니다.

post_std_04_002.png

QR코드와 6자리 코드가 생성됩니다.

post_std_04_003.png

연결할 기기에서 QR코드를 스캔하거나 6자리 코드를 직접 입력 후 connect with code를 클릭합니다.
QR코드 스캔으로 입력한 경우 자동으로 연결이 시작됩니다.

post_std_04_004.png

PC 상에서 연결이 시작됩니다.

post_std_04_005.png

안드로이드 기기에서도 정상적으로 화면이 뜨는 것을 볼 수 있습니다.
PC에서 디자인을 변경하거나 블록을 변경하는 경우 즉시 안드로이드 기기에서도 반영되는 것을 볼 수 있습니다.

​2. USB 연결

USB 연결은 USB 케이블을 이용해서 유선으로 직접 PC와 연결해 테스트를 하는 방법입니다.
학교 등 PC와 기기를 같은 네트워크에 연결하기 어려운 곳 혹은 와이파이를 쓸 수 없는 곳에서 안정적으로 연결할 수 있습니다.
다만 USB 케이블이 제대로 꼽히지 않으면 연결이 끊길 수 있으니 주의해야 합니다.
USB를 통한 연결에는 PC에도 프로그램을 하나 설치해야 합니다.

1. MIT AI2 Companion 앱 설치
테스트할 안드로이드 기기에 다음 앱을 설치합니다.
https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3

2. PC에 aiStarter 설치하기
>>> Windows
>>> Mac OS X
>>> GNU/Linux
위 링크에서 자신이 사용 중인 운영체제에 맞는 aiStarter를 받아서 설치 후 실행합니다.

3. aiStarter가 정상 작동 중인지 체크하기 (선택)
http://appinventor.mit.edu/test.html
aiStarter가 실행 중인 PC로 위 링크에 접속하면 aiStarter가 정상 작동 중인지 확인할 수 있습니다.

post_std_04_006.png

▲ 정상작동 중인 경우. YES, aiStarter {버전} running! 이라고 뜬다.

4. USB 디버깅 켜기
연결할 안드로이드 기기의 USB 디버깅을 활성화합니다.
1. 설정 > 디바이스 정보 > 빌드번호를 여러 번 연타합니다.

post_std_04_007.png

2. 설정 > 개발자 옵션이 생겼습니다. USB 디버깅을 켜주세요.
3. 이후 휴대폰에 인증 관련 창이 뜨면 허용해 줍니다.

5. 연결
상단 메뉴에서 연결 -> USB를 선택합니다.
모두 정상이라면 연결 시작 후 얼마 뒤 안드로이드 기기에서 컴패니언 앱이 열리면 화면이 뜹니다.

3. 에뮬레이터 사용

1. PC에 aiStarter 설치하기
>>> Windows
>>> Mac OS X
>>> GNU/Linux

위 링크에서 자신이 사용 중인 운영체제에 맞는 aiStarter를 받아서 설치 후 실행합니다.
이미 설치됐다면 안 해도 됩니다.

2. 에뮬레이터 실행

post_std_04_008.png

앱인벤터의 연결 메뉴에서 에뮬레이터를 누릅니다.
이때 aiStarter는 실행 중인 상태이어야 합니다.

post_std_04_009.png

연결 시 시간이 조금 걸립니다.

post_std_04_010.png

잠시 후 에뮬레이터가 뜨고 로딩됩니다.
이후 앱인벤터 창에서 카운트다운이 몇 번 드는데 아무것도 건들지 말고 기다립니다.

post_std_04_011.png

만약 위처럼 뜨면 OK를 눌러 컴패니언을 업데이트해줍니다.

post_std_04_012.png

그러면 위처럼 뜰 텐데 읽고 Got It누르면 닫힙니다.

해석

업데이트가 이제 당신의 디바이스에 설치됩니다. 당신의 기기(또는 에뮬레이터)를 지켜보다가 창이 뜨면 승인해 주십시오.
*중요* 업데이트가 끝나고, “DONE”를 누르세요(“open”을 누르면 안 됩니다).
그리고 앱인벤터로 돌아가서 연결 메뉴의 “다시 연결하기”를 클릭합니다. 그리고 다시 연결을 시작하세요.

post_std_04_013.png

위처럼 뜨면 OK를 누르고 Install을 눌러 설치를 시작합니다.

post_std_04_014.png

설치가 끝나면 반드시 Done을 누릅니다.
그리고 앱인벤터에서 다시 연결하기를 누릅니다. 그러면 에뮬레이터가 사라집니다.
그리고 연결 메뉴의 에뮬레이터를 다시 선택해 재실행 시켜주면 됩니다.

post_std_04_015.png

성공한 모습.

3. 오류?

특히 에뮬레이터는 오류가 많습니다. 정상적으로 안되는 경우가 많지요.
만약 업데이트 후 다시 연결을 시도해도 열리지 않는다면 아래처럼 해보세요:
ㆍ앱인벤터 닫고 재시작 aiStarter 재시작
ㅤ-> aiStarter 재시작 후에 에뮬레이터를 눌러도 aiStarter 창에 변화 없이 안 열리면
ㅤㅤ aiStarter 창에서 Ctrl+C를 눌러서 종료 후 다시 실행해 봅니다.

ㆍ그래도 안된다?
ㅤ-> 연결 메뉴의 강제 초기화 / aiStarter 재 설치(관리자 권한으로) / PC 재부팅 / 앱인벤터 완전 종료 후 재시작을 해봅니다.

그 외 공식 가이드(영어):
https://docs.google.com/document/d/1NbJRyCA9udxdU3oNyadR0fuvNglijYR7X3mVB_ZIeNU/pub

장ㆍ단점 비교

종류

장점

단점

WIFI

안정적이다.
간편히 연결이 가능하다.

집 이외의 환경에서는 테스트가 어렵다.

USB

안정적이다.
연결에 네트워크가 굳이 필요 없다.

aiStarter를 따로 설치해야 한다.

에뮬레이터

실제 기기가 없어도 PC에서 바로 테스트해 볼 수 있다.

aiStarter를 따로 설치해야 한다.
오류가 많다.
실제 기기와 차이가 있을 수 있다.

전 개인적으로 WIFI를 추천합니다.
에뮬레이터는 하도 오류가 많아서 저도 잘 안될 때가 있습니다. 각 상황에 맞게 알맞게 골라서 쓰면 되겠습니다.
감사합니다.

댓글

Copied title and URL