EPNC(월간 전자부품 뉴스) UPDATED. 2018.11.13 화 17:13

상단여백
HOME EM OPINION 칼럼 뉴스레터
블록코딩으로 간단한 피아노 앱 제작하기앱 인벤터 2 강좌 ③
정환용 기자 | 승인 2018.06.18 14:28

[EPNC=정환용 기자] 안드로이드 애플리케이션을 개발하는 툴 ‘앱 인벤터 2’는 사용해 본 경험이 없다면 어려운 프로그램으로 인식할 수 있지만, 블록형 코딩 시스템을 사용하기 때문에 누구나 프로그래밍을 쉽게 할 수 있도록 만들어진 개발 툴이다. 교육용으로 개발돼 복잡한 프로그래밍에는 적절하지 않지만, 간단한 프로토타입 제작, 프로젝트를 진행하는 데는 무리가 없다. 또한, 별도의 프로그램을 설치할 필요가 없고, 웹에서 프로그래밍을 하고 만든 애플리케이션을 QR코드로 모바일 기기에 설치할 수 있다. 지난 호에 이어 앱 인벤터 2의 다양한 기능에 대해 알아보자.

파일 생성과 불러오기
간단한 텍스트를 입력해 sample.txt 파일을 만들어, 앱 인벤터 스토리지의 파일을 사용해 보자. 파일을 생성할 수 있게 되면 나중에 데이터베이스 관리도 앱 인벤터로 할 수 있고, 그렇게 되면 좀 더 복잡한 시스템도 구현할 수 있게 된다. 기초부터 차근차근 배워보자.[그림 1]

[그림 1]

이번 디자인은 간단하게 Button, Label, TextBox를 사용할 예정이다. 한 번 추가하고 각 항목 별로 이름도 지어보자.[그림 2]

[그림 2]

먼저 텍스트 입력 안내를 위한 Label을 추가하고, 텍스트를 입력하기 위해 Label 밑에 TextBox를 추가한다. 파일 제목 입력 안내를 위한 Label도 추가한 뒤, 파일 제목 입력을 위해 Label 밑에 TextBox를 추가하자.[그림 3]
그리고 Storage에 가서 파일을 끌어와 스크린에 추가시켜 주면 된다.

[그림 3]

앱 인벤터의 파일(File)이란 파일 저장과 검색을 위한 Non-visible 구성요소다. 이 구성요소를 사용해 장치에 파일을 쓰거나 읽을 수 있다. 기본 동작은 응용프로그램과 연결된 개인 데이터 디렉토리에 파일을 쓰는 것이다. 저장되는 경로는 /sdcard/Appinventor/data로, 이 경로에 파일을 *.txt 형태로 저장하게 된다. 예를 들어 ‘myfile.txt’로 저장하게 되면 /sdcard/myfile.txt에 파일이 저장되는 형태다. [그림 4]

[그림 4]

블록코딩 부분을 보자. 우선 파일을 저장하기 위해 전역변수 my_text, my_file을 생성한다. [그림 5]

[그림 5]

그리고 입력 버튼을 클릭했을 때, 앞서 지정해 준 전역변수의 텍스트박스 안에 입력한 텍스트가 입력될 수 있는 초기화 함수를 추가한다. [그림 6]

[그림 6]

그리고 File1 안에 있는 .SaveFile 함수를 불러온다. 버튼을 클릭하는 이벤트가 발생할 때, 전역변수 my_text에 초기화돼 있는 텍스트틑 불러오고, my_file에 입력된 텍스트대로 .txt 파일을 생성, 저장하는 순서다. 여기서는 별도의 폴더를 지정하지 않고 ‘/’만 추가했다. 이런 경우 모바일 폴더의 최상위 카테고리에 저장된다. 데이터베이스 구축에 중요한 역할을 할 수 있는 기능을 배워봤다.

QR 코드를 통홰 동작 영상을 확인해 보자. 입력한 텍스트가 저장되는 것을 확인할 수 있다.

 

 

 

 

 

피아노 앱 제작하기

[그림 7]

▲앱 인벤터로 피아노 연주를 할 수 있는 애플리케이션을 만들어 보자. 앱 인벤터 2에서 새 프로젝트를 생성하고 건반을 제작해 보자. [그림 7]

[그림 8]

