나도 앱 개발자가 될 수 있다? 앱 인벤터로 어플 만들기 과정에 도전하다!!

나도 앱 개발자가 될 수 있다? 앱 인벤터로 어플 만들기 과정에 도전하다!!

이전 글( 웹에서 안드로이드 App을 쉽게 만들어보자 - MIT App Inventor 소개 ) 에서 앱 인벤터에 대해 간략히 소개를 한 적이 있습니다. 이전의 글이 수박의 겉 핥기 정도도 못 되는 수박 구경 정도였다면 오늘은 본격적으로 뭔가를 시도해 보도록 하겠습니다. 수박을 잘라보기라도 해야죠!!

 

시작하기

MIT 앱 인벤터 사이트에 접속을 합시다. 사이트 주소는 아래와 같습니다.

http://appinventor.mit.edu/

사이트에 접속하시면 아래와 같은 사이트에 연결됩니다.

새로은 앱을 만들어 보기 위해 화면 오른쪽 상단에 보이는 [ Create apps! ] 버튼을 눌러봅시다. 버튼을 누르면 로그인 창이 뜹니다. 가지고 계신 구글 계정으로 로그인을 하시면 됩니다.

로그인에 성공했습니다. 로그인을 했더니 새로운 화면이 나타났습니다. 

새로운 프로젝트를 만들기 위해 화면 왼쪽 상단에 보이는 [ Start new project ]를 눌러보겠습니다.

프로젝트 이름을 정해봅시다. 원하시는 프로젝트 이름으로 정하면 끝! 저는 일단 test라고 적어보았습니다. (마땅히 좋은 이름이 생각 안나네요..ㅋ)

프로젝트 이름을 입력하고 [ OK ] 버튼을 누르자 짜잔!하고 뭔가 그럴듯한(?) 화면이 나왔습니다. 제법 어플 개발하는 모양새(?)가 납니다. 어플을 개발하기 위한 프로그램을 하나도 설치하지 않아도 된다니 대박입니다!! 

왼쪽에 [ Palette ] 창에는 각종 아이콘들(?)이 보입니다. [ Viewer ] 창에는 가상의 스마트폰이 보이네요. 

일단 화면이 뜨기는 했는데 막막하네요... 무엇을 만들어 보아야 할까요??? 프로그램을 설치하고 처음 실행했을 때의 마음은 다들 비슷하지 않을까 합니다. ㅋ

거의 본능적으로(?) Pallete 창에 있는 아이콘 몇 개를 Viewr 창으로 끌고 왔습니다. 착착 배치가 되는군요. 기존에 사용해보았던 어플 개발 툴들과 별반 다르지 않습니다.

디자인 해보기

처음 실행해본 상황이라 아주 아주 간단한 결과물을 만들어보겠습니다. 버튼을 하나 누르면 텍스트 상자에 메시지를 표시하는 기능을 구현해보겠습니다.

화면 왼쪽의 [ 팔레트 Palette ] 창의 [ User Inteface ] 항목에서 [ Button ] 아이콘과 [ TextBox ] 아이콘을 [ Viewer ] 창에 드래그했습니다. 이렇게 아주 손쉽게 어플을 디자인(?) 했습니다.

어플 디자인이 아름답게 끝났으니(ㅋㅋ) 이제 본격적인 코딩 작업에 들어가봅시다.

코딩 해보기

화면 상단 오른쪽에 보면 두가지 화면 모드를 선택할 수 있습니다. [ Designer ] 모드와 [ Blocks ] 모드입니다. 현재까지는 [ Designer ] 모드에서 작업을 했습니다. 본격적인 코딩을 위해 [ Blocks ] 모드 버튼을 눌러봅니다.

아래와 같은 모습으로 화면이 변했습니다. 화면 왼쪽에 [ Blocks ] 창이, 오른쪽에 [ Viewer ] 창이 보입니다.

Java나 C 같은 언어를 개인적으로 공부를 해 본적은 있으나, 블록 형태의 코딩은 솔직히 처음 접해봅니다. 두근두근..

화면 왼쪽 [ Blocks ] 창에 몇 가지 아이콘들이 보입니다. 특별히 [ Screen1 ] 에는 조금 전에 디자인을 해 놓았던 [ Button1 ]과 [ TextBox1 ]이 보이네요.

[ Button1 ]을 가지고 뭔가를 해보기 위해 마우스 클릭을 해 보았습니다. 그랬더니 [ Viewer ] 화면에 여러 가지 블록들이 주르륵 나타났습니다.

처음 보는 화면이라 조금 낯선 면도 없지않아 있습니다. 하지만 살짝 들여다보니 뭔가 직관적으로 혹은 직감적으로 기능들을 대략 파악할 수 있을 것 같습니다. 이건 아마도 다른 언어를 공부해본 경험이 있어서 더 그럴 수도 있겠다는 생각이 듭니다. 프로그래밍 자체가 처음이신 분들은 어떻게 느껴지실지 궁금하기도 합니다.

[ Button1 ]과 [ TextBox1 ]에서 블록들을 하나씩 드래그 했습니다. 위의 그림을 보았을 때, 직감적으로 무엇을 하려는지 느껴지시죠? [ Button1 ]이 클릭되었을 때(Button1.Click), [ TextBox1 ]에 문자열이 표시되게하라(TextBox1.Text). 

