1. App Inventor 2 소개 안녕하세요. 이번에는 스마트 폰 앱을 만드는 방법을 배워 볼까요? 제가 아는 방법은 두 가지가 있어요. Eclipse라는 IDE를 사용하는 방법과, MIT Media Lab에서 만든 App Inventor 2를 이용하는 방법이 있어요. 저는 초등학교 마지막 project로, Scratch를 이용한 게임을 만들어 보았어요. 그래 서, 중학교 준비를 하면서 Scratch와 같이 Block을 이용하는 App Inventor 2를 배우기로 했어요.
AI2에는 두 가지 화면이 있는데, “Designer”화면 에서는 버튼, 시계, 글자 모양, PC내부와 인터넷 자원 등 스마트 폰에서 보여지는 모습, 효과 그리 고 연결에 대한 정의를 하고, “Blocks”화면에서는 Scratch에서와 같이 블록을 쌓는 방법으로, 앱이 실제 동작을 구현 할 수 있도록 프로그래밍을 할 수 있어요.
AI2의 장점은, NUC에서 개발한 앱을 실제 스마트 폰에서 바로 확인할 수 있고, 컴퓨터 화면만으로 확인할 수 있는 Emulator도 무척 빨라요. 두 가지 환경에서 개발이 가능해요. 서버와 연결하는 Online, NUC만으로 가능한 Off-line 환경이 있어요. 우선 On-line환경에서 시작해요.
2. “Designer”화면 살펴보기 인터넷
주소로
“ai2.appinventor.mit.edu”로
갔 어 요.
‘Chrome’ Browser를 이용해야 겠군요. Google계정도 있어야 해요. AI2 첫 번째 화면에 “New Project”명을 입력하면, 바로 “Designer” 창이 나올 거에요. 화면 왼쪽 위의 ‘Project’를 클 릭하여 ‘My Projects’을 선택하세요. 여기에 우리의 Project들 이 서버를 통해 계속 저장될 거에요. 자, 여러분의 Project Name을 클릭하여 다시 “Designer”창으로 가세요.
Designer 창은 4가지 구역으로 나누어져 요. 가운데 ‘Viewer’에서 스마트 폰 화면 을 연상하면서 각 Object을 배열할 수 있 어요. 왼쪽에 있는 ‘Palette’구역은 각종 ‘component’들이 몇 가지 카테고리 안에 정리되어 있어요. 첫 화면에는 기본적으 로 ‘User Interface’의 component들을 볼 수 있어요. 아래의 다른 카테고리를 클릭 하여, 각 카테고리에 해당되는 component들을 확인해 보세요.
3. “Designer”에서 간단한 앱 화면 구성하기 지금부터, 아주 간단한 앱을 만들기로 해요. 세 개의 버튼을 만들어, 각 버튼을 누르면 해당되는 색이 화면을 채우고, 원상태로 복귀시키는 버튼도 있는 스토리죠. ‘User Interface’의 Button을 세 번 Viewer구역으로 끌어서 가져오세요. 버튼이 하는 역할을 program하는 것은 나중에 “Blocks” 창에서 하겠지만, 버튼의 보여지는 모습과 배열 은 여기 “Designer”에서 해야 해요.
‘Components’구역과 ‘Properties’구역을 이용하 여, 각 버튼 속의 글자와 색, 그리고 버튼 명을 의 미 있는 것으로 수정해 보세요.
수직으로 정렬된 버튼들을 수평으로 정렬해 볼까요? ‘Palette’구역 안에 있는 ‘Layout’카테고리에 서
‘HorizontalArrangement’
Component 를
‘Viewer’구역으로 가져오세요. ‘Properties’구역의 ‘Width’를 ‘Fill parent’로 선택한 후, 각 버튼들을 그 속으로 가져오세요. 각 버튼들이 Subcomponent가 되었어요. 테두리는 스마트 폰에서는 나 타나지 않으니 걱정하지 마세요.
색이 변화는 공간을 만들기 위해 ‘Palette’구역의 ‘Drawing and Animation’카 테 고 리 에
있는
‘Canvas’ component를 ‘Viewer’구역으로 가져오 세요. ‘Properties’구역의 ‘Width’를 ‘Fill parent’로 하고, ‘Height’를 300 pixels로 정하기로 해요. 아래 에는, Canvas의 색을 지우는 버튼을 만들어요.
4. “Blocks”에서 Programing하기 이제는 각 component들이 실제 동작할 수 있도록 기능을 주기로 해요. Scratch에서 block을 쌓아 서 programing한 것과 유사해요. AI2화면의 오른쪽 위에 있 는 “Blocks”를 click하세요. 새 화면 왼쪽의 ‘Blocks’구역 안에 있는 ‘Blue_Button’을 선택한 후, ‘when Blue_Button.Click’ 블 록을 선택하세요. Red, Green, Wipe버튼도 같은 방식으로 하세요.
다시 ‘Blocks’구역의 ‘Canvas_Coloring’을선택한 후, ‘set Canvas_Coloring.BackgroundColor
to’를
찾 아 서
‘when
Blue_Button.Click’블록 안에 두세요. 새블록 위에 마우스 오 른쪽 버튼을 click한 후 ‘Duplicate’를 세번 선택하세요. 복사된 블록을 해당 위치에 옮겨요.
‘Blocks’구역의 ‘Built-in’을 click한 후, 해당 ‘Colors’블록들을 끌고 와서 ‘Viewer’구역에 붙이면, 첫 번째 앱이 완성!!
만약을 위해서, 첫 번째 앱을 NUC에 저장해요. 화면 오른쪽 위의 ‘My Projects’를 click 한 후 앱 이 름 옆에 있는 box를 선택하세요. 화면 왼쪽 위의 ‘Project’메뉴에서 ‘Export selected project(.aia) to my computer’를 선택하세요. 화면 왼쪽 아래의 화살 표를 click 한 후 ‘Show in folder’를 통해 어디에 저장 되어 있는지를 확인한 후, 원하는 directory에 저장 하세요. 마찬가지로, 불러올 때는 ‘Project’메뉴에서 ‘Import selected project(.aia) from my computer’를 선택하면 되요.