[Thunkable] 썬커블로 코딩없이 녹음기 만들기 - 04. 블록코딩 / 변수 / 녹음파일 재생

안녕하세요 Sooj입니다.
오늘은 '변수'라는 것을 이용하여 녹음기의 녹음파일 재생 기능을 블록 코딩하여 녹음기 앱을 완성해 보도록 하겠습니다.

블록 코딩 하기

변수블록 (Variables)

앱을 사용하거나 제작할 때 우리는 많은 데이터를 필요로 합니다.
프로그래밍에서는 이 데이터를 기억하기 쉽게 정리하기 위해서 가상의 그릇을 만들어 데이터를 담아주는데요.
여기서 데이터를 담을 그릇을 변수라고하고, 그 그릇에 담긴 데이터를 변수값이라고 합니다.
하나의 앱을 만들더라도 여러 개의 그릇이 사용될 수 있으므로, 알아볼 수 있게 각 그릇에 이름을 붙여줍니다.
이 각 그릇의 이름을 변수명이라고 합니다.

이러한 변수는 같은 데이터를 여러 곳에 사용해야 하는 경우 유용합니다.
예를 들어 변수 A에 데이터 1을 담으면 그때부터는 A라고 변수명만 써도 변수에 담긴 데이터 1을 불러올 수 있습니다.
변수에 담긴 데이터는 변경할 수도 있는데 변수 A에 담긴 데이터를 2로 바꾸면 A라고 쓴 모든 곳의 데이터가 2로 변경됩니다.
여러 곳에 사용된 데이터를 변경할 경우 변수를 사용하지 않았다면 해당 데이터를 찾아 하나하나 수정해야겠죠~?

👉 썬커블에서 이 변수를 사용할 수 있게 해 주는 게 코어 블록의 Variables에 위치한 변수 블록입니다.

변수 선언

앞에서 데이터를 담을 그릇을 변수라 한다고 말씀드렸는데요. 그릇이 없다면 데이터를 담을 수 없겠죠?
그렇기 때문에 변수를 선언하는 과정이 필요합니다.
선언은 '내가 A라는 이름을 가진 그릇을 만들었다'라는 것을 알리는 작업을 얘기합니다.

변수 블록을 이용하여 변수 선언 먼저 해보도록 할게요.
코어 블록의 Variables에서 initialize variable 블록을 드래그 앤 드롭하여 이미 조립된 블록들의 상단에 찾기 쉽게 배치하겠습니다.

블록의 name 부분을 수정하여 변수명을 file_rec로 변경해 주겠습니다.
이 그릇에는 아직 아무것도 담기지 않았으므로 코어블록의 Logic에서 값이 없음을 뜻하는 null 블록을 드래그 앤 드롭하여 변수값 부분에 조립해 주었습니다.

이제 변수가 선언되었으니 file_rec라는 그릇에 데이터를 담을 수 있겠네요.

변수 할당

그릇이 생겼으니 이제 데이터를 담아 보겠습니다. 

🔗이전 포스팅에서 조립한 블록 세트를 다시 볼게요.

녹음 중지 블록(고급 블록) 오른쪽에 작게 붙어있는 블록들은 기능이 실행되면 반환되는 데이터들을 나타냅니다.
이것 중 오디오 파일(audio file)을 변수 file_rec에 담아주도록 할게요.

코어 블록의 Variables에서 변수에 담을 데이터를 변경해주는 set~블록을 녹음 중지 블록의 do~ 부분에 조립해 주고, 녹음 중지 블록의 데이터 중 오디오 파일을 드래그 앤 드롭하여 변수 값 부분에 조립해 줍니다.

이렇게 어떤 데이터를 변수에 담아주는 것을 변수 할당이라고 합니다.
즉, 우리는 변수 'file_rec'에 데이터 '오디오 파일'을 할당했다고 할 수 있습니다.

이제부터 file_rec라는 변수를 사용하면 앱은 변수 안에 담긴 데이터인 오디오 파일을 불러오게 될 거예요.

녹음 재생 하기

지난 글에서 만든 btn_rec의 블록 세트 옆에 btn_play의 클릭 이벤트 블록을 배치하겠습니다.
btn_play를 눌렀을 때 실행될 블록들을 클릭 이벤트 블록의 do~ 부분에 조립할 수 있습니다.

btn_play를 눌렀을 때, 앞서 btn_rec를 눌렀을 때 녹음된 파일을 재생해야겠죠?
소리 파일을 재생해주는 play~블록을 Sound에서 찾아 조립해 주겠습니다.

이제 재생시킬 파일이 필요하겠네요.
위에서 녹음된 오디오 파일을 변수 file_rec에 담아놓았으므로 Variables에서 file_rec를 드래그 앤 드롭하여 조립해 주도록 하겠습니다.

선언된 변수가 여러 개일 경우에는 블록을 클릭하여 사용할 변수를 선택할 수 있습니다.
저의 경우 선언한 변수가 file_rec밖에 없어서 목록에 file_rec밖에 표시되지 않네요.

자 이렇게 변수를 이용한 녹음파일 재생까지 블록 코딩을 완료하였습니다.

테스트 하기

썬커블 라이브 앱을 이용하여 테스트를 해봅시다.
앱을 아직 설치하지 않으셨다면 🔗여기를 참고하여 썬커블 라이브 앱을 설치하시는 걸 권장드립니다.
앱을 이용해 썬커블에서 하는 작업을 실시간으로 미리 보기 할 수 있어요.

테스트 결과 작업한 기능들이 정상적으로 동작하는 것을 확인했습니다! 완성입니다.

---

이번 프로젝트는 화면은 단순하지만 새로 알게 된 개념과 기능이 많아 약간은 어려운 시간이 아니었나 생각이 드네요!
그래도 어려운 만큼 보람 있는 결과물을 얻은 것 같습니다. 
같이 프로젝트를 진행해 주신 분들 고생하셨고 글을 읽으시는 분들도 감사드립니다.

그럼 다음 프로젝트에서 만나요!🥰