![noname01.png](https://cdn.steemitimages.com/DQma4MRwNxXH9mUC8CwQqsQWBG7RjLTgzGMbHSR5u7ei6VV/noname01.png)

앱인벤터로 아주 간단한 그림판을 코딩해 보자. 이 코딩은 앱인벤터 튜토리알 코딩에서 PaintPot 으로 알려져 있다.

![noname02.png](https://cdn.steemitimages.com/DQmfXxiubAQTVPQ9HNKQMR1u4gGsh8UW9om5tiejMiJ6F9X/noname02.png)

Projects⤍Start new project

screen1의 속성창에서 프로젝트 명칭을 Text 박스에서 Mypaint 로 입력하자.

#  수평 박스, 버튼 배치 

![noname03.png](https://cdn.steemitimages.com/DQmd1F86tWe9q9hqXXpjGKmLzpgwf7nkUSQ9hGvMyS5rHCV/noname03.png)

이 그림판의 구조는 3개의 RGB 버튼을 수평박스에 배치함으로 시작한다. 
즉 Layout 으로부터 수평박스(Horizontal Arrangement)를 하나 끌어다 뷰어 창에 놓고 그 이름을 ThreeButtons 로 Rename 하자.
Height는 Automatic, Width는 100 percent 로 둔다.

팔레트의 User Interface에서 3개의 버튼(Button)을 가져다 수평박스에 순서대로 넣는다.
각 버튼의 이름을 ButtonRed, ButtonGreen , ButtonBlue 로 Rename 한다. 각 버튼의 속성창에서 BackgroundColor를 선택해주고 FontBold를 체크 후 FontSize를 18로 두자. 아울러 Height 는 Automatic, Width 는 33 percent 로 설정하고 Text 박스에 색상명 Red를 입력한다. 
나머지 두 개의 버튼도 동일한 방법으로 각각 속성을 부여한다.

# Canvas 설치
Drawing and Animation에서 Canvas를 하나 가져다 수평박스 밑에 두고 명칭을 DrawingCanvas 로 Rename 하자.
속성창에서 Height를 300 pixel, Width를 Fill parent 로 두자.
Canvas에 아무것도 없으면 심심하므로 Kitty 고양이 면상을 하나 구해서 Components 창 하단의 Media 창의 Upload 버튼을 사용하여 폴더로부터 그림 하나를 여기서는 앱 인벤터서 키우는 고양이 즉 Kitty.png를 업로드 시킨 후 Canvas 속성창에서 BackgroundImage박스에서 선택 클릭한다.

#지우기 (Wipe) 버튼

마지막으로 버튼을 하나 더 끌어다 Canvas 밑에 두자. 
버튼의 속성창에서 BackgroundColor를 Cyan으로 선택해주고 FontBold를 체크 후 FontSize를 18로 두자. 아울러 Height 는 Automatic, Width 도  Automatic으로 설정하고 Text 박스에 Wipe를 입력한다. 

# Blocks 편집
디자이너를 완성하였으면 한번 쯤 저장해두고 Blocks 편집으로 넘어가 퍼즐을 맞춰보자.

각 색상별 버튼을 처리하자. ButtonRed를 클릭할 때 DrawingCanvas에 페인팅할 색상을 빨간색으로 지정한다. 나머지 두 버튼도 동일한 방법으로 퍼즐을 작성한다.
Wipe 버튼도 동일한 방법으로 퍼즐 코딩이 된다.

![noname04.png](https://cdn.steemitimages.com/DQmbAdN2gNg2NVEvs8uKL12QFEDbauCJX1NCEkEXEDqAoJ4/noname04.png)

다음 단계로는 Kitty Canvas 상에서 색상별로 동그란 원(circle)형 점을 찍거나 화면을 터치하면서 손가락을 drag하게 되면 계속 작은 line 으로 이어진 선을 작도한다.

실제 사용해 보면 원은 색으로 채원진 작은 사이즈의 점을 페인팅해 준다. 화면을 터치해서 손가락으로 끌어보면 line 은 꺽은 부위가 보이는 작은 line들의 집합임을 알 수 있다.

![noname05.png](https://cdn.steemitimages.com/DQmeEfHhzyhrWtGG8dziSS47uR7DJxDxTJhcpG3B3UgfZdw/noname05.png)

작업이 끝났으면 Blocks를 빠져나와 저장 후 Connect 탭에서 AI Companion을 실행하고 스미트 폰에서 QR 코드를 스캔하자. 
앱 인벤터를 사용하려면 무선공유기 또는 와이파이가 미리 자신의 PC시스템에 설치되어 있어야 한다. 그 내용은 다음의 url을 참고하도록 한다.

아두이노 코딩-119: 아두이노 앱 인벤터의 시작
https://steemit.com/kr/@codingart/118

여기까지가 전편이고 후속편이 있을 예정이므로 코드를 저장해 두도록 하죠.