가장 쉬운 안드로이드 앱 개발 방법 앱인벤터

1. 가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
2015년 08월 27일 | 이철혁 (MSQL@NAVER.COM)
이 문서는 나눔글꼴로 작성되었습니다. 설치하기

2. 출처 : http://www.idc.com/prodserv/smartphone-os-market-share.jsp

3. 80% 가까운 점유율의 안드로이드
어떻게 개발하고 있으신가요?

4. 출처 : https://java.com/ko/about/whatis_java.jsp

5. 출처 : https://developer.android.com/sdk/index.html

6. 공식 개발툴인 Android Studio와 JAVA로
많이 개발을 하지만, 비개발자 분들에게
는 처음에 너무 접근하기 어렵습니다.

7. 출처 : https://www.udacity.com/course/developing-android-apps--ud853

8. 출처 : https://www.udacity.com/course/developing-android-apps--ud853

9. 기본적으로 1년 이상의 객체지향언어로 개발한 경험
이 있어야 원활하게 Intermediate 과정을 들을 수
있습니다.
그러면 기존 개발 경험없는 초보자가 빠르게 안드로
이드 앱을 만들 수 있는 방법은 없을까요?

10. 출처 : http://appinventor.mit.edu/explore/

11. 출처 : http://appinventor.mit.edu/explore/
강력한 대안으로
앱인벤터가 있습니다!
JAVA를 몰라도
아무것도 설치하지 않아도 됩니다.

12. 출처 : http://appinventor.mit.edu/explore/
이제 앱인벤터를 통해 어떻게 안드로이
드 앱을 만들 수 있는지 알아봅시다.

13. 01 02 03 04
05 06 07 08
오늘의 레시피
앱인벤터란? 앱인벤터 개발환경 컴포넌트 디자이너 블록 에디터
프로그래밍 라이브 테스팅 실제 폰에 설치 할 수 있는 것들…

14. 재료 웹브라우저만 있으면 일단 준비 끝!
앱인벤터란?
http://www.82cook.com/entiz/read.php?num=1668822

15. 출처 : https://en.wikipedia.org/wiki/App_Inventor_for_Android

16. 출처 : https://en.wikipedia.org/wiki/App_Inventor_for_Android
웹에서 안드로이드 앱을 만들 수 있는
앱인벤터는 Google이 진행했던
프로젝트를 MIT가 관리하면서 초보자들
이 보다 쉽게 사용 할 수 있게
개발되고 있습니다.

17. 출처 : http://appinventor.mit.edu/explore/ai2/setup.html

18. 출처 : http://appinventor.mit.edu/explore/ai2/setup.html
필수적으로 필요한 건
웹브라우저 하나 뿐!
IE는 지원하지 않으니 Chrome이나
FireFox를 이용해야 합니다.

19. 출처 : http://appinventor.mit.edu/explore/ai2/setup.html

20. 출처 : http://appinventor.mit.edu/explore/ai2/setup.html
여기에 안드로이드 폰이 있으면 훨씬
편하게 진행할 수 있습니다.

21. 출처 : http://appinventor.mit.edu/explore/about-us.html

22. 출처 : http://appinventor.mit.edu/explore/about-us.html
이미 앱인벤터를 이용하여 195개국
300만명의 사용자가 700만개의
안드로이드 앱을 만들었습니다.

23. 출처 : http://appinventor.mit.edu/explore/

24. 출처 : http://appinventor.mit.edu/explore/ai2/setup.html
그러면 지금 바로 앱인벤터를 만나봅시다
http://appinventor.mit.edu/explore/

25. 출처 : http://appinventor.mit.edu/explore/

26. 출처 : http://appinventor.mit.edu/explore/ai2/setup.html
상단의 버튼을 누르면
구글 계정으로 로그인 하고,
엑세스 권한 요청, 약관 동의를
진행하게 됩니다.

27. 출처 : http://appinventor.mit.edu/explore/

28. 출처 : http://appinventor.mit.edu/explore/

29. 출처 : http://ai2.appinventor.mit.edu/Ya_tos_form.html

30. 출처 : http://ai2.appinventor.mit.edu/

31. 출처 : http://ai2.appinventor.mit.edu/

32. 출처 : http://ai2.appinventor.mit.edu/
클릭 몇 번으로 앱인벤터2를
사용할 준비가 완료 되었습니다!!

33. 출처 : http://ai2.appinventor.mit.edu/

