가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
TRANSCRIPT
출처 : http://www.idc.com/prodserv/smartphone-os-market-share.jsp
80% 가까운 점유율의 안드로이드
어떻게 개발하고 있으신가요 ?
출처 : https://java.com/ko/about/whatis_java.jsp
출처 : https://developer.android.com/sdk/index.html
공식 개발툴인 Android Studio 와 JAVA 로
많이 개발을 하지만 , 비개발자 분들에게는
처음에 너무 접근하기 어렵습니다 .
출처 : https://www.udacity.com/course/developing-android-apps--ud853
출처 : https://www.udacity.com/course/developing-android-apps--ud853
기본적으로 1 년 이상의 객체지향언어로 개발한
경험이 있어야 원활하게 Intermediate 과정을
들을 수 있습니다 .
그러면 기존 개발 경험없는 초보자가 빠르게
안드로이드 앱을 만들 수 있는 방법은 없을까요 ?
출처 : http://appinventor.mit.edu/explore/
출처 : http://appinventor.mit.edu/explore/
강력한 대안으로
앱인벤터가 있습니다 !
JAVA 를 몰라도
아무것도 설치하지 않아도 됩니다 .
출처 : http://appinventor.mit.edu/explore/
이제 앱인벤터를 통해 어떻게
안드로이드 앱을 만들 수 있는지
알아봅시다 .
01 02 03 04
05 06 07 08
오늘의 레시피
앱인벤터란 ? 앱인벤터 개발환경 컴포넌트 디자이너 블록 에디터
프로그래밍 라이브 테스팅 실제 폰에 설치 할 수 있는 것들…
재료 웹브라우저만 있으면 일단 준비 끝 !
앱인벤터란 ?
앱인벤터 2
http://www.82cook.com/entiz/read.php?num=1668822
출처 : https://en.wikipedia.org/wiki/App_Inventor_for_Android
출처 : https://en.wikipedia.org/wiki/App_Inventor_for_Android
웹에서 안드로이드 앱을 만들 수 있는
앱인벤터는 Google 이 진행했던
프로젝트를 MIT 가 관리하면서
초보자들이 보다 쉽게 사용 할 수 있게
개발되고 있습니다 .
출처 : http://appinventor.mit.edu/explore/ai2/setup.html
출처 : http://appinventor.mit.edu/explore/ai2/setup.html
필수적으로 필요한 건
웹브라우저 하나 뿐 !
IE 는 지원하지 않으니 Chrome
이나 FireFox 를 이용해야 합니다 .
출처 : http://appinventor.mit.edu/explore/ai2/setup.html
출처 : http://appinventor.mit.edu/explore/ai2/setup.html
여기에 안드로이드 폰이 있으면 훨씬
편하게 진행할 수 있습니다 .
출처 : http://appinventor.mit.edu/explore/about-us.html
출처 : http://appinventor.mit.edu/explore/about-us.html
이미 앱인벤터를 이용하여 195 개국
300 만명의 사용자가 700 만개의
안드로이드 앱을 만들었습니다 .
출처 : http://appinventor.mit.edu/explore/
출처 : http://appinventor.mit.edu/explore/ai2/setup.html
그러면 지금 바로 앱인벤터를
만나봅시다
http://appinventor.mit.edu/ex
plore/
출처 : http://appinventor.mit.edu/explore/
출처 : http://appinventor.mit.edu/explore/ai2/setup.html
상단의 버튼을 누르면
구글 계정으로 로그인 하고 ,
엑세스 권한 요청 , 약관 동의를
진행하게 됩니다 .
출처 : http://appinventor.mit.edu/explore/
출처 : http://appinventor.mit.edu/explore/
출처 : http://ai2.appinventor.mit.edu/Ya_tos_form.html
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
클릭 몇 번으로 앱인벤터 2 를
사용할 준비가 완료 되었습니다 !!
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
왼쪽 상단의 버튼을 누르고
프로젝트 이름을 입력하면 드디어
새로운 앱의 첫 걸음을 시작합니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
갑자기 많은 메뉴들과
버튼들이 많이 생겼네요 ~
이제 어떻게 해야 할까요 ?
재료 웹브라우저만 있으면 일단 준비 끝 !
앱인벤터 개발환경
앱인벤터 2
http://www.82cook.com/entiz/read.php?num=1668822
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
우측 상단의 이 두 버튼이
화면을 구성하는 ( 컴포넌트 ) 디자이너
프로그램을 작성하는 블록 에디터
화면을 전환하는 버튼 !!
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
( 컴포넌트 ) 디자이너
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
블록 에디터
출처 : http://ai2.appinventor.mit.edu/
일단 이 두 부분이 가장 큰 부분입니다 !
재료 웹브라우저만 있으면 일단 준비 끝 !
컴포넌트 디자이너
앱인벤터 2
http://www.82cook.com/entiz/read.php?num=1668822
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
먼저 ( 컴포넌트 ) 디자이너에 대해
알아봅시다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
팔레트 (Palette) 영역은 바로 옆
뷰어 (Viewer) 에 배치할 기능을
보여주고 선택하는 영역
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
뷰어 (Viewer) 영역은 옆에 팔레트에서
컴포넌트를 배치하여 앱의 화면을
설계하는 곳
주의 : 실제 앱화면과는 달라질 수 있음
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
컴포넌트 (Components) 는 현재
사용하고 있는 컴포넌트를 보여주는
영역
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
미디어 (Media) 영역은 사용할 그림 ,
소리 같은 미디어를 추가하고 목록을
보여줍니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
속성 (Properties) 영역은 컴포넌트의
바꿀 수 있는 속성들을 표시 !
예를 들어 색상 , 정렬 , 폭 , 높이 등이
나타나게 됩니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
이제 직접 간단한 앱을 만들어 봅시다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
Palette 에 있는 을 끌어서
Viewer 로 옮겨 놓으면
Components 에 Label1 이
추가됩니다 .
출처 : http://ai2.appinventor.mit.edu/
Properties 도 Label 에 맞는
속성이 나타나게 됩니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
Properties 에 Text 에 표시될
글자를 입력하면 바로 Viewer 에
반영됩니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
이번엔 Palette 에 있는 을 끌어서
Viewer 의 Label 밑으로 옮겨 놓으면
Components 에 Button1 이 추가됩니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
Button 에 이미지를 넣는 방법은 먼저
Media 를 추가 합니다 . 적당한
이미지를 선택해 Upload 합니다 .
출처 : http://ai2.appinventor.mit.edu/
Upload가 완료 되면 Media에 노출되고 ,
Button의 Properties 중 Image 에서 선택할 수
있습니다 .
출처 : http://ai2.appinventor.mit.edu/
이제 이 버튼을 클릭하면 소리가
나도록 해보는데 , 이를 위해서는
블록 에디터를 통해 프로그래밍을
해야 합니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
그전에 Media 를 통해 적당한 mp3 파일을
업로드 합니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
이번엔 Palette Media 아래에 있는 을
끌어서 Viewer 로 옮겨 놓으면
Components 에 Sound1 이 추가됩니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
Sound1 의 Properties 에서 Source 항목을
통해 올려둔 Media 의 mp3 파일과 연결을
합니다 .
재료 웹브라우저만 있으면 일단 준비 끝 !
블록언어
앱인벤터 2
http://www.82cook.com/entiz/read.php?num=1668822
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
블록 에디터
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
앱인벤터 , 블록 에디터안에서는 명령어를
쳐서 입력하는 방식이 아니라
명령에 해당하는 블록을 선택해서
Viewer 안에서 조립하는 형태로 되어
있습니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
실제 블록처럼 서로 연결해서 사용할
수 있는 부분만 연결이 되고 ,
연결되지 않는 블록은 붙지
않습니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
프로그래밍 언어를 몰라도
쉽게 접근할 수 있는 블록 방식의
프로그래밍입니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
명령어가 익숙해지면 끌어 놓는 방식
보다 Viewer 안에서 명령어를 치면
자동완성을 통해 바로 블록을 생성할
수 있습니다 .
재료 웹브라우저만 있으면 일단 준비 끝 !
프로그래밍
앱인벤터 2
http://www.82cook.com/entiz/read.php?num=1668822
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
이제 Blocks 하단의 우리가 끌어다
놓은 Button1 을 눌러 보면 여러
명령 블록들이 보입니다 .
출처 : http://ai2.appinventor.mit.edu/
제일 위에 있는 click 블록을
선택합니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
Blocks 하단의 Sound1 을 눌러
보이는 여러 명령 블록들 중에
play 를 선택합니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
이제 이 두 블록을 연결해 봅시다 .
Play 블록을 끌어서 click 안에다
넣습니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
이 두 블록은 연결해 사용할 수
있으므로 ,
경쾌한 소리와 함께 자석처럼
붙습니다 .
출처 : http://ai2.appinventor.mit.edu/
이 것으로 프로그래밍은 끝났습니다 !
출처 : http://ai2.appinventor.mit.edu/
블록의 이름으로 눈치 채셨겠지만 ,
Button1 을 클릭했을때 Sound1
을 재생하는 프로그램을 클릭 몇 번
으로 만들었습니다 .
출처 : http://ai2.appinventor.mit.edu/
이제 앱인벤터의 매력을 아시겠지요 ?
재료 웹브라우저만 있으면 일단 준비 끝 !
라이브 테스팅
앱인벤터 2
http://www.82cook.com/entiz/read.php?num=1668822
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
만든 화면과 블록을 실제로 폰으로 보면서
어떻게 나오는지 테스트를 할 수 있으면
개발하는데 더욱 편리할 것 입니다 .
만든 결과물을 폰으로 보는 것도 간단합니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
1) 먼저 컴퓨터와 안드로이드 폰이 같은
WIFI 를 사용하고 있어야 합니다 .
2) 안드로이드 폰에 MIT AI2 Com-
panion 앱을 설치 합니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
3) 앱을 실행 합니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
4) 앱인벤터 상단 메뉴 중 를
눌러 나오는 하단 메뉴 중 를
선택합니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
5) 안드로이드에 실행중인 앱에서
화면에 나온 6 자리 code 를
입력하거나 ,
Scan QR 코드를 눌러 스캔합니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
6) 이제 부터 변경되는 내용은 실시간으로
안드로이드 폰으로 실행되며 직접 확인해 볼
수 있습니다 .
이미지 버튼을 눌러서 음악이 나오는 걸
확인해 보세요 !
재료 웹브라우저만 있으면 일단 준비 끝 !
실제 폰에 설치
http://egloos.zum.com/masksj/v/2871475
앱인벤터 2
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
라이브 테스트를 통해 자신의 폰으로는
확인이 가능하지만 , 다른 사람의 폰에
설치를 하게 할 수는 없습니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
상단 Build 메뉴를 누르면 apk 로
저장할 수 있는 항목이 나옵니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
Apk 를 만드는 시간이 조금 걸린 후에는
자동으로 다운로드 받게 됩니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
다운 받은 apk 파일을 주변 안드로이드
폰을 사용하는 사용자에게 보내
설치하게 하면 자신이 만든 앱을 다른
사람이 쓰게 할 수 있게 됩니다 !
재료 웹브라우저만 있으면 일단 준비 끝 !
할 수 있는 것들…
앱인벤터 2
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
상단의 Gallery 메뉴를 통하면 다른
사람들이 만든 다양한 앱을 볼 수
있습니다 .
출처 : http://ai2.appinventor.mit.edu/
출처 : http://ai2.appinventor.mit.edu/
너무나 쉽게 접근할 수 있는
앱인벤터이지만 어느정도 수준의
앱도 만들어 낼 수 있습니다 .
출처 : http://ai2.appinventor.mit.edu/
게임 , 위치 기반 앱 , 바코드 스캔 , 음성
인식 , 음악 연주 , 사진 찍기 , 기울기 ,
가속도 알아내기 , 전화 걸기 , SMS 문자 ,
LEGO 로봇 제어 , 웹 연동 등을 할 수
있습니다 .
출처 : http://ai2.appinventor.mit.edu/
간단하고 쉬운 도구이지만 , 어떻게
사용하느냐에 따라 활용도는
무궁무진합니다 .
출처 : http://ai2.appinventor.mit.edu/
앱인벤터를 통해 첫 프로그래밍 ,
안드로이드앱 프로그래밍을
시작하세요 !
본 자료는 한빛아카데미의 책 “앱인벤터
2” 의 1 장 안녕야옹이를 참고하여
만들어졌습니다 .
