5. 앱인벤터로 동물 소리 앱 만들기(앱인벤터 소리, 스크린추가 기능)

 

 

 

이번 글에서는 앱 인벤터의 이미지, 소리를 이용해서 

동물을 설명하는 앱을 만들어보겠습니다. 

 

 

1. 앱 화면과 기능 구상하기

 

 

이번에 만들 앱은

강아지, 고양이에 대해 알아보는 간단한 앱입니다. 

 

강아지 그림이 있고, 설명 듣기를 클릭하면

강아지에 대해 설명하는 목소리와 텍스트가 화면에 나타납니다.

버튼을 클릭하면 동영상이 나오게 할 수도 있죠. 

 

또, 강아지 그림 옆에는 고양이 그림이 있고

설명 듣기를 터치하면 고양이에 대한 설명이 들리고

텍스트가 화면에 나타납니다.

 

앱의 화면은 아래처럼 만들 예정입니다. 

 

 

 

2. 데이터 수집하기

 

 

이전에 계산기 만들기와는 다르게

데이터의 수집 단계가 추가되었습니다. 

 

동물 설명 앱에서는 '이미지'와 '소리' 데이터가 필요하기 때문에

무료 이지미와 무료 소리 데이터를 다운받았습니다. 

 

 

수집해야하는 데이터를 좀더 자세히 살펴보면

1) 강아지 이미지

2) 강아지 설명 텍스트

3) 강아지 설명 사운드 파일

4) 고양이 이미지

5) 고양이 설명 텍스트

6) 고양이 설명 사운드 파일

입니다. 

 

이미지는 pixabay에서 저작권free무료 이미지를 다운받았고

소리는 네이버 클로바 더빙을 이용해 무료로 mp3파일을 만들었습니다.

 

 

 

3. 앱 화면 만들기

 

그럼 본격적으로 앱의 화면을 만들어 보겠습니다. 

 

3-1. 수평배치 레이아웃으로 그림 2개 넣기

 

전체적인 화면 구성은 레이블, 그림2개, 버튼2개, 텍스트로 볼 수 있습니다.

 

일단 수평배치 레이아웃을 넣고 이미지 2개를 넣습니다. 

이미지 칸에 사진을 넣을 것이기에 사진 2개를 추가하였는데

화면 아래쪽 미디어 '파일 올리기' 를 누르면 추가할 수 있습니다.

이미지 2개의 크기는 높이 100픽셀, 너비는 50%로 설정하였습니다.

 

강아지와 고양이 이미지 아래에

수평배치 레이아웃을 한 번 더 넣고 버튼2개를  각각 넣었습니다. 

 

 

 

3-2. 버튼 색과 속성 바꾸기

 

이제  버튼의 색과 크기 등을 바꿔보겠습니다.  

버튼의 너비는 각각 50%로 해서 2개가 합쳐졌을 때 전체 100%가 되도록 하였습니다.  

 

그 다음 버튼의 텍스트를 바꾸고

텍스트 가운데 정렬을 했습니다. 

 

마지막으로 버튼의 배경색도 바꿔주었습니다. 

 

 

3-3. 스크린 가운데 정렬

 

전체적으로 스크린에 있는 모든 것들을 가운데 정렬해주려면

Screen1을 클릭한 다음에 가운데 정렬을 누르면 됩니다. 

 

 

3-4. 사운드 추가

 

다음은 사운드를 추가해보겠습니다. 

소리를 드래그 앤 드롭해서 화면에 놓으면 끝입니다. 

 

 

 

3-5. 소리 속성 바꾸기

 

소리의 이름도 바꾸어 주겠습니다. 

저는 강아지를 설명하는 소리를 넣었는데

소리 이름을 dog_sound라고 적었습니다. 

사실 dog_sound 보다는 dog_information이 더 맞는 이름이죠.

이름 선정은 매우 중요하므로 잘 생각해서 정해야합니다. 

이상하면 바꿔도 됩니다. ㅎㅎ

 

네이버 클로바 더빙으로 만든 dog_sound.mp3파일을 넣어주고 

고양이도 같은 방법으로 넣어줍니다. 

 

 

 

 

