앱인벤터 페인트팟 앱(PaintPot)

앱인벤터 페인트팟 앱(PaintPot)

 

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

 

이번 튜터리얼은 도화지 앱이다. 캔버스 위에 낙서하는 앱을 만들어보자. 도화지앱과 유사하며 기능이 몇가지 추가되어서 실습을 하려고 한다. 가능하면 도화지앱을 작성하고 페인트팟 앱을 만드는 것을 추천한다.

 

 

앱인벤터 도화지 앱

 

페인트팟 앱이 제공하는 기능은 아래와 같다.

• 손가락으로 특정 색을 가지고 그릴 수 있다.
• 화면을 따라 손가락을 끌어 선을 그릴 수 있다.
• 화면을 눌러 점을 찍을 수 있다.
• 화면을 깨끗하게 닦으려면 하단에 있는 버튼을 누른다.
• 이미지를 그리기 배경으로 포함시킨다.

페인트팟 앱을 작성의 목적은 

• 그림을 그리기 위해 캔버스 컴포넌트를 이해하고 실습한다.
• 수평배치 컴포넌트를 통해 컴포넌트를 정렬한다.
• 이벤트 처리를 할 수 있다
• 변수 선언과 관리를 할 수 있다.

 

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

 

. 페인트팟 기본 설계

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

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

여기서는 버튼 컴포넌트 3개를 통해 각각 빨간색, 초록색, 파란색을 설정한다.

아래 버튼 컴포넌트는 캔버스에 그린 그림을 삭제하도록 한다.

 

. 페인트팟 디자인

앱인벤터의 페인트팟의 화면 디자인은 아래 그림과 같다. 

캔버스 컴포넌트와 색을 지정하는 3개의 컴포넌트 그리고 아래 1개의 버튼은 캔버스의 그림을 삭제하는 기능을 한다.

캔버스 컴포넌트에는 고양이 그림을 이미지에 설정한다.

 

앱인벤터 페인트팟 앱 디자인 화면

 

컴포넌트

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

 

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

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

 

 

앱인벤터 캔버스 컴포넌트

캔버스의 높이 : 300

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

이미지 : kttty.png

kitty.png

0.17MB

 

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

캔버스 컴포넌트에서 점을 찍을 수 있다.

캔버스에 빨간색, 초록색, 파란색의 페인트색상을 지정한다.

 

버튼 컴포넌트 설정값 설정하기

화면 위에 3개의 버튼은 색상을 지정하기 위해 사용된다. 색상은 빨간색, 초록색, 파란색을 설정한다.

빨간색 버튼 : 텍스트(Red), 배경색(빨간색), 정렬(가운데정렬)

초록색 버튼 : 텍스트(Red), 배경색(초록색), 정렬(가운데정렬)

파랑색 버튼 : 텍스트(Red), 배경색(파랑색), 정렬(가운데정렬)

 

수평배치컴포넌트 설정값 설정하기

화면 위에 3개의 버튼을 수평하게 배치하기 위해 사용된다.

 

수평정렬 : 가운데

수직정렬 : 가운데

너비 : 부모요소에 맞추기

 

버튼 컴포넌트 설정값 설정하기

화면 아래에 1개의 버튼은 캔버스의 그림을 모두 지우는 기능을 위해 사용된다.

텍스트 : Wipe

텍스트정렬 : 가운데

 

설계 아이디어

기본 생각

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

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

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

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

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

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

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

캔버스 위에서 점을 그릴 때, 사용자는 캔버스 위를 터치할 때 동그라미 점을 찍는다.

 

앱인벤터 캔버스컴포넌트 터치했을때 블록

 

캔버스 위에 원을 그려서 점 처럼 보여지게 한다.

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

 

코딩블럭

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

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

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

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

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

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

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

  -> 캔버스 위에 점을 찍을 때에는 (터치했을때와 원그리기 블록을 활용한다.)

추가로 캔버스의 색을 설정하기 위해 빨간색, 초록색, 파란색 버튼을 터치한다. 

  -> 캔버스의 페인트 색상을 지정한다.

 

. 전역변수

없음.

 

 

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

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

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

앱인벤터 페인트팟 앱 드래그 선 그리기 블록

 

. 캔버스 터치했을때(점 찍기)

캔버스 컴포넌트 위에 터치하면 원그리기 블록을 통해 캔버스 위에 작은 점처럼 보이게 한다. (실제로는 원그리기임을 기억하자.)

원그리기에는 터치했을 때의 X, Y좌표를 원그리기 중심 X, Y좌표로 활용하고 반지름 5로 고정하여 원을 채워서 그린다.

앱인벤터 페인트팟 앱 캔버스 터치했을때 원그리기 블록

 

. 빨간색, 초록색, 파란색 버튼을 클릭했을 때

빨강, 초록, 파랑 버튼을 클릭하면 캔버스의 페인트색상을 변경한다.

앱인벤터 페인트팟 앱 빨간색/초록색/파란색 버튼 클릭했을 때 블록

 

. Wipe 버튼을 클릭했을 때

캔버스 위에 그렸던 선이나 점 등을 삭제할 때 사용한다.

앱인벤터 페인트팟 앱 캔버스 지우기

 

실행결과 화면

 

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

 

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

앱인벤터 페인트팟 앱 첫 실행화면

 

빨간점, 파란점, 초록색점을 찍어보았다. 아래 그림과 같다.

앱인벤터 페인트팟 실행화면

 

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

 

앱인베터 페인트팟 동영상 실행화면

 

좀더 생각해보기

'페인트팟2' 앱에서 몇가지 기능을 추가해보자.

. 점의 크기를 동적으로 바꾸어 보자.

  - 1차(큰점, 작은 점)

  - 슬라이더로 점의 크기를 조절해보자.

. 카메라로 찍은 사진을 캔버스의 배경 이미지로 설정해 보자.

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

 

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

 

지금까지 '페인트팟2' 앱을 작성하였다. 캔버스와 버튼 그리고 수평배치 컴포넌트를 통해 간단한 페인팅 그리기 앱을 작성해보았다. 블록코딩을 처음한 경험을 살려 다음 튜터리얼도 계속 실습하기를 추천한다.

 

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

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

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.