EPNC(월간 전자부품 뉴스) UPDATED. 2018.5.21 월 08:59

상단여백
HOME EM OPINION 칼럼
앱 인벤터 강좌 ①Technical Report
정환용 기자 | 승인 2018.05.08 14:23

[EPNC=정환용 기자] 이번 호에서는 안드로이드 애플리케이션을 개발하는 툴 ‘앱 인벤터(MIT App Inventor) 2’에 대해 알아보도록 하겠다. 앱인벤터는 사용해 본 경험이 없다면 어려운 프로그램으로 인식할 수 있지만, 블록형 코딩 시스템을 사용해 남녀노소 누구나 쉽게 프로그래밍을 할 수 있도록 만들어진 툴이다.

앱인벤터는 복잡한 프로그래밍에는 적절하지 않고, 교육용으로 사용하거나 간단한 프로토타입 제작, 프로젝트를 진행하는 데는 무리가 없는 툴이다. 또한, 별도의 프로그램을 설치할 필요가 없고, 웹에서 프로그래밍을 하고 애플리케이션을 만들어 QR코드를 이용해 모바일 기기에 설치할 수 있게 구성돼 있다. 안드로이드 스튜디오와 같은 복잡할 설치 절차도 필요 없다는 것이 장점이다.

앱인벤터를 사용한 프로젝트의 인기에 힘입어, 아이씨뱅큐가 자체 제작하는 나도메이커 시리즈 콘텐츠에도 앱인벤터를 사용해 아두이노를 원격조종할 수 있는 애플리케이션을 제작했다. 지난 호에 소개했던 나도메이커 4탄의 레인보우 워치를 조종할 수 있는 앱도 앱인벤터를 이용해 만들어 활용할 수 있다.

이번 앱인벤터 강좌에서는 앱인벤터의 기초부터 시작해서 제작법, 유저 인터페이스, 블록코딩을 하는 법, 블루투스와 Wi-Fi를 이용한 무선 통신 등을 알아본다.

 

옵션과 드래그 앤 드롭
앱인벤터의 애플리케이션 디자인은 드래그 앤 드롭을 기반으로 한다. 앱인벤터를 실행하면 [그림 2]와 같은 화면을 볼 수 있다.

[그림 2]

좌측 Palette 부분에서 필요한 요소를 끌어와 Viewer 부분에 넣기만 하면 디자인이 완성돼, 간단하게 애플리케이션을 제작할 수 있다. 아래의 QR코드를 통해 간단한 실습 동영상을 보면 좀 더 빨리 이해할 수 있을 것이다.

[그림 3]

이렇게 드래그 앤 드롭 기능을 이용해 간단하게 애플리케이션을 제작할 수 있다. 동영상에서 여러 기능들이 들어있는 요소들이 어지럽게 놓여 있는 것을 확인할 수 있는데, 여기서 Palette의 Layout 부분을 이용해 조정할 수 있다. Layout 항목에는 5가지의 요소들이 들어있다. 하나씩 확인해 보자.

[그림 4]

Horizontal Arrangement: 수평배열
스크린에 들어가는 요소들을 수평으로 배열할 수 있게 도와주는 장치다. 드래그 앤 드롭으로 Viewer에 넣으면 아래의 그림과 같은 회색 창이 생성된다. 그 안쪽으로 사용하고자 하는 기능을 가진 요소들을 넣으면 수평적으로 배열된다. 수평 배열 Layout에 Button을 넣고 오른쪽 Components를 보면 사용한 요소들이 들어가 있고, Layout 안쪽으로 Button이 포함돼 있는 것을 확인할 수 있다.

[그림 5]

Horizontal Scroll Arrangement: 수평 스크롤 배열
스크린에 들어가는 요소들을 수평으로 배열하고 터치해 스크롤할 수 있게 도와주는 기능을 하는 장치다. 하나의 Layout에 많은 기능이 들어갈 경우 스크롤 기능이 필수다. 현재의 모바일 환경에서 터치를 통해 스크롤하는 기능이 들어가 있지 않은 모바일은 거의 존재하지 않는다고 봐도 무방하다. 이를 이용해 더 많은 기능을 추가할 수 있게 도와주는 기능이다.

[그림 6]

Table Arrangement: 테이블 정렬
추가하고자 하는 요소를 원하는 위치에 정렬할 수 있도록 도와주는 기능이다. 어떻게 사용 하는지는 사진보다 [그림 7] QR코드의 동영상을 통해 보는 것이 더 빨리 이해하는데 도움이 될 것이다.

[그림 7]

 

 

 

Vertical Arrangement: 수직 배열
Vertical Arrangement는 추가하고자 하는 요소를 수직으로 정렬할 수 있도록 도와주는 기능이다.

[그림 8]