4. 코딩하기

 

 

이제 코딩을 해보겠습니다. 

 

먼저 변수를 만들어주어야합니다. 

변수는 전역변수와 지역변수로 나뉘어지는데 

자세한 설명은 자바스크립트 변수에서 다루었습니다. 

아래 글을 한 번 살펴봐주세요. 

 JavaScript 기초 : 추상화 5. 로컬변수와 글로벌변수

 

 

이번에 사용할 변수는

모든 곳에 다 적용되어야 하는 변수이기에 전역 변수를 만듭니다. 

 

 

 

dog라는 변수, cat이라는 변수를 만들고

각각 설명하는 내용을 적어주었습니다. 

 

이제 전체 코드가 어떻게 쓰였는지 확인해보겠습니다. 

 

근데 이렇게 하면 소리가 안나겠죠. 

왜냐면 dog 소스 값에 dog.MP3가 저장이 안되었기 때문입니다. 

 

따라서 이렇게 코드를 수정해주어야 합니다. 

 

 

고양이도 마찬가지로 아래처럼 코드를 수정해주어야 합니다. 

 

그럼 코딩 작업도 끝입니다. 

 

5.  앱 업그레이드

 

 

근데 좀 심심한거 같아서 앱의 내용을 좀 업그레이드해보았습니다. 

 

'동물 울음 소리를 내주고 동물에 대한 설명을 보여주는'

'리슨애니멀'이라는 앱으로 변경했습니다. 

 

동물도 스크린1에 4마리, 스크린2에 4마리 해서 8마리를 넣어주었고

영어로 써진 동물 이름을 클릭하면 동물 울음 소리가 나오도록 했습니다. 

 

그리고 맨 아래에는 동물에 대한 설명도 나옵니다. 

 

아래 그림은 스크린1입니다. 

 

 

 

스크린1을 완성하고 나서는 스크린2를 만드는 건 쉬웠고 

복사+붙여넣기의 연속이었습니다. 

 

아래 그림은 스크린2입니다. 

 

 

 

 

각 스크린의 코딩을 어떻게 했는지도 확인해보겠습니다. 

아래 그림은 스크린1 코딩 내용입니다. 

 

 

 

소리 정지 함수를 만들고 싶었는데

함수에 파라미터를 쓰는 부분이 아직 앱 인벤터로 익숙하지가 않아

그냥 노가다를 했습니다. 

 

 

스크린2 코딩 입니다. 

 

이렇게 해서 코딩도 끝입니다. 

 

 

 

6. 앱 테스트하기

 

 

잘 작동하는지 에뮬레이터를 이용해 확인해보았습니다.

 

사실 dog소리가 나고 있을 때 cat 블록을 누르면 dog소리가 꺼져야하는데

이 부분을 미리 코딩하지 않아 놓고 테스트를 했습니다. 

테스트를 하면서 dog소리가 계속 나는 상태에서

cat 블록을 눌렀는데 dog와 cat 소리가 겹쳐 나는 불상사가 일어났습니다....

 

그래서 소리를 정지하는 블록을 넣어주게 되었고

소리를 정지하는 블록은 함수로 묶을 수 있을 것 같은데

파라미터 사용 방법이 익숙치 않아서 그냥 붙여넣기를 했습니다. 

 

지금보니 스크린2에서 버튼5를 눌렀을 때 소리 정지를 안넣었네요;;;;;;

 

 

7. 최종 '리슨 애니멀' 앱의 구동 모습

 

현재는 이런 모습입니다. 

동영상을 바로 올리고 싶었는데 잘 안올라가서

일단 gif파일과 영상 파일로 올려봅니다. 

리슨애니멀.mp4

1.58MB

 

앱인벤터를 써본지 얼마 안되었는데

아주 간단한 기능들만으로도 꽤 재미있는 앱들이 나올 것 같습니다. 

 

현재까지 살펴본 기능만으로도

동물 소리내기, 랜덤 운세 알려주기 등

다양한 앱을 만들 수 있을 것 같습니다. 

 

앱 인벤터에 신기한 기능들이 꽤 많았는데 차차 알아가며 

지금처럼 실전 예제를 만들어봐야겠습니다!