A01. 앱인벤터(App Inventer)를 활용한 어플개발하기

해당 카테고리에서는 앱 인벤터(App Inventer)를 이용하여 어플리케이션을 만드는 과정을 담아보려고 한다.

인간이 4차산업혁명시대에 도달함에 따라 초등학교에서부터 코딩교육을 실시하는 추세이다.

우리가 사용하려는 앱 인벤터는 블록코딩의 일종으로 간단하고 빠르게 어플리케이션을 제작을 할 수 있다.

 

1. App Inventer 사용하기

앱 인벤터는 미국 MIT대학에 서버를 두고 있으며 사용을 하기 위해서는 구글아이디와 크롬이 필요하다.

사파리는 실행은되지만 변화시 리프레시가 자주 일어나서 불편하다.

 

 

클릭 시 앱인벤터 홈페이지로 이동

 

 

 

홈페이지 화면

 

로그인 후에 좌측 상단의 Create Apps! 버튼을 클릭하면 사용이 가능하다.

 

 

2. 간단한 앱을 제작해보자.

지금 부터 우리가 만들어야 할 앱의 기능을 생각하여보자!

앱 제작을 떠나서 무언가 프로그램을 제작할 때 따라야하는 플로어 차트는 다음과 같다.

 

간단하게나마 그린 플로어 차트, 세부적인 단계절차로는 보면 안된다. 

 

 

이번 글에서 만들어볼 기능은 버튼을 누르면 글자가 나오며 읽어주는 앱을 한번 만들어보겠다.

우리가 앱에다가 넣을 가능들은 다음과 같다.

 

● 버튼을 누르면 'hello'라는 글자가 나타나며 읽어주는 기능

● 버튼을 '길게' 누르면 'HELLO'라는 글자가 나타나며 읽어주는 기능

● 스마트폰을 흔들지 글자가 지워지기

 

 

3. 디자인을 해보자

우선 기능 중에 '버튼'을 누르면 실행되어야 하는 기능이 있다. 이를 위해서 버튼을 넣어주자.

 

버튼은 좌측의 User Interface에서 선택하여 드래그해 집어 넣을 수 있다.

집어넣었지만 위치가 옮겨지지 않고 좌측상단에서 고정되어 있다.  버튼을 중앙에 넣기 위해서는 버튼을 누르고 우측에 있는AlignHorizontal과 AlignVertical을 Center로 바꾸어주자.

 

다음으로는 버튼의 텍스트를 바꿔보자. 텍스트를 바꾸는 것도 간단하다 우측의 Text항목을 원하는 글자로 바꾸어주면 된다.

배경색도 심심하니 주황색으로 바꾸어주자. 이와 같이 컴포넌트들의 해당 속성을 바꾸려면 우측 Properties를 확인해보자!

 

그리고 버튼을 누르면 텍스트가 나올 수 있도록 Label 컴포넌트를 넣어주어야한다. 좌측 User Interface에서 찾아넣자.

 

 

 

Label 오브젝트를 넣어보니 빈 Label이 아니고 Text for Label1이라고 쓰여져 있다. 우리는 버튼이 눌렸을 때 글자가 나와야하므로 우측 Properties에서 지워주도록 하자. 디자인은 이쯤이면 된 것 같고 이제 기능을 넣기 위해 코딩으로 넘어가겠다.

 

 

4. 코딩

제일 먼저 스마트폰을 흔들 때 인식할 수 있도록 Sensor 항목의AccelerometerSensor을 넣어주고,

버튼을 누르면 스마트폰에서 글자를 읽을 수 있도록 Media 부분의 TextToSpeech도 넣어 주도록 하자.

 

 

 

 

이로서 블록 코딩을 위한 사전 준비는 끝났다. 이제 블록코딩을 해보자 블록코딩은 우측상단의 Blocks를 누르면 할 수 있다.

 

해당 화면에서 블록코딩이 가능하다.

 

 

좌측에 보면 아까 디자인에서 넣어두었던 컴포넌트들을 확인할 수 있다. 컴포넌트를 누르면 각각의 컴포넌트들이 사용할수 있는 기능들의 블록이 나온다. 이 블록들을 가지고 코딩을 해보자. 기능들의 설명과 코딩과정을 시간관계상 생략하도록 하겠다.

 

블록코딩의 완성본은 다음과 같다.

5. 테스트 

테스트는 상단의 Build 버튼을 통해 빌드 후 가능하다. 본인이 안드로이드 휴대폰을 사용중이라면 .apk파일을 다운 받아 휴대폰에 설치하여 작동여부를 확인해 보자. 만약 안드로이드가 아닌 IOS환경을 사용하는 아이폰 유저의 경우 NOX플레이어를 설치한 후 가상환경에 설치하여 확인을 해보자.

 

 

결론적으로는 잘 작동하는 것을 확인해 볼 수 있었다. 앱인벤터를 사용하여 보니 무궁무진한 잠재력을 가지고 있는 듯하다.

각 컴포넌트 별로 사용할 수 있는 컴포넌트들도 많았고 무엇보다도 비전공자가 활용하기에 UI도 한결 깔끔하고 직관적이다. 

어플리케이션을 구동하는 휴대폰이라는 환경은 작은 컴퓨터라고 생각하면 되겠다. 그 작은 컴퓨터에 각 종 센서와 모듈까지 달려있으니 활용방안이 무궁무진하다. 앞으로 앱인벤터를 사용하여 만들 수 있는 프로그램에 대해 기대가 많이 된다.

 

 

 

 

 

잘못된 정보나 오류, 오타, 독자 입장에서의 수정사항 및 피드백 환영합니다. 

E-mail : jhmh0226@gmail.com