VerticalScroll Arrangement: 수직 스크롤 배열
스크린에 들어가는 요소들을 수직으로 배열하고 터치해 스크롤할 수 있게 도와주는 기능을 하는 장치다. 앞서 설명한 Horizontal Arrangement와 같은 기능을 하는데, 수직으로 배열을 해준다는 것이 차이점이다. Layout을 중복으로 사용할 수 있다는 점이 하나의 팁이다.

Horizontal Arrangement(수평 배열) 안에 Vertica Arrangement(수직 배열)을 넣고 그 안에 여러 요소들을 넣는 것을 예로 들 수 있다. 이 부분은 이해를 돕기 위해 [그림 9] QR코드로 동영상을 첨부한다.

[그림 9]

 

미디어 기능
앱인벤터를 사용해 사진이나 동영상을 촬영하고, 그 촬영물을 재생할 수 있다. 먼저 버튼을 이용한 동영상 촬영에 대해 알아보자. [그림 10]에서 버튼의 이름을 ‘클릭’으로 바꾸고 크기 조절도 Properties 부분을 이용해 바꿔준다. 필자는 좀 더 보기 쉽게 화면에 꽉 차게 만드는 걸 선호하는데, 다른 좋은 디자인 방법이 있으면 원하는 대로 제작해도 무방하다.

[그림 10]
[그림 11]

사용할 Media 파레트에 들어가 보면 촬영을 위한 Camcorder 기능이 있다. 이 기능을 클릭 앤 드래그로 추가하면, [그림 12]과 같이 캠코더 기능이 추가된 것을 확인할 수 있다.

[그림 12]

이제 블록 코딩 부분을 알아보자. 버튼을 클릭했을 때 캠코더 기능이 나오게 해야 하니, 먼저 버튼부터 위치시켜 주고 ‘Camcorder1’이라고 돼 있는 부분을 클릭하면 총 3가지의 옵션이 나오는 것을 확인할 수 있다.

[그림 13]
[그림 14]

After Recording 기능은 Camcorder1을 이용한 동영상 촬영을 마친 후의 기능을 해줄 수 있는 블록이다. 그리고 call Camcorder1. Record Video 기능이 이번 호에서 사용해 볼 기능이다.

버튼과 함께 사용해 버튼을 클릭했을 때 동영상 촬영 기능을 불러오는 것이다. 기능이 간단한 만큼 코딩 블록도 간단하다. [그림 15] QR코드로 실습 동영상을 확인해 보면, 동영상이 바로 실행되는 것을 확인할 수 있다.

 

 

캔버스 기능
캔버스 기능은 모바일기기의 터치 기능을 이용해 선, 도형과 같은 그림을 그릴 수 있는 기능이다. 이를 이용하면 그림을 그리는 것뿐 아니라 게임을 만들 수도 있고 많은 용도로 사용할 수 있다.

[그림 16]
[그림 17]

 

Palette 부분에 Drawing and Animation 부분을 클릭하면 Canvas 라는 기능이 보인다. 드래그 앤 드롭으로 안쪽으로 넣으면 [그림 17]과 같이 스크린에 뜨는 것을 확인할 수 있고, 크기를 원하는 만큼 조절해 주면 된다. 테스트에서는 스크린에 가득 채워봤다. 그림을 그리는 기능에는 그리기 뿐 아니라 지울 수 있는 기능도 있어야 한다. 버튼을 추가하고 이름을 ‘삭제’로 지정한 뒤 가로로 길게 만든다.

간단하게 디자인이 끝났으니, 블록부분을 확인해 보겠다. 테스트에서 추가한 Canvas1 기능을 확인할 수 있다. 이번에 사용할 것은 첫 번째 .Dragged 로, 터치 앤 드래그를 했을 때 특정 기능이 나오게 할 수 있는 함수다. 이 함수와 함께 블록을 [그림 20]와 같이 코딩해 준다.

[그림 18]
[그림 19]
[그림 20]
[그림 21]

 

prevX/prevY 부분은 처음 선을 그리기 위해 찍은 좌표, currentX/currentY 는 현재 포인트 된 부분이다. 그리고 터치를 놓으면 그림그리기가 끝난다. 그리고 버튼을 클릭했을 때 캔버스가 지워지는 기능을 추가해 준다.

이제 캔버스 기능을 사용할 준비가 다 됐다. QR코드로 변환해 모바일 환경에서 실행해 보면, [그림 22] QR코드의 영상처럼 그리기 기능이 작동하는 걸 확인할 수 있다.

[그림 22]

 

글: 전자 엔지니어 전문몰 아이씨뱅큐(ICbanQ)

#기술#기고#ic뱅큐#icbanq#인벤터#앱인벤터#강좌#블록코딩#코딩#애플리케이션#모바일#수평#배열#스크롤#촬영#영상#캔버스

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

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

정환용 기자의 다른기사 보기
icon인기기사
여백
여백
여백
여백
여백
여백
Back to Top