앱인벤터2 왕초보도 후다닥 앱 만들기 1

앱인벤터2로 후다닥 앱만드는 방법을 설명하고 가장 간단한 앱을 하나 만들어 보겠다. 아래 방식을 따라 하기만 하면 오늘 처음 앱인벤터2를 접하는 사람도 금방 앱 하나를 후다닥 만들 수 있다. 3~4 번의 시리즈로 글을 올릴 생각이다. 

 

1. 새 프로젝트 열기

처음 앱인벤터2를 시작하는 분이라면 먼저 구글에 계정을 하나 만들고 https://appinventor.mit.edu/ 사이트로 들어간다.

앱인벤터2 홈페이지가 열리면 좌상단 주황색 버튼 'Create Apps!'를 클릭한다. 그러면 본인의 앱인벤터2  페이지가 열린다. 상단 메뉴바에서 'Projects -> Start new Project' 항목을 클릭해 프로젝터를 하나 생성한다.

 

앱 이름을 영어로 작성하고 OK 버튼을 클릭한다.

 

2. 각 컴포넌트 배치 하는 법

앱인벤터2에서 각각의 컴포넌트를 배치하는 방법은 어린 아이라도 이해 할 수 있을 만큼 쉽고 직관적이다. 좌측 Palette 창을 보면 User interface 항목에 가장 기본적인 인터페이스 컴포넌트들이 보인다. 여기서 Button 하나를 마우스 왼쪽 커스로 클릭해서 손가락을 떼지말고 가운데 Viewer 창 핸드폰 안에다 드래그 & 드랍한다. 우측 오른쪽에서 두번째 Components 창을 보면 좀전에 설치했던 버튼들이 표시된다. 버튼 하나를 클릭해서 선택하면 그 버튼의 속성을 설정할 수 있다. 가장 오른쪽 창은 Properties 창인데 선택한 컴포넌트의 속성을 설정하는 곳이다. 위에서 부터 FontBold를 선택하고 폰트 사이즈는 16정도로 그리고 버튼위에 나타나는 글자는 본인이 쉽게 알 아 볼 수 있는 버튼의 의미를 생각해 써 넣는다.

 

처음 버튼을 배치하면 모든 버튼들이 좌측으로 정렬되어 있다. 그럴때 위와 같이 가운데로 정렬하고 싶으면 Components 창에서 Screen1을 선택하고 Properties 창에 가서 AlignHorizontal을 Left, Center, Right 셋중 Center를 선택한다.

 

버튼의 이름도 바꾸어 줘야 버튼의 의미를 이해할 수 있다. 버튼의 이름을 바꾸고 싶으면 Components 창에서 해당 버튼을 선택한후 Components 창 중단에 있는 Rename 버튼을 누른다. 이름을 바꿀 수 있는 창이 나타나는데 New name 항목에 새로운 이름을 적어준다.

 

 

3. 스크린 추가 및 각 스크린 간 이동 방법

스크린을 추가하는 방법을 알아본다. 앱을 제작하다 보면 여러개의 스크린을 추가 해야 하는 경우가 생기는데 추가하는 방법은 너무나 간단하다. 상단 메뉴바 중에서 Add Screen 버튼만 누르면 스크린이 하나씩 추가된다. 그런데 여기서 꼭 알아야 하는 것이 있는데 바로 각 스크린간의 이동 방법이다. 

 

스크린간의 이동을 설명하기 위해 4개의 스크린을 생성했다. 그리고 3개의 버튼을 Designer 에디터에 배치했다. 각각의 버튼에 대해 Properties를 설정하고 Blocks 에디터로 간다.

 

Blocks 창 중단을 보면 각 버튼이 보이는데 먼저 첫번째 버튼을 선택해 본다. 그러면 드랍 메뉴창이 열리는데 가장 상단의 When goScreen2Button. Click 블럭을 Viewer창에 드래그 & 드랍한다. 이 블럭은 이벤트 블럭이라고 부르는데 클릭이라는 이벤트가 발생했을때 처리하는 블럭이다.

 

이벤트 블럭이 있으면 그안에 해당 이벤트 이후에 실행되어야 할 세부 내용 블럭을 배치 시켜야 한다. 우리가 하고 싶은 것은 버튼을 눌렀을때 다음 스크린으로 이동하는 것이다. 이때 필요한 블럭들이 Blocks 창의 Built-in 항목중 Control 이라는 Component 안에 들어 있다. 드랍창이 새로 열리면 그 중에서 'open another screen screenName' 블럭을 드래그 & 드랍 방식으로 꺼내서 When goScreen2Button. Click 블럭안에 위치시킨다. 서로를 연결시키는 홈이 있으므로 홈을 잘 맞춰서 끼워 넣는다. 

 

다음은 가고 싶은 Screen의 이름을 적어주는 부분이다. Text 항목에서 가장 상단의 빈 블럭을 가져다가 위의 그림과 같이 끼워 넣는다. 그리고 빈 블럭안에 이동하고 싶은 스크린 이름을 적어넣는다. Screen2로 이동하고 싶다면 'Screen2'라고 적는다 대문자 S라는 것에 주의하자. 소문자 s를 쓰면 이동이 안된다. 

 

Screen 2, 3, 4로 이동하기 위한 블럭을 설치했다.

 

이제 Screen2에서 홈 화면으로 이동하는 방법에 대해 알아보자. Screen2 디자이너 에디터에 홈으로 가기 버튼을 하나 설치한다.

 

그리고 Blocks 에디터로 가서 위와 같이 블럭을 설치하자. 여기서 주의할 점은 이벤트 블럭 안에 Close screen 블럭을 끼워 넣는 것이다. 홈으로 이동하면서 Screen2 화면을 Close 시키고 홈화면으로 이동해야 하는 것이다. 홈화면으로 이동만 하면 Screen2가 그대로 살아있는 상태로 홈화면만 나타나는 것이다. 위의 그림처럼 Screen2를 종료하면 Screen2 뒤에 숨어있던 홈화면이 나타난다. Screen2가 뒤에 살아있는 상태로 홈으로 가면 홈화면에서 앱종료를 선택했을때 바로 앱이 종료 되지 않고 이전에 남겨 놓았던 화면들이 계속 나타난다. 따라서 일일이 하나씩 없애 주어야 하는 상황이 발생한다.