34. 출처 : http://ai2.appinventor.mit.edu/
왼쪽 상단의 버튼을 누르고
프로젝트 이름을 입력하면 드디어 새로
운 앱의 첫 걸음을 시작합니다.

35. 출처 : http://ai2.appinventor.mit.edu/

36. 출처 : http://ai2.appinventor.mit.edu/
갑자기 많은 메뉴들과
버튼들이 많이 생겼네요~
이제 어떻게 해야 할까요?

37. 재료 웹브라우저만 있으면 일단 준비 끝!
앱인벤터 개발환경
http://www.82cook.com/entiz/read.php?num=1668822

38. 출처 : http://ai2.appinventor.mit.edu/

39. 출처 : http://ai2.appinventor.mit.edu/
우측 상단의 이 두 버튼이
화면을 구성하는 (컴포넌트)디자이너
프로그램을 작성하는 블록 에디터
화면을 전환하는 버튼!!

40. 출처 : http://ai2.appinventor.mit.edu/

41. 출처 : http://ai2.appinventor.mit.edu/
(컴포넌트)디자이너

42. 출처 : http://ai2.appinventor.mit.edu/

43. 출처 : http://ai2.appinventor.mit.edu/
블록 에디터

44. 출처 : http://ai2.appinventor.mit.edu/
일단 이 두 부분이 가장 큰 부분입니다!

45. 재료 웹브라우저만 있으면 일단 준비 끝!
컴포넌트 디자이너
http://www.82cook.com/entiz/read.php?num=1668822

46. 출처 : http://ai2.appinventor.mit.edu/

47. 출처 : http://ai2.appinventor.mit.edu/
먼저 (컴포넌트) 디자이너에 대해
알아봅시다.

48. 출처 : http://ai2.appinventor.mit.edu/

49. 출처 : http://ai2.appinventor.mit.edu/
팔레트(Palette) 영역은 바로 옆 뷰어
(Viewer)에 배치할 기능을 보여주고
선택하는 영역

50. 출처 : http://ai2.appinventor.mit.edu/

51. 출처 : http://ai2.appinventor.mit.edu/
뷰어(Viewer)영역은 옆에 팔레트에서
컴포넌트를 배치하여 앱의 화면을
설계하는 곳
주의 : 실제 앱화면과는 달라질 수 있음

52. 출처 : http://ai2.appinventor.mit.edu/

53. 출처 : http://ai2.appinventor.mit.edu/
컴포넌트(Components)는 현재 사용하고
있는 컴포넌트를 보여주는 영역

54. 출처 : http://ai2.appinventor.mit.edu/

55. 출처 : http://ai2.appinventor.mit.edu/
미디어(Media) 영역은 사용할 그림, 소리
같은 미디어를 추가하고 목록을
보여줍니다.

56. 출처 : http://ai2.appinventor.mit.edu/

57. 출처 : http://ai2.appinventor.mit.edu/
속성(Properties) 영역은 컴포넌트의 바꿀
수 있는 속성들을 표시!
예를 들어 색상, 정렬, 폭, 높이 등이 나
타나게 됩니다.

58. 출처 : http://ai2.appinventor.mit.edu/

59. 출처 : http://ai2.appinventor.mit.edu/
이제 직접 간단한 앱을 만들어 봅시다.

60. 출처 : http://ai2.appinventor.mit.edu/

61. 출처 : http://ai2.appinventor.mit.edu/
Palette에 있는 을 끌어서
Viewer로 옮겨 놓으면
Components에 Label1이 추가됩니다.

62. 출처 : http://ai2.appinventor.mit.edu/
Properties 도 Label에 맞는
속성이 나타나게 됩니다.

63. 출처 : http://ai2.appinventor.mit.edu/

64. 출처 : http://ai2.appinventor.mit.edu/
Properties 에 Text 에 표시될 글자를 입
력하면 바로 Viewer에 반영됩니다.

65. 출처 : http://ai2.appinventor.mit.edu/

66. 출처 : http://ai2.appinventor.mit.edu/
이번엔 Palette에 있는 을 끌어서
Viewer의 Label 밑으로 옮겨 놓으면
Components에 Button1이 추가됩니다.

67. 출처 : http://ai2.appinventor.mit.edu/

68. 출처 : http://ai2.appinventor.mit.edu/
Button 에 이미지를 넣는 방법은 먼저
Media를 추가 합니다. 적당한 이미지를
선택해 Upload 합니다.

69. 출처 : http://ai2.appinventor.mit.edu/
Upload가 완료 되면 Media에 노출되고,
Button의 Properties 중 Image 에서 선택할 수 있습니다.

