지난 글에서는 앱 인벤터를 이용해서 간단한 MP3 플레이어를 만들어봤는데 이번에는 녹음기 어플을 만들어보자. 이 녹음기 어플도 만들어봤던 MP3와 거의 비슷하게 간단한데... 단지 녹음 기능만 추가한 형식이다. 녹음 버튼을 누르면 주변 소리를 녹음하다가 STOP 버튼을 누르면 정지하면서 녹음된 내용을 저장을 하게 된다. 그리고 플레이, 일시정지, 멈춤 버튼을 이용해서 그 내용을 확인할 수 있도록 어플을 만들어보자.
일단 어플의 화면 구성을 생각해보는데 총 다섯 개의 버튼이 필요할 거 같다. 녹음, 스톱, 재생, 일시정지, 재생정지 등을 실행할 녀석들인데 넓은 화면에 이것들만 있으면 휑~할 테니 화면 중앙에는 Canvas를 넣어서 적당한 이미지로 채워보기로 하고 녹음기 어플의 디자인부터 해본다.
1. 녹음기 어플 디자인 하기
▲ 전체 화면을 세로로 3단락으로 나눠서 맨 위쪽에는 재생 관련 버튼 3개를 올리고 중간에는 적당한 이미지를 하나 넣은 후 아래쪽에는 녹음 관련 버튼을 넣기 위해서 VerticalArrangement Layout을 추가했으며 화면을 꽉 채우도록 가로 세로의 길이를 모두 Fill Parent로 했다.
▲ 그리고 위쪽부터 버튼 세 개 , Canvas, 버튼 2개를 순서대로 가로로 배치하기 위해서 HorizontalArrangement 레이아웃을 추가했으며 가로의 크기를 모두 Fill parent로 설정해서 그림처럼 화면을 채우도록 했다.(위 그림에서는 HorizontalScrollArrangeement로 잘 못 배치 한 후 캡처한 사진이니 참고하고 스크롤 안되는 걸로 똑같이 배치하자.) 이제 버튼과 Canvas를 추가한다.
▲ 이렇게 버튼과 Canvas를 배치했는데 버튼의 가로 폭을 모두 Fill parent로 하면 그림처럼 전체 화면에 딱 맞게 각각의 크기가 똑같이 만들어진다. 중앙에는 녹음기 어플에 어울리는 클래식한 이미지를 하나 구해서 추가해보자.
▲ 옛날 테이프 이미지를 구해서 Canvas의 Backgroundimage로 넣어봤는데 제법 그럴싸하다. ㅎㅎ 여기에 애니메이션 기능까지 추가해서 녹음 시작 버튼을 눌렀을 때 테이프가 돌아간다면 좀 더 그럴싸할 거 같은데 그건 애니메이션 관련 내용을 다룰 때 다시 정리해보기로 하고 이번 글에서는 움직이지 않는 이미지로 공간만 채우기로 하자.
이제 이 녹음기 어플에서 각각의 역할을 할 Component들을 추가할 텐데... 먼저 녹음을 위한 soundRecorder가 있어야 할 것이고 녹음된 내용을 재생할 Player가 있어야 할 것이다. 그리고 소리를 저장할 Sound까지 추가하면 될 것 같다.
▲ 사실 버튼에 화살표나 네모 등의 오디오 관련 이미지를 넣으면 좀 더 완벽해지겠지만 이쪽에는 소질도 없고 내가 공부하고 있는 건 코딩이기 때문에 디자인 쪽은 이 정도로 넘어가기로 하고 블록들을 이용해서 코딩을 한다.
2. 녹음기 어플 코딩하기
먼저 위쪽에 있는 재생 관련 버튼의 기능은 지난 글에서도 정리해봤기 때문에 빠르게 블록을 만들어본다.
▲ 버튼의 블록 중에서 When Button.Click~do 블록을 넣은 후 그 사이에 Sound1의 Start, Pause, Stop 블록을 쌓았다. 아래쪽에서 이 Sound1에 녹음된 내용을 저장하도록 할 것이다. 이제 나머지 두 개의 버튼에 생명을 불어 넣자.
▲ 역시 각각의 버튼을 클릭했을 때 실행될 블록을 넣은 후 그 사이에 SoundRecorder의 [시작]과 [스톱]을 알리는 내용을 끼워 넣었다. 이제 녹음, 스톱, 재생, 일시정지, 재생정지 버튼들이 모두 제 역할을 할 것이다. 마지막으로 녹음된 내용을 Sound에 저장하는 내용을 코딩하자.
▲ [When SoundRecorder.AfterSoundRecorded~ do]의 내용에서도 알 수 있듯이 녹음이 끝난 후 실행될 내용을 여기에 추가하면 된다. 그리고 그 내용은 녹음된 Sound(소리)를 불러와서 Sound1.source로 저장하도록 하고 있다는 걸 쉽게 알 수 있다.
결과를 확인해보기 위해서 앱을 실행해보는데 아래 영상은 컴퓨터에 연결된 스마트폰의 화면을 녹화한 거라서 소리까지는 출력이 안된다.ㅠ.ㅠ
▲ 하지만 실제로 앱을 만들어서 실행해보면 아주 선명한 음질로 녹음이 됐다가 재생이 된다. 혹시 이 글을 보고 계신 분 중에 만들어보실 분들은 후다닥 5분이면 만들 수 있으니까 직접 확인해보는 것도 괜찮을 것이다.
이렇게 해서 녹음기 어플을 만들어봤는데 앱 인벤터를 익힐수록 참 잘 만들었다는 생각이 든다. 솔직히 안드로이드 스튜디오에서 만들어도 그리 까다롭지는 않을 어플이지만 이렇게 블록 몇 개만으로 간단하게 만들 수 있다는 건 분명한 장점이고 어린 친구들도 쉽게 따라 만들 수 있을 거 같으니 아이들에게 코딩 교육을 생각하고 있다면 참고해볼 만 할 것이다.