이제 첫 번째 앱을 만들어 보겠습니다.
어떤 앱을 만들까?
앱인벤터에서 가장 유명한 고양이 키티를 터치하면 "야옹~"하고 소리를 내는 앱을 만들어 보겠습니다.
앱을 실행하면 스마트폰에는 아래 고양이 키티 사진이 나타납니다.
그리고 이 사진을 터치하면 아래 고양이 소리가 나오는 것이죠.
보기에는 아주 간단하지만 몇 가지 고민을 해야 합니다.
하지만 지금은 앱인벤터 사용법을 우선 익히기 위한 것이니 우선 따라해 보도록 하겠습니다.
사전준비
이 앱에는 고양이 사진과 고양이 소리가 필요합니다. 먼저 아래 링크를 클릭해서 사진과 MP3파일을 다운로드 받습니다.
- 마우스 오른쪽 버튼을 눌러 "다른 이름으로 저장"을 선택해서 저장합니다.
이제 앱인벤터에서 [Projects] > [Start new project] 메뉴를 선택해서 새로운 프로젝트를 생성합니다.
아래 그림처럼 프로젝트 이름을 입력해야 합니다. 저는 "HelloKitty"라고 넣어 봤습니다.
아래 화면처럼 디자이너(Designer) 화면이 나타나면서 모든 준비가 끝났습니다.
디자이너(Designer)에서 작업하기
디자이너에서는 앱에 필요한 화면을 구성하게 됩니다.
버튼(Button) 추가하기
이 앱에서는 고양이 사진을 보여주고, 고양이 사진을 터치하면 고양이 소리를 들려주게 됩니다.
화면에는 고양이 사진을 보여주지만, 이 사진이 버튼 기능을 해야 합니다.
그래서 우선 버튼을 추가해 보겠습니다.
팔레트(Palette)에서 버튼(Button)을 뷰어(Viewer)로 드래그해서 옮깁니다.
그러면 화면에 "Text for Button1"이라는 버튼이 하나 만들어진 것을 볼 수 있습니다.
이제 버튼에 있는 "Text for Button1" 글자 대신 준비과정에서 다운로드 받은 kitty.png 사진이 보이도록 속성을 변경하겠습니다.
뷰어(Viewer)에 있는 버튼을 선택하면, 프로퍼티(Properties)에서 버튼에 대한 속성을 변경할 수 있습니다. 속성 중에 Image에 있는 "none"이라는 글자를 클릭합니다.
그럼 아래 그림처럼 이미지를 선택할 수 있도록 목록창이 나옵니다.
여기서 [Upload Files ...] 버튼을 클릭하세요.
그럼 이미지 파일을 업로드 할 수 있는 창이 뜨게 됩니다.
여기서 [파일 선택] 버튼을 클릭하여, 다운로드 받아 둔 kitty.png 파일을 선택합니다.
파일을 선택했으면 [OK] 버튼을 눌러 등록합니다.
화면에 고양이 사진이 들어갔습니다.
그런데, 버튼에 있는 "Text for Button1" 글자는 그대로 인 것을 볼 수 있습니다.
프로퍼티(Properties)의 Text 속성에 있는 "Text for Button1" 글자를 지워버리면, 사진에서도 글자가 지워집니다.
사운드(Sound) 추가하기
고양이 소리가 나야하므로 사운드 기능을 추가해야 합니다.
팔레트(Palette)에서 미디어(Media) 항목을 선택합니다.
사운드(Sound) 컴포넌트를 뷰어(Viewer)로 드래그하면 화면 아래쪽으로 표시가 됩니다. 사운드 기능은 화면에 보이지는 않고 소리만 들려주는 기능이기 때문에 아래 쪽에 별도로 표시가 됩니다.
뷰어(Viewer)에서 Sound1 컴포넌트를 선택하고(컴포넌트(Componets)에서 Sound1을 선택해도 됩니다), 프로퍼티(Properties)에서 Source 속성의 "None..."을 선택합니다.
좀 전에 고양이 사진을 업로드 하던 방법과 같은 방법으로 다운로드 받은 "meow.mp3" 파일을 업로드하면 됩니다.
[Upload File ...] 버튼을 눌러 줍니다.
[파일 선택] 버튼을 눌러 meow.mp3 파일을 선택하고, [OK] 버튼을 누릅니다.
이제 디자이너(Designer)에서의 작업은 모두 끝났습니다.
이제는 블록에디터(Blocks)에서 추가한 버튼과 사운드가 어떻게 작동할지 코딩해주는 일만 남았습니다.
블록 코딩을 시작해 볼까요? => 첫 번째 앱 만들기 - 블록에디터
연재 바로가기 => http://www.educoding.kr/appinventor_info
'SW교육 > 앱인벤터' 카테고리의 다른 글
| 1-5강. 앱인벤터 실행 방법 (1) | 2015.03.30 |
|---|---|
| 1-4강. 첫 번째 앱 만들기 - 블록에디터 (0) | 2015.03.30 |
| 1-2강. 앱인벤터 기본 구조 (0) | 2015.03.30 |
| 1-1강. 앱인벤터 사용 준비하기 (0) | 2015.03.30 |
| 들어가기. 앱인벤터 소개 (0) | 2015.03.30 |