70. 출처 : http://ai2.appinventor.mit.edu/
이제 이 버튼을 클릭하면 소리가 나도록
해보는데, 이를 위해서는 블록 에디터
를 통해 프로그래밍을 해야 합니다.

71. 출처 : http://ai2.appinventor.mit.edu/

72. 출처 : http://ai2.appinventor.mit.edu/
그전에 Media를 통해 적당한 mp3 파일을
업로드 합니다.

73. 출처 : http://ai2.appinventor.mit.edu/

74. 출처 : http://ai2.appinventor.mit.edu/
이번엔 Palette Media 아래에 있는 을
끌어서 Viewer로 옮겨 놓으면
Components에 Sound1이 추가됩니다.

75. 출처 : http://ai2.appinventor.mit.edu/

76. 출처 : http://ai2.appinventor.mit.edu/
Sound1의 Properties에서 Source 항목을
통해 올려둔 Media의 mp3 파일과 연결을 합니다.

77. 재료 웹브라우저만 있으면 일단 준비 끝!
블록언어
http://www.82cook.com/entiz/read.php?num=1668822

78. 출처 : http://ai2.appinventor.mit.edu/

79. 출처 : http://ai2.appinventor.mit.edu/
블록 에디터

80. 출처 : http://ai2.appinventor.mit.edu/

81. 출처 : http://ai2.appinventor.mit.edu/
앱인벤터, 블록 에디터안에서는 명령어를 쳐
서 입력하는 방식이 아니라
명령에 해당하는 블록을 선택해서
Viewer 안에서 조립하는 형태로 되어 있
습니다.

82. 출처 : http://ai2.appinventor.mit.edu/

83. 출처 : http://ai2.appinventor.mit.edu/
실제 블록처럼 서로 연결해서 사용할 수
있는 부분만 연결이 되고,
연결되지 않는 블록은 붙지 않습니다.

84. 출처 : http://ai2.appinventor.mit.edu/

85. 출처 : http://ai2.appinventor.mit.edu/
프로그래밍 언어를 몰라도
쉽게 접근할 수 있는 블록 방식의 프로
그래밍입니다.

86. 출처 : http://ai2.appinventor.mit.edu/

87. 출처 : http://ai2.appinventor.mit.edu/
명령어가 익숙해지면 끌어 놓는 방식
보다 Viewer안에서 명령어를 치면
자동완성을 통해 바로 블록을 생성할
수 있습니다.

88. 재료 웹브라우저만 있으면 일단 준비 끝!
프로그래밍
http://www.82cook.com/entiz/read.php?num=1668822

89. 출처 : http://ai2.appinventor.mit.edu/

90. 출처 : http://ai2.appinventor.mit.edu/
이제 Blocks 하단의 우리가 끌어다 놓은
Button1 을 눌러 보면 여러 명령 블록
들이 보입니다.

91. 출처 : http://ai2.appinventor.mit.edu/
제일 위에 있는 click 블록을 선택합니다.

92. 출처 : http://ai2.appinventor.mit.edu/

93. 출처 : http://ai2.appinventor.mit.edu/

94. 출처 : http://ai2.appinventor.mit.edu/
Blocks 하단의 Sound1 을 눌러 보이는
여러 명령 블록들 중에 play를 선택합
니다.

95. 출처 : http://ai2.appinventor.mit.edu/

96. 출처 : http://ai2.appinventor.mit.edu/
이제 이 두 블록을 연결해 봅시다.
Play 블록을 끌어서 click 안에다 넣습
니다.

97. 출처 : http://ai2.appinventor.mit.edu/

98. 출처 : http://ai2.appinventor.mit.edu/
이 두 블록은 연결해 사용할 수 있으므로,
경쾌한 소리와 함께 자석처럼 붙습니
다.

99. 출처 : http://ai2.appinventor.mit.edu/
이 것으로 프로그래밍은 끝났습니다!

100. 출처 : http://ai2.appinventor.mit.edu/
블록의 이름으로 눈치 채셨겠지만,
Button1을 클릭했을때 Sound1을 재
생하는 프로그램을 클릭 몇 번 으로 만
들었습니다.

101. 출처 : http://ai2.appinventor.mit.edu/
이제 앱인벤터의 매력을 아시겠지요?

102. 재료 웹브라우저만 있으면 일단 준비 끝!
라이브 테스팅
http://www.82cook.com/entiz/read.php?num=1668822

103. 출처 : http://ai2.appinventor.mit.edu/

