1-2강. 앱인벤터 기본 구조

크롬 브라우저 설치, 구글 회원가입이 끝났다면 앱인벤터에 접속하여 화면이 어떻게 구성되어 있는지 살펴보겠습니다.

앱인벤터 접속하기

크롬 브라우저에서 다음 아래 주소로 접속하세요. 

http://appinventor.mit.edu

영어가 많네요. 그렇다고 어려워 할 필요는 없습니다. 영어를 번역해야 할 일은 없으니까요. 

화면 오른쪽 상단에 있는 주황색 버튼 [Create]를 눌러주세요. 

그럼 아래 그림처럼 안드로이드 폰이나 에뮬레이터를 준비하라는 메시지가 뜨게됩니다. 이와 관련해서는 앞서 설명했으니 넘어가도 됩니다. [Continue] 버튼을 눌러주세요.

앱인벤터 화면구성

앱인벤터는 크게 디자이너(Designer)와 블록에디터(Blocks) 화면으로 구성되어 있습니다.

디자이너(Designer)는 스마트폰에 보여질 화면을 구성하는 역할을 하고, 블록에디터(Blocks)에서는 디자이너에서 만든 화면의 기능을 코딩하는 역할을 합니다.

디자이너(Designer) 화면구성

실제 스마트폰에 보여지는 화면을 만드는 곳입니다.

왼쪽에서 오른쪽 방향으로 순서대로 작업하면 됩니다.

왼쪽 팔레트(Palette)에서 필요한 기능이 있는 컴포넌트(Component)를 가운데 있는 뷰어(Viewer)로 끌어와서 배치합니다. 글상자나 버튼 같은 컴포넌트는 화면에 보이기 때문에 화면상에 배치되지만, 센서와 관련된 기능 종류는 화면에 보여질 필요가 없기 때문에 뷰어 아랫쪽 화면 밖에 배치됩니다.

컴포넌트(Component)에서 하나를 선택하면 가장 오른쪽에 있는 프로퍼티(Properties)에서 속성을 변경할 수 있습니다. 버튼이라면 색상, 버튼에 있는 글자, 글자 크기 등을 바꿀 수 있습니다.

(1) 팔레트(Palette) : 앱 개발에 필요한 컴포넌트(Component)를 모아놓은 곳으로, 컴포넌트를 뷰어(Viewer)로 끌어다 놓아서 기능을 추가합니다.

(2) 뷰어(Viewer) : 앱이 실행되었을 때 보여질 화면입니다. 팔레트에서 끌어온 컴포넌트를 이 곳에 배치합니다.

(3) 컴포넌트(Components) : 앱을 만들기 위해서 팔레트에서 꺼내온 컴포넌트를 모아 놓은 공간입니다. 여기서 컴포넌트를 선택하면 컴포넌트의 프로퍼티(Properties)를 변경할 수 있습니다.

(4) 미디어(Media) : 앱을 만들기 위해 필요한 사진, 음악, 영상들을 업로드하기 위한 공간입니다.

(5) 프로퍼티(Properties) : (3)에서 선택한 컴포넌트의 속성을 변경할 수 있습니다. 예를 들면, 버튼의 크기, 색상 등을 변경할 수 있습니다.

(6) 디자이너(Designer) 버튼 : 디자이너 화면으로 이동하기 위한 버튼입니다.

(7) 블록(Blocks) 버튼 : 블록에디터 화면으로 이동하기 위한 버튼입니다.

블록에디터(Blocks) 화면 구성

가장 왼쪽에는 블록(Blocks)을 선택할 수 있는 목록이 있습니다. Built-in에 있는 것들은 기본적으로 내장된 블록입니다.

그 아래 있는 것들은 앞서 디자이너 화면에서 추가한 컴포넌트에 있는 블록입니다. 컴포넌트를 추가한 만큼 보여지게 됩니다.

(1) 블록(Blocks) : 블록을 선택하여 오른쪽 뷰어(Viewer)로 끌어다 놓는 방법으로 코딩을 합니다. 블록은 내장된 블록(Built-in)과 컴포넌트 블록으로 나뉘는데, 컴포넌트 블록은 디자이너에서 추가한 컴포넌트의 기능을 활용하기 위한 블록입니다.

(2) 미디어(Media) : 디자이너에 있는 미디어와 마찬가지로 사진, 음악, 영상 등을 업로드하는데 사용됩니다.

(3) 뷰어(Viewer) : 블록을 꺼내와서 배치하여 코딩을 진행하는 공간입니다.

(4) 디자이너(Designer) 버튼 : 디자이너 화면으로 이동하기 위한 버튼입니다.

(5) 블록(Blocks) 버튼 : 블록에디터 화면으로 이동하기 위한 버튼입니다.

연재 바로가기 => http://www.educoding.kr/appinventor_info