본문 바로가기
IT 토크/모바일앱만들기

01 앱 인벤터로 나만의 앱 만들기[터치하면 말하는 앱만들기]

by 매니마니 2018. 7. 12.
반응형

스마폰 사용이 pc사용 빈도를 넘어선지

 

오래되었습니다. 4차산업혁명을 맞아 코딩열풍이

 

불고 있습니다. code.org, 스크래치, 엔트리 등

 

블록을 사용하여 코딩을 하는 블록코딩툴들이 많습니다.

 

그중 스크래치와 엔트리가 대표적입니다.

 

스크래치는 MIT 대학 미디어 랩에서 만들었습니다. 그와 유사한

 

모바일앱을 만드는 도구가 있어 소개합니다.

 

기존 블록코딩을 접목한 프로그래밍 도구입니다.

 

블록을 사용하기 때문에 초보자라도 쉽게 사용이 가능합니다.

 

앱 인벤터를 하기 위해서는 반드시 구글 크롬브라우저을

 

사용해서 접속하셔야 합니다.


 



 

구글 크롬 브라우저 https://www.google.co.kr/chrome/index.html

앱 인벤터의 장점으로는 초보자도 쉽게 사용할수 있다.

 

스마트폰에서 지원하는 센서 즉 음성인식, 구글맵, 소리,전화걸기

 

카메라, GPS, 스피커등을 사용할수 있습니다.

 

 

이번 포스트팅은 3파트로 진행됩니다.

 

첫번째는 사이트접속, 두번째는 스마트폰과 연결, 세번째는 코딩작업

 

동영상을 시청하고 내용을 학습합니다.



 

 

첫번째 인벤터로 나만의 앱 만들기를 시작하기

 

검색창에서 앱인벤터라고 검색합니다.

 

앱인벤터 홈페이지  http://appinventor.mit.edu

 

메인화면에서 앱 만들기 버턴을 클릭합니다.

 

 

 

새프로젝트 시작하기를 버턴을 누르면

 

아래의 화면이 보입니다. 만약 영문으로

 

화면이 보이시면 영어를 한글로 변환할수 있으니

 

아래화면을 참고 합니다.

 

 

새 프로젝트 만들기에서

 

프로젝트이름은 반드시 영문 대문자를 사용해야

 

합니다. 그렇지 않으니 에러 발생합니다.

 

Talk 라고 프로젝트명을 입력하고

 

사용자 인터페이스에서

 

버턴을 아이콘을 클릭해서 뷰어 화면으로

 

가져옵니다. 첫파트가 끝났습니다.

 

다음은 두번째 파트로 동영상을 시청하고

 

학습을 합니다.

 

 

 

 

 

 

 

앱 인벤터로 나만의 앱 만들기 두번째 파트는 스마트폰과 연결하기

이 번파트에서는 우리가 작업을 한 결과물을

 

보기위해서 스마트폰과 연결하는 작업을 합니다.

 

상단메뉴의 연결을 선택합니다.

 

 

 

3가지 항목이 나옵니다. AI컴패니언, 에뮬레이터, USB 가 있습니다.

 

제일 안정적인 것은 AI 컴패니언 입니다.

 

이번 포스팅에서는 AI 컴패니언을 주제로

 

포스팅을 진행합니다.

 

AI 컴패니언 을 선택할때 고려해야 될 사항이

 

같은 와이파이 환경에 있어야 한다는 말입니다.

 

다시말해서 스마트폰과 연결할 PC가 같은 환경에 있어야 합니다.

 

그리고 에뮬레이터는 스마트폰이 없을때 작업환경을 만들어줍니다.

 

마지막으로 usb 는 인터넷이 안되는 환경에 적합한 항목입니다.

 

이부분은 다음 포스팅에 스마트폰 연결 부분만을 별도로

 

포스팅 하도록 하겠습니다.

 

 

 

(참고사항)에뮬레이터나 usb 사용자는 받드시 PC에 아래의 프로그램을

 

설치하고 실행한후에 위 연결을 선택하셔야 합니다.

 

http://appinventor.mit.edu/explore/ai2/windows.html

 

 

 

 

 

 

스마트폰으로 가셔서 어플을 설치해야 합니다.

 

구글 스토어에서 MIT AI2 Companion 을

 

설치하셔야 합니다.

 

 

 

다음과정은 화면에서 연결을 선택하시고

 

AI컴패니언이 나오면 스마트폰에서 MIT AI2 Companion어플을 실행하여

 

컴퓨터화면의 바코드를 어플로 스캔합니다.

 

이과정이 끝나면 PC화면 즉 작업화면을 스마트폰에서도

 

보실수 있습니다.

 

 

 앱 인벤터로 나만의 앱 만들기 세번째 파트

 

터치하면 말하는 앱 만들기

 

 

왼쪽에 팔레트에서

 

사용자인터페이스에서 버튼을 선택하여

 

뷰어 화면으로 끌어 놓는다.

 

그다음은 미디어의 음성변환 아이콘을

 

뷰어화면으로 끌어놓는다.

 

버튼은 화면에 보이는 아이콘이고

 

음성변환은 화면에서 보이지 않고 화면 아래에

 

표시됩니다. 화면을 터치하면 말하는 앱의 화면구성이

 

끝났습니다. 이제 코딩을 해야 하는 단계로 넘어갑니다.

 

앱 인벤터에서는 두가지의 모드가 있습니다.

 

디자이너모드와 블록 모드로 나뉩니다.

 

디자이너 모드에서 작업이 끝나면 블록 모드로 가서

 

코딩으로 액션을 주게 됩니다.

 

 

블록모드에서

 

screen1에 보시면 버튼과 음성변환이 보입니다.

 

버튼을 선택하시면 여러가지 블록이 보입니다.

 

그중에서는 버튼1을 클릭하면 이라는 블록을

 

선태합니다. 다음으로 음성변환 을 선택합니다.

 

호출 음성변환 말하기 메시지를 선택합니다.

 

이제 두개의 블럭이 만들어 졌습니다.

 

다음은 공통블록에서 텍스트를 선태해서

 

터치했을때 음성으로 나오는 말을 텍스트로 쳐줍니다.


참고사이트  http://appinventor.mit.edu