앱인벤터 도화지 앱

앱인벤터 도화지 앱

 

앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.

 

이번 튜터리얼은 도화지 앱이다. 캔버스 위에 낙서하는 앱을 만들어보자.

 

이번에는 캔버스 컴포넌트에 낙서하는 앱이다.

기본 개념은 다음과 같다.

캔버스 컴포넌트 위에 손으로 스마트폰 화면을 터치하거나 드래그하면 선을 긋는 간단한 프로그램이다.

여기에 좀더 추가해서 색을 추가해서 다양한 색을 활용하여 낙서를 해보자.

 

자, 이제 시작해보자...

 

. 도화지 기본 설계

캔버스 컴포넌트를 활용한다.

캔버스 컴포넌트에서 제공하는 드래그 이벤트, 터치 이벤트를 활용하여 캔버스 위에 선을 그려보자.

색을 설정하기 위해 이전에 색 설정하였던, 슬라이더를 활용하여 다양한 색을 설정하고 낙서를 해보자.

슬라이더 3개를 활용하여 색을 만들것이다. 빨강, 초록, 파랑 슬라이더를 통해 색을 만들고 캔번스에 색을 설정할 것이다.

 

. 도화지 디자인

앱인벤터의 도화지앱의 화면 디자인은 아래 그림과 같다.

캔버스 컴포넌트와 아래 3개의 슬라이더 컴포넌트, 레이블 1개 그리고 수평배치 컴포넌트를 활용하여 디자인하였다.

앱인벤터 도화지앱 디자인 화면

 

컴포넌트

앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 화면에 캔버스 컴포넌트와 슬라이더 컴포넌트 3개, 레이블 컴포넌트 그리고 수평배치와 수직배치 컴포넌트를 사용할 것이다. 

 

캔버스 컴포넌트 설정값 설정하기

캔버스 컴포넌트에 알고 싶으면 아래 글을 참고하세요

앱인벤터 캔버스 컴포넌트

앱인벤터 캔버스 컴포넌트

캔버스의 높이 : 부모 요소에 맞추기

캔버스의 너비 : 부모 요소에 맞추기

 

캔버스 컴포넌트에서 드래그하면 선을 그리는 작업을 할 것이다.

캔버스 블록에서 드래그 이벤트 블록과, 선그리기 블록을 활용하여 선을 그릴 것이다.

 

슬라이더 컴포넌트 설정값 설정하기

슬라이더 컴포넌트를 활용하여 색을 만들 것이다. 

슬라이더 관련해서 더 자세한 사항을 알고 싶은 아래 글을 참고바란다.

슬라이더를 3개의 슬라이더를 사용한다. 빨강/초록/파랑 슬라이더이며 최소/최대값은 0~255값을 설정한다.

그리고 3개의 슬라이더를 조합하여 색상을 만들어 캔버스의 페인트색상을 설정한다.

 

 

앱인벤터 슬라이더 컴포넌트

앱인벤터 슬라이더 컴포넌트

 

 

색상 컴포넌트 설정값 설정하기

색상 컴포넌트는 기본으로 제공하는 블록이다.

색상 컴포넌트에서는 색상만들기 블록을 사용하여 색상을 만들 것이다.

아래 그림처럼 빨강, 초록, 파랑 슬라이더의 섬네일위치값을 활용하여 색상만들기를 통해 색을 만들어서 레이블의 배경색과 캔버스의 페인트색상으로 설정한다.

앱인벤터 도화지앱 색상컴포넌트 색상만들기 블록

 

레이블  컴포넌트 설정값 설정하기

레이블 컴포넌트는 보통 글자를 표시하기 위한 목적으로 사용하는데, 이번 앱에서는 레이블의 배경색을 활용하여 색을 표현하는데 사용한다.

레이블의 배경색을 설정하여 사용자에게 현재 설정한 색이 어느 색인지를 실시간으로 알려준다.

 

설계 아이디어

