1
1. Designer에서 실로폰앱 화면 구성하기 이번에는, 실로폰에 관한 앱을 만들면서 ‘Subroutine’이라는 중요한 Program 기법을 배우기로 해요. 앞에서 만든 앱을 꼭 NUC에 저장하세요. 왜냐하면, 그 앱의 ‘Designer’화면을 이용 할 거니까요. ‘Components’구역에서 ‘Blue_Button’과 ‘Red_ Button’을 제외한 component를 모두 Delete하세 요. 이들을 포함한 component이름도 ‘Two_Buttons’로 바꿔주고, 두 버튼의 text를 각각 ‘Play’와 ‘Reset’으로 수정하세요.
낮은 도에서 높은 도까지의 Keyboard 즉, 건반을 보 여주기 위해서, ‘Palette’구역에서 Button을 8개 가 져오세요. 각 Button들에 대해서는 ‘Properties’구 역에서 ‘Width’를 ‘Fill Parent’로 하고, ‘Height’는 40 pixels로 정해요. BackgroundColor도 실로폰 색으로 바꿔주세요
각 건반의 음원은, 홈페이지에서 download받으세 요. ‘Components’구역 아래에 있는 ‘Media’구역의 ‘Upload File’를 click해서 NUC에 저장된 음원 file들 을 선택하세요. 이들을 활용하려면, ‘Palette’구역의 ‘Media’카테고 리 안에 있는 ‘Sound’ component를 가지고 오세요.
2
‘Properties’구역의 ‘Minimuminterval’을 1/2초인 500ms에서 0으로 바꾸세요. Emulator를 통해서 보니 키보드 위의 text를 바꿔야 겠군요. 이제부터, ‘Blocks’화면으로 가서 Programing을 시작해요.
3
2. ‘runtime’전에 음원 file 불러오기 ‘Button1’ component를 click하여 ‘when Button1.Click do’블록을 찾아 끌고 오세요.
‘Sound1’ component의 ‘set Sound1.Source to’와 ‘call Sound1.Play’블록으로 안을 채우세요.
비어있는 socket에 ‘text string’블록을 가져와서 ‘1.wav’로 typing하세요. 이들 블록들을 4개 더 ‘Duplicate’한 후 상황에 맞게 수정하세요.
4
Emulator를 불러서 건반들을 click하면, 처음에는 Error message가 나와요. 그 다음부터는 아무런 문 제가 없어요. 매번 앱을 구동할 때마다 이런 문제가 생기면 곤란하겠죠.
그래서, ‘Screen1’을 click하여 ‘when Screen1. Initialize do’ 블록을 찾아 끌고 왔어요.
그 안에 ‘set Sound1.Source to’블록을 3개 넣었어 요. 비어있는 socket은 ‘text string’블록들로 채우 고 6, 7, 8을 typing하세요.
5
앞에서 복사한 블록을 세번 더 복사하세요. 화면 위 의 ‘Connect’메뉴의 ‘Reset Connection’을 선택 하세요.
다시 Emulator를 구동 시키면, 6,7,8번 건 반을 click할 때만 Error message없이 처음 부터 소리가 잘 들리는 것을 확인할 수 있어요. 왜 그럴까요? 우리가 사용한 음원 file들은, Android가 기 본적으로 갖고 있는 resource가 아니에요. 건 반 click과 같은 ‘runtime’상황이 발생하는 순 간 음원을 가져오게 되는데, 이 때 시간이 걸리 기 때문에 소리가 바로 나오지 못하게 되죠. 앱 이 시작하자마자 명시적으로 음원을 불러오게 하면, 이 문제가 해결돼요.
6
3. subroutine만들기 우리의 두 번째 앱에는 반복되는 것이 많아요. 이 경 우, programmer들은 따로 ‘subroutine’을 만들 어요. AI2에서는 Built-in에 있는 ‘Procedures’ component를 사용하면 되요. 우리의 첫 번째 subroutine이 call되었을 때 1부 터 8까지의 음원 file들이 assign된 후, ‘Sound1’ component가 실행되도록 해요. Subroutine안을 먼저 생각해요. ‘set Sound1. Source to’를 끌고 오세요. Socket을 메우기 위해, ‘Text’ component의 ‘join’블록을 가져 오세요.
‘join’의 왼쪽 위, 파란색 box를 ‘mutator’라고 해 요. 이 것을 click하면 ‘join’이 여러 개의 ‘string’으 로 구성되는 것을 알 수 있어요.
7
아래 socket에는 ‘text string’ block을 가져와 ‘.wav’라 입력하고,
위 socket에는 1부터 8까지의 숫자를 받기 위해 ‘Variables’ component의 ‘get’블록으로 채우 세요. ‘call Sound1.Play’블록을 밑에 붙이면, subroutine의 body가 완성!!
8
Subroutine이 언제 작동해야 하는지를 설정하기 위하여, ‘Procedures’ component의 ‘to procedure do’블록을 가져와서,
Subroutine의 body를 감싸도록해요. Subroutine의 이름을 ‘PlayNote’로 입력하세요.
블록의 ‘mutator’를 click하여, 그 안에 있는 ‘input: x’를 ‘inputs’블록 안에 넣으세요. ‘x’는 ‘number’로 수정하세요. ‘get’블록의 화살표를 click하면 ‘number’가 자동 생성되어 있어요.
9
4. subroutine 불러오기 앞에서 subroutine이 하는 역할을 program했어요. 여기서는, 어느 곳에서, 어떻게 이 subroutine을 불 러서 실행할 것인가를 program 하기로 해요. ‘Blocks’화면 왼쪽의 ‘Built-in’에 있는 ‘Procedures’ component에 이제까지 없었던, ‘call PlayNote number’라는 새로운 블록이 생긴 것을 확인할 수 있어요. 왜냐하면, 우리는 subroutine의 이름을 ‘PlayNote’로 정했고, subroutine을 부를 때와 불러 질 때, 내용을 담을 가방에 해당하는 ‘argument’의 이름을 ‘number’라고 정했기 때문이죠.
이 블록을 ‘when Button1.Clicked do’안에 두세요. Socket을 채우기 위해 ‘test string’블록을 가져와서 ‘1’로 입력하세요.
이들 블록을 일곱 번 ‘Duplicate’ 한 후에 적당한 곳 에 옮긴 후 값들을 수정하세요. Emulator를 불러와서 실행시키면, subroutine을 사용하지 않았을 때와 같 은 결과를 확인할 수 있어요. Subroutine은 그 안의 내용이 복잡할수록, 더 효력 을 발휘해요. Program에서도 ‘Reuse’, ‘Reduce’, ‘Recycling’을 가능하게 해줘요. 반복되는 부분을 따 로 빼서, program의 main부분에만 집중할 수 있 어서 ‘Readable’하다고 할 수 있어요. Program locality라는 이론에 따라 CPU안의 ‘Cache’는 자주 반복되는 일들의 성능을 올려주니, ‘Rapid’하다고 할 수 있죠. 10