▲기본 화면은 세로인데 피아노 건반을 만들기 위해서는 화면을 가로로 바꿔야 한다. 우측의 붉은색 네모 안에 스크린 방향을 ‘가로’로 선택해 팔레트를 가로로 변경한다.[그림 8]

[그림 9]

▲팔레트 레이아웃에서 수평배치 아이콘을 마우스로 끌어서 뷰어 창에 적용한다. 그리고 우측의 높이와 너비를 ‘부모에 맞추기’로 맞춰 주면 위 화면과 같이 꽉 찬 뷰어 창으로 적용할 수 있다.[그림 9]

[그림 10]

▲팔레트에서 버튼을 뷰어 창으로 가져와 추가해 준다. 도, 레, 미, 파, 솔, 라, 시, 도 8개의 건반을 위해 8개의 버튼이 필요하다. 여기서 문제는 텍스트의 버튼이 자리 잡을 곳이 모자라는데, 위와 같이 ‘부모에 맞추기’를 이용해 조절하면 된다.[그림 10]

[그림 11]

▲컴포넌트에서 버튼 하나를 누르고, 높이와 너비를 ‘부모에 맞추기’를 선택하면 된다. 버튼 1에서 6까지 같은 작업을 해주면 버튼이 보기 좋게 배열된다. 이후 2개의 버튼을 추가해 총 8개를 생성한다.[그림 11]

[그림 12]

▲이 작업을 해주면 건반 부분에 ‘버튼x 텍스트’란 문구가 입력된다. 이 글씨를 바꿔보자.[그림 12]

[그림 13]

▲버튼 하나를 클릭하고 우측 하단에 ‘텍스트’라고 적힌 부분을 ‘도’로 고쳐준다. 고치고 나면 뷰어 창의 글씨도 같은 내용으로 바뀐다. [그림 13]

[그림 14]

▲건반처럼 글씨를 보기 좋게 바꿨다. 모바일 애플리케이션이기 때문에 색감도 다양하게 적용해 보자. [그림 14]

[그림 15]

▲색을 바꾸고 싶은 버튼을 클릭하고, 배경색과 텍스트 색을 원하는 색으로 바꿀 수 있다. [그림 15]

[그림 16]

▲임의로 버튼 색과 텍스트 색을 바꿨다. 이번에는 버튼을 눌렀을 때 소리를 내도록 버튼마다 피아노 소리를 적용해야 한다. 피아노 소리 mp3 파일은 온라인에 음계 별로 사운드 파일이 많이 올라와 있다. 해당 파일을 세트로 받아 사용하면 된다. [그림 16]

[그림 17]

▲팔레트에서 미디어→소리 아이콘을 뷰어 창에 8개 추가해 준다. [그림 17]

[그림 18]

▲소리 → 소스 → 파일 올리기를 순서대로 클릭하고, 버튼마다 각각 맞는 계이름의 사운드 파일을 넣으면 된다. 예제에서는 소리 1에 도, 소리 2에 레 등의 순서로 파일을 넣었다. [그림 18]

[그림 19]

▲다음은 각 버튼에 맞는 이벤트를 넣을 차례다. 버튼을 클릭했을 때 각각의 버튼에 저장된 음계 사운드 파일을 실행해 주는 코딩이다. 다른 프로젝트보다는 비교적 복잡하지 않아 수월하게 제작할 수 있다. [그림 19]

▲마지막으로 지금까지 제작한 애플리케이션을 스마트폰에 다운로드해 실행해 보자. 블록 페이지 상단에서 빌드 → 앱(.apk용 QR 코드 제공)을 누르면 QR 코드가 나온다. 스마트폰의 QR 코드 스캐너를 이용해 앱을 다운로드받아 설치하면 된다. 이 QR 코드는 완성된 애플리케이션 코드로, 당장 확인이 어렵다면 QR 코드를 통해 직접 설치해 실행해 보자.

 

 

 

 

작성: 전자 엔지니어 전문몰 아이씨뱅큐(ICBanQ)

#icbanq#아이씨뱅큐#애플리케이션#블록#코딩#인벤터#강좌#피아노#앱#제작#교육#프로그래밍#팔레트#레이아웃

정환용 기자  hyjeong@epnc.co.kr

<저작권자 © EP&C News, 무단 전재 및 재배포 금지>

정환용 기자의 다른기사 보기
icon인기기사
PREV NEXT

여백
여백
여백
여백
여백
icon
여백
여백
여백
신제품
여백
Back to Top