기본 생각

도화지앱의 기본 생각은 캔버스 위에 도화지처럼 손을 터치하여 드래그하면 선을 그리는 앱이다.

이에 필요한 컴포넌트로 캔버스 컴포넌트이다.

컴포넌트의 블록을 살펴보면 캔버스 위에 드래그할 때 이벤트 처리하는 블록이 존재하며

드래그하면 캔버스 위에 선을 그리는 '선그리기' 블록을 활용하면 가능할 것 같다.

아래는 캔버스의 블록들 중 '드래그' 블록과 '선그리기' 블록을 표시하였다.

앱인벤터 캔버스컴포넌트 드래그 블록

앱인벤터 캔버스컴포넌트 선그리기블록

 

코딩블럭

블록 코딩은 정말 간단한다.

우리가 무엇을 할 것인지 생각해보라.

캔버스 컴포넌트를 배치하고, 

스마트폰 화면 위에 손을 드래그한다.

-> 캔버스에서 드래그 이벤트에서 원하는 작업을 하면 된다.('드래그' 블록)

-> 우리는 여기에 선을 그릴 것이다.('선그리기' 블록)

 

추가로 선을 다양한 색을 추가해 볼 것이다.

슬라이더를 활용하여 선의 색을 설정할 것이다.

 

. 전역변수

없음.

 

 

. 드래그 (드래그 이벤트 때 선 그리기)

캔버스 컴포넌트 위에 드래그 이벤트가 발생하면 호출되는 이벤트 블록이다.

이 때, 캔버스 위에 이전의 위치(x,y)에서 현재의 위치(x,y)로 선을 그리면 된다.

 

앱인벤터 도화지앱 드래그 선그리기 블록

 

. 위치가 변경되었을때(슬라이더 바 위치 변경되면 색을 변경한다.)

빨강, 초록, 파랑 스프너의 바의 위치가 변경되면 선의 색을 변경한다.

여기서는 레이블의 배경색을 변경하여 사용자에게 현재 변경된 색을 알려준다.

또한 캔버스의 페인트색상을 변경하여 선을 그릴 때 색상을 변경한다.

앱인벤터 도화지앱 빨강슬라이더 컴포넌트 위치가변경되었을 때 블록

 

앱인벤터 도화지앱 초록슬라이더 컴포넌트 위치가변경되었을 때 블록

 

앱인벤터 도화지앱 파랑 슬라이더 컴포넌트 위치가변경되었을 때 블록

 

 

실행결과 화면

 

앱인벤터의 도화지 앱을 작성하였다. 실행 결과 화면은 아래와 같다. 

 

첫번째 화면은 앱이 처음 구동되었을 때 화면이다. 

앱인벤터 도화지앱 초기 실행화면

 

상단에 글자 '안녕'을 그리면 최초의 설정색은 검정색이다.

 

 

앱인벤터 도화지 앱 실행화면

 

 

앱인벤터 도화지앱 색상변경 실행화면

 

아래는 앱인벤터 도화지앱의 실행 동영상이다.

 

앱인벤터 도화지앱 실행 동영상

 

좀더 생각해보기

'나에게말해줘' 앱에서 몇가지 기능을 추가해보자.

. 먼저 텍스트박스에 글자가 없으면 알림을 띄워서 사용자에게 알려주는 기능을 추가해보자.

. 번역을 통해 말해주는 프로그램 기능을 추가해보자.(translator 컴포넌트를 활용해보자)

. 번역해주는 언어를 선택하고 번역하는 앱을 만들어보자

 

다음 글에 추가해서 작성을 해 볼 것이다.

 

지금까지 '나에게말해줘' 앱을 작성하였다. 버튼과 레이블 그리고 소리 컴포넌트를 활용하여 간단한 블록 코딩까지 해보았다. 블록코딩을 처음한 경험을 살려 다음 튜터리얼도 계속 실습하기를 추천한다.

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.