'뭐먹'앱 만들기 시작!

우리 인생에서 빼먹을 수없는 건 뭘까요? 그래요! 바로 밥!! 다 먹고 살자고 하는거잖아요.
나 혼자 먹을 때는 나 먹고 싶은거 먹으면 되는데, 친구들과 모였을 때 식사를 해야 하는데 도대체 뭘 먹을지 고를 수가 없다면!
'무엇을 먹을지’를 골라주는 ‘뭐먹’앱! 심지어‘누가 살지’까지 골라줘요~.
빨리 만들고 싶죠? 바로 만들어 봅시다.

이 튜토리얼을 시작하기 전에

아래 사항을 꼭 준비하세요.

  • 안드로이드 폰(앱인벤터로 만든 앱은 안드로이드 스마트폰에서만 작동합니다.)
  • 스마트폰과 PC가 공유하는 WiFi 네트워크 또는 스마트폰과 PC를 연결하는 케이블
  • 드림코드에서 제공하는 배포파일 (그림파일, 완성된 소스코드)

만들어볼 앱 미리보기

이제 더 이상 무엇을 먹을지, 누가 밥을 쏠지 고민하지 말자! 무엇을 먹을지, 누가 살지 랜덤으로 골라주는 앱! 좋구나~

배울 수 있는 기능

이 튜토리얼을 통해 여러분이 배울 수 있는 기능은 다음과 같습니다.

  • TextBox, Label, Button의 사용방법
  • if-else문의 이해와 활용
  • 목록 만들기(list)의 이해 활용
  • random문 활용
설레죠?! 만들고싶죠?!

프로젝트 만들기

앱인벤터로 들어가 (ai2.appinventor.mit.edu) 로그인을 합니다. 또는 오른쪽 상단 앱 인벤터 바로가기를 클릭하여 앱인벤터에 접속합니다.
알림 창(Welcome to App Inventor)의 왼쪽 아래 [Continue] 버튼을 클릭하여 알림 창을 제거합니다.(알림 창 뒤 배경화면은 마지막으로 작업했던 프로젝트의 화면으로 사용자마다 다를 수 있습니다.)

왼쪽 상단의 Project 메뉴의 Start new project… 항목을 클릭합니다.
새로운 알림 창(Create new App Inventor project)이 뜨면 what_to_eat 을 빈칸에 입력하고 OK 버튼을 클릭하여 what_to_eat 프로젝트를 생성합니다.(프로젝트 이름은 앱 이름이 되며 영어로 입력해야 합니다)

화면 구성요소 배치하기

우선 구성요소를 먼저 배치해보도록 하겠습니다.
① 밥을 쏠 후보 이름 입력을 위한 TextBox1
② 입력된 후보의 이름 저장을 지시할 Button1
③ 결과 출력을 명령할 Button2
④ 결정된 친구 ‘이름’을 출력할 Label1
⑤ 결정된 음식 ‘그림’을 출력할 Image1을 아래 그림과 같이 드래그하여 배치합니다. Viewer와 Components 구역에 각각의 요소들이 배치되는 것을 확인할 수 있습니다.

배치한 구성요소(Components)들의 이름 바꾸기

구성 요소의 이름을 역할에 맞도록 지정해 준다면 나중에 논리를 구현할 때 이름만 보고 무슨 역할을 하고 특성이 무엇인지 쉽게 알 수 있습니다. 이미 이정도는 익히 알고 있죠? 아~ 흐뭇하네요!
다음과 같이 구성요소(Components)들의 이름을 바꾸어 봅시다. 이름을 바꾸는 방법은 아래 사진을 참고하세요.

TextBox1 : NameTextBox
Button1 : EnterButton
Button2 : ResultButton
Label1 : NameLabel
Image1 : FoodImage

이제 다음 페이지에서 blocks를 이용해 본격적으로 앱을 작동시키는 기능을 구현해 봅시다.

댓글