준비하시고~ 시작!
앱 인벤터란?
우리가 스마트폰 앱을 만드는 데 쓸 도구는 ‘앱인벤터’입니다. 앱 인벤터는 구글이 개발하고 미국매사추세츠공대(MIT)가 운영하고 있는 인터랙티브 앱개발 도구입니다. 2009년 구글이 누구나 안드로이드앱을 쉽게 만들 수 있도록 하기 위해 만든 게시작이었습니다. 그 뒤 MIT가 이어 받아 모바일 컴퓨팅교육을 확산시키고 연구하는 데 쓰고 있습니다.
현재 MIT의 앱 인벤터 커뮤니티는 195개국에 걸쳐300만 명에 가까운 사용자로 이뤄져 있습니다. 이를 이용해 만든 안드로이드 앱도 700만 개가 넘습니다. 컴퓨터 사용에 익숙한 사람이라면 누구나 쉽고 간단하게 앱을 만들 수 있고, 소프트웨어 교육에도 매우 유용합니다.
앱 인벤터 준비하기
앱 인벤터는 데스크탑 또는 노트북에서 웹브라우저를 통해 사용할 수 있습니다. 이를 위해서는 몇 가지 준비를 해야 합니다.
앱 인벤터 둘러보기
설치를 마쳤다면 어떻게 생겼는지 살펴봅시다. 앱 인벤터는 화면 UI를 만들 수 있는 디자이너 모드와
동작을 구현하는 블록 모드로 이뤄져 있습니다.
디자이너 모드
❶ 팔레트(Palette)
사용하고 싶은 컴포넌트를 찾아
뷰어로 드래그하면 앱에 기능이
추가됩니다.
❷ 디자이너(Designer) 버튼
이 버튼을 클릭하면 디자이너
모드로 이동합니다.
❸ 속성(Properties)
컴포넌트 목록에서 선택한
컴포넌트의 색상, 크기, 동작과 같은
속성을 여기서 변경할 수 있습니다.
❹ 뷰어(Viewer)
앱이 어떤 모습이 될지 확인할
수 있는 창입니다. 컴포넌트를
드래그해 원하는 디자인을 만들 수
있습니다.
블록 모드
❶ 공통 서랍(Built-In Drawers)
제어, 수학, 변수와 같은 일반적인
동작에 쓰는 블록이 모여 있습니다.
사용하고 싶은 블록을 드래그하여
블록 뷰어에 추가할 수 있습니다.
❷ 블록(Blocks) 버튼
이 버튼을 클릭하면 블록 모드로
이동합니다.
❸ 컴포넌트 전용
서랍(Component-Specific Drawers)
디자이너 모드에서 추가한
컴포넌트를 동작시키는 데 쓰는
블록은 이곳에서 찾을 수 있습니다.
❹ 뷰어(Viewer)
블록 서랍에서 원하는 블록을
드래그해 뷰어에 추가하세요.
마음대로 조립해 원하는 기능을
구현할 수 있습니다.
스마트폰과 연동하기
앱 인벤터로 앱을 만들기 위해서는 안드로이드 스마트폰 또는 태블릿PC가 필요합니다. 앱을 만들면서
스마트폰과 연동해 제대로 동작하는지 실시간으로 확인할 수 있습니다.
1단계 스마트폰 또는 태블릿PC에 ‘MIT AI2 Companion’ 앱을 설치
구글 플레이스토어에서 ‘MIT AI2 Companion’을 검색해서 앱을 설치합니다.
2단계 컴퓨터와 스마트폰을 같은 Wi-Fi에 연결
노트북을 이용할 경우 노트북과 스마트폰이 같은 Wi-Fi에 연결돼 있도록 합니다.
데스크톱을 이용할 때는 별도의 무선랜카드가 있어야 합니다.
3단계 앱 인벤터와 스마트폰 연동
앱 인벤터 메뉴의 Connent AI Companion을 선택한 뒤 스마트폰에 설치한 앱을 실행합니다.
Scan QR Code를 선택해 화면에 나타난 QR코드를 찍거나 직접 코드를 입력하면 둘이 서로 연동됩니다.
자기를 소개하는 앱 만들기
이번 호에서는 처음이니만큼 간단하고 의미 있는 앱을 만들어 보겠습니다. 바로 ‘말하는 자기소개’입니다. 새로운 친구를 만나면 가장 먼저 자기 소개를 하게 되지요? 이름은 무엇인지,어느 학교에 다니는지, 취미는 무엇인지 등을 서로 알려 주지요.
그런데 매번 똑같은 방식으로 인사하자니 조금 심심합니다. 스마트폰 앱으로 자신을 다른 친구들에게 소개할 수 있다면 더 재미있을 것 같습니다. 멋지게 나온 사진을 함께 보여 주고,버튼을 누르면 여러분이 누구인지 말을 해 주는 거예요. 영화 속에 나오는 인공지능 비서처럼 말이지요!
❶ 디자인 노트 만들기
새로운 친구를 만나 자신을 소개할 때 아쉬웠던 점은 무엇인가요? 아래 예제를 보고 자신이 하고 싶은 이야기를 담아 디자인을 해 보세요. 버튼의 종류와 개수를 원하는 대로 바꾸고,사진과 함께 위치를 정해 보세요.
❷화면에 버튼과 사진을 추가하기
이제 디자인한 대로 화면에 버튼과 사진을 추가해 보세요.
(1) 버튼 추가하기
▲ 팔레트에서 Button을 드래그해 뷰어로 가져갑니다.
▲ 속성에서 Button 안에 들어갈 글자를 ‘이름’으로 바꿔줍니다.
(2) 사진 추가하기
▲ 팔레트에서 Image를 드래그해 뷰어로 가져갑니다.
▲ Image 속성에서 Upload File을 클릭해 자신의 사진을 추가합니다. 추가한 버튼과 사진이 곧바로 스마트폰 화면에 나오는 것을 확인하세요. 만약 나오지 않을 경우 연동 상태를 확인하세요.
❸ 버튼을 클릭하면 이름을 말하게 만들기
▲ Media에 있는 TextToSpeech를 뷰어로 드래그합니다. TextToSpeech는 보이지 않는 컴포넌트로 앞에서 추가한 버튼,사진과 달리 뷰어 아래에 표시됩니다.
▲ Blocks 버튼(❶)을 클릭해 블록 모드로 이동합니다. ❷를 클릭한 뒤 When ~ Click 블록을 드래그해 화면으로 가져갑니다(❸).
▲ ❶을 클릭하고, ❷처럼 call ~ Speak 블록을 When ~ Click블록에 조립합니다.
▲ 최종 모습이 이렇게 되도록 합니다.
여기까지 다 되었나요? 스마트폰 화면을 보면 지금까지 추가한대로 ‘이름’ 버튼과 사진을 볼 수 있을 거예요. 이름 버튼을 터치하면 스마트폰에서 자신이 쓴 대로 음성이 흘러나오지요?
지금까지와 같은 방법으로 자신을 소개하는 다른 내용을 추가해보세요. 터치하면 학교나 취미, 좋아하는 것 등 다양한 내용이 음성으로 흘러나오게 할 수 있답니다.
이번에 익힌 방법으로 나만의 자기 소개 앱을 만들어 보세요. 다음 호에는 더 재미있는 앱으로 찾아오겠습니다.