그런데 화면을 잘 보시면 두 블록이 잘 맞게 생겼나요? 퍼즐이 안 맞네요. 그럼 이건 제가 원하는 기능을 할 수 없다는 이야기겠네요!! 블록을 다시 찾아봐야겠어요.

짝이 안 맞는 블록은 화면 아래 휴지통에 버렸습니다. [ TextBox1 ]에서 짝이 맞는 다른 블록을 찾아보았습니다. 오호라! [ Set TextBox1.Text to ]라는 블록이 보이네요. 어때요? 딱 맞죠?

맞긴 맞는데! 또 하나의 문제가 남았습니다. 새로 가져온 블록의 오른쪽 끝이 비어있네요. 이제 무슨 Text 를 출력할 지를 정해줘야 합니다. 그래서 [ Built-in ] 항목에 있는 [ Text ] 아이콘을 눌러보았습니다.

블록 중에 가장 위에 있는 [ " " ]가 뭔가 잘 어울릴 것 같군요. 블록도 끝도 마무리(?)가 되구요. ㅋ

요 내용은 프로그래밍 경험이 없는 분들은 블록의 모양으로 연습을 해보시면 될 것 같구요. 프로그래밍 경험이 있으신 분들은 기존의 언어의 문법 체계와 크게 다르지 않다는 것을 느낄 수 있을 것 같습니다. (Textbox1.Text, Button1.Click) 같은 것 말이죠^^

" " 안에 프로그래밍의 꽃(?!)인 "Hello World!"를 입력했습니다. 뿌듯^^;

과연 결과가 어떻게 나올까요??

 

결과물 보기

지금까지 만들어 본 어플이 잘 실행되는 지 궁금합니다. 어플을 실행하는 방법은 크게 세 가지가 있다고 합니다.

• 스마트폰에 어플을 설치한 뒤, WiFi 접속으로 직접 실행하기 (추천하는 방법이라고 하네요)
• 에뮬레이터를 컴퓨터에 설치해서 실행하기
• USB 케이블로 스마트폰을 연결해서 실행하기

첫 번째 방법(WiFi 접속)으로 어플을 실행해 보겠습니다.

아래 링크로 들어가시면 자세한 안내를 받으실 수 있습니다.

http://appinventor.mit.edu/explore/ai2/setup-device-wifi.html

사이트에 접속 후 화면 왼쪽에 있는 QR 코드를 스캔하시거나,

플레이 스토어(Play Store)에서 "MIT AI2 Companion"을 검색해서 스마트폰에 어플을 설치합니다.

어플 설치가 끝났다면 다시 앱 인벤터 화면으로 돌아옵니다.

[ Connect ] 메뉴에 있는 [ AI Companion] 항목을 선택합니다.

그러자 잠시 뒤에 새로운 창이 뜨고 그 안에는 QR 코드와 Character 코드가 생성되어 있습니다.

조금 전에 설치했던 MIT App Inventor 2 Companion 어플을 실행합니다.

어플을 실행하자 두 가지 옵션이 나타납니다. 여섯 자리 문자 코드를 입력하거나, QR 코드를 스캔할 수 있습니다.

QR 코드를 스캔하면 잠시 뒤, 만들었던 어플이 실행됩니다. 아래가 그 결과입니다!! 우와!!

[ Test Button ] 을 누르자 TextBox 에 "Hello World!" 메시지가 나타납니다. 정말 간단하네요!!

이렇게 아주 간단히 어플을 하나 만들어 보았습니다. 어플을 만들어 보았다기 보다는 앱 인벤터로 어플을 만드는 과정을 한 번 경험해 본 것이죠. 생각보다 쉬워서 얼른 다른 작업을 시작해보고 싶네요.

참고로 위의 방법으로 실행을 하게 되면 어플을 종료하는 동시에 스마트폰에서는 어플이 사라집니다. 아직 설치를 한 것이 아니기 때문이지요. 앱을 설치해보려면 [ Build ] 메뉴에서 [ App ( provide QR code for .apk) ]를 이용하면 됩니다. 나중에 기회가 되면 좀 더 다세히... ^^;;

시대가 변했다?

코딩에 대한 접근성이 아주 높아진 시대가 되었습니다. 이 정도 코딩 수준이라면 조금만 연습해보아도 간단한 어플 정도는 직접 만들어서 쓸 수 있을 것 같다는 기대감이 생깁니다. 

앱 인벤터를 이용하면 기존의 어플 개발 과정과 비교해보았을 때 어느 정도 수준까지 비슷하게 만들어 낼 수 있을지 궁금해 집니다. 그 격차가 많이 좁혀진다면(이미 그렇다면) 1인 1어플 제작 시대 까지도 올 수 있지 않을까요?

앞으로 코딩 교육이 의무화 된다는 이야기도 있던데.. 과연 어떤 미래가 펼쳐질 지 궁금해집니다.

사이트 도구로 만들어본 IT4EDU 사이트

블로그 소식을 한 눈에!

http://sites.google.com/view/it4edu

 

 

구독 신청하기

새로 포스팅되는 블로그 정보들을 메일로  받고 싶으시면 아래 링크에 가셔서 이메일 주소를 입력해주세요^^

[ 구독하기 ]