[APP INVENTOR] 앱 인벤터 화면 구성 소개

1. 앱 인벤터의 시작

<앱 인벤터 메인화면>

앱 인벤터를 통하여 어플리케이션을 만들기 위해서는 앱 인벤터 홈페이지 오른쪽 상단의 Create apps! 버튼을 통하여 가능하다.

2. 앱 인벤터의 화면

<(좌) 디자이너, (우) 블록>

앱 인벤터는 앱의 액티비티를 디자인 할 수 있는 <디자이너>와 <디자이너>에서 디자인한 기능들을 블록코딩으로 구현할 수 있는 <블록>으로 나뉜다.

두 가지 화면은 앱 인벤터의 우측 상단에서 변경이 가능하다.

3. 디자이너 화면 설명

디자이너 화면은 앱을 구성하는 컴포넌트들을 뷰어를 통하여 디자인하는 화면이다. 

<디자이너 화면 구성>

① 팔레트

앱을 구성하는 컴포넌트들이 정리되어 있는 팔레트이며 사용자의 설정에 따라 기능할 수 있는 사용자 인터페이스, 화면의 레이아웃을 설정할 수 있는 컴포넌트들이 있는 레이아웃, 음성, 영상 등과 같은 미디어에 관련된 컴포넌트들이 있는 미디어, 캔버스 위에서 이미지들의 움직임을 구현할 수 있는 컴포넌트들이 있는 그리기& 애니메이션, 스마트폰에 내장되어 있는 센서들을 사용할 수 있는 센서 등이 있다. 

② 메뉴

메뉴바에는 새 프로젝트의 작성, 프로젝트를 저장하거나 불러올 수 있는 프로젝트, 앱의 테스트를 할 수 있는 AI Compinon나 에뮬레이터 등이 있는 연결, .apk파일을 만들어 앱을 설치할 수 있는 기능을 하는 빌드, 사용법 등이 있는 도움말 등이 있다.

③ 스크린 설정

스크린 설정은 앱에 포함된 스크린들을 이동하거나 추가, 삭제를 할 수 있다.

④ 뷰어

스크린 위에 올릴 컴포넌트들의 구성을 디자인하는 곳이며 팔레트의 컴포넌트들을 마우스로 드래그하고 속성을 설정하여 앱의 디자인을 마무리 할 수 있다.

⑤ 컴포넌트

뷰어에서 컴포넌트들을 드래그해서 디자인하게 되면 컴포넌트창에 컴포넌트들 간의 포함관계를 보기 쉽게 정리해 놓은 곳이다.

⑥ 속성

컴포넌트들의 속성을 설정할 수 있는 곳이며 뷰어를 통해 컴포넌트를 선택할 때 마다 각각의 속성들을 확인 할 수 있다.

⑦ 미디어

앱에서 사용될 이미지나 영상, 음성 등을 업로드를 할 수 있는 곳이다.

4. 블록 화면 설명

블록 화면은 앱을 구성하는 컴포넌트들을 기능을 코딩하는 화면이다. 

<블록 화면 구성>

① 블록

각 컨포넌트들 사이의 기능을 코딩할 수 있는 블록들이 정리되어있는 블록이다. 앱 개발에 있어 가장 기본이 되는 블록들이 포함된 공통 블럭과 사용자들이 뷰어에 올려 놓은 컴포넌트들의 컴포넌트 블록들을 확인 할 수 있다.   

공통 블록에는 앱의 제어에 필요한 블록이 있는 제어, 명제에 대한 논리 등을 정리한 논리, 수학적인 연산자와 함수들이 포함된 수학, 텍스트를 넣거나 텍스트의 속성들을 확인 할 수 있는 텍스트, 여러가지 내용을 목록형으로 확인할 수 있는 리스트. 여러가지 색상이 있는 색상, 여러가지 변수들을 설정하고 설정할 수 있는 변수, 사용자가 직접 함수를 제작할 수 있는 함수 등이 있다.

② 미디어

앱에서 사용될 이미지나 영상, 음성 등을 업로드를 할 수 있는 곳이다.

③ 메뉴

메뉴바에는 새 프로젝트의 작성, 프로젝트를 저장하거나 불러올 수 있는 프로젝트, 앱의 테스트를 할 수 있는 AI Compinon나 에뮬레이터 등이 있는 연결, .apk파일을 만들어 앱을 설치할 수 있는 기능을 하는 빌드, 사용법 등이 있는 도움말 등이 있다.

④ 스크린 설정

스크린 설정은 앱에 포함된 스크린들을 이동하거나 추가, 삭제를 할 수 있다.

⑤ 뷰어

디자이너에서 디자인을 했던 것처럼 블록들을 뷰어에 드래그하여 코드를 작성할 수 있다. 

⑥ 경고

코딩한 내용 중 코드에 문제가 있다면 간단한 경고와 실행에 어려움을 주는 에러를 확인 할 수 있다.

⑦ 백팩

블록을 백팩에 담아, 스크린 상에 복사하거나 붙여넣을 수 있다. 

⑧ 휴지통

블록을 삭제할 수 있는 기능을 한다.

5. 앱 인벤터 2 홈페이지로 이동

MIT App Inventor 2 / 앱 인벤터 2

<http://appinventor.mit.edu/explore/>