104. 출처 : http://ai2.appinventor.mit.edu/
만든 화면과 블록을 실제로 폰으로 보면서 어떻
게 나오는지 테스트를 할 수 있으면 개발하는
데 더욱 편리할 것 입니다.
만든 결과물을 폰으로 보는 것도 간단합니다.

105. 출처 : http://ai2.appinventor.mit.edu/

106. 출처 : http://ai2.appinventor.mit.edu/
1) 먼저 컴퓨터와 안드로이드 폰이 같은
WIFI를 사용하고 있어야 합니다.
2) 안드로이드 폰에 MIT AI2
Companion 앱을 설치 합니다.

107. 출처 : http://ai2.appinventor.mit.edu/

108. 출처 : http://ai2.appinventor.mit.edu/
3) 앱을 실행 합니다.

109. 출처 : http://ai2.appinventor.mit.edu/

110. 출처 : http://ai2.appinventor.mit.edu/
4) 앱인벤터 상단 메뉴 중 를
눌러 나오는 하단 메뉴 중 를
선택합니다.

111. 출처 : http://ai2.appinventor.mit.edu/

112. 출처 : http://ai2.appinventor.mit.edu/
5) 안드로이드에 실행중인 앱에서
화면에 나온 6자리 code를 입력하거나,
Scan QR 코드를 눌러 스캔합니다.

113. 출처 : http://ai2.appinventor.mit.edu/

114. 출처 : http://ai2.appinventor.mit.edu/
6) 이제 부터 변경되는 내용은 실시간으로 안드
로이드 폰으로 실행되며 직접 확인해 볼 수 있
습니다.
이미지 버튼을 눌러서 음악이 나오는 걸 확인해
보세요!

115. 재료 웹브라우저만 있으면 일단 준비 끝!
실제 폰에 설치
http://egloos.zum.com/masksj/v/2871475

116. 출처 : http://ai2.appinventor.mit.edu/

117. 출처 : http://ai2.appinventor.mit.edu/
라이브 테스트를 통해 자신의 폰으로는 확
인이 가능하지만, 다른 사람의 폰에 설치
를 하게 할 수는 없습니다.

118. 출처 : http://ai2.appinventor.mit.edu/

119. 출처 : http://ai2.appinventor.mit.edu/
상단 Build 메뉴를 누르면 apk로 저장할 수
있는 항목이 나옵니다.

120. 출처 : http://ai2.appinventor.mit.edu/

121. 출처 : http://ai2.appinventor.mit.edu/
Apk를 만드는 시간이 조금 걸린 후에는 자
동으로 다운로드 받게 됩니다.

122. 출처 : http://ai2.appinventor.mit.edu/

123. 출처 : http://ai2.appinventor.mit.edu/
다운 받은 apk 파일을 주변 안드로이드 폰
을 사용하는 사용자에게 보내 설치하게 하
면 자신이 만든 앱을 다른 사람이 쓰게 할
수 있게 됩니다!

124. 재료 웹브라우저만 있으면 일단 준비 끝!
할 수 있는 것들…

125. 출처 : http://ai2.appinventor.mit.edu/

126. 출처 : http://ai2.appinventor.mit.edu/
상단의 Gallery 메뉴를 통하면 다른 사람들
이 만든 다양한 앱을 볼 수 있습니다.

127. 출처 : http://ai2.appinventor.mit.edu/

128. 출처 : http://ai2.appinventor.mit.edu/
너무나 쉽게 접근할 수 있는
앱인벤터이지만 어느정도 수준의
앱도 만들어 낼 수 있습니다.

129. 출처 : http://ai2.appinventor.mit.edu/
게임, 위치 기반 앱, 바코드 스캔, 음성 인식,
음악 연주, 사진 찍기, 기울기, 가속도 알
아내기, 전화 걸기, SMS 문자, LEGO 로
봇 제어, 웹 연동 등을 할 수 있습니다.

130. 출처 : http://ai2.appinventor.mit.edu/
간단하고 쉬운 도구이지만, 어떻게 사용하
느냐에 따라 활용도는 무궁무진합니다.

131. 출처 : http://ai2.appinventor.mit.edu/
앱인벤터를 통해 첫 프로그래밍, 안드로이
드앱 프로그래밍을 시작하세요!

133. 본 자료는 한빛아카데미의 책 “앱인벤터2”
의 1장 안녕야옹이를 참고하여 만들어졌
습니다.

134. 끝
이 문서는 나눔글꼴로 작성되었습니다. 설치하기