EPNC(월간 전자부품 뉴스) UPDATED. 2018.9.19 수 10:10

상단여백
HOME EM OPINION 칼럼
앱 인벤터 2 강좌 ②Techniocal Report
정환용 기자 | 승인 2018.05.08 14:01

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

지난 호에 이어 앱 인벤터 2의 다양한 기능에 대해 알아보자. 캔버스를 이용해 랜덤 함수를 사용하는 법도 함께 배우는데, 랜덤 함수는 이 경우가 아니더라도 많은 부분에 사용되니 한 번쯤은 실습해 놓으면 앱 인벤터를 사용할 때 도움이 된다.

 

색 입히기와 랜덤 기능

캔버스 기능을 이용해 랜덤 함수와 캔버스에 색을 입혀보는 방법을 배워보자. 랜덤 기능은 캔버스뿐만 아니라 여러 가지 방법으로 사용할 수 있는데, 우선 붉은색과 푸른색, 녹색을 넣는 법을 보겠다.

▲지난 호에서 만들었던 화면이다. 여기에 ‘Layout’을 이용해 버튼을 배치해 보도록 하겠다.

▲’HorizontalArrangement’를 배치하고 가로 길이를 창 크기에 맞게 설정해 준다. 그리고 안에 붉은색, 푸른색, 녹색의 버튼 3개를 각각 넣어주고, 이름을 변경시킨다.

▲지난 호에서 봤던 익숙한 블록코딩 창에 방금 생성한 버튼 3개를 클릭했을 때 동작하는 블록을 추가해 준다. 그리고 ‘Canvas1’을 보면 색을 넣을 수 있는 기능이 있는 것을 확인할 수 있다.

▲’set Canvas1. PaintColor to’이 부분을 끌어와 각각의 블록에 추가해 준다.

▲그리고 왼쪽의 ‘Blocks’ 부분을 살펴보면 어떤 색으로 변환시킬지 색을 변화시킬 수 있는 블록이 있다. 어떤 컬러가 있는지 시각으로 잘 나와 있는 것을 확인할 수 있다.

▲아랫부분에 있는 해당 블록을 이용해 RGB값으로도 변환할 수 있다. 이 부분이 이번 호에서 랜덤 값을 주게 될 블록 부분이다. 우선 붉은색과 푸른색, 녹색을 만들어 놓은 블록에 추가해 보자.

▲색을 넣었으면 이제 랜덤 색상 변환 버튼을 삭제와 ‘Layout’ 아래쪽에 만들어 줄 차례다.

▲다시 블록코딩 쪽으로 넘어가, 이제 랜덤 버튼에 랜덤 색상을 넣을 블록을 만들어 줄 차례다. 우선 Random 버튼을 클릭했을 때 실행되는 블록을 추가해 준다.

▲그리고 ‘Canvas1’의 아래쪽에 위와 같은 방식으로 ‘set Canvas1. PaintColor to’를 추가해 준다.

▲‘Colors’ 부분에서 RGB값을 이용해 색을 선택하는 블록을 가져와 붙여준다.

▲기본값으로 255, 0, 0이 들어가 있다. Red, Green, Blue 순서대로 들어가 있으니 현재는 붉은 색이 나온다. 그러나 여기에는 랜덤 값을 줄 예정이니 이 부분은 삭제하도록 하자.

▲이제 ‘Blocks’의 ‘Math’에 들어가 보면 random이 들어간 블록이 많이 있다. 이중에서 random integer from x to x 블록을 사용한다. 이 블록은 정수 값을 지정해준 수에서 지정해준 수까지 랜덤으로 나오게 해준다. RGB값은 0에서부터 255까지니, 0과 255를 넣어주자.

 

나침반과 센서

앱 인벤터2의 모바일 센서 기능을 사용해 보자. 보편화된 스마트 모바일 기기는 다양한 센서를 장착하고 있다. 이중 본 강좌에서 사용할 센서는 방향 센서(Orientation Sensor)다. 방향 센서를 사용해 간단한 나침반을 만들어 보자.

▲PPT로 나침반 그림을 간단히 그려 저장한 뒤 앱 인벤터에서 캔버스를 스크린에 추가하고, 크기를 최대로 넓혀준다. 그리고 왼쪽의 ‘ImageSprite’ 기능을 추가해 준다. ImagaSprite 기능은 캔버스 위에 특정 이미지를 삽입해 그 이미지가 캔버스 위에서 움직이거나 다양한 액션을 할 수 있게 도와준다.

▲다음은 위 그림에서 Media → Upload file...을 클릭해 저장해 둔 이미지를 추가해 준다. 그리고 ‘ImageSprite 1’ 객체를 클릭하고, 우측의 ‘Properties’에서 ‘Picture’를 클릭해 사용할 이미지를 적용해 준다. 강좌에 사용하기 위해 만든 이미지의 크기는 200x180 정도인데, 너무 크면 캔버스를 벗어날 수 있으니 적당한 크기로 만들자.

▲’Palette’의 ‘Sensor’ → ‘OrientationSensor’를 스크린에 추가해, 나침반의 핵심인 센서를 추가해 준다. 다음으로 블록코딩으로 넘어가, 추가한 ‘OrientationSensor’ 안에 포함돼 있는 ‘when OrientationSensor.OrientationChanged’를 사용해 나침반을 표현해 보자. 그리고 나침반 그림에 표현하기 위해 추가한 ‘ImageSprite1’의 ‘.Heading to’를 추가하고, ‘get azimuth’를 붙여준다.

사실 이 기능까지만 추가하면 나침반으로 이용하는 데는 불편함이 없다. 하지만 좀 더 나은 사용을 위해 방위각을 표현해 보자. ‘Screen1’ 안에 있는 ‘.Title to’ 함수를 사용해 스크린 타이틀에 방위각을 표현해 보겠다.

▲’Text’를 추가하고 ‘get azimuth’를 추가해, 방위각을 변동시켜 초기화 해주면 된다.

이번 호에서는 앱 인벤터 2의 캔버스 기능과 랜덤 함수를 이용해 색을 표현하는 것과 모바일 기기 센서를 사용해 나침반을 만들어 봤다. 모바일 센서는 앱 인벤터 2와 여러 방면에서 많이 사용하는 기능이므로 배워두면 활용할 일이 많을 것이다. 다음 호에서는 파일의 생성·불러오기와 음악 앱을 만드는 법을 설명하겠다.

 

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

#기술#기고#ic뱅큐#icbanq#인벤터#앱인벤터#강좌#블록코딩#코딩#애플리케이션#모바일#랜덤#캔버스

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

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

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

여백
여백
여백
여백
여백
여백
Back to Top