앱인벤터 형상놀이 앱

앱인벤터 형상놀이 앱

 

앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.

 

이 앱은 사용자에게 버튼을 누르면 이미지가 나오고 소리를 플레이 하는 간단한 앱이다.

코끼리 버튼을 클릭하면 코끼리 그림을 이미지에 표시하고 코리기 울음 소리를 플레이한다.

새 버튼을 클릭하면 새 그림을 이미지에 표시하고 새 소리를 플레이한다.

펭귄 버튼을 클릭하면 펭귄 그림을 이미지에 표시하고 펭귄 소리를 플레이한다.

 

자, 이제 시작해보자...

 

형상놀이 앱 디자인

아래 화면의 버튼, 코끼리, 새, 펭귄 버튼을 터치하면 각 동물의 그림이 아니고, 각 동물의 울음 소리가 플레이된다. 여기에서는 코끼리, 새, 펭귄을 준비하였다. 코끼리를 클릭하면 코끼리 코끼리 사진이 나오고, 코끼리 소리가 나온다. 새를 클릭하면 새 그림이 표시되고, 새 울음 소리가 플레이되고, 펭귄을 클릭하면 화면에 펭귄 그림이 나오면서 펭귄 울음소리가 플레이된다. 지금은 3개의 동물을 표시하지만, 확장하여 아이들의 낱말 카드 등으로 활용이 가능할 것 같다.

 

앱인벤터 형상놀이 앱 디자인

 

형상놀이 앱 기본 설계

기본으로 아래 버튼을 클릭하면 이미지와 레이블에 그림과 글자 그리고 소리를 출력한다.

이에 필요한 것이 이미지 컴포넌트, 레이블 컴포넌트, 버튼 컴포넌트 그리고 소리 컴포넌트를 활용하여 화면을 디자인하였다. 

위에 레이블 컴포넌트로 현재 그림의 글자를 표시하고, 아래 글자의 그림을 표시한다.  그리고 맨 아래에 동물들을 선택 가능한 버튼을 배치하였다.

 

형상 놀이 앱 컴포넌트

앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 화면에 버튼과 레이블 컴포넌트를 활용하여 화면을 구성하고 앱을 만들려고 한다.

 

컴포넌트 리스트

. 레이블 컴포넌트 : 동물의 이름을 표시한다.

. 이미지 컴포넌트 : 동물의 그림을 표시한다.

. 수직컴포넌트 : 이미지와 레이블을 수직으로 배치하고자 사용한다.

. 버튼컴포넌트 : 버튼 3개가 배치되고 코끼리, 새, 펭귄의 텍스트를 표시하는 버튼이다.

. 수평컴포넌트 : 버튼 컴포넌트 3개를 수평배치한다.

. 소리 컴포넌트 : 코낄, 새, 펭귄 소리를 플레이한다.

 

아래 그림은 앱이벤터로 작성한 형상놀이 앱의 디자인과 사용된 컴포넌트이다.

앱인벤터 형상놀이 앱 컴포넌트

 

레이블 컴포넌트 설정값 설정하기

선택한 동물의 이름을 표시한다.  레이블 컴포넌트 속성값은 다음과 같다.

배경색 : 분홍색

글꼴크기 : 80

높이 : 100퍼센트

너비 : 부모 요소에 맞추기

텍스트 : 코끼리 (최초값)

텍스트정렬 : 가운데

 

이미지 컴포넌트 설정값 설정하기

선택한 동물의 이미지를 표시한다. 이미지 컴포넌트 속성값은 다음과 같다.

높이 : 250퍼센트

너비 : 부모 요소에 맞추기

사진 : elephant.png

 

버튼 컴포넌트 설정값 설정하기

버튼 컴포넌트 속성값은 다음과 같다. 초기값은 다음과 같다.

텍스트 : 3개의 버튼의 텍스트 각각의 값은, 코끼리, 새, 펭귄 이다.

 

소리 컴포넌트 설정값 설정하기

동물의 울음 소리를 플레이한다.

 

코딩블럭

블록 코딩은 내가 하고자 하는 내용을 문장으로 만들어 보라. 그것을 그대로 코딩하면 된다.

 

우리가 무엇을 할 것인지 생각해보라. 간단하다.

버튼을 터치하면 레이블 컴포넌트에 글자가 표시되고, 이미지 컴포넌트에 해당 동물의 그림이 표시되고, 해당 동물의 울음소리가 플레이된다. 동물은 코끼리, 새, 펭귄으로 초기 버전을 제작할 것이며, 추가하여 동물시리즈, 새시리즈, 식물시리즈 등으로 아이들이 놀이를 하며 한글과 그림 그리고 소리로 학습하는 앱으로 확장이 가능하다.

 

. 전역변수

none.

 

'코끼리' 버튼을 클릭했을때

'코끼리' 버튼을 클릭하면 레이블에  '코끼리'가 표시되고, 이미지 컴포넌트에 'elephant.png' 사진을 설정하고 음악 소스에 'elephant.wav'을 지정하고 플레이한다.

앱인벤터 형상놀이 코끼리 버튼을 클릭했을 때

 

'새' 버튼을 클릭했을때

'새' 버튼을 클릭하면 레이블에  '새'가 표시되고, 이미지 컴포넌트에 'bird.png' 사진을 설정하고 음악 소스에 'bird.wav'을 지정하고 플레이한다.

앱인벤터 형상놀이 새버튼을 클릭했을 때

 

'펭귄' 버튼을 클릭했을때

'펭귄' 버튼을 클릭하면 레이블에  '펭귄'가 표시되고, 이미지 컴포넌트에 'penguin.png' 사진을 설정하고 음악 소스에 'penguin.wav'을 지정하고 플레이한다.

앱인벤터 형상놀이 펭귄버튼을 클릭했을 때

 

 

지금까지 형상놀이 앱을 작성하였다. 실제로 단순해 보이지만, 인지 장애 드에 형상놀이 앱은 아동이나 교육생들에게 많은 도움이 될 것으라 사료된다. 그림과 글자 그리고 소리 등에 반응하며 글자와 그림을 익히며 확장해 가는 아이들을 상상하며 추후에 점점 더 추가하기를 바란다.

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.