시작하세요! 앱 인벤터 : 코딩 한 줄 없이 안드로이드 앱 만들기

시작하세요!앱 인벤터

iv

•차 례•

들어가기 1대상 독자층 .........................................................................................................2

1부: 구글 앱 인벤터 설치와 시작 ......................................................................3

2부: 나만의 앱을 만든다 - 차례차례 따라하기 ................................................3

3부: 레퍼런스와 부록 .........................................................................................3

프로젝트 파일과 보너스 다운로드 ...................................................................4

Part I

1인터페이스를 둘러보며 첫 번째 앱 만들기 7

새 프로젝트 시작하기 ........................................................................................8

디자인 뷰와 친숙해지기 .........................................................................13

팔레트 칼럼 ..............................................................................................13

뷰어 칼럼 ..................................................................................................14

컴포넌트 칼럼 ..........................................................................................14

미디어 칼럼 ..............................................................................................15

속성 칼럼 ..................................................................................................15

v

새 프로젝트에 컴포넌트 추가하기 ................................................................ 16

버튼 컴포넌트 추가하기 .........................................................................16

레이블 컴포넌트 추가하기......................................................................18

이미지 컴포넌트 추가하기......................................................................19

사운드 컴포넌트 추가하기......................................................................19

스크린 컴포넌트 이름 바꾸기 .................................................................21

이미지 컴포넌트 이름 바꾸기 .................................................................22

레이블 컴포넌트 이름 바꾸기 .................................................................22

버튼 컴포넌트 이름 바꾸기 .....................................................................22

사운드 컴포넌트 이름 바꾸기 .................................................................22

사운드 컴포넌트에 소리 파일 추가하기 ................................................23

이미지 컴포넌트에 그림 추가하기 .........................................................23

속성 이해하기 ..........................................................................................24

이미지 컴포넌트의 속성 설정하기 .........................................................25

레이블 컴포넌트 속성 설정하기 .............................................................27

버튼 컴포넌트 속성 설정하기 .................................................................28

사운드 컴포넌트 속성 설정하기 .............................................................29

블록 에디터 소개하기 ..................................................................................... 30

빌트인 블록 미리보기 ..................................................................................... 31

버튼 컴포넌트 블록 꺼내오기 ........................................................................ 33

vi

사운드 컴포넌트 블록 꺼내오기 .................................................................... 33

프로젝트 잘 마무리하기 .........................................................................34

새로 만든 애플리케이션 저장하기 .........................................................34

Save As 버튼 .............................................................................................35

Checkpoint 버튼 ......................................................................................35

앱을 패키지화하기 ..................................................................................36

프로젝트 관리하기 .......................................................................................... 38

프로젝트 소스 코드 다운로드하기 .........................................................39

프로젝트 소스 코드 업로드하기 .............................................................40

프로젝트 지우기 ......................................................................................42

기존의 프로젝트 로딩하기......................................................................42

2프로그래밍과 디자인의 기본 43

디자인 아이디어를 명료하게 만들기 ............................................................ 44

단위 목표 도출하기 ......................................................................................... 47

쉬운 것부터 시작해서 복잡한 것으로 진행하기 .......................................... 51

기본적인 프로그래밍 용어 익히기 ................................................................ 52

이벤트 .......................................................................................................53

메서드 ......................................................................................................54

속성 ...........................................................................................................55

변수 ...........................................................................................................56

프로시저 ..................................................................................................58

vii

Part II

3SounDroid : 안드로이드 사운드 머신 만들기 63

SounDroid 2.0 생성 ........................................................................................ 64

디자인 .......................................................................................................64

단위 목표 ..................................................................................................66

진행 단계 ..................................................................................................66

새 컴포넌트 ..............................................................................................67

새 블록 ......................................................................................................67

SounDroid 2.0 시작하기 ................................................................................ 67

사운드 반복을 위한 컴포넌트 추가하기 ................................................72

소리 반복 재생 기능 제대로 다루기 .......................................................79

SounDroid 프로젝트 개선하기: SounDroid 3.0 .......................................... 85

디자인 .......................................................................................................85

디자인 목표 ..............................................................................................86

단위 목표 ..................................................................................................86

진행 단계 ..................................................................................................86

새 컴포넌트 ..............................................................................................87

새 블록 ......................................................................................................87

SounDroid3.0 시작하기 ................................................................................. 87

타이머 카운터 처리부분 만들기 ...............................................................90

타이머 처리 프로시저 정의하기 ...............................................................94

procTimer 프로시저를 버튼 이벤트 핸들러에 추가하기 ......................97

viii

4OrderDroid : 데이터 관리가 편한 모바일용 스토어 앱 99

OrderDroid 애플리케이션 만들기 .............................................................. 100

디자인 .....................................................................................................101

단위 목표 ................................................................................................102

진행 단계 ................................................................................................102

새 컴포넌트 ............................................................................................102

새 블록 ....................................................................................................103

OrderDroid 1.0 시작하기 ............................................................................ 103

OrderDroid 1.0에 새로운 컴포넌트 더하기 ............................................... 107

이메일로 전송할 양식 데이터 모으기 ..................................................113

이메일 작성하기 ....................................................................................119

OrderDroid 2.0 만들기 ................................................................................ 125

디자인 단계 ............................................................................................125

단위 목표 ................................................................................................126

진행 단계 ................................................................................................127

새 컴포넌트 ............................................................................................127

새 블록 ....................................................................................................127

OrderDroid 2.0 시작하기 ............................................................................ 128

화면 이동용 엘리먼트 더하기 ...............................................................129

상품 여러 개를 저장하고 포맷해서 표시하기 .....................................133

varShoppingCart 목록을 보여주는 프로시저 만들기 ........................136

장바구니 내용 갱신하기 .......................................................................138

장바구니 기능 마무리 ...........................................................................139

이메일 전송 프로시저 ...........................................................................140

ix

5AndroidDown: 위치 인식 비상 버튼 147

AndroidDown 애플리케이션 만들기 ......................................................... 149

디자인 .....................................................................................................149

단위 목표 ................................................................................................150

진행 단계 ................................................................................................151

새 컴포넌트 ............................................................................................151

AndroidDown 1.0 시작하기 ........................................................................ 151

인터페이스 다듬기 ................................................................................154

LocationSensor로 사용자의 위치 파악하기 .......................................156

위치와 전화번호 기능 완성하기 ...........................................................162

AndroidDown 2.0 만들기 ............................................................................ 169

디자인 .....................................................................................................170

단위 목표 ................................................................................................172

진행 단계 ................................................................................................172

새 컴포넌트 ............................................................................................173

새 블록 ....................................................................................................173

AndroidDown 2.0 시작하기 ........................................................................ 173

버튼 이벤트 핸들러 만들기 ...................................................................176

버튼 이벤트 만들기 ...............................................................................180

메시지 보내기 ........................................................................................183

procLocationWait 프로시저 완성하기 ................................................190

x

6AlphaDroid: 알파벳 트레이싱 게임 193

AlphaDroid 1.0 만들기 ................................................................................ 194

디자인 .....................................................................................................194

단위 목표 ................................................................................................195

진행 단계 ................................................................................................196

새 컴포넌트 ............................................................................................196

새 블록 ....................................................................................................196

AlphaDroid 1.0 시작하기 ............................................................................ 197

색상 고르기 ............................................................................................199

드래그 이벤트와 터치 이벤트 이해하기 ..............................................202

BackgroundImage 속성 바꾸기 ...........................................................204

Canvas1.Touched 이벤트 핸들러 다듬기 ...........................................206

버튼 이벤트 핸들러 설정하기 ...............................................................208

그림 그리기 기능에 마무리 작업하기 ..................................................209

AlphaDroid 2.0 만들기 ................................................................................ 213

단위 목표 ................................................................................................214

진행 단계 ................................................................................................214

새 컴포넌트 ............................................................................................214

AlphaDroid 2.0 시작하기 .....................................................................215

안드로이드 로봇 앤디를 움직이게 만들기 ..........................................218

캔버스의 가장자리에서 스프라이트 다루기 .......................................220

스프라이트 터치 이벤트 처리하기 .......................................................222

xi

7PunchDroid: 안드로이드 펀치벅 게임 229

PunchDroid 애플리케이션 만들기 ............................................................. 230

디자인 .....................................................................................................231

단위 목표 ................................................................................................232

진행 단계 ................................................................................................232

PunchDroid 애플리케이션 개발 시작하기 ................................................ 233

설정 페이지 이벤트 처리하기 ...............................................................238

주 게임 화면의 이벤트 처리하기 ..........................................................249

PunchDroid 애플리케이션 설치하기 ......................................................... 260

8Collection Assistant: 바코드와 데이터베이스 애플리케이션 261

Collection Assistant 1.0 만들기 ................................................................. 262

디자인 ....................................................................................................263

단위 목표 ...............................................................................................264

새 컴포넌트 ...........................................................................................264

새 블록 ...................................................................................................264

진행 단계 ...............................................................................................264

Collection Assistant 1.0 시작하기 ............................................................. 265

Collection Assistant 2.0 만들기 ................................................................. 281

디자인 ....................................................................................................281

단위 목표 ...............................................................................................282

xii

새 컴포넌트 ...........................................................................................282

새 블록 ...................................................................................................283

진행 단계 ...............................................................................................283

Collection Assistant 2.0 개발 시작하기 .................................................... 283

도전 과제 ....................................................................................................... 301

9BlueChat: 블루투스 채팅 클라이언트 303

BlueChat 애플리케이션 만들기 .................................................................. 304

디자인 ....................................................................................................304

단위 목표 ...............................................................................................305

새로운 컴포넌트 ...................................................................................306

새로운 블록 ...........................................................................................306

진행 단계 ...............................................................................................306

BlueChat 개발 시작하기 .............................................................................. 307

도전 과제 ....................................................................................................... 327

10TwiTorial: 트위터 애플리케이션 329

TwiTorial 애플리케이션 만들기 ................................................................. 330

디자인 ....................................................................................................331

단위 목표 ...............................................................................................331

xiii

새 컴포넌트 ...........................................................................................332

새 블록 ...................................................................................................332

진행 단계 ...............................................................................................332

TwiTorial 개발 시작하기 ............................................................................. 334

Part III

블록과 컴포넌트 레퍼런스 365빌트인(Built-In) 블록 ................................................................................... 366

De�nitions 서랍 ....................................................................................366

Text 서랍.................................................................................................371

Math 서랍 ...............................................................................................377

Control 서랍 ..........................................................................................377

My Blocks ...................................................................................................... 378

My De�nitions.......................................................................................379

Media 팔레트 컴포넌트 ........................................................................381

Social 팔레트 ..........................................................................................383

Sensors 팔레트 .......................................................................................385

Lego Mindstorms 팔레트 .....................................................................389

Other Stu� 팔레트.................................................................................390

Not Ready for Prime Time 팔레트 ......................................................391

xiv

A휴대폰과 컴퓨터 설정하기 395

휴대폰 설정하기 ............................................................................................ 396

컴퓨터에 자바 설치하기 .......................................................................399

자바 웹 스타트 테스트하기 ...................................................................402

자바 웹 스타트 동작 방식 검사하기 .....................................................402

자바 설치 문제 해결하기 ......................................................................406

앱 인벤터 설정 소프트웨어 패키지 설치하기 ............................................ 408

ADB (Android Debug Bridge)로 작업하기 ............................................... 409

커맨드 프롬프트에서 앱 인벤터 설정 소프트웨어 패키지 디렉터리로 이동하기 .......................................................................................................411

휴대폰 연결 점검하기 ...........................................................................412

특수한 상황에 대처하기 ............................................................................... 412

ADB로 휴대폰의 로그 메시지 실시간으로 보기 ................................413

휴대폰 로그 메시지를 저장해서 Notepad/Textedit으로 보기 ..........413

안드로이드 에뮬레이터로 작업하기 ........................................................... 414

안드로이드 SDK와 다른 에뮬레이터 설정 둘러보기 ................................ 416

휴대폰 연결 문제 해결하기 .......................................................................... 416

휴대폰 디바이스 드라이버 설치 확인하기 ..........................................416

휴대폰 드라이버 설치 혹은 재설치하기 ..............................................418

윈도우에서 디바이스 드라이버 제거하기 ...........................................419

윈도우에서 수동으로 드라이버를 설치하기 .......................................419

xv

B개인 전용 TinyWebDB 만들기 423

구글 앱 엔진 계정 만들기 ........................................................................... 425

TinyWebDB 서비스 수정 및 설치 ............................................................. 427

찾아보기........................................................................430

xvi

•옮긴이 글•

누구나 할 수 있는 프로그래밍이란 과연 어떤 것일까?

컴퓨터를 쓰는 일이 곧 프로그래밍을 하는 것을 뜻하던 때가 있었다. 개인용 컴퓨터가 삶의 모

양새를 뿌리부터 흔들어 바꾸어 놓을 것이라고는 생각지 못한 오래전의 일이다. 프로그래밍 언

어를 익혀 필요한 프로그램을 대부분 직접 만들어 써야 하던 그 시절은 지나고 컴퓨터가 본격적

인 도구로 자리잡으면서 쓰고자 하는 프로그램의 기능은 점차 복잡해졌다. 이와 함께 프로그래

밍 이론과 환경 역시 점점 복잡하고 정교해져서 이제는 감히 접하기 어려운 전문가의 영역으로

완전히 넘어간 것으로 보였다.

세월이 흘러 이제 전혀 다른 차원에서 프로그래밍이 다시 사람들의 주목을 받는 현상은 마치

컴퓨터의 역사가 되풀이되고 있는 모습을 보는 것 같아 흥미진진하다. 그 배경에는 스마트폰이

주도하는 모바일 컴퓨팅 환경이 있다. 급속히 소형화와 함께 진행된 컴퓨팅 환경의 특성은 개인

화다. 개인화는 이제 자신의 취향에 맞추어 배경화면과 아이콘을 바꾸고 액세서리를 달아주는

단순한 수준에 그치지 않는다. 몸의 일부처럼 떼어 놓지 않고 하루를 함께 보내는 모바일 기기상

에서 자신이 원하는 기능의 프로그램을 직접 만들어 돌려 볼 수 있기를 바라는 궁극적인 개인화

의 단계로 이르는 것은 어쩌면 자연스런 흐름으로 볼 수도 있을 것이다.

예전에도 그랬고 지금도 역시 프로그래밍은 간단한 일이 아니다. 그래서 프로그래밍의 긴 역사

가 축적해온 ‘모든 이를 위한 프로그래밍’, 즉 자신이 바라는 기능의 프로그램을 쉽게 만들 수 있

는 방법은 과연 어떤 것일지 호기심을 자아낸다. 그 방법을 제시하고 있는 주체가 구글이라면 더

욱 그럴 것이다.

탁월한 기술력으로 전 세계 검색 시장을 장악하고 그 영역을 모바일 컴퓨팅 환경으로까지 넓

힌 구글이 자사의 안드로이드 플랫폼을 통해 ‘모든 이를 위한 프로그래밍’의 답으로 제시하고 있

는 것이 바로 이 책에서 소개하는 앱 인벤터다. 프로그래밍을 모르고서는 컴퓨터를 쓸 수 없던

때와는 달리, 그동안 발달해온 기술과 연구 성과를 바탕으로 프로그래밍의 장벽을 낮추면서도

고성능의 컴퓨팅 환경을 최대한 활용할 수 있도록 한 배려가 느껴진다.

xvii

색색의 블록을 쌓아 무언가를 만들던 어린 시절 놀이처럼, 이어 붙여 나간 블록이 실제 프로

그램이 되어 내 안드로이드 폰에서 돌아가는 모습은 아마 처음 해본 블록 쌓기 놀이만큼(지금은

어렴풋하지만)이나 신기하고 즐거운 경험이었다. 저자의 말처럼 앱 인벤터가 본격적인 프로그래

밍으로 나아가는 훌륭한 징검다리 역할 역시 해줄 수 있을 것이라 생각한다.

구글은 최근 앱 인벤터를 완전히 오픈소스로 공개하였다. 추후 개발과 관리는 초기부터 앱 인

벤터를 함께 설계한 MIT 미디어 랩에서 맡기로 했다. 앞으로 어떤 새로운 방향으로 앱 인벤터가

진화할지 관심을 가지고 지켜볼 만하다.

좋은 책의 번역 기회를 주신 위키북스 박찬규 사장님과 꼼꼼한 교정으로 오류를 잡아 주신 김

윤래 팀장님께 감사의 뜻을 전한다. 번역에 시간을 내어야 했던 기간 동안 가족의 격려와 이해가

없었다면 무척 힘든 일이 되었을 것이다.

- 강인선, 김진석

xviii

•감사의 글•

레베카, 이 책을 내기 위해 당신이 겪었던 희생에 감사하고 있습니다. 영원히 사랑합니다.

리암과 디클란, 아빠가 글 많이 쓰게 해줘서 고맙다.

존 바톨로미오, 정직함과 탄탄한 기술적 지식은 제게 정말 소중했습니다.

빌 드와이어, 프로그래밍 리뷰와 강의에 감사드립니다. 당신은 정말 훌륭한 선생님입니다.

할 에이블슨, 앱 인벤터와 그에 담긴 철학을 위해 헌신한 오랜 시간에 감사드립니다. 당신은 진정

한 거목입니다.

앱 인벤터 구글 개발팀: 캐런, 섀론, 리즈, 마크. 여러분들이 안드로이드 애플리케이션의 새 분야

를 개척하고 다져놓은 공로에 합당한 찬사의 말을 찾는 것은 너무 힘듭니다. 여러분들의 열정과

헌신, 탁월한 재능에 비견할 것은 아무것도 없을 것입니다.

AI PowerUsers: 수아 토브, 에드, 조쉬 터너, 쉬발, 스티브: 여러분들과 함께 일하며 많은 것을 배

웠습니다.

레이첼, 집필에 몰두할 수 있게 배려해준 최고의 상사입니다.

크리스 웹, 이런 기회를 주고 또 필자의 변덕을 다 받아준 것 변함없이 감사드립니다.

린다, 필자를 보기 좋게 꾸며준 것 감사합니다.

데니스 코언, 맥 관련 부분에 준 도움 감사합니다.

아버지, 이 분야에 관심 갖게 해주신 것 감사합니다.

어머니, 가르침을 받게 해 주시고 책, 언어, 그리고 최고의 것을 사랑하게 해 주신 것 감사합니다.

어머니께 누구보다도 많은 것을 배웠습니다.

마지막으로, 모든 어려운 고비를 넘게 해준 지난 궂은 날들에 감사합니다.

xix

레베카 수에게 바칩니다. 그대에게 약속한 높은 곳으로 나아가고 있습니다.

낮은 곳에 있을 때에도 함께 해준 것 고맙습니다.

들어가기

2 l 시작하세요! 앱 인벤터

구글과 OHA(Open Handset Alliance)가 안드로이드 시스템을 처음 공개했을때, 필자는 스마트

폰의 혁명에 발맞추어 무료 오픈소스 앱 개발 환경을 쓸 수 있다는 멋진 사실에 가슴이 뛰었다.

하지만 이미 잔뜩 녹슬어 버린 프로그래밍 실력으로 자바와 안드로이드 개발킷(SDK)을 다루어

보려는 순간 녹록지 않은 현실의 벽에 부딪치고 말았다. 알아야 할 것은 너무 많은 반면 실제로

깨치는 것은 너무 적어 계속 나아가기가 어려웠던 것이다. 그러던 중 구글이 앱 인벤터라는, 누구

라도 쉽게 안드로이드 앱을 만들 수 있게 해주는 도구를 내놓았다. 그 도구를 보자 스스로 앱을

만들어 보고자 하는 의욕이 되살아났다. 직접 사용법을 익히고 친숙해지면서 필자와 같은 비숙

련자들이 앱 인벤터를 써서 얼마나 유용한 앱을 만들 수 있는지 깨달으며 놀라워하게 되었다. 앱

인벤터와 수개월 동안 붙어 지낸 후엔 전통적인 자바와 SDK 개발 환경도 훨씬 쉽고 재미있게 다

가왔다.

대상 독자층

이 책은 완전한 컴퓨터 초보자에서 숙련된 디자이너/개발자까지 모두를 대상으로 한다. 그 누구

든 이 책을 통해 앱 인벤터의 인터페이스, 컴포넌트와 쉽게 가까워지게 될 것이다.

전혀 프로그래밍 경험이 없다 해도 안드로이드 앱 개발의 세계로 들어갈 수 있다는 사실은 정

말 멋진 것이다. 기발한 앱 아이디어가 있기만 하다면 앱 인벤터를 써서 그 아이디어를 현실화할

수 있다. 핸드폰 앱이 어떻게 만들어지는지 또 어떻게 동작하는지 궁금했다면 직접 만들어 보는

것이 가장 쉬운 답이다. 또 테스팅과 데모용으로 빨리 앱을 구현하는 데도 매우 유용하다.

이 책은 구글이 내놓은 안드로이드용 앱 인벤터를 써서 안드로이드 앱을 만드는 데 도움을 주

고자 하는 목적으로 기획됐다. 앱 인벤터는 웹 기반 프로그램으로 일반 핸드폰 사용자부터 경험

많은 개발자에 이르기까지 누구라도 쉽게 안드로이드용 앱을 만들 수 있게 해준다.

<시작하세요! 앱 인벤터>는 훌륭한 앱 아이디어와 탄탄한 개발 경험을 지닌 개발자에게도 유

용하다. 기술에 대한 이해와 경험이 많은 개발자라면 앱 인벤터의 도움을 받아 디버깅이나 문법

오류, 개발 자체에 시간을 덜 쏟으면서 더 멋진 앱을 만들 수 있을 것이다.

01 인터페이스를 둘러보며 첫 번째 앱 만들기 l 3

1부: 구글 앱 인벤터 설치와 시작

우선 앱 인벤터를 둘러본 후 간단한 앱을 만들어 보면서 시작한다. 1부에서는 먼저 앱 인벤터 화

면과 기본적인 컴포넌트에 익숙해지도록 한다.

여러 컴포넌트와 프로그래밍 로직을 덧붙여 가다 보면 프로그래밍에 대해 품고 있던 막연한

두려움이 해소될 것이다. 앱 인벤터의 각 부분도 차례로 소개한다. 그러고 나면 자신감이 생기면

서 편안한 마음으로 2부로 넘어갈 수 있을 것이다.

2부: 나만의 앱을 만든다 - 차례차례 따라하기

2부에서는 종이 위에 끄적거린 아이디어를 실제로 동작하는 앱으로 만드는 기초를 다진다. 아동

용 알파벳 트레이싱 게임에서 시작해서 블루투스 채팅 프로그램에 이르기까지 여러 앱을 만드는

과정을 따라가 본다. 실제 만들고자 하는 앱에 적용 가능한 다양한 개념과 프로그래밍 기법이 이

예제들 속에 담겨 있다.

3부: 레퍼런스와 부록

‘블록과 컴포넌트 레퍼런스’를 수록하여 앞서 살펴보지 못한 중요한 블록들을 소개하였다. text

블록과 같은 블록들을 그림을 통해 설명한다. 자신만의 앱을 만들고자 한다면 3부에서 소개하

는 예제를 기본으로 해서 만들려는 앱의 사양에 맞도록 기능을 더하면 된다.

앱 인벤터로 만든 프로그램을 휴대폰에 올릴 수 있게 설정해 놓지 않았다면 부록 A의 내용을

보면서 컴퓨터와 휴대폰을 설정하도록 한다. 부록 B에서는 TinyWebDB 서비스를 돌리는 방법

을 단계별로 설명하였다. TinyWebDB 서비스는 본 책 전반에 걸쳐 쓰이는 웹 데이터베이스 서비

스다. 몇 분만 시간을 내면 프로그램이 데이터를 저장하고 서로 교환할 수 있도록 해주는 자신만

의 웹 서비스를 띄울 수 있다.

4

프로젝트 파일과 보너스 챕터 다운로드

소개한 프로젝트들은 다운로드해서 나중에 쉽게 찾을 수 있도록 컴퓨터 어느 곳에 풀어 놓도

록 한다. 완성한 앱은 어느 안드로이드 기기에서도 대부분 잘 동작한다. 프로젝트 파일은 www.

wiley.com/go/appinventorandroid 사이트에서 내려받을 수 있다.

위 사이트에는 “스프라이트 처리: 물리 법칙 적용의 기초”라는 보너스 챕터도 올라와 있다. 이

것은 좀 더 고급 내용을 다루고 있는 것으로, pdf 파일 포맷으로 되어 있으므로 어도비 리더로 읽

기 바란다.

위키북스 홈페이지에서도 프로젝트 파일과 보너스 챕터를 내려 받을 수 있다.

www.wikibook.co.kr

위키북스 홈페이지로 가서 <시작하세요! 앱 인벤터> 표지를 클릭하면 메뉴가 나오는데, 그중

에 [소스 코드]라는 메뉴를 클릭하면 프로젝트 파일을 내려 받을 수 있다.

또, [보너스챕터] 메뉴를 클릭하면 한글로 번역한 보너스 챕터 파일을 내려 받을 수 있다.

5

1장 _ 인터페이스를 둘러보며 첫 번째 앱 만들기

2장 _ 프로그래밍과 설계의 기본

Part I

6

1부에서는 앱 인벤터라는 물에 발가락부터 살짝 담가 본다. 1장에서는

독자 여러분이 곧바로 간단한 앱을 하나 만들어 보면서 앱 인벤터 사용

자 인터페이스에 익숙해지도록 안내한다. 2장은 프로그래밍과 설계의

기본을 배우는 입문의 장이다. 이 장에서는 설계의 목표를 구체화하는

방법과 단위 목표에 따라 프로젝트를 진행하는 방법, 그리고 꼭 알아둬

야 할 프로그래밍 용어들을 다룬다.

이미 앱 인벤터에 익숙한 사용자라면 곧장 2부로 넘어가서 좀 더 흥미

로운 앱들을 만들어 봐도 좋다.

1장

인터페이스를 둘러보며 첫 번째 앱 만들기

이번 장에서 배울 내용

■ 앱 인벤터 인터페이스에 익숙해지기

■ 앱 인벤터에서 사용하는 용어 배우기


앱 인벤터는 웹 페이지와 자바 인터페이스를 이용해서 안드로이드 애플리케이션을 디자인하고

프로그래밍할 수 있는, 구글에서 만든 매우 훌륭한 시스템이다. 아주 약간의 프로그래밍 지식만

있어도 앱 인벤터를 가지고 여러분 자신 혹은 지인들을 위해 간단한 애플리케이션을 만들 수 있

다. 이러한 경험이 쌓이다 보면 앱 인벤터로도 복잡하고 멋진 기능을 하는 애플리케이션을 만들

수 있다.

번뜩이는 아이디어가 떠올라 “요런 앱이 있으면 좋겠어!”라고 생각해 본 적이 있다면 용기를 내

보자. 앱 인벤터를 사용하면 여러분이 그런 앱을 직접 만들 수 있다. 만약 아직은 그렇게까지 멋

진 아이디어가 생각나지 않더라도 이 책에서 소개하는 프로젝트를 따라가다 보면 좋은 아이디어

가 반짝하고 떠오를 것이다. 각 프로젝트를 하다가 애플리케이션 아이디어가 생각나면 바로 적을

수 있게 곁에 공책을 놓아두길 권한다. 앱 인벤터로 만든 애플리케이션은 대개 개인이나 그룹에

특화해서 만든 것이 많다. 종교나 사회 단체, 혹은 친구들끼리의 모임에서 기존의 일반적인 앱을

잘 활용할 수도 있지만, 특정 그룹에서 원하는 용도에 딱 맞게 만들어져 있지는 않다. 같은 바퀴

를 새로 발명할 필요는 없다. 하지만 원하는 대로 조각하고 잘라낸 더 멋진 맞춤 바퀴를 발명할

수 있다는 것을 기억해두자.

앱 인벤터 사용을 위해 계정을 등록하지 않았다면 http://appinventorbeta.com에서 등록해야

한다. 지메일(Gmail)이나 구글 앱스(Google Apps) 계정이 필요하다.

일러두기

앱 인벤터 작업을 할 때 사용할 컴퓨터와 휴대폰을 설정하지 않았다면 부록 A로 넘어가서 앱

인벤터 프로그래밍을 위한 설정 과정을 따라 한다.

새 프로젝트 시작하기

프로젝트를 만들려면 등록된 계정으로 앱 인벤터에 로그인을 해야 한다. 이전에 한 번도 앱 인벤

터에 로그인한 적이 없다면 앱 인벤터 사이트의 About 페이지나 Learn 페이지가 화면에 나올 것

이다. 이전에 로그인을 해서 프로젝트를 생성한 적이 있는지 여부에 따라 My Projects 목록이 나

오거나 Design 뷰가 나온다. 프로젝트를 작업 중이었다면 앱 인벤터는 마지막으로 작업했던 애

플리케이션을 기억해뒀다가 디자인 뷰를 열어서 보여준다.


이번 1장과 2장에서는 사용자가 버튼을 누르면 단일 사운드가 재생되는 간단한 사운드보드

앱을 첫 번째 프로젝트로 시작해 본다. 일반적인 프로그래밍 책에서 사용하는 전형적인 첫 예제

“Hello, World” 대신에 이 프로젝트를 선택한 이유는 앱 인벤터가 일반적인 프로그래밍과 전혀

다르기 때문이다. 앱 인벤터로는 훨씬 초기 단계부터 다양한 기능을 구현할 수 있다.

My Projects 화면에서 프로젝트를 시작할 때 다음 과정을 따라 한다.

1. My Projects 페이지에서(그림 1-1) New 버튼을 클릭하면 New App Inventor for

Android Project 다이얼로그 창이 나온다.

2. Project Name 칸에 SounDroid라고 입력한다. 혹은 마음에 드는 다른 이름을 적어도

된다. 생각해둔 기능들을 모두 완성하기 전까지는 작업 내용을 구체적으로 설명하는 이

름을 프로젝트 이름으로 정한다. 앱을 완성하고 난 뒤에 디자인 뷰에서 Save As 메뉴를

사용해서 ‘Appzilla’ 같은 멋진 이름을 지을 수 있다. 앱 인벤터로 여러 앱을 작업하다 보

면 My Projects가 여러 프로젝트 이름으로 가득 차게 될 텐데, 앱을 완성 하기 전 단계에

서 Appzilla 같이 멋있는 이름은 그 속에서 필요한 앱을 찾아내는 데에는 도움이 되지

않는다.

3. OK 를 클릭한다.

그림 1-1 Project Name 칸에 새로운 프로젝트 이름 짓기


디자인 뷰는 그림 1-2와 같이 빈 프로젝트를 로드한다. 이곳이 앱에 사용될 디자인 엘리먼트와

컴포넌트를 가져다 놓을 공간이다. 이 장의 ‘디자인 뷰와 친해지기’에서 자세히 소개한다.

속성컴포넌트팔레트

뷰어 미디어

그림 1-2 새로운 프로젝트를 위한 디자인 뷰

화면 중간의 빈 사각형 공간을 뷰어(Viewer)라고 부른다. 뷰어 모양은 휴대폰 화면과 거의 유

사하다. 휴대폰처럼 배터리 잔량, 시간, 네트워크 상태 아이콘 등도 볼 수 있다. 그렇다고 해서 디

자인 뷰에서 보는 모양이 휴대폰에서 보게 될 모양과 똑같지는 않다는 점에 유의해야 한다. 따라

서 애플리케이션을 개발할 때는 휴대폰을 앱 인벤터와 연결하여 실제 전화기에서 앱을 테스트해

봐야 한다. 휴대폰에서 테스트해보려면 다음과 같은 절차가 필요하다.

1. 컴퓨터 USB 포트에 휴대폰을 연결한다. 휴대폰을 앱 인벤터에 연결한 뒤 디자인 뷰로 돌

아와서 비어있는 캔버스 화면 위에 버튼이나 그림, 혹은 텍스트 필드를 그리면 애플리케

이션이 완성되었을 때 전화기에서 어떻게 보일지 알 수 있다.

2. 블록 에디터 열기(Open the Blocks Editor) 버튼을 클릭해서 그림 1-3과 같이 블록 에디터

(Blocks Editor)를 연다. 이것은 블록 에디터라는 자바 웹 스타트(Java Web Start) 프로그램

을 구동시키는 과정으로서 컴퓨터 브라우저가 해당하는 자바 파일을 다운로드받아서 실

행시킨다. 브라우저 설정에 따라서 사용자가 수동으로 자바 프로그램을 실행해야 할 수

도 있다.


일러두기

자바 웹 스타트 프로그램은 웹 브라우저가 실행시키기는 하지만 별개로 동작하는 프로그램이

다. 블록 에디터는 앱 인벤터의 일부이면서 브라우저에서 별개로 실행된다. 만약 블록 에디터

가 잘 실행되지 않는다면 부록 A에서 설정 및 문제 해결 도움말을 참고한다.

3. 블록 에디터가 자동으로 실행되지 않는다면 이전 과정에서 다운로드한 파일을 찾아서 더

블클릭하면 실행된다. 보안 경고문이 나오면 이 정보 제공자의 컨텐트는 항상 신뢰(Always

Trust Content from �is Provider) 체크 박스를 선택하고 OK 또는 확인을 클릭한다.

블록 에디터 열기

그림 1-3 Open Blocks Editor 버튼을 클릭하면 블록 에디터를 다운로드해서 실행시킨다.

경고

이 과정대로 잘 수행되지 않는다면 부록 A에서 휴대폰과 컴퓨터를 어떻게 설정하는지 찾아보

자. 마찬가지로 블록 에디터를 실행하는 데 문제가 있다면 부록 A에서 컴퓨터와 브라우저의

자바 관련 설정법에 대한 도움말을 찾아보자.

앱 인벤터 애플리케이션 프로그래밍은 두 가지 인터페이스로 구성된다. 디자인 뷰와 블록 에

디터다. 앱 인벤터의 프로그래밍은 다채로운 색상의 블록들로 구성돼 있는데, 퍼즐 조각처럼 서

로 딱딱 끼워 맞출 수 있게 고안되었다. 블록은 서로 딱 끼워 맞췄을 때 휴대폰에 수행할 명령 문


장을 만들어 내는 단어 조각과도 같다. 블록 편집기는 그런 퍼즐 조각들...아니, 블록들을 조합할

수 있도록 해주는 인터페이스이다. 블록 편집기는 나중에 “블록 에디터 소개하기" 단락에서 더

자세히 다룬다. 아직은 그 예쁜 버튼들 구경에 정신 놓고 있진 말자.

블록 에디터가 실행되면 편집기 화면 가장 위 오른쪽에 휴대폰과 연결하기 위한 Connect to

Phone 버튼이 있다(그림 1-4). 그 버튼을 클릭하면 앱 인벤터에 연결된 휴대폰에 필요한 정보를

전송하기 시작한다. 앱 인벤터가 문제 없이 휴대폰에 연결되고 나면, 그 이후에 디자인 뷰와 블

록 에디터에서 수정하는 애플리케이션 디자인과 기능들이 연결된 휴대폰에 그대로 반영된다. 앱

인벤터가 휴대폰에 연결되어 있는 동안 Connect to Phone 버튼은 애플리케이션 다시 실행하기

Restart Application 버튼으로 바뀌어 있다. 앱이 실제 휴대폰에서 생각과 다르게 동작을 하거나,

제대로 업데이트가 되지 않으면 애플리케이션을 다시 실행해본다.

Connect to Phone (전화기와 연결하기) 버튼

그림 1-4 블록 에디터

휴대폰에 비어있는 하얀 화면이 나오는 걸 확인한 뒤 블록 에디터 창은 접어 두고 브라우저에

떠 있는 디자인 뷰로 돌아가자.


디자인 뷰와 친숙해지기

완성된 앱 인벤터 애플리케이션을 만들기 위해서는 크게 두 가지 과정이 필요하다. 그중 첫 단계

는 디자인 뷰에서 컴포넌트를 프로젝트에 추가하는 것이다. 1 추가하는 컴포넌트 중에 버튼이나

레이블 혹은 텍스트 같이 눈에 보이는 컴포넌트들은 사용자 인터페이스를 구성한다. 사용자 인

터페이스(UI)는 애플리케이션을 구성하는 요소 중 사용자와 직접 대면하여 반응하는 부분이다.

디자인 뷰에서 추가하는 또 다른 컴포넌트들은 눈에 직접 보이지는 않지만 특정한 기능을 제공

한다. 데이터베이스 기능이나 화면을 정렬해주는 기능이 그런 것들이다. 앞으로 첫 번째 애플리

케이션을 만들면서 인터페이스를 살펴보도록 하겠다.

디자인 뷰는 다섯 개의 기본 칼럼으로 구성된다.

■ 팔레트(Palette)

■ 뷰어(Viewer)

■ 컴포넌트(Components)

■ 미디어(Media)

■ 속성(Properties)

미디어 칼럼과 컴포넌트 칼럼은 아래 위로 붙어 있다. 다음 절에서 디자인 뷰에 있는 각 칼럼

들에 대해 좀 더 자세히 다루겠지만, 이 칼럼들을 이해하는 데 가장 좋은 방법은 직접 사용해보

는 것이다. 이 장의 나머지는 예제 프로젝트를 시작부터 끝까지 차근차근 설명하는 것으로 할애

했다. SounDroid 프로젝트를 만들면서 디자인 뷰의 각 영역을 시간을 들여 이해해보자.

팔레트 칼럼

팔레트 칼럼에는 프로젝트에 추가할 수 있는 모든 컴포넌트가 들어있다. 마치 화가의 팔레트에

물감이 그룹 지어져 있는 것처럼 앱 인벤터의 팔레트 칼럼도 관련 있는 컴포넌트들이 그룹 지어

져 있다. 이 책 전반에 걸쳐 이 컴포넌트들을 다뤄볼 것이다. 그룹 이름을 클릭하면 그룹으로 묶

여 있는 팔레트를 열 수 있다. 예를 들어 소셜(Social) 그룹을 클릭하면 다른 그룹은 닫히고 소셜

그룹에 해당하는 컴포넌트들이 주르륵 나온다. 이 컴포넌트들로 전화 통화, 이메일, 트위터 피드

받기 등의 소셜 기능을 프로젝트에 추가할 수 있다. 한번 각 팔레트 그룹을 하나씩 클릭해보자.

1 　 (옮긴이) 두 번째 과정은 블록 에디터에서 작업하는 것으로 뒤에서 자세히 설명한다.


앞으로 본격적으로 작업을 시작해보면, 필요한 컴포넌트가 어디에 있는지 익숙해질 때까지는 각

그룹을 자주 열었다 닫았다 반복하게 될 것이다. 베이직(Basic) 팔레트에는 버튼(Button), 레이블

(Label), 텍스트(Text) 같은 단순한 컴포넌트들이 있는 반면, 애니메이션(Animation) 팔레트에는

스프라이트(Sprite), 캔버스(Canvasses)를 비롯해서 훨씬 고급 기능을 하는 컴포넌트들이 있다.

자, 지금 바로 베이직 팔레트를 클릭해서 베이직 컴포넌트를 열어보자.

뷰어 칼럼

마치 휴대폰 화면 같이 생긴 뷰어 칼럼에서 아무 컴포넌트나 클릭하면 컴포넌트 칼럼에서 해당

컴포넌트 이름이 밝은 색깔로 표시되고 편집할 수 있는 상태가 된다. 컴포넌트를 편집 가능한 상

태로 만들어 놓으면 선택한 컴포넌트에 해당하는 속성 값이 속성 칼럼에도 표시되고, 새로운 값

으로 설정할 수 있다.

컴포넌트 칼럼

컴포넌트 칼럼은 프로젝트에 추가한 모든 컴포넌트의 목록이다. 컴포넌트는 그림 1-5와 같이 가

지가 뻗어나가는 트리 구조로 정리되어 있고 최상위 레벨에는 스크린 컴포넌트가 있다. 이 구조

는 많은 컴포넌트를 계속 추가하더라도 가지 별로 접어둘 수 있어서 필요한 컴포넌트 접근이 편

리하다.

그림 1-5 복잡한 프로젝트를 트리 구조로 보여주는 컴포넌트 칼럼


미디어 칼럼

미디어 칼럼은 컴포넌트 칼럼 바로 아래에 있다(그림 1-6). 이 칼럼에서 애플리케이션에 사용한

모든 미디어 컴포넌트를 관리할 수 있고, 지원하는 미디어 종류를 추가할 수 있다. 사진이나 클립

아트, 음향효과, 음악, 혹은 동영상은 미디어 칼럼에서 업로드할 수도 있고, 속성 칼럼에서도 특

정 컴포넌트의 속성 값으로 곧장 추가할 수 있다. 앱 인벤터 프로젝트에 추가한 미디어 파일은 로

컬 컴퓨터에서 앱 인벤터 서버로 업로드된다. 한 개의 앱 인벤터 프로젝트에 들어가는 미디어 파

일 크기의 총합은 5MB이내여야 한다(앱 인벤터 프로젝트가 발전하다 보면 이 용량 제한에 조금

더 여유가 생길지도 모르겠다).

미디어 칼럼에서 미디어 이름을 클릭하여 다운로드(Download)나 삭제(Delete)를 선택하면 프

로젝트에서 미디어를 삭제하거나 다운로드할 수 있다. 미디어 이름은 앱 인벤터 서버에 미디어를

업로드하고 나면 이름을 변경할 수 없다. 꼭 간결하면서도 의미가 통하는 이름을 붙이도록 하자.

한편 파일 이름이 너무 길면 미디어 칼럼이 옆으로 늘어나서 뷰어 창이 찌그러들고 보기가 이상

해질 수 있다.

그림 1-6 미디어 칼럼은 컴포넌트 칼럼 아래에 있다.

속성 칼럼

프로젝트에 추가된 모든 컴포넌트는 어떤 모양으로 그릴 것인지, 또 애플리케이션 내에서 다른

컴포넌트들과는 어떻게 상호작용할 것인지를 변경할 수 있다. 컴포넌트의 속성 대부분은 속성

칼럼에서 설정할 수 있고, 혹은 블록 에디터의 블록을 이용하면 애플리케이션 실행 중에 특정 이

벤트가 발생할 때 속성 값이 바뀌도록 할 수도 있다.


익숙하지 않은 컴포넌트를 사용할 때는 속성 칼럼에서 각 필드를 찬찬히 살펴보자. 액티비티

스타터(ActivityStarter) 같은 컴포넌트들은 그 컴포넌트만의 고유하고 독특한 속성을 갖기도 한

다. 필자는 이 책에서 새로운 속성이 등장할 때마다 설명을 해두었다.

새 프로젝트에 컴포넌트 추가하기

컴포넌트를 추가할 때는 디자인 뷰에서 필요한 컴포넌트를 클릭해서 뷰어 창에 끌어다 놓으면 된

다. 휴대폰에 해당하는 부분은 Screen1으로 레이블이 붙어 있다. 모든 프로젝트는 Screen1이라

불리는 기본 컴포넌트로 시작하고 타이틀(Title) 속성 혹은 레이블은 Screen1으로 설정되어 있

다. 이 기본 스크린 컴포넌트를 여러분의 애플리케이션을 디자인해 넣을 빈 종이라 생각하면 된

다. 모든 앱 인벤터 컴포넌트는 속성(properties)이라 불리는 설정 값을 갖는다. 속성은 뷰어에서

컴포넌트를 선택하고 속성 칼럼에서 설정할 수 있다. 블록 에디터를 사용하면 애플리케이션 실

행 도중에도 이벤트 발생 여부에 따라 컴포넌트 속성 값을 바꿀 수 있다(여기에 대해서는 나중

에 “블록 에디터 소개하기" 단락에서 더 다뤄 본다). 이 장에서는 속성 칼럼을 이해하고 Screen1

이란 기본 제목을 실제 애플리케이션 제목으로 바꾸는 방법을 소개한다. 애플리케이션 이름은

뷰어에서 Screen1이라는 문자열이 있는 곳에 나온다. 컴포넌트를 화면에 추가하면 뷰어 창에는

위에서부터 아래 방향으로만 컴포넌트가 채워지고 왼쪽에서 오른쪽 방향으로는 채워지지는 않

는다. 3장에서 어떻게 하면 컴포넌트를 화면의 가로 방향이나 세로 방향으로 배치할 수 있는지,

그리고 애플리케이션을 구성하는 여러 개의 화면을 어떻게 표현할 수 있는지 설명한다. 일단 지

금은 베이직 팔레트 그룹을 클릭해서 열어보자.

일러두기

현재는 앱 인벤터가 다중 화면을 지원하지 않는다. 이러한 제약 때문에 불편한 점이 생기는데,

4장에서는 다중 화면을 흉내 낼 수 있는 쉽고 효과적인 방법을 소개한다. 앱 인벤터 개발 팀에

서 다중 화면 기능을 지원하기 위해 열심히 노력 중이라고 한다.

버튼 컴포넌트 추가하기

실제로 베이직 팔레트를 열어 버튼 컴포넌트를 끌어다 뷰어에 올려놓는 연습을 해보자. 버튼은

뷰어에만 나오는 것이 아니라, 뷰어에 연결된 여러분의 안드로이드 폰에도 나온다.


버튼은 애플리케이션 사용자와 반응을 주고 받을 수 있는 컴포넌트다. 즉 사용자가 누르면 뭔

가 일이 일어난다. 이 때문에 거의 대부분의 애플리케이션에서 빠지지 않는 중요한 컴포넌트다.

버튼은 이벤트를 발생시키고 개발자는 그 이벤트에 반응할 액션을 지정할 수 있다. 뷰어에 컴

포넌트를 추가할 때마다 새로운 컴포넌트 서랍(drawers)과 새로운 블록들이 블록 에디터의 My

Blocks 탭에 추가된다. 서랍에는 블록들이 들어 있다. 서랍은 블록 에디터 왼쪽에서 해당 버튼을

클릭하여 열어볼 수 있다. 블록 에디터를 클릭해서 새로 추가된 컴포넌트 서랍과 블록들을 확인

해보자. 블록 에디터 창을 최소화하면 여러분의 컴퓨터 창 맨 아래의 작업표시줄에 들어간다. 작

업표시줄의 아이콘을 클릭하면 다시 창이 복구된다. 블록 에디터를 완전히 닫아버리면 블록 에

디터 열기(Open the Blocks Editor) 버튼을 클릭해서 열어야 한다. 블록 에디터를 열면 왼쪽 칼럼

쪽에 Built-In과 My Blocks 탭이 나온다. My Blocks 탭을 클릭해보자. 디자인 뷰에 컴포넌트를

추가하면 그에 해당하는 컴포넌트 서랍이 새로 생긴다(그림 1-7). Button1을 클릭해서 컴포넌트

서랍을 열어보자. 디자인 뷰에서 추가 했던 버튼을 조작하기 위한 블록들은 모두 이 서랍 안에

담겨 있다.

My Blocks 컴포넌트 서랍들

그림 1-7 새로 추가한 버튼 컴포넌트를 위한 서랍과 프로그래밍 블록들

어떤 블록은 “버튼에 이러저러한 일이 생기면 어떤 일을 해줘야 할까?”라는 질문에 답을 주는

블록들이고, 어떤 블록은 버튼의 크기나, 문자열 혹은 버튼을 화면상에 실제로 보여줄지 말지 등


의 속성을 다루는 블록들이다. 버튼 추가는 디자인 뷰에서 했지만 버튼이 어떠한 동작을 취하도

록 만들어주는 것은 블록 에디터에서 한다. 블록을 이용해서 로직과 기능을 넣는 방법은 이 장

의 뒷부분에 있는 ‘블록 에디터 소개하기’에서 다루기로 하고, 지금은 디자인 뷰로 돌아가서 다른

컴포넌트들을 더 추가해보자.

레이블 컴포넌트 추가하기

베이직 팔레트에서 레이블 컴포넌트를 클릭하고 끌어서 뷰어 화면에 넣어보자. 이번에도 연결해

둔 안드로이드 폰에 새로운 레이블이 나타나는 것을 볼 수 있다. 레이블을 사용하면 화면에 보여

줄 텍스트의 위치를 정할 수 있다. 레이블의 속성이나 문자열도 블록 에디터에서 블록을 만들어

서 변경하고 다룰 수 있다. 아까 만들었던 버튼처럼 블록을 이용하면 레이블의 크기나, 화면에 보

여줄지 여부 또는 표시할 문자열과 같은 속성을 바꿀 수 있다. 레이블은 애플리케이션이 만들어

내는 정보를 화면에 표시할 때 사용한다.

기본적으로는 레이블은 Screen1에서 이전에 만들었던 버튼의 아래에 위치하는데, 컴포넌트

를 마우스로 끌어서 순서를 바꿀 수 있다. 레이블을 클릭하고 끌어서 버튼 위에 가져가 보자. 그

러면 그림 1-8처럼 푸른색 표시선이 생겨서 마우스를 놓았을 때 레이블이 어디에 놓일지를 표시

해준다.

푸른색 표시선

그림 1-8 푸른색 선은 컴포넌트가 놓여질 위치를 표시한다.


이미지 컴포넌트 추가하기

베이직 팔레트에서 이미지 컴포넌트를 끌어다가 뷰어의 Screen1에 놓아보자. 이미지 컴포넌트는

애플리케이션에 그림이나 사진이 보이도록 해준다. 앞서 나온 두 개의 컴포넌트와 마찬가지로 이

미지 컴포넌트를 추가하면 블록 에디터의 My Blocks에 새로운 서랍과 블록들이 생긴다. 이미지

컴포넌트는 이전에 나온 컴포넌트처럼 기본적으로 뷰어의 맨 끝에 놓인다. 이미지 컴포넌트를 끌

어서 레이블과 버튼 사이에 푸른색 표시선이 위치할 때 놓아보자. 속성 칼럼을 살펴보면 어떤 이

미지를 보여주고, 어떤 크기로 보여줄지 등의 이미지 컴포넌트 속성을 설정할 수 있다.

사운드 컴포넌트 추가하기

앱 인벤터 프로젝트에 넣는 컴포넌트들 중에는 화면에는 보이지 않는 것들도 있다. 애플리케이션

에 여러 기능적인 요소를 추가하지만 휴대폰에서는 눈으로 보이지 않는 것들이다.

팔레트 칼럼에서 미디어 팔레트를 클릭해보자(그림 1-9). 미디어 팔레트에는 뷰어에 넣어두면

앱에 아주 멋있는 기능을 추가할 수 있는 컴포넌트들이 있다. 사운드(Sound) 컴포넌트를 드래그

해서 뷰어에 넣어보자. 사운드 컴포넌트는 그림 1-10처럼 뷰어에서 휴대폰을 나타내는 부분 아

래에 들어간다. 보이지 않는 컴포넌트들은 모두 뷰어 아래쪽에 있는 이 공간에 들어가는데, 다른

컴포넌트들과 마찬가지로 속성을 변경하거나 이름을 바꾸거나 혹은 지울 수 있다. 다른 컴포넌트

처럼 블록 에디터에는 이에 해당하는 새로운 서랍이 생겨서 컴포넌트 기능을 활용해 프로그래

밍하거나 소리 재생기 속성을 변경할 수 있다.

그림 1-9 팔레트 칼럼의 미디어 팔레트


사운드 컴포넌트

그림 1-10 휴대폰 화면에 보이는 용도가 아닌 컴포넌트들은 뷰어의 아래쪽에 나타난다.

프로젝트를 깔끔하게 관리하기

블록 서랍과 블록 이름은 컴포넌트 칼럼에서 지은 컴포넌트 이름에 따라 결정되는데, 컴포넌트 이름을

지을 때는 두 가지 매우 중요한 점을 명심해야 한다. 첫째, 프로젝트에는 같은 종류의 컴포넌트가 많이

생길 수 있다. 예를 들면 버튼 컴포넌트가 여러 개가 될 수 있다는 것이다. 따라서 컴포넌트가 하는 일

에 따라 이름을 짓는 것이 중요하다. 하는 일을 정확하게 표시해주는 이름을 지으면 읽기도 쉽고 블록

들을 조합하기도 훨씬 쉽다. btnPlaySoundButton 같은 이름은 버튼이 눌렸을 때 어떤 일이 일어날

지 너무나 명확해서 의심의 여지가 없다. 반면에 Button14 같은 이름은 Button41 등과 헷갈려서 엉

뚱한 버튼이 프로그램을 종료시키게 만드는 실수를 하기 쉽다. 컴포넌트가 ‘무엇을 하는지’뿐만 아니

라 그게 ‘무엇인지’도 이름에 들어가도록 해야 한다. 서로 다른 컴포넌트가 보기에는 비슷할 수도 있다.

btnPlaySoundButton이라는 이름은 눌러서 소리를 재생하는 버튼이라는 의미를 보여주고 있기 때문

에 만일 실제로 소리를 재생 시켜주는 PlaySound 라는 플레이어 컴포넌트가 있더라도 그 둘을 이름

으로 확실히 구분할 수가 있다. 두 번째로 아주 중요하게 기억해야 할 점은, 모든 컴포넌트의 이름과 블

록 에디터에 정의한 모든 블록들의 이름은 중복되어서는 안 된다는 것이다. 블록 에디터에서 작업을 하

다보면 컴포넌트를 추가하지 않고도 블록을 정의하는 경우가 생기는데, 이런 블록을 사용자 정의 블록

(defined blocks)이라고 한다. 이 블록들은 앱 인벤터 프로젝트 안의 다른 컴포넌트와 같은 이름을 사

용할 수 없다. 앱 인벤터에서 이름이 중복되면 귀찮은 오류들이 발생한다.


이제 여러분의 프로젝트는 아마도 그림 1-11과 같이 레이블, 이미지, 버튼, 사운드 컴포넌트를

갖게 되었을 것이다. 모든 컴포넌트에는 문자열과 속성에 기본값이 설정되어 있다. 연결되어있는

안드로이드 폰에 나오는 화면이 디자인 뷰에서 보는 화면과 반드시 똑같지는 않다는 점에 유의

하자. 프로젝트에 엘리먼트를 더 많이 추가하고 배치하다 보면 그 차이는 더욱 분명해진다. 이러

한 차이 때문에 애플리케이션의 인터페이스를 만들 때 휴대폰을 연결해 두는 것이 좋다. 디자인

할 때나 블록을 편집할 때 휴대폰을 연결해 두는 것이 꼭 필요한 것은 아니지만, 휴대폰을 연결

해두면 애플리케이션이 실제로 어떻게 동작할지 바로바로 확인이 가능하다.

그림 1-11 애플리케이션 인터페이스 개발하기

스크린 컴포넌트 이름 바꾸기

스크린 컴포넌트는 다른 컴포넌트와 이름을 변경하는 방법이 조금 다르다. 컴포넌트 칼럼에서

Screen1 컴포넌트를 선택해보자. 컴포넌트 칼럼에서 어떤 컴포넌트를 선택하면 해당 컴포넌트가

편집 가능한 상태가 되고 속성 칼럼은 해당 컴포넌트의 속성 값을 보여준다. 스크린 컴포넌트의

속성 값은 상당히 단촐하다. 속성 칼럼을 사용해서 배경 색이나 배경 그림, 스크린 제목을 설정

할 수 있고, 스크린을 스크롤 할 수 있는지(여기에 대해서는 나중에 더 설명한다)도 설정할 수 있

프로젝트를 깔끔하게 관리하기

블록 서랍과 블록 이름은 컴포넌트 칼럼에서 지은 컴포넌트 이름에 따라 결정되는데, 컴포넌트 이름을

지을 때는 두 가지 매우 중요한 점을 명심해야 한다. 첫째, 프로젝트에는 같은 종류의 컴포넌트가 많이

생길 수 있다. 예를 들면 버튼 컴포넌트가 여러 개가 될 수 있다는 것이다. 따라서 컴포넌트가 하는 일

에 따라 이름을 짓는 것이 중요하다. 하는 일을 정확하게 표시해주는 이름을 지으면 읽기도 쉽고 블록

들을 조합하기도 훨씬 쉽다. btnPlaySoundButton 같은 이름은 버튼이 눌렸을 때 어떤 일이 일어날

지 너무나 명확해서 의심의 여지가 없다. 반면에 Button14 같은 이름은 Button41 등과 헷갈려서 엉

뚱한 버튼이 프로그램을 종료시키게 만드는 실수를 하기 쉽다. 컴포넌트가 ‘무엇을 하는지’뿐만 아니

라 그게 ‘무엇인지’도 이름에 들어가도록 해야 한다. 서로 다른 컴포넌트가 보기에는 비슷할 수도 있다.

btnPlaySoundButton이라는 이름은 눌러서 소리를 재생하는 버튼이라는 의미를 보여주고 있기 때문

에 만일 실제로 소리를 재생 시켜주는 PlaySound 라는 플레이어 컴포넌트가 있더라도 그 둘을 이름

으로 확실히 구분할 수가 있다. 두 번째로 아주 중요하게 기억해야 할 점은, 모든 컴포넌트의 이름과 블

록 에디터에 정의한 모든 블록들의 이름은 중복되어서는 안 된다는 것이다. 블록 에디터에서 작업을 하

다보면 컴포넌트를 추가하지 않고도 블록을 정의하는 경우가 생기는데, 이런 블록을 사용자 정의 블록

(defined blocks)이라고 한다. 이 블록들은 앱 인벤터 프로젝트 안의 다른 컴포넌트와 같은 이름을 사

용할 수 없다. 앱 인벤터에서 이름이 중복되면 귀찮은 오류들이 발생한다.


다. Title의 텍스트 필드를 클릭해서 스크린 이름을 SounDroid 라고 바꾸고 엔터를 누른다. 엔터

를 누르자마자 뷰어와 휴대폰에 나오는 제목이 바뀌는 것을 눈여겨보자.

이미지 컴포넌트 이름 바꾸기

뷰어나 컴포넌트 칼럼에서 이미지 컴포넌트를 클릭한 뒤에 이름 변경(Rename) 버튼을 클릭하자.

이미지 컴포넌트 이름을 WavPicImage라고 고치고 OK를 클릭한다. 속성 칼럼에는 스크린 컴포

넌트와 다른 속성들이 있다. 그림 그 자체나 가로 세로 크기 설정도 속성 칼럼에서 바꿀 수 있다.

블록 에디터를 열고 My Blocks 탭을 클릭하고 WavPicImage를 클릭해서 서랍을 열어보자. 이

미지 컴포넌트에 그림 파일을 추가하는 방법은 두 가지가 있다. 먼저 속성 칼럼에서 Picture 속

성을 클릭하면 나오는 Add 버튼을 클릭해서 그림 파일을 직접 추가하는 방법이 있다. 또 다른 방

법으로는 미디어 칼럼에서 필요한 그림과 다른 미디어 파일들을 모두 추가해 놓고, 속성 칼럼의

Picture 속성을 클릭했을 때 추가해 놓은 미디어 목록 중에 필요한 그림을 선택하는 방법이 있

다. 이미지 컴포넌트에 실제로 그림을 추가하는 방법은 나중에 미디어 칼럼을 익히고 나서 해보

게 될 것이다.

레이블 컴포넌트 이름 바꾸기

뷰어나 컴포넌트 칼럼에서 레이블 컴포넌트를 클릭하고, 컴포넌트 칼럼의 Rename 버튼을 클릭

한다. Label1 컴포넌트 이름을 SoundNameLabel이라는 이름으로 바꿔보자. 이 레이블은 프로그

램에 대한 정보를 보여주는 목적으로 사용한다. 속성 칼럼의 텍스트(Text) 필드에 어떤 문자열을

보여줄지 적거나 블록 에디터의 로직과 이벤트를 이용해서 문자열을 추가하거나 바꿀 수 있다.

버튼 컴포넌트 이름 바꾸기

Button1 컴포넌트를 뷰어나 컴포넌트 칼럼에서 클릭한다. 컴포넌트 칼럼에서 Rename 버튼을

클릭해서 버튼 이름을 SoundPlayButton으로 바꾼다.

사운드 컴포넌트 이름 바꾸기

뷰어 아래에서 사운드 컴포넌트를 클릭하거나 컴포넌트 칼럼에서 클릭한다. 컴포넌트 칼럼에서

Rename 버튼을 클릭하면 팝업되는 창에서 컴포넌트 이름을 WaveSound라고 변경한다. 소리

재생기에 음원 파일을 추가하고 이미지 컴포넌트에 그림을 추가하는 방법을 다음에서 소개한다.


사운드 컴포넌트에 소리 파일 추가하기

먼저 출판사에서 제공하는 웹 사이트에서 이 책의 각 프로젝트별 소스 파일을 내려받도록 한다.

프로젝트 파일들에는 애플리케이션 아이콘 파일이나 프로젝트에 사용된 그림과 소리 파일 등이

들어 있다. 이 책의 머릿말에서 프로젝트 파일을 다운로드하는 방법에 대해 자세히 설명해 두었

다. 사운드 컴포넌트에 소리 파일을 추가하려면 다음과 같은 과정을 따라한다.

1. 미디어 칼럼에서 Add 버튼을 클릭한다.

2. 나타난 Upload File 다이얼로그 박스에서 ‘파일선택(Browse)’ 버튼을 클릭한다.

3. Chapter 01 프로젝트 파일을 저장해둔 위치를 찾는다.

4. 미디어 파일 폴더에서 WaveSound.mp3 파일을 클릭하고 Open을 클릭한다.

5. Upload File 다이얼로그 박스(그림 1-12)에서 OK 버튼을 클릭해서 WaveSound.mp3 파

일을 업로드한다. 업로드가 완료되면 WaveSound.mp3 파일을 미디어 목록에서 볼 수

있다.

그림 1-12 Upload File 다이얼로그 박스

6. 그림, 소리, 동영상 등의 미디어가 미디어 칼럼에 들어가면 파일을 클릭해서 컴퓨터에 다시

다운로드하거나 지울 수 있다.

이미지 컴포넌트에 그림 추가하기

이미지 컴포넌트에 그림을 추가하려면 다음 과정을 따라한다.

1. 이미지 컴포넌트를 클릭한다. 속성 칼럼에서 이미지 컴포넌트의 모든 속성을 볼 수 있다.

2. 속성 칼럼에서 Picture 필드를 클릭한다. 그림 1-13처럼 ‘None’을 비롯해서 이 컴포넌트에

서 사용가능한 미디어 파일 목록이 펼쳐지고, 목록 아래에는 Add, Cancel, OK 세 버튼

이 나온다.


3. 앞서 미디어 칼럼에서 Add 버튼을 클릭했을 때와 마찬가지로 Add 버튼을 클릭하면

Upload File 다이얼로그 박스가 나온다.

4. 파일 선택 버튼을 클릭하고, WaveImage.png 파일을 찾아서 클릭한다.

5. Open 버튼을 클릭하고 Upload File 팝업창에서 OK 버튼을 클릭한다.

미디어 칼럼에서 미디어 파일을 추가했을 때와 마찬가지로 미디어 칼럼에 추가한 파일이 보일

것이다. 이미지 컴포넌트는 다음과 같은 이미지 포맷을 지원한다.

■ .JPG

■ .GIF

■ .PNG

■ .BMP

그림 1-13 속성 칼럼에서 미디어 추가하기

속성 이해하기

앱 인벤터에서 사용하는 여러 컴포넌트들이 공통적으로 가지는 속성이 있다. 크기나 색상, 모양

등인데, 일반적으로 속성 칼럼에서 설정해두고 그 값을 그대로 사용한다. 하지만 나중에 블록 에

디터에서 프로그래밍 블록을 사용해서 바꿀 수도 있다는 것도 기억해두자.

컴포넌트의 속성은 컴포넌트의 모양이나 동작을 설정하는 것으로 이미지 컴포넌트의 Picture

속성처럼 컴포넌트에 특화되기도 한다. 이어 나오는 내용에서 각 컴포넌트들의 속성을 본격적으


로 설정해볼 것이다. 컴포넌트 속성을 수정했을 때 디자인 뷰의 뷰어에 언제나 즉각적으로 반영

되는 것은 아니라는 점에 유의하자.

기억해두기

애플리케이션의 모양새에 영향을 주는 속성 설정은 뷰어에서만 확인하지 말고, 반드시 연결되

어 있는 안드로이드 기기에서 확인을 해봐야 한다. 뷰어는 설정 값과 아주 ‘비슷하게' 보여줄

뿐이다.

이미지 컴포넌트의 속성 설정하기

뷰어나 컴포넌트 칼럼에서 이미지 컴포넌트를 클릭하면 이미지 컴포넌트의 속성이 속성 칼럼에

나온다.

Width 속성 필드를 클릭해서 150을 입력하고 OK를 클릭한다. 그러면 가로 길이가 150 픽셀

로 맞춰진다. Height 속성 필드를 클릭하고 100픽셀로 설정하고 OK를 클릭한다. 속성 칼럼의

Picture에서 텍스트 필드를 클릭하면 기존에 미디어 칼럼에 업로드했던 이미지들 중에 하나를

선택할 수 있고, 혹은 Add 버튼을 클릭해서 새로운 이미지를 업로드할 수도 있다.

Visible이라는 체크 박스 속성은 대부분의 사용자 인터페이스 컴포넌트에 들어있다. 어떤 컴포

넌트를 처음부터 추가하기가 딱히 적당해 보이지 않을 때 invisible 상태, 즉 Visible 속성을 꺼서

보이지 않도록 한다. 블록 에디터의 블록을 사용하면 애플리케이션에서 어떤 이벤트가 발생했을

때 이런 속성이 바뀌도록 할 수 있다. 예를 들어 “Game Over”라는 문장을 보여주는 그림이 있

고, 이 그림은 속성 칼럼에서 invisible 상태로 설정되어 있다고 하자. 애플리케이션 사용자의 점

수가 어떤 점수에 이르면 블록 에디터의 블록을 가지고 Visible 속성을 바꿔서 “Game Over”이

미지를 보여준다. 나중에 소개할 단원에서 고급 프로젝트들을 심도 있게 살펴보면서, 블록 에디

터를 사용해서 속성을 수정하는 것을 다룬다.

미디어 칼럼에서 업로딩한 모든 이미지는 그 이미지만의 기본 크기 값이 있다. 예를 들면 가로

세로 크기가 640×480픽셀 짜리의 이미지를 업로드해야 할 수도 있다. 그런데 대부분의 안드로

이드 기기의 화면 크기는 640×480보다 상당히 작다. 그래서 Width와 Height 속성을 사용해서

적당한 이미지 크기를 설정해야 하는데, 휴대폰마다 화면 크기가 다르기 때문에 애플리케이션

상에서 이미지가 제대로 보이도록 하려면 Width와 Height 속성을 잘 조정해야 할 것이다. 블록


에디터와 연결되어 있는 휴대폰을 보면서 이미지 위치와 크기를 맞춰 보는 것이 좋다. 이렇게 하

면 이미지 크기를 조정하면서 바로바로 휴대폰 크기 대비 이미지 크기를 확인할 수 있고, 실제로

어떻게 보일지 확인할 수 있다. 사용하는 이미지 크기는 적당히 합리적인 크기를 지키자. 사용하

는 공간이나 업로드하는 시간은 모두 귀한 자원이다.

일러두기

이미지를 업로드하기 전에 컴퓨터에서 이미지 크기를 조절하자. 요즘 디지털 카메라들은 파일

크기나 해상도를 너무 크게 만들어서 앱 인벤터에서 실제로 사용하기에는 적당하지 않다.

Width 속성을 클릭하면 팝업 창에서 다음 세 가지 중 하나를 선택할 수 있다.

■ Automatic (자동): 자동 옵션은 이미지의 기본 크기를 그대로 사용하되 이미지가 놓인

공간이 그림 크기보다 작으면 공간의 크기에 맞춰서 그림을 축소시킨다. 만일 이미지가

1400×900픽셀 짜리라면, 여러분의 자그마한 휴대폰에서는 그림을 아주 작게 줄여서 보

여줄 것이다. 이미지를 실제 사용할 크기에 가깝게 만들어주는 것이 가장 좋지만 실제 사

용하는 크기보다 살짝 커도 괜찮다. 이미지 컴포넌트에서 크기를 줄여주면 이미지는 더

선명하고 깨끗하게 보인다. 반대로 원래 크기보다 이미지 크기를 늘려버리면 픽셀이 확대

되어서 흐릿하게 보인다.

■ Fill Parent (꽉 채우기): 꽉 채워주는 선택을 하면 이미지를 휴대폰 화면에 완전히 꽉 차

는 크기로 조정한다. 앱 인벤터 현재 버전에서는 이미지나 컴포넌트를 겹치도록 배치할

수 없다. 따라서 컴포넌트가 visible일 때 전체 화면을 채우도록 하고 싶다면 Fill Parent

를 사용해야 한다. 이전의 Game Over 이미지 예에서 이것을 적용해볼 수 있다. Game

Over 이미지는 화면을 꽉 차게 하고, 대신 Visible 속성은 꺼두었다가 사용자가 게임에서

지면 Visible 속성을 true로 설정해서 휴대폰 화면 가득 "Game Over" 이미지를 채워주

는 것이다.

■ Pixels (픽셀 지정): 픽셀 지정 옵션을 사용하면 컴포넌트 크기를 픽셀 단위로 설정할 수

있다. 이미지 컴포넌트를 수동으로 설정할 때는 주의하자. 가로와 세로의 비율을 바꾸면

원하지 않는 모양으로 이미지가 눌리거나 길쭉하게 늘어나 보일 수 있다.


레이블 컴포넌트 속성 설정하기

뷰어나 컴포넌트 칼럼에서 레이블 컴포넌트를 클릭하자. 그러면 속성 칼럼에 훨씬 많은 속성이

나타난다. 이 레이블은 사운드보드에서 사운드 이름을 보여주는 레이블이다. 레이블 컴포넌트는

이미지 컴포넌트와 마찬가지로 Height와 Width 속성을 가지고 있다. 레이블 컴포넌트의 Width

속성을 150으로 맞추고 Height속성은 Automatic으로 설정하자. 이 속성들은 이미지 컴포넌트

의 Height와 Width 속성과 같은 역할을 한다. 이 속성이 Automatic인 경우, 레이블이 보여줄 문

자열의 길이에 맞춰서 레이블 크기가 늘어나거나 줄어든다.

Text 속성에서 긴 문자열을 입력해보면 이런 동작을 확인할 수 있다. 레이블은 입력한 문자열

길이에 맞게 늘어난다. 뷰어에서도 확인할 수 있고, 연결해 놓은 휴대폰에서도 확인할 수 있다.

가로와 세로 중 한 가지 크기를 제한시켜 놓으면 다른 한 가지 길이가 문자열에 맞게 늘어난다. 레

이블의 가로 크기를 100픽셀로 설정해 놓고 아주아주 긴 내용을 입력하면 레이블의 너비는 100

픽셀보다 더 크게 늘어나지 않고, 세로 길이만 계속 늘어난다. 만일 Width를 Automatic으로 해

놓으면 뷰어에서는 긴 문자열이 뷰어의 옆 경계선까지 넘어간다. 하지만 실제 기기에서는 레이블

이 화면보다 더 넓게 늘어날 수 없다. 이것 역시 사용자 인터페이스를 디자인할 때 휴대폰을 앱

인벤터에 연결시켜둬야 하는 이유다.

다음으로 레이블의 TexAlignment 속성을 right로 설정해보자. TextAlignment 속성은 레이

블 안의 텍스트 배치 방식을 결정한다. 즉, 왼쪽 정렬을 선택하면 레이블의 왼쪽 측면부터 공간이

채워진다. 가운데 정렬은 텍스트를 중앙에 배치하고, 오른쪽 정렬은 오른쪽 공간부터 채워나간

다. 한편, 블록 에디터에는 TextAlignment 속성을 바꿀 수 있는 블록이 없기 때문에 블록 에디

터로는 텍스트 배치를 바꿀 수 없다. 하기야, 배치 방식에 대한 속성을 디자인 뷰에서 정하고 나

면 그 값을 변경해야 할 일 자체가 별로 없을 것이다.

BackgroundColor 속성은 체크 박스처럼 생겼지만, 사실은 색상을 고르는 도구다. Back

groundColor라는 속성 제목 아래의 사각형을 클릭하면 레이블 색깔에 대한 목록이 나온다. 레

이블의 배경색으로 쓸 색깔을 고르면 된다. 배경 색은 속성 칼럼에서도 설정할 수 있고 블록 에

디터에서도 설정할 수 있다. 어떤 게임에서 플레이어의 상태 수치가 아주 낮아지면 수치를 나타

내는 레이블의 색상을 빨갛게 바꾸는 데 활용할 수 있다. 지금 만들려는 애플리케이션에서는 기

본 값인 None으로 놔두자.

Font 설정에서 Bold와 Italic은 체크박스로 설정할 수 있다. 체크박스로 선택하면 속성 칼럼에

서 넣은 문자열이든 블록 에디터에서 넣은 문자열이든 레이블의 모든 문자열은 선택한 폰트 설정

을 적용받는다. Bold와 Italic 설정은 블록 에디터에서 바꿀 수 없다.


FontSize 속성으로는 레이블 안에 있는 문자의 크기를 설정한다. 기본 폰트 크기인 14.0은 대

부분의 애플리케이션에서는 약간 작은 크기다. FontSize 속성에서 텍스트 영역을 클릭해서 14.0

을 20으로 바꿔보자. 뷰어랑 휴대폰 모두에서 글자가 크게 보인다.

Typeface 속성은 글꼴을 지정하는 데 쓰이는데 Serif, Sans Serif, Monospace 중 하나를 선택

할 수 있다. 각 글꼴을 선택하며 차이점을 확인해보자. 이 프로젝트에서는 기본 글꼴을 사용한

다. Typeface 속성에 해당하는 블록은 없기 때문에 블록 에디터에서 블록을 사용해서 글꼴을

바꿀 수는 없다.

Text 속성은 레이블에 정보를 넣어주는 아주 중요한 속성이다. 텍스트 필드를 클릭해서

Relaxing Wave Sound라고 입력한다. 뷰어와 휴대폰 모두에서 레이블 내용이 바뀐 것을 볼 수

있다. 개인 취향에 따라서 속성 칼럼의 텍스트 필드를 비워 뒀다가 나중에 블록 에디터의 블록을

사용해서 애플리케이션이 Text 속성을 채워넣도록 할 수도 있다.

TextColor 속성은 클릭하면 색상 선택 도구를 보여준다. TextColor 속성 제목 아래의 박스를

클릭하고 Blue를 선택해서 텍스트를 파란색으로 바꿔보자.

Visible 속성은 다른 컴포넌트들의 visibility 속성과 같다. 이 속성을 사용하면 애플리케이션

이 시작할 때는 인터페이스의 어떤 부분을 보이지 않게 해뒀다가 버튼을 누르는 등의 특정한 조

건이 발생하면 화면에 나타나도록 만들 수 있다. 마찬가지로 이미 보이는 컴포넌트를 블록 에디

터의 블록을 사용해서 보이지 않게 할 수도 있다.

버튼 컴포넌트 속성 설정하기

버튼 컴포넌트 속성 가운데는 Visible 속성만큼이나 많이 사용하는 속성이 있다. 바로 Enable 속

성으로 애플리케이션이 시작할 때부터 버튼을 사용가능 상태로 해둘지, 아니면 애플리케이션을

사용하는 중에 어떤 이벤트가 발생했을 때 사용가능 상태가 되도록 할지 여부를 결정할 수 있게

한다. Visible 속성과는 다르게 Enable 속성이 disable 상태여도 화면에는 버튼이 보인다. 하지만

버튼 사용이 가능한 상태는 아니다. 이 프로젝트에서는 버튼을 사용 가능한 상태로 놔두자.

TextAlignment 속성은 앞서 레이블 컴포넌트에서 봤던 것과 동일하다. 버튼 문자열은 가운데

혹은 왼쪽이나 오른쪽으로 맞춰 배열할 수 있다. 지금은 가운데 정렬로 놔두자.


버튼은 이미지를 넣어서 예쁘게 만들거나 정보 전달에 중점을 둬서 만들 수 있다. 버튼의

Width와 Height를 Automatic으로 설정했다면 버튼에 넣은 이미지 크기로 맞춰진다. 만일

Width와 Height에 직접 어떤 값을 설정했다면 이미지가 버튼 크기에 맞게 조절된다. 원하는 버

튼 크기보다 조금 큰 이미지를 사용하는 것도 일반적으로 좋은 습관이다. 그렇게 하면 버튼에 입

힌 이미지가 아주 선명해 보인다. 속성 칼럼에서 이미지 아래에 텍스트 영역을 클릭하고, 미디어

칼럼에 예전에 올려둔 그림을 선택하거나 Add 버튼을 눌러서 이미지를 업로드할 수 있다. 이번

프로젝트에서는 이미지는 사용하지 않는다.

BackgroundColor, TextColor 속성들과 Bold, Italics, Size, Typeface 등의 Font 속성은 레이

블 컴포넌트에서와 마찬가지 기능을 한다.

버튼에 보여줄 문자열은 Text 속성에서 설정할 수 있다. 텍스트(Text) 속성을 클릭하고 Play를

입력하여 버튼을 눌렀을 때 어떤 일을 하는지 쉽게 알아볼 수 있도록 한다.

팁

애플리케이션 사용자가 버튼을 편하게 누를 수 있어야 한다. 기본 버튼 크기는 굵은 손가락으

로 누르기에는 조금 작은 편이다. Width 속성을 100픽셀로 늘려주고, Height는 75픽셀로

늘려서 손가락으로 누르기 편한 큼지막한 버튼으로 만든다.

사운드 컴포넌트 속성 설정하기

사운드 컴포넌트는 두 가지 속성밖에 없다. 그 두 가지 속성은 Source와 MinimumInterval이다.

소스 필드는 이미지 컴포넌트에서처럼 파일을 선택하고 업로드하는 역할을 한다. 소스 텍스트

필드를 클릭해서 이전에 미디어 칼럼에서 업로드했던 미디어를 선택한다. Add 버튼을 클릭하면

선택한 사운드 파일 클립을 업로드할 수도 있다. 소스 텍스트 필드를 클릭하고 Add 버튼을 클릭

해서 프로젝트 소스 파일이 있는 폴더에서 WaveSound.mp3 파일을 찾아 업로드한다. 사운드

컴포넌트는 아주 짧은 오디오 클립을 재생하기에 적합하다. 사운드 컴포넌트에서 사용하는 음원

파일이 약 6초 이상 넘어가면 잘라버리기 때문에 긴 음악보다는 짧은 음향 효과에 적합하다. 더

길게 재생할 음원은 Player 컴포넌트를 사용하면 된다. 보편적으로 이용되는 음원 파일 포맷들

을 두루 사용할 수 있는데, 표 1-1 에서 지원되는 프로토콜과 파일 포맷을 나열하였다.


표 1-1 지원되는 음원 프로토콜과 파일 포맷들

프로토콜 지원하는 파일 포맷

AAC .3GP, MP4, M4A

MP3 .MP3

MIDI .MID, XMF, .MXMF, .RTT, .RTX, .OTA, .IMY

Ogg Vorbis .OGG

Wave/PCM .WAV

블록 에디터 소개하기

전체적인 사용자 인터페이스(전문용어로 UI)를 만들었으니, 이제는 애플리케이션에 로직과 흐

름을 넣어줄 때가 되었다. 지금이 바로 블록 에디터를 다뤄볼 때다.

지금까지는 뷰어에서 여러 가지 눈에 보이는 아이템들을 배치하고 원하는 모양새가 되도록 속

성을 설정해 보았다. 블록 에디터를 사용하면 애플리케이션이 시작할 때, 끝날 때, 그리고 사용자

가 애플리케이션을 이용하는 동안에 애플리케이션이 무엇을 해야 하는지 그 동작을 구성할 수

있다.

앱 인벤터에서는 퍼즐 조각처럼 서로 딱 맞물리는 모양의 다양한 색상의 블록들을 가지고 프

로그래밍을 한다(그림 1-14 참고). 블록들은 단어 조각 같아서, 서로를 끼워 맞추면 휴대폰에 전

달할 수행 문장이 만들어진다. 블록의 문구들은 단순히 그 블록이 무엇을 위한 블록이며, 개발

자로부터 기대하는 바가 무엇인지만 나타내고 있다. 처음에는 블록에 적힌 단어들이 이해하기

막막하고 어려워 보일 수도 있지만, 두어 개의 프로젝트만 하고 나면 블록들이 뭘 하려는 건지 금

방 알게 되고 아주 잘 쓰인 소설의 문장을 읽듯 술술 이해하게 될 것이다.

블록은 서랍에 저장된다. 블록 에디터 왼쪽에서 하나를 골라 클릭하면 서랍이 열린다. 서랍에

있는 각 블록을 클릭하고 블록 에디터 작업공간에 끌어다 놓을 수 있는데, 이 작업공간에서 블

록들을 서로 맞추면 안드로이드 휴대폰에 전달할 명령문이 만들어진다.


Built-In 탭과 My Blocks 탭

컴포넌트 서랍 블록 에디터의 작업공간

그림 1-14 적당히 복잡한 앱 인벤터 애플리케이션의 블록 프로그래밍 구경해보기

빌트인 블록 미리보기

블록 에디터에는 빌트인(Built-In) 탭과 My Blocks라는 탭이 있다. 뷰어에 컴포넌트를 갖다 놓을

때마다 새로운 컴포넌트 서랍과 서랍에 포함된 블록들이 블록 에디터의 My Blocks 탭에 추가된

다. 빌트인 블록 탭에는 특정 컴포넌트에 종속되지 않은 모든 블록이 들어있다. 이 블록들은 컴포

넌트를 추가하는 것과 무관하게 항상 존재한다. 이를테면 리스트 만들기(make a list) 같은 블록

들이 있다. 블록을 종류별로 분류한 각 서랍에는 이 책 전체에서 사용할 다양한 블록이 들어있

다. 빌트인 블록은 여러분이 만든 블록(컴포넌트를 추가할 때 만든 블록과 블록 에디터로 만들어

낸 블록 등)과 함께 사용되어 애플리케이션에 적용할 명령문을 만들어낸다. 아래는 빌트인 탭에

있는 블록 서랍들에 대한 설명이다.

■ De�nition 서랍: 프로그래밍 구조와 개념을 정의하는 블록이 들어 있다. 이 책에서는 프

로젝트에 이 블록들을 적용하면서 각각을 설명한다.

■ Text 서랍: 텍스트를 만들거나, 서로 합치거나, 혹은 조각조각 나누는 등의 텍스트를 조작

하는 블록들을 모두 포함하고 있다.


■ List 서랍: 아이템 목록을 저장하는 컨테이너를 만들 수 있는 매우 유용한 블록들이 들어

있다. 기존의 프로그래머들은 리스트를 배열로 이해하면 될 것이다.

■ Math 서랍: 학창시절 피하고 싶었던 수학 함수들이 들어 있다. 지수연산(exponent), 모듈

연산(modulus), 코사인(cosine) 연산을 비롯해서 웬만한 수학 함수들은 다 들어 있다.

■ Logic 서랍: 프로그램이 논리적인 연산을 하도록 도와주는 블록들이 들어 있다. 이를테

면 예, 아니오, 참이요, 거짓이요 등을 표현하는 블록도 있고 “이 두 개는 값이 같은가?”

혹은 “이 두 개는 서로 다른 것인가?” 하는 판단문을 만들어 내는 블록도 있다.

■ Control 서랍: 여기엔 아주 독특하고 신기한 블록들이 들어 있는데, 이 블록들을 가지고

명령을 내리는 문장을 만들어서 애플리케이션의 진행을 제어할 수 있다. 한 예로, “만일

버튼이 눌리면 이러저러한 일을 하시오. 하지만 버튼이 눌리지 않으면 다른 이러저러한

일을 하시오.” 하는 식의 문장을 만들 수 있다.

■ Colors 서랍: 만들고 있는 사용자 인터페이스에서 각 아이템의 색상을 쉽게 설정할 수 있

는 블록들이 있다. 앱 인벤터에서는 안드로이드 애플리케이션에서 사용하는 모든 색상을

그에 대응하는 숫자로 표현하는데, 이 블록들을 사용하면 기본 색상은 숫자를 일일이 지

정할 필요 없이 간편하게 선택할 수 있다.

다음은 My Blocks 탭에 있는 서랍들로, 디자인 뷰에 컴포넌트를 끌어다 놓을 때마다 만들어

지는 모든 컴포넌트 블록이 들어있다. 끌어다 놓고 이름 붙인 각 컴포넌트마다 컴포넌트 서랍을

열 수 있는 버튼이 하나씩 있다.

■ My De�nitions 서랍: 빌트인 탭의 De�nitions 서랍에서 만들고 정의한 모든 블록이 여

기 들어 있다. 즉, 여기 있는 블록은 컴포넌트를 추가할 때 생긴 블록이 아니고 De�nitions

서랍에서 블록을 끌어다 놓을 때 만들어지는 블록이다.

■ 컴포넌트 블록용 서랍들: My De�nitions 서랍 아래에는 디자인 뷰에서 컴포넌트를 추가

하면서 생긴 서랍들이 있다. 컴포넌트 이름을 클릭하여 서랍을 열면 이벤트나, 메서드(컴

포넌트에 행할 일이나 컴포넌트를 가지고 수행할 일들을 의미한다) 혹은 속성을 나타내

는 블록을 꺼낼 수 있다.


버튼 컴포넌트 블록 꺼내오기

My Blocks 탭을 클릭하고 SoundPlayButton을 클릭한다. 버튼 컴포넌트 서랍이 열리면 when

SoundPlayButton.Click do 블록을 블록 에디터 작업공간에 끌어다 놓는다. 이것은 단순히 무엇

을 할지 알려주는 이벤트 버튼이다. 블록에 써 있는 문구를 읽어보면 <컴포넌트이름>.<이벤트>

식의 패턴이 보일 것이다. 약간 변형시켜서 이렇게 읽어볼 수 있다. “SoundPlayButton이라는 이

름의 내 버튼이 클릭되면, 이 블록이 품고 있는 일을 수행하시오.”

소켓 모양으로 생긴 블록은 다른 블록들을 품을 수 있는데, 소켓 안에 들어갈 블록들이란 어

떤 조건들이 만족될 때 수행될 명령문들이다. 이 예에서 만족되어야 할 조건이란, ‘내 버튼이 클

릭될 때’를 의미한다. 이제 버튼이 클릭되면 무엇을 수행해야 하는지 애플리케이션에 알려줘야

한다. 다음 단락에서 명령문을 추가해보기로 하자.

사운드 컴포넌트 블록 꺼내오기

사운드 컴포넌트 블록을 꺼내올 때 다음 과정을 수행한다.

1. WaveSound 서랍을 연다. 이 안에 소리 재생을 위한 모든 블록이 들어 있다.

2. call WaveSound.Play 블록을 블록 에디터 작업공간에 끌어다 놓는다.

이것은 메서드 호출이라고 하는데, 메서드를 호출함으로써 더 복잡한 연속된 명령문들,

혹은 미리 하나의 묶음으로 만들어 놓은 명령문들을 수행하게 된다. 이 블록은 이 장의

앞에서 미디어 칼럼에서 업로드했던 음원 파일을 재생하는 방법에 대해 미리 패키지로

묶어 놓은 명령문들이다.

3. call WaveSound.Play 메서드를 when SoundPlayButton.Click 이벤트의 두 팔 사이에

끌어다 놓는다.

Play 메서드의 윗부분의 움푹한 홈이 이벤트의 튀어나온 부분에 딸깍 들어 맞는 것에 주목

하자. 이제 이벤트가 언제 일어나든 메서드가 호출된다. 바꿔 말하면, “SoundPlayButton

이 클릭되면 WaveSound.Play가 호출됩니다”라고 표현할 수 있다. 블록 에디터 작업 공간

은 그림 1-15처럼 생겼다.


그림 1-15 SounDroid 애플리케이션을 위해 지금까지 사용한 블록들

연결해둔 안드로이드 휴대폰에서 Play 버튼을 눌러서 테스트 해보자. 휴대폰에서 아주 멋지고

부드러운 찡- 하는 소리가 나야 한다.

축하한다! 이제 여러분은 완전한 하나의 안드로이드 애플리케이션을 만들어 낸 것이다. 아직

까진 애플리케이션이 앱 인벤터 상에만 존재하는 상태이고 휴대폰에 업로드된 상태는 아니다.

이제 애플리케이션의 완성을 위해서 몇 가지 옵션을 알아볼 차례다.

프로젝트 잘 마무리하기

애플리케이션 프로젝트는 대부분 아주 꿈틀꿈틀 역동적이고, 시간이 지나면서 점차 진화하는

경향이 있다. 여러분이 마음에 드는 애플리케이션을 만들고 난 이후에 그 프로젝트를 바탕으로

좀 더 새롭고 개선된 애플리케이션으로 가지치기를 할 수 있도록, 체크포인트 저장(Checkpoint

save)과 같은 도구가 제공된다. 물론 아예 여기서 마무리하고 여러분의 휴대폰이나 다른 여러 휴

대폰에 올릴 수도 있다.

브라우저에서 띄워 놓았던 앱 인벤터 디자인 뷰 화면으로 돌아가자. 다음 단락에서 어떻게 애

플리케이션을 저장하고, 포크(fork)하고 2 , 설치할지 알아본다.

새로 만든 애플리케이션 저장하기

구글은 열심히 작업한 내용이 뜻하지 않게 날아가 버리지 않도록 해주는 데에 참 뛰어나다. 프로

젝트 작업에서 뭔가를 수정할 때마다 저장한다. 여러분이 작업하는 동안 여러분의 앱은 주기적

으로 브라우저에서 앱 인벤터 서버로 동기화된다. 앱 인벤터에는 저장 버튼이 있지만 거의 사용

할 일은 없을 것이다(하지만 필요한 경우가 있다면 디자인 뷰의 가운데 위쪽, 뷰어 칼럼 바로 위

에 Save 버튼이 있으니 사용하면 된다).

2 　 전통적인 프로그래밍 용어로서 애플리케이션의 복사본을 만들어서 원래 의도나 방향을 변경하는 것을 뜻한다.


Save As 버튼

Save As 버튼은 디자인 뷰어의 바로 위에 있다. 이 버튼은 현재 열린 프로젝트를 다른 이름으로

저장할 수 있게 해준다. 기본적으로는 그림 1-16처럼 현재 프로젝트 이름에 _copy라는 문자열이

뒤에 붙는다. 하지만 다른 프로젝트 이름과 다르기만 하면 원하는 어떤 이름으로도 바꿀 수 있다.

OK 버튼을 클릭해서 새로운 복사본을 저장하고 나면 새로운 이름의 프로젝트 파일에서 작업을

계속 하게 되지만, 이전에 만들어둔 이름의 프로젝트도 여전히 My Projects 창에 남아 있다.

그림 1-16 Save As는 내용은 같지만 이름은 달라진 프로젝트에서 계속 작업하도록 한다

Checkpoint 버튼

Save와 Save As 버튼 옆에 있는 Checkpoint 버튼은 프로젝트의 복사본을 현재 상태 그대로 새

로운 이름을 붙여서 저장하지만, Save As 버튼과는 달리 프로젝트 원본을 가지고 작업을 계속한

다. Checkpoint 버튼은 그림 1-17처럼 기본 값으로 _checkpoint라는 문구와 일련 번호가 원래

프로젝트 이름 뒤에 붙어서 My Projects 창에 체크포인트가 저장된다. Previous checkpoints에

는 이전에 저장해 둔 체크포인트 목록을 보여준다.

그림 1-17 체크포인트는 원본 프로젝트의 중간 상태를 저장해둔 복사본이다.

기억해두기

Save As와 Checkpoint 의 중요한 차이점은 Save As 버튼을 클릭하면 새로 이름 지은 프로

젝트에서 작업을 하고 원본 프로젝트는 My Project에 남게 되는 반면, Checkpoint 버튼은

새로운 이름의 프로젝트를 My Projects에 생성하고, 원본 프로젝트로 계속 작업한다는 점이

다. 체크포인트는 프로젝트를 개발하다가 뭔가 문제가 생겼을 때 되돌아갈 수 있는 “안전한

지점"으로 생각하면 된다. Save As와 Checkpoint 버튼은 아주 단순한 버전 컨트롤 기능이

다. 전통적인 프로그래밍은 애플리케이션을 변경하면서 1.0, 2.0, 2.1 등의 숫자를 사용해서

버전을 표현하는데 Checkpoint와 Save 버튼도 이와 같은 용도로 사용할 수 있다.


앱을 패키지화하기

애플리케이션이 만족스러운 수준이 되어서 여러분의 휴대폰이나 다른 사람의 휴대폰에 적용하

려고 한다면 마지막으로 패키지화하는 과정이 필요하다. 패키징(packaging)은 모든 사용자 인터

페이스 구성 요소와 블록 에디터의 모든 블록들, 그리고 모든 미디어 파일을 한데 모아서 안드

로이드 기기가 이해하는 코드로 만들어 주는 과정이다. 그림 1-18처럼 디자인 뷰는 Package for

Phone 버튼을 가지고 있어서 세 가지 옵션들 중 하나를 선택하도록 한다. Show Barcode(바코드

로 보여주기), Download to �is Computer(컴퓨터에 다운로드 하기), Download to Connected

Phone(연결된 폰에 다운로드하기)가 그것이다. 이어 나오는 내용에서 이 옵션들에 대해 설명한

다. 어떤 패키지 옵션을 선택하든 블록 에디터가 열려야 한다. 또한 어떤 옵션을 선택하건 간에

앱 인벤터가 애플리케이션을 패키징하고 있다는 메시지를 볼 수 있을 것이다. 패키징 완성에 몇

분이 걸리는 경우도 있다.

그림 1-18 Package for Phone 버튼의 리스트 옵션

Show Barcode 옵션 사용하기

Show Barcode, 즉 바코드 보여주기 옵션을 선택하면 프로젝트는 .APK 확장자를 가진 파일로

컴파일된다. .APK 파일은 휴대폰에 로드될 최종 파일 패키지이다. 바코드 보여주기 옵션을 선택

하면 앱 인벤터 디자인 뷰에 QR 바코드가 팝업 창으로 뜬다. 휴대폰에 있는 바코드 스캐너로 스


캔하면(안드로이드용 무료 바코드 스캐너 앱을 구할 수 있다) 프로젝트를 휴대폰에 로딩할 수 있

다. 이 방법을 이용하면 휴대폰이 컴퓨터에 연결된 상태가 아니어도 애플리케이션을 휴대폰에

올릴 수 있다는 장점이 있다. 하지만 이 바코드를 앱 인벤터 계정이 없는 다른 안드로이드폰 사용

자와 공유할 수는 없다. 만일 휴대폰을 앱 인벤터에 연결하는 데 문제가 있거나 신뢰하지 않는 앱

을 설치할 수 없도록 설정된 휴대폰을 가지고 있다면 이 방법으로 앱 인벤터 애플리케이션을 설

치해야 한다.

Download to This Computer 옵션 사용하기

만일 애플리케이션을 이메일에 첨부하고 싶거나 수동으로 다른 폰에 올려보고 싶다면

Download to �is Computer 즉, 컴퓨터에 다운로드하기 옵션을 사용하면 된다. Download to

�is Computer 옵션을 클릭하면, 애플리케이션을 다운로드받을 위치를 선택하는 작은 창이 나

오거나 기본으로 지정되어 있는 다운로드용 폴더에 자동으로 다운로드가 시작된다. 다운로드한

파일은 <프로젝트 이름>.apk와 같은 형식이다. .APK 파일은 안드로이드 폰의 SD 카드에 복사되

거나 안드로이드 폰에 이메일로 전송해서 수동으로 설치 가능하다. 앱 인벤터 .APK 파일을 설치

하려면 휴대폰 설정이 믿을 수 없는 곳에서 온 앱, 이를테면 마켓에 등록되지 않은 앱도 설치 가

능하도록 설정되어 있어야 한다. 부록 A에서 앱 인벤터 설치를 위한 휴대폰 설정 방법에 대해 더

자세히 설명해 두었다.

Download to Connected Phone 옵션 사용하기

Download to Connected Phone, 즉 연결된 휴대폰으로 다운로드하기 옵션은 가장 자주 사용

하는 옵션이 될 것이다. 이 옵션이 잘 동작하려면 휴대폰은 컴퓨터에 연결되어 있어야 하고, 블

록 에디터에서 기기에 연결하기(Connect to Device) 버튼을 사용해서 접속된 상태여야 한다(휴대

폰에 연결하는 방법에 대해 다시 한번 확인하고 싶다면 부록 A를 참고한다). 이 옵션을 선택하면

현재 활성화 상태인 프로젝트가 패키지화되면서 접속되어 있는 안드로이드 폰에 올라간다. 그러

고 나면 전송이 성공적으로 되었다는 팝업 창이 나온다. 전송된 애플리케이션은 휴대폰에 있는

여느 애플리케이션처럼 휴대폰 애플리케이션 목록에 나온다. 이때 애플리케이션 이름은 프로젝

트 이름이 된다.

Download to Connected Phone 옵션을 사용해서 이 장에서 만들었던 SounDroid 애플리케

이션을 휴대폰에 전송해보자. 축하한다! 여러분은 지금 처음 만든 안드로이드 애플리케이션을

휴대폰에까지 올리는 일까지 마쳤다.


프로젝트 관리하기

앱 인벤터는 웹 기반의 애플리케이션이다. 이것은 여러분이 작업한 내용과 프로젝트가 구글의

클라우드(cloud)에 남아 있다는 소리다. 클라우드에 저장된 작업 내용은 인터넷과 리모트 서버를

통해서 접근할 수 있기 때문에 애플리케이션을 로컬 컴퓨터에 따로 설치하거나 파일을 저장할 필

요가 없다. 즉, 애플리케이션을 일부러 다운로드할 때까지는 그 어느 것도 여러분의 로컬 컴퓨터

에 저장할 것이 없다.

앱 인벤터에 로그인하고 나서 그림 1-19처럼 브라우저의 위 상단 코너에서 My Projects 링크

를 눌러보자. 그러면 여러분의 앱 인벤터 계정으로 가지고 있는 모든 프로젝트를 간략하게 볼 수

있다. 여기서 어떤 애플리케이션을 열고, 작업하고, 다운로드하고, 업로드하고, 혹은 삭제할 수

있다.

My Projects 링크

그림 1-19 앱 인벤터 프로젝트들을 보여주는 My Projects 링크

My Projects 뷰에서는 새로운 프로젝트를 시작하거나 기존에 있던 프로젝트를 관리하고 없앨

수 있다. 이 화면에는 옵션들이 많지 않아서 금방 익숙해질 것이다. My Projects 뷰에서 다음과

같은 일들을 할 수 있다.


■ 새로운 프로젝트 만들기

■ 기존의 프로젝트 지우기

■ 컴퓨터로 프로젝트 소스 코드 다운로드하기

■ 동료에게 있는 프로젝트 소스 코드를 My Projects 뷰로 업로드하기

■ 이미 있는 프로젝트를 앱 인벤터로 불러오기

프로젝트 소스 코드 다운로드하기

앱 인벤터 프로젝트는 모두 앱 인벤터 서버에 저장되지만, 여러분의 컴퓨터 하드 드라이브에도

소스 코드와 애플리케이션을 저장할 수 있다. 소스 코드는 애플리케이션을 이루는 모든 개개의

명령문으로 구성되며, 애플리케이션으로 완전히 만들어지기 전의 상태이다. 만일 다른 앱 개발

자들과 공유하고 싶은 프로젝트가 있다면 로컬 컴퓨터에 소스 코드를 내려 받으면 된다. 그리고

그 소스 코드를 다른 앱 개발자에게 전송해서 각자 앱 인벤터 프로그램에 띄워 볼 수도 있다. 소

스 코드는 다른 앱 개발자들이 볼 수도 있고 앱 애플리케이션으로 패키지화하기 전에 코드를 수

정하는 것도 가능하다.

기억해두기

여러분이 내려 받는 소스 코드를 SDK 개발자들이 애플리케이션을 만들 때 사용하는 자바 소

스 코드와 혼동하지 말아야 한다. 여기서 이야기하는 소스 코드는 앱 인벤터에 한정된 것으로

오로지 앱 인벤터에서만 쓸 수 있는 것이다.

소스 코드로 다운로드하는 옵션은 쉽게 눈에 띄진 않는다. 그림 1-20에서 보듯이 More

Actions 목록에 숨어 있다. 만일 소스 코드를 내려 받고 싶은 프로젝트가 있다면 More Actions

목록에서 다운로드할 수 있다.

1. My Projects 뷰에서 소스 코드를 다운로드하고 싶은 프로젝트 옆에 있는 박스를 선택한다.

2. More Actions 화살표를 클릭한다.

3. Download Source(소스 다운로드하기)를 클릭한다.

4. 브라우저가 별다른 확인 없이 기본 디렉터리에 자동으로 파일을 받게 설정되어 있다면 소

스 코드는 그냥 다운로드된다. 만일 브라우저가 소스 코드를 저장할 것인지 실행할 것인지

확인하는 메시지를 띄운다면 저장하기를 선택한다.


다운로드한 파일은 특별히 저장 위치를 지정하지 않았다면 기본 다운로드용 디렉터리에 저장

된다. 앱 인벤터 프로젝트의 소스 코드는 하나의 .ZIP 파일로 저장된다. 이 파일에는 전체 파일

크기를 줄이기 위해 압축된 한 개 이상의 파일이 담겨 있다.

이전에 언급했듯이 프로젝트 소스 코드를 다운로드한 다음 다른 개발자들에게 전달해서 프

로젝트를 공유하고 협업할 수 있다. 중요한 프로젝트는 소스 코드를 다운로드해서 틈틈이 백업

해두는 것도 좋은 방법이다. 그러면 실수로 프로젝트를 지우거나, 심지어 서버가 프로젝트 정보

를 잃어버리는 극단적인 상황에서도 프로젝트를 보존할 수 있다.

그림 1-20 More Actions의 메뉴에서 Download Source 선택하기

소스 코드를 다른 사람들에게 보내려면 .ZIP 파일을 이메일에 첨부하거나 마음에 드는 파일

공유 사이트에 업로드하면 된다.

프로젝트 소스 코드 업로드하기

다른 개발자들이 여러분에게 앱 인벤터 프로젝트를 소스 코드 형식으로 보냈다면 블록 에디터

에서 어떤 로직이 들어 있는지 확인하거나, 특정한 구현 목표를 어떻게 달성했는지 배울 수 있다.

My Projects 뷰에 소스 코드 파일을 올려서 보여주려면 그 소스 코드가 친구한테서 받은 것이든

여러분이 만들어 둔 백업용 소스 코드든 다음과 같은 과정을 따라 하면 된다.

.Zip 파일 엿보기

호기심이 많고 아주 사소한 정보도 놓치지 않으려는 분들을 위해 .ZIP 파일에 포함되는 파일들을 나열하

면 다음과 같다.

■ assets 폴더에는 모든 프로젝트 미디어 파일들이 있다.

■ src 폴더는 appinventor라는 하위 폴더가 있고, 그 안에는 ‘ai_’ 로 시작하며 여러분의 지

메일 계정이름이 사용된 폴더가 들어 있다. 이 폴더에는 다운로드한 프로젝트와 같은 이름

의 폴더가 들어 있다. 윈도우 방식의 디렉터리에 익숙하다면 이런 구조가 불필요하게 깊고

복잡해 보일 것이다. 반면에 리눅스 방식의 디렉터리 구조에 익숙하다면 상당히 익숙한 구조

일 것이다. 디렉터리 파일 구조는 단순히 저장 위치를 나타내는 것 이상의 의미를 가진다. 디

렉터리 파일 구조는 각 파일이 가지는 장소에 대한 정보를 제공한다. 이 최종 폴더(즉 여러

분의 프로젝트 이름을 딴 폴더)에는 애플리케이션의 논리 부분이 차지하는 분량이 꽤 크다.

.BLK, .YAIL, .SCM 확장자를 가진 파일들을 포함한다.

■ youngandroidproject 라는 폴더에는 프로젝트의 속성에 대한 파일이 들어있다. Young

Android Project는 안드로이드 앱 개발을 처음 배우는 사람들을 찾아서 가르치던 프로젝

트로 앱 인벤터의 시초였다.


1. My Projects 뷰에서 More Actions 화살표를 클릭한다.

2. Upload Source 옵션을 클릭한다.

3. 화면에 나온 다이얼로그 박스에서 Choose File 버튼을 클릭한다.

4. 로드하려는 소스 코드를 찾아본다. 기본 다운로드 디렉터리에 있거나 이메일이나 웹사이

트에서 다운로드받은 위치에 있을 것이다.

5. 업로드하고 싶은 소스 코드 .ZIP 파일을 클릭한다.

6. Open을 클릭한다.

소스 코드와 모든 자료가 든 파일들은 My Projects 페이지에 업로드된다. 이제 관리하고 편집

할 수 있는 프로젝트가 하나 생기게 되는데, 만일 같은 이름의 프로젝트가 이미 있다면 업로드할

때 에러 메시지가 나올 것이다. 그럴 때는 프로젝트 이름을 바꿔서 다시 시도해 본다.

.Zip 파일 엿보기

호기심이 많고 아주 사소한 정보도 놓치지 않으려는 분들을 위해 .ZIP 파일에 포함되는 파일들을 나열하

면 다음과 같다.

■ assets 폴더에는 모든 프로젝트 미디어 파일들이 있다.

■ src 폴더는 appinventor라는 하위 폴더가 있고, 그 안에는 ‘ai_’ 로 시작하며 여러분의 지

메일 계정이름이 사용된 폴더가 들어 있다. 이 폴더에는 다운로드한 프로젝트와 같은 이름

의 폴더가 들어 있다. 윈도우 방식의 디렉터리에 익숙하다면 이런 구조가 불필요하게 깊고

복잡해 보일 것이다. 반면에 리눅스 방식의 디렉터리 구조에 익숙하다면 상당히 익숙한 구조

일 것이다. 디렉터리 파일 구조는 단순히 저장 위치를 나타내는 것 이상의 의미를 가진다. 디

렉터리 파일 구조는 각 파일이 가지는 장소에 대한 정보를 제공한다. 이 최종 폴더(즉 여러

분의 프로젝트 이름을 딴 폴더)에는 애플리케이션의 논리 부분이 차지하는 분량이 꽤 크다.

.BLK, .YAIL, .SCM 확장자를 가진 파일들을 포함한다.

■ youngandroidproject 라는 폴더에는 프로젝트의 속성에 대한 파일이 들어있다. Young

Android Project는 안드로이드 앱 개발을 처음 배우는 사람들을 찾아서 가르치던 프로젝

트로 앱 인벤터의 시초였다.


프로젝트 지우기

여러분 손으로 만든 모든 프로젝트가 항상 간직하고 싶은 애플리케이션이 되진 못한다. 따라하

기 과정을 통해 만들었던 프로젝트들은 여러분이 만드는 창의적인 결과물의 중간 산물일 뿐일지

도 모른다.

프로젝트를 지우기 위해서는 다음과 같이 한다.

1. My Projects 페이지에서 프로젝트 이름의 옆에 있는 박스를 체크한다.

2. Delete 버튼을 클릭한다.

3. 정말로 프로젝트를 지우고 싶은지 생각해보고 OK를 누른다.

경고

프로젝트를 한번 지우면 되돌릴 수 없고, 심지어 구글에 아무리 떼를 써도 복구할 수 없다. 필

자도 몇 개의 애플리케이션을 실수로 지워봤는데, 그렇게 분하고 실망스러울 수가 없었다. 이

렇게 나중에 실수로 지워버릴 경우를 대비해서 틈틈이 소스 코드를 다운로드해서 프로젝트를

백업해두도록 하자.

기존의 프로젝트 로딩하기

기존에 만들어둔 프로젝트들은 구글의 앱 인벤터 서버에 저장되어 있다. My Projects 페이지 목

록에서 원하는 프로젝트 이름을 클릭하여 앱 인벤터 디자인 뷰와 블록 에디터에 로드한다. 이때

소스 파일들이 앱 인벤터 서버로부터 로드되고 화면은 디자인 뷰로 바뀐다.

2장

프로그래밍과 디자인의 기본


■ 설계 아이디어를 구체화하기

■ 단위 목표를 가지고 작업하기

■ 프로그래밍의 기본 어휘 익히기


1장에서 자세히 다뤘던 프로젝트는 soundboard 였다. 단순한 애플리케이션이지만 우리의 다음

프로젝트를 이어가는 데에는 아주 좋은 재료다. 버튼을 누르면 짧은 소리를 재생한다. 이 프로젝

트를 진행할 때는 거의 눈이 먼 상태로 코끼리 뒷다리 만지듯, 프로젝트가 어디로 가고 있는지,

이 컴포넌트와 블록들은 왜 사용해야 하는지 전혀 모르는 상태로 프로젝트를 만들었다. 이 책의

남은 장에서는 각 프로젝트를 시작할 때마다 디자인, 단위 목표, 진행 상황에 대한 내용을 제시

한다. 이 책에서 소개하는 프로젝트들처럼 여러분만의 프로젝트를 만들 때에도 이런 디자인, 단

위 목표, 진행 상황을 설계하는 과정을 직접 거치는 것이 여러분의 아이디어를 애플리케이션으

로 개발하는 데 도움이 된다. 이 장의 프로젝트를 통해 디자인, 단위 목표, 진행 상황이 무엇인지

차근차근 알아보자.

1장에서 만든 SounDroid 애플리케이션은 더 개선할 여지가 있다. 이 장에서는 다음 버전을 디

자인하면서 개선 과정을 보여주고자 한다.

이번 장에서는 디자인 목표, 단위 목표, 진행 단계 등의 목록을 만들기까지 필요한 과정을 소

개한다. 각 과정을 거치는 동안 디자인 목표와 단위 목표가 무엇인지 설명한다. 일반적으로 말하

면 디자인 목표는 애플리케이션이 무엇을 해주길 바라는가에 대한 것이고, 단위 목표는 디자인

목표를 달성하기 위해 필요한 프로그래밍 로직과 알고리즘이다. 진행 상황은 애플리케이션을 만

들 때 따르게 되는 합리적인 일의 순서, 혹은 밟아야 할 자연스러운 과정이라고 할 수 있다.

이 책에서 다루는 대부분의 프로젝트는 출판사에서 제공하는 사이트에서 프로젝트 파일을

받아야 한다. 프로젝트 파일은 아이콘 같은 그림 파일이나, 애플리케이션에서 사용하는 이미지

와 사운드 파일 등을 포함한다. 프로젝트를 시작할 때부터 프로젝트 파일을 받아서 찾기 쉬운 위

치에 저장해두면 앱 인벤터에 업로드할 때 수월하다. 프로젝트 파일을 받는 방법은 이 책의 머리

말에 소개해두었다.

디자인 아이디어를 명료하게 만들기

디자인 과정은 훌륭한 아이디어가 현실화되도록 도움을 준다. 폭포수(waterfall) 모델, 나선형

(spiral) 모델, 애자일(agile) 개발론 같은 이름들이 때로는 개발자들에게 부담스럽고 모호하게 느

껴질 수도 있지만 디자인 과정은 신비로운 것이 아니다. 이런 개발 이론들은 모두 같은 주제를 다

루고 있는데, 개발자와 프로그래머들이 꿈으로 꾸던 아이디어를 실제로 동작하는 프로그램으로

옮겨가기 위한 합리적인 과정을 다룬다. 그림 2-1에서 폭포수 모델의 대략적인 개요를 보여준다.

이 단원에서는 아주 기초적이고 단순한 형태의 폭포수 과정을 적용해서 SounDroid 프로젝트의

아이디어를 다음 단계로 진행해보려고 한다.

02 프로그래밍과 디자인의 기본 l 45

팁

앱 인벤터 애플리케이션은 모두 어떤 아이디어에서부터 시작하고, 그 아이디어는 보통 어떤

필요성에 의해 생겨난다. 콜로라도의 소방관이 소방서를 위해서 기계적인 마찰 손실률을 측정

하는 애플리케이션이 필요하다거나, 어떤 아버지가 질환이 있는 딸의 발작 증세를 기록해두기

위해 애플리케이션이 필요한 경우가 그런 예이다. 하지만 때로는 단순히 어떤 게임이나 커뮤

니케이션 기능에 대한 욕구가 새로운 앱으로 싹트기도 한다. 애플리케이션을 싹 틔우는 씨앗

이 무엇이건 간에 프로그램으로 만들기 위한 자양분과 보살핌이 필요하다.

요구사항 도출 설계 구현 검증 유지와 보수

그림 2-1 폭포수(waterfall) 개발 과정

■ 디자인할 때 원래의 아이디어를 명확한 문장으로 작성해야 한다. SounDroid 프로젝트의

원래 아이디어가 ‘편안한 소리를 내는 애플리케이션을 만들고 싶다’였다면, 명확한 디자

인을 한다는 것은 애플리케이션이 구체적으로 무엇을, 언제, 어떻게 동작하길 바라는지

를 도출하는 과정이라 할 수 있다. 애플리케이션의 동작에 대한 아이디어를 간단하게 나

열하는 것부터 시작하자. 아마도 아래와 비슷한 아이디어 목록이 만들어질 것이다.

■ 휴식이나 명상을 위한 편안한 소리를 낸다.

■ 세 가지 소리를 제공한다.

■ 명상이나 휴식 시간을 기록한다.

이것들은 디자인 문서에 들어갈 상위 단계의 목표들이다. 첫 과정은 연필-종이 프로그래밍이

다. 연필과 종이를 가지고 앉아서 애플리케이션이 어떤 모양이 될지 스케치 해보자. 이것은 알고

보면 상당히 고전적인 방법으로, 꾸준히 시장에 혁신을 가져온 “back of a napkin” 즉, 냅킨 뒤에

끄적이기 방식이다.

애플리케이션이 소리를 재생하도록 하려면 그림 옆에 재생 버튼과 멈춤 버튼이 필요할 것이고,

재생 시간을 보여줄 공간도 필요할 것이다. 스케치한 것을 바탕으로 세세한 부분까지 생각을 다

듬어 보자. 사용자가 이미지를 눌러서 소리를 재생하고 다시 한 번 눌러서 소리를 멈추도록 하면

더 깔끔하고 직관적일 것이다. 애플리케이션 모양이 더 편안하고 부드러워 보이는 것도 좋겠다.

이제 그림 2-2 같은 모양의 스케치가 나올 것이다.


그림 2-2 SounDroid 애플리케이션의 아이디어 스케치

아이디어에 생각을 더 추가하고 종이에 그려본 것 만으로도 벌써 원래 작성했던 아이디어 목

록을 다듬기 시작한 셈이다. 이제는 구체적인 아이디어들로 목록에 살을 붙이자. 스케치와 아이

디어를 가지고 애플리케이션의 각 엘리먼트 혹은 컴포넌트가 무슨 일을 할 것인지 말로 정의해

보자. 그러고 나서 애플리케이션의 구체적인 목표를 나열해 보자. 예를 들면 이런 것들이 생각날

것이다.

■ 재생과 멈춤을 위한 버튼으로 쓰이는 이미지들

■ 멈출 때까지 재생하기

■ 그림과 어울리는 세 가지 소리

■ 소리를 틀면 시작하고 소리를 멈추면 멈추는 타이머

■ 타이머를 보여줄 방법

■ 튀지 않고 편안한 느낌을 주는 배경화면

■ 가운데 정렬하기(1장에서 모든 앱 인벤터 컴포넌트는 좌측 상단부터 채워지던 것을 기억

하자. 이 때문에 사용자 인터페이스를 구현할 때 컴포넌트를 가운데에 정렬하기 위해서는

머리를 좀 써야 한다.)


아이디어를 발전시키고 모호한 것 없이 명료하게 만들다 보면 이 과정을 여러 번 반복하게 될

것이다. 게임이나 계산기 같이 더 복잡한 애플리케이션에서는 디자인 요구사항의 단 한 줄이 실

제 작성할 전체 코드가 될 수도 있다. ‘두 수의 최대 공약수를 찾아라’ 같은 디자인 목표는 여러

수학 함수로 쪼개진다. 이렇게 되면 이미 이러한 목표를 달성하는 데 필요한 구성 블록들을 개발

하게 되는 다음 단계로 나아가고 있는 것이다.

단위 목표 도출하기

여러분의 아이디어가 무엇이고 애플리케이션이 해주길 바라는 점을 명확하게 깨닫고 나면, 각각

의 ‘기본’ 동작이나 반응 동작이 무엇이 되어야 할지 작은 단위로 나눠서 생각해봐야 한다. 디자

인 목표를 만족시킬 각각의 방법을 단위 목표(primitives)라고 부른다. 그림을 이루는 기본 도형

인 원, 정사각형, 직사각형, 삼각형처럼 프로그래밍도 아주 단순한 부분들로 쪼갤 수 있다. 그림

2-3을 보자. 프로그램은 이벤트나, 동작, 입력과 같은 단위 목표로 나누어 생각할 수 있다.

그림 2-3 미술 구성에서 사용하는 단위 도형들

구체화된 SounDroid 아이디어 목록의 최종판은 단위 목표에 상당히 근접해졌다. 다음 과정

으로 각 디자인 목표의 단위 목표들은 어떤 것이 있을지 깔끔하게 정의할 필요가 있다. 단위 목

표들을 얻는 한 가지 방법은 앞서 나열했던 아이디어 목록을 단위 목표 목록으로 변환하는 것이

다. 주요한 목표 각각에 대해서 목표를 이루기 위해 필요한 단위 동작들을 정의하자. 앱 인벤터에

익숙해지고 잘 이해하게 될수록 이 단계에서 앱 인벤터의 단위 목표도 쉽게 정의하게 될 것이다.

프로젝트를 처음 시작할 때는 어떤 특정한 일을 앱 인벤터가 어떻게 수행하게 될지 전혀 감이 없

을 것이다. 어떻게 될지 감이 없는 것 또한 단위 목표를 정의해야 하는 주요한 이유 중 하나이기


도 하다. “조금씩 하다 보면 식은 죽 먹기지만, 한꺼번에 하려면 상당한 시간이 걸린다”라는 옛말

은 여기서도 통한다. 하나씩 하자. 한 가지를 어떻게 해야 할지 알아내는 것은 훨씬 쉽다. 예를 들

면 이미지를 보여주고 변경하는 루틴을 하나 만드는 것은 이미지 갤러리 프로젝트 전체를 한 번

에 생각해내려고 애쓰는 것보다 훨씬 쉽다.

이전에 만들어둔 아이디어 목록을 가지고 목표를 달성할 수 있는 가장 간단하고 가능한 방법

을 정의하는 것부터 시작하자. 첫 목표는 ‘재생과 멈춤을 위한 버튼으로 쓰이는 이미지들’이었다.

이 문구를 몇 개의 부분으로 나눠 보면 이런 식으로 나눌 수 있다.

■ 재생과 멈춤을 위한 버튼으로 쓰이는 이미지들

a. 버튼에 이미지를 입힌다.

b. 버튼은 소리를 재생한다.

c. 같은 버튼이 소리를 멈출 수 있어야 한다.

버튼에 이미지를 사용하기로 하였으므로 첫 번째 항목은 당연하다. b와 c는 앞서 나열했

던 두 번째 디자인 목표를 둘로 나눈 셈이 되었는데, 우선 쉽게 시작해서 차차 단순한 목

표들을 결합해 더 복잡한 것으로 만들어 나가게 되는 것이다. 여러분은 버튼을 만들고 그

버튼에 이미지를 입히는 방법을 이미 알고 있다. 따라서 소리를 재생하고 멈추는 방법을

이해하면 이들 단위 목표를 결합해서 더 진화된 버튼을 만들 수 있다. 간단한 단위 목표

들을 조합하는 방법이 언제나 뻔한 건 아니라서 여러 번의 시행착오를 겪는 일도 종종 있

다. 단위 목표를 명료하게 작성하면 이런 과정이 좀 더 수월하다.

■ 이미지와 매치되는 세 가지 사운드

a. 물결 소리와 물결 이미지

b. 빗소리와 비가 내리는 이미지

c. 화이트노이즈와 화이트노이즈 이미지

이런 단위 목표에 도달하는 것은 상당히 쉽다. 하지만 마지막 항목은 디자인에 대한 결정

과정이 필요하다. 애플리케이션에서 화이트노이즈는 어떤 모양이 되어야 할까? 이 프로

젝트에서는 편의상 필자가 정한 고정적인 모양을 사용하겠지만, 이 단위 목표는 사실 많

은 생각과 창의력이 필요하다.


타이머와 관련된 목표는 사실상 처음으로 주어지는 도전 과제다. 사용자가 애플리케이션

을 사용해서 달콤한 휴식을 취하는 동안 얼만큼의 시간이 흘렀는지 보여줘야 하는데, 그

걸 어떻게 해야 할지 현재로서는 아마도 상당히 막막할 것이다. 하지만 걱정할 필요 없다.

그 단위 목표 동작에 대한 알고리즘을 설명할 수 있으면 된다. 알고리즘(algorithm)이란

예상하고 있는 어떤 목표에 도달하기 위해서 밟는 일련의 과정이다.

관찰자 입장에서 앞에 앉아 있는 사람이 얼마나 오랫동안 휴식을 취하고 있는지 어떻게

알 수 있을까? 정확한 결과를 원한다면 아마 스톱워치로 몇 초가 지났는지 잴 것이다. 마

찬가지로 애플리케이션도 아주 정확하게 경과시간을 재기 위해 “소리 재생 버튼이 눌렸

을 때 초를 세기 시작한다. 소리 멈춤 버튼이 눌리면 초를 세는 것을 중단한다. 셌던 총 시

간을 보여준다.” 같은 알고리즘을 정의할 수 있다. 이 방법도 분명 정확한 시간 측정 방법

이지만 프로그래밍에서는 어떤 목표를 구현하는 데 한 가지 방법만 있는 것은 아니다. 예

를 들어 타이머가 시작한 시간과 끝나는 시간을 적어두고 그 차이 시간을 뺄셈으로 계

산할 수도 있다. 후자의 방법은 두 개의 시점만 기록하고 그 차이만 계산하면 되기 때문

에 더 간단하다. 앱 인벤터에서 시간이나 날짜와 관련된 일을 할 때는 Clock 컴포넌트가

Clock 컴포넌트의 기능이 단위 목표를 결정하는 초석이 된다. 타이머와 관련된 단위 목

표 목록은 이런 식으로 작성할 수 있다.

■ 소리가 재생될 때 시작하고 소리가 멈출 때 멈추는 타이머

a. 소리 재생이 시작하는 시점 기록

b. 소리 재생이 끝날 때 시점 기록

c. 시작과 끝 사이의 차이를 기록

■ 타이머를 보여주는 방법

이것은 아주 쉬운 단위 목표다. 화면에 정보를 보여주는 것은 대체로 간단한 일에 속한다.

앱 인벤터에서는 주로 Label 컴포넌트를 사용해서 화면에 정보를 보여준다. 이것이 유일

한 방법은 아니지만 텍스트를 보여줄 때 많이 사용하는 방법이다.

■ 편안하고 튀지 않는 배경 화면

a. Screen1 컴포넌트의 배경화면에 이미지를 설정한다.


일러두기

Screen1 컴포넌트는 기본 컴포넌트로서 다른 모든 앱 인벤터 컴포넌트가 그 위에 올라간다.

다른 컴포넌트와 마찬가지로 배경 화면이나 이미지 같은 속성을 가지고 있다. 앱 인벤터의 현

재 버전에서는 다른 스크린 컴포넌트들을 기존의 스크린 컴포넌트 위에 만들 수 없다. 이 책에

서 필자는 하나 이상의 스크린 컴포넌트를 동시에 사용할 수 있는 독창적인 방법을 보여주고

자 한다. 실제로 스크린 컴포넌트는 아니지만 마치 스크린처럼 동작하기 때문에 필자는 ‘가상

스크린’이라고 표현하였다.

이것도 쉬운 단위 목표다. 다만 배경화면을 선택하는 데에 주의하자. 복잡한 배경화면은

주의를 산만하게 하고 정작 중요한 메시지를 놓치게 할 수 있을뿐더러 애플리케이션을 싸

구려로 보이게 할 수도 있다. 배경화면은 배경화면일 뿐 배경에 주의를 집중시키거나 산

만하게 만들어서는 안 된다.

■ 가운데 정렬하기(좌측 상단부터 채워지는 앱 인벤터의 기본 배치 방식이 아닌 별도의 방

법을 써야 한다).

a. 엘리먼트에 패딩 값을 줘서 버튼을 가운데 배치하기

■ 가운데 정렬하기는 아마도 이번 디자인 요구사항 중에 가장 어려운 부분일 것이다. 앱 인

벤터에는 엘리먼트를 뷰어 가운데에 위치시키는 간단한 방법이 없다. 하지만 조금 머리를

쓰면 원하는 위치에 배치시킬 수 있다. 웹 디자이너들이 원하는 자리에 엘리먼트를 넣을

때 흔히 사용하는 ‘패딩’을 활용하면 된다. 아이템을 가운데에 밀어 넣기 위해서 사용하

는 컴포넌트는 내용이 비어 있어서 화면에서는 보이지 않는 레이블 컴포넌트다.

여러분의 단위 목표 목록은 이제 디자인 목표들 사이사이에 들어가 있다. 이 목록은 사용자

인터페이스 스케치와도 잘 맞으면서 애플리케이션을 프로그래밍할 때 좋은 길잡이가 된다. 아이

디어를 실제 애플리케이션에 적용하다 보면 목표는 바뀔 수도 있고 단위 목표들은 서로 뭉치거

나 혹은 더 나뉠 수도 있다는 것도 기억해두자.


쉬운 것부터 시작해서 복잡한 것으로 진행하기

인생의 대부분의 일과 마찬가지로 애플리케이션을 개발할 때도 한꺼번에 너무 많은 일을 시도하

지 않는 것이 좋다. 프로그램의 기본 기능도 채 갖춰지기 전에 너무 많은 기능을 넣으려고 하면

여러분의 코드뿐만 아니라 머릿속 생각까지도 아주 뒤죽박죽 되기가 쉽다. 프로그래밍 문제를

풀 때 가장 방해가 되는 것 중에 하나가 순리에 어긋나거나 논리적인 순서와 어긋나게 일을 하려

고 하는 것이다.

진행 단계는 간단한 수준의 단위 목표들부터 시작해서 여기에 다른 단위 목표를 추가해가

며 더 복합적인 앱을 만드는 과정을 계획해 놓은 것이다. SounDroid 1.0은 아주 단순한 앱이었

다. SounDroid를 발전시켜 나가는 데에는 복잡한 정도에 따라 몇 가지 단계가 있다. 생각의 순

서를 명쾌하게 유지하고 프로젝트가 착착 진행되도록 진행에 대한 로드맵을 그려보자. 로드맵

(roadmap)은 프로젝트를 진행하는 합리적인 진행 순서를 제시한다. 새로운 디자인 목표를 위해

서 애플리케이션이 완성될 때까지 쭉 이어지는 과정상의 어떤 중요한 중간 단계들(milestones)로

실제 프로그래밍 과정을 나눌 필요가 있다. 더 많은 기능을 넣기 전에 기본적인 사용자 인터페이

스와 기능들이 잘 동작하고 있어야 한다. SounDroid는 기본적으로 소리재생 프로그램이기 때

문에, 일단 여러분이 원하는 방식으로 소리를 재생하는 기능이 제대로 동작해야 한다.

처음 만든 SounDroid는 사운드 파일을 단순히 한 번만 재생한다. 타이머를 추가하거나 사

용자 인터페이스를 예쁘게 만들지 않아도, 사운드 파일을 제대로 반복 재생하게 하는 것만

도 충분히 도전해볼 만한 일이다. 앞으로 SounDroid를 세 가지 버전으로 만들어 보려고 한다.

SounDroid 1.0은 앞 단원에서 앱 인벤터 인터페이스를 소개하면서 만들어 봤다. SounDroid

2.0과 SounDroid 3.0은 이번 단원에서 만들었던 디자인 목표와 단위 목표들을 바탕으로 다음

단원에서 완성시킬 것이다. SounDroid 프로젝트는 다음과 같은 중간 단계들로 나눌 수 있다.

■ SounDroid 2.0

세 가지 모든 소리를 반복 재생한다.

기본적인 사용자 인터페이스를 갖춘다(버튼, 레이블, 가운데 정렬).

■ SounDroid 3.0

소리가 반복으로 재생되는 시간을 표시한다.

잘 다듬어진 예쁜 인터페이스를 만든다.


디자인 목표와 목표를 이루기 위한 단위 목표는 이런 식의 모양이 될 것이다.

■ 재생과 멈춤을 위한 이미지 버튼들

a. 이미지를 갖는 버튼

b. 소리를 재생하는 버튼

c. 같은 버튼으로 소리를 멈추기

■ 이미지와 어울리는 세 가지 소리

a. 물결 소리와 물결 이미지

b. 빗소리와 비 내리는 이미지

c. 화이트노이즈와 화이트노이즈 이미지

■ 소리가 재생될 때 시작하고 소리가 멈출 때 멈추는 타이머

a. 소리 재생이 시작하는 시점 기록

b. 소리 재생이 끝날 때 시점 기록

c. 시작과 끝 사이의 차이를 기록

■ 타이머를 보여주는 방법

a. 레이블로 보여주기

■ 편안하고 튀지 않는 배경 화면

a. Screen1 컴포넌트의 배경화면에 이미지를 설정하기

■ 가운데 정렬하기

a. 엘리먼트에 패딩 값을 줘서 버튼을 가운데에 두기

기본적인 프로그래밍 용어 익히기

SounDroid 프로젝트의 두 번째 버전을 완성해 나가다 보면, 이 책에서 꾸준히 사용하는 몇 가지

용어에 익숙해질 것이다. 지금부터 설명하는 용어들은 다양한 프로그래밍 언어에서 사용되는

기본적인 용어면서 언어마다 약간씩 다른 의미를 갖기도 한다. 여기서는 일반적인 의미와 앱 인

벤터 관점에서의 개념을 모두 설명한다.


이벤트

이벤트(event)는 말 그대로 어떤 일이 일어났다는 것이다. 앱 인벤터는 여러 이벤트 핸들러를 가

지고 있는데, 이 핸들러는 블록 에디터의 다양한 컴포넌트 서랍 속에 들어있다(블록 에디터의 서

랍과 컴포넌트에 대해 다시 보려면 1장을 참고한다). 프로그래밍에서 이벤트는 데이터를 처리하

거나 사용자에게 어떤 결과물을 보여주기 위해서, 어떤 연산이나 반응 동작을 발생시키는 수단

이다. 이미 앞 단원의 SounDroid 1.0 에서 이벤트를 사용해 봤다. when Button.clock do 이벤트

는 소리를 재생시키기 위해 사용했던 이벤트다. 그림 2-4에서 보여주는 블록 에디터의 이벤트들

처럼, 앱 인벤터의 이벤트는 다른 블록들을 감싸 안는 팔이 달린 블록처럼 생겼으며, 이벤트가

발생하면 전달할 연속된 명령문들을 그 안에 포함한다. 다른 프로그래밍 언어에서는 이런 이벤

트 블록을 이벤트 핸들러(event handlers)라고 부른다. 이벤트 핸들러는 이벤트가 발생할 때 무엇

을 해야 할지 알고 있어서 이벤트를 적절하게 처리(handle)한다.

그림 2-4 블록 에디터의 이벤트 핸들러들


메서드

디자인 뷰에서 추가하는 여러 컴포넌트들은 블록 에디터 서랍에 메서드 호출 블록을 가지고 있

다. 메서드(method)는 이미 만들어진 명령문의 집합이다. 예를 들면 오디오를 재생하는 것과 관

련된 기능을 메서드로 모아 놓을 수 있다. 애플리케이션이 어떤 기능을 제공하기 위해 메서드에

접근해서 기능을 가져다 쓴다는 점에서, 메서드를 아주 작은 미니어처 프로그램으로 이해해도

된다. 전문 프로그래머가 아닌 사람이 구현하려면 크게 고생할 다양한 기능을 앱 인벤터에서는

메서드로 이미 만들어 두어 누구든 활용할 수 있게 하였다. 앱 인벤터에서 메서드를 사용할 때는

메서드를 호출(call)하면 된다. 그림 2-5에서처럼 call이란 단어가 써 있는 블록을 사용하면 애플

리케이션에서 그 블록의 기능을 사용하길 원한다는 의미가 된다.

그림 2-5 이벤트 핸들러에서 사용할 메서드를 호출하는 예

앱 인벤터에서 호출은 특정한 컴포넌트에 원래 내장되어 있는 함수나 기능에 접근할 때도 사

용된다. 앱 인벤터의 블록들은 다른 블록을 가져다 끼울 수 있는 소켓(sockets)을 가진 경우가 많

다. 예를 들어 Split At text 블록에 있는 소켓에 다른 블록들을 끼우면, 어떤 문자열을 어떤 지점

에서 끊어 여러 개의 문자열로 분리할지를 정의한다. 컴포넌트 서랍에 있는 어떤 메서드 호출 블

록에는 소켓이 없는데 그 자체만으로 동작이 정의되기 때문이다. 소켓을 가지는 호출 블록들은


메서드를 호출할 때 파라미터(parameter)를 끼워 넣어서 메서드가 어떻게 동작해야 할지 알려주

거나 혹은 메서드가 처리해야 할 대상을 전달한다. 다양한 호출이 앱 인벤터의 기본 내장 기능으

로 제공된다. 블록 에디터의 Built-In 서랍에는 아주 많은 호출 블록이 들어 있다. 그림 2-6에서

보여주는 call WaveSound.Play 블록은 그 예로, 지정한 소리 파일을 재생하는 데 사용된다.

기억해두기

앱 인벤터 호출은 어떤 기능과 함수를 제공하는, 미리 만들어진 명령문의 집합이라 볼 수 있다.

호출에 대한 정의가 기존의 전형적인 여러 프로그래밍 언어들과 다르다는 점을 기억해두자.

그림 2-6 Built-In 호출 블록들을 블록 에디터에서 본 모습

속성

컴포넌트에는 컴포넌트 모양을 어떻게 만들고 동작하게 할지 등에 영향을 주는 설정 항목이 있

다. 이런 설정 항목들을 속성(properties)이라 부르고, 그 값에 따라 컴포넌트의 기능이나 모양이

바뀐다. 예를 들면 Screen1 컴포넌트가 선택된 상태에서 속성 칼럼의 BackgroundColor 속성


을 설정하면 배경색이 바뀐다(1장에서 SounDroid를 따라 만들기 할 때 그 예가 나왔었다). size,

font, color 등처럼 어떤 속성들은 컴포넌트의 모양과 분위기를 바꾼다. 또 어떤 속성들은 컴포넌

트의 기능을 바꾸기도 한다. 사운드 플레이어 같은 컴포넌트는 source 속성 값이 업로드된 소리

파일과 철자가 정확히 일치하게 설정되지 않는 한 아무 소리도 재생하지 않는다.

모든 속성에 해당하진 않지만, 어떤 속성은 컴포넌트 서랍에서 블록을 끌어다 놓고 그 소켓에

원하는 속성 값을 끼워서 바꿀 수도 있다. 그림 2-7에서 보여주는 사운드 컴포넌트는 디자인 뷰

에서 source 속성 값을 설정하지 않은 컴포넌트다. 대신에 set sound1.source to 블록을 사용해

서 사운드 컴포넌트의 source에 값을 끼워 넣었다. 속성 블록을 사용해서 속성 설정을 바꾸면 디

자인 뷰에서 입력했던 값을 덮어 쓰게 된다.

그림 2-7 블록 에디터에서 속성 블록을 사용해서 속성 값 설정하기

변수

변수(Variables)는 지금까지 설명했던 그 어떤 것보다 더 복잡한 개념이다. 앱 인벤터의 변수는 기

존의 전형적인 프로그래밍 언어에서의 변수와 같은 기능을 갖고 있기도 하지만, 한편으로는 아

주 많이 다르다는 것을 이해했으면 한다. 변수는 De�nitions이라고 적힌 Built-In 서랍에서 만들


거나 정의한다. 변수를 만들려면 De�nitions 서랍에서 variable 블록을 끌어다가 작업창에 놓고

고유한 이름을 붙여준다. 이때 My Blocks 탭 아래의 My De�nitions라는 서랍에 새로운 블록이

생긴다. 정의한 변수를 활용할 때 이 블록을 쓰면 된다(그림 2-8 참고).

그림 2-8 My Definitions 서랍에 들어간 새로 정의한 변수들

앱 인벤터의 변수들을 다음 두 가지 관점에서 봐야 한다.

■ 정보를 넣을 수 있는 저장 공간으로 이름이 붙어 있는 저장소

■ 이미 저장되어 있는 정보를 가리키며 이름이 붙어 있는 레퍼런스

첫 번째 관점은 변수를 정의하는 상황에 초점을 맞춘 것이다. 다시 말하면 문장이나 숫자나 데

이터 같은 것을 박스에 저장해두고 나중에 다시 가져다 쓸 수 있도록 하는 상황이다. 종이 테이프

에 이름을 적어 붙인 종이 상자가 변수인 셈이다. NumberDates 같은 레이블을 종이 상자에 붙

여 놓고 나면 나중에 대화할 때 “그 11/13/2010, 5/3/1945, 12/25/1976 날짜가 들어 있는 상자 말

이죠”라고 번거롭게 말할 필요가 없다.

변수에 대한 두 번째 관점은 상자에 붙인 종이 테이프 레이블로 상자를 지칭하는 레퍼런스

같은 것이다. 재미있는 것은 상자 이름을 적은 종이 테이프는 여러 개가 될 수 있다는 점이다.


“이 날짜 목록에 해당하는 그림 상자에서 모든 그림을 가져오세요”라고 누군가에게 말하면서

NumberDates라고 쓰인 레이블 조각을 건넬 수 있다. 앱 인벤터에서는 애플리케이션에서 나중

에 사용할 정보를 저장해둘 때 블록 에디터에서 변수를 정의하면 된다.

프로시저

애플리케이션을 만들다 보면 한 번 이상 사용하게 되는 명령문 세트가 있을 수 있다. 예를 들면

어떤 변수에 시간 정보를 밀리초, 즉 1/1000초 단위로 저장해둔 것을 시, 분, 초 단위의 값으로

변환하는 계산을 여러 곳에서 사용하는 경우다. 프로시저(procedure)를 쓰면 재사용할 일련의

명령문 세트를 담아둘 수 있다. 프로시저는 다른 컴포넌트와 마찬가지 방법으로 만들 수 있다.

즉, 블록 에디터 Built-In 탭의 De�nitions 서랍에서 블록을 끌어다가 그림 2-9처럼 블록 에디

터 작업창에 놓으면 된다. 그러고 나면 그 계산 과정(혹은 재사용하고 싶은 명령문들은 무엇이든

지)이 필요할 때마다 내장된 메서드를 사용했던 것처럼 프로시저를 호출한다. 호출 블록은 My

De�nitions 서랍에 들어 있다.

그림 2-9 프로시저를 만들면 My Definitions 서랍에 호출 블록이 추가된다.


프로시저는 하나의 서브루틴(subroutine)으로 애플리케이션에서 차례대로 동작할 일련의 명

령문들이기도 하고 디버깅이나 재사용을 위해서 분리시켜 놓은 것이기도 하다. 수학적인 연산을

저장하기 위해서 프로시저를 사용했던 앞의 예에서 만약 계산 결과가 틀린 값이 나온다면 애플

리케이션의 모든 블록을 다 뒤져보지 않아도 정확히 어디부터 찾아봐야 할지 알 수 있다. 프로시

저의 종류는 두 가지다. 앞에서도 설명했던 것으로 프로시저 자체만으로 동작 가능한 나홀로 프

로시저(standalone procedue)와 인자를 받는 프로시저가 있다. 인자를 받는 프로시저는 앞서 설명

한 나홀로 프로시저와 한 가지만 제외하면 똑같이 동작한다. 인자를 받는 프로시저를 사용하면

프로시저에 정보를 전달해서 전달된 정보를 처리하고 결과값을 반환하도록 할 수 있다. 프로시

저의 인자는 원하는 만큼 많이 만들 수 있고 인자 블록은 My De�nitions 서랍에 만들어진다.

일러두기

결과값을 돌려주는 프로시저는 이 책의 두 번째 파트에서 더 자세한 설명과 예를 들어 다뤄보

고 프로젝트에서도 사용해본다. 프로시저는 중요한 개념으로 깔끔하고 우아한 프로그래밍 기

법이다.

앞으로 나올 단원에서는 프로젝트를 수행할 때 나홀로 프로시저와 인자를 받는 프로시저, 변

수, 그리고 메서드 호출 등을 사용하면서 앱 인벤터의 강력하고 훌륭한 기능들에 차츰 더 익숙

해질 것이다.


61

3장 _ SounDroid: 안드로이드 사운드 머신 만들기

4장 _ OrderDroid: 데이터 관리가 편한 모바일용 스토어 앱

5장 _ AndroidDown: 위치 인식 비상 버튼

6장 _ AlphaDroid: 알파벳 트레이싱 게임

7장 _ PunchDroid: 안드로이드 펀치벅 게임

8장 _ Collection Assistant: 바코드 데이터베이스 애플리케이션

9장 _ BlueChat: 블루투스 채팅 프로그램

10장 _ TwiTorial: 트위터 애플리케이션

Part II

62

2부에서는 컴포넌트를 단순히 끌어다 놓는 작업에서 시작하여 매우 복

잡한 알고리즘과 로직을 구현하는 단계까지 진행해 본다.

각 프로젝트마다 그림을 많이 넣어서 애플리케이션 만드는 데 참고가

되도록 하였다. 고급 개발자라면 이 그림들을 참고로 원하는 애플리케

이션의 기능을 개발하고, 초보 개발자라면 애플리케이션 개발 시 이를

바탕으로 바람직한 개발 알고리즘과 메서드를 고안해 내는 데 활용할

수 있을 것이다. 디자인 목표와 스케치를 잘 읽고, 완성하려는 애플리

케이션에 대한 이해를 뚜렷이 하기 바란다.

각 프로젝트는 그 자체가 목적이 아니라 자신의 애플리케이션을 만드

는 데 활용할 개념과 컴포넌트를 배워보는 예제로 활용해야 한다. 또

한 프로젝트를 개발하고 완성하는 과정을 통해 영감을 얻고 자신만의

창의적 개발 과정을 만들어 나갈 수 있도록 해보자. 메모장 등을 활용

해서 새로운 앱이나 기존 앱의 개선점에 대한 아이디어를 적어 두면 좋

은데, 그렇다고 새로운 아이디어로 인해 이미 세워 놓은 디자인 목표를

완성하지 못하는 일이 생기는 것은 막도록 하자.

그보다 더 중요한 것은 애플리케이션의 복잡도가 높아져서 프로젝트

에 흥미를 잃는다는 느낌이 오면 과감히 다음 프로젝트로 넘어가도 좋

다는 것이다. 도중에 혼동이 오거나 잘 모르겠으면 더 단순한 예전 프

로젝트로 돌아가도록 한다. 앱 인벤터를 쓰는 가장 큰 이유는 즐거움이

기 때문이다.

3장

SounDroid : 안드로이드 사운드 머신 만들기


■ 앱 인벤터에서 미디어 파일을 다루고 업로드하기

■ 소리 데이터 파일을 재생, 반복하기

■ 사용자 인터페이스 엘리먼트를 원하는 대로 배치하기


지난 장에서는 디자인 목표를 세우고, 단위 목표와 프로세스를 만드는 과정을 배웠다. 이 장에서

는 지금까지 배운 내용을 바탕으로 해서 실제 프로그램을 만들어 본다. 다소 복잡한 알고리즘 몇

가지도 소개하겠다.

화면에 사용자 인터페이스 엘리먼트를 배치하고 가운데로 정렬하는 방법에 특히 주의를 기울

이기 바란다. 앞으로 어떤 프로젝트를 만들든 간에 되풀이해서 쓰일 것이기 때문이다. 눈에 안 보

이는 패딩을 써서, 보이는 엘리먼트의 위치를 조절하는 기법을 충분히 익혀야 앱 인벤터를 쓰면

서 당황하는 일이 없다. 여기서는 안 보이는 레이블이나 배열 컴포넌트를 밀어주는 엘리먼트로

이용해서 엘리먼트를 가운데로 옮기는 Fill Parent 옵션을 소개한다. 패딩에 특정한 값을 주어서

엘리먼트를 가운데가 아닌 다른 위치에 놓는 것도 가능하다는 점을 기억해 두도록 한다.

본 프로젝트에서 소개하는 클럭 엘리먼트는 타이머로도 쓰이고 시간 경과를 기록하는 수단으

로도 쓰인다. 그 두 가지 용도 모두 주의 깊게 보아 둔다. 다양한 목적으로 사용 가능한 카멜레온

같은 컴포넌트다. 이를 활용해 대기 상태, 임시 정지, 지연 처리(지연 처리에 대해서는 나중에 자

세히 다룬다) 등을 할 수 있다.

SounDroid 2.0 생성

SounDroid 프로젝트는 한 가지 소리만을 내는 단순한 사운드 보드에서 반복 재생 사운드 기기

로 확장되어 나간다. SounDroid 2.0 프로그램은 토글 버튼을 이용해 반복 재생을 할 수 있으며

연주시간 표시도 가능하다.

이처럼 복잡한 프로젝트도 점진적인 개선 방법을 사용하면 개발이 쉽다. 가장 쉬운 작업과

단순한 기능만 넣은 프로그램부터 만들기 시작해서, 조금씩 기능을 추가하고 성능을 높이는

것이다.

우선 웹 사이트로부터 애플리케이션 프로젝트 파일을 받도록 한다. 어떻게 받는지는 이 책의

머리말을 참고하기 바란다.

디자인

디자인 스케치(그림 3-1)는 만들고자 하는 프로그램이 어떤 모양이고 어떤 일을 하는지 잊지 않

도록 해준다. 사용하기 편하게 컴포넌트를 배치하는 첫 단계에서 특히 유용하다.

03 SounDroid : 안드로이드 사운드 머신 만들기 l 65

그림 3-1 SounDroid 2.0 디자인 스케치

SounDroid 2.0 프로그램의 디자인 목표는 다음과 같다. 이전 장에서 세운 목표를 좀 더 다듬

은 것이다. 각 항목을 달성할 때마다 앞에 체크 마크를 달도록 한다.

■ 듣기 편한 소리를 연주하거나 중단하는 버튼용 이미지 만들기

■ 듣기 편하고 독특한 소리 데이터와 각 데이터에 해당하는 버튼용 이미지 만들기

■ 각 버튼을 화면 가운데 배치하기

디자인 스케치와 디자인 목표 둘 다 좋은 지침이 되지만 개발 과정이 이에 너무 얽매여서는 안

된다. 항목을 추가하거나 빼는 것이 합리적이고 효율적이라면 그렇게 할 수 있어야 한다. 예를 들

어 개발에 들어가보니 버튼을 가운데 배치한다는 목표가 현 단계에서 조금 과하다 싶으면 빼서

다음 단계에 구현하는 것도 받아들이는 자세가 필요하다.


팁

개발 중에 떠오르는 영감을 to-do 리스트로 만들어 보관하는 개발자들이 많다. 그런 아이디

어들은 바로 개발하기보다는 나중에 기능을 확장할 때 적용할 목적으로 적어 두는 것이 좋다.

그와 같이 하면 현재의 열정과 진행 속도를 잃지 않으면서 추후 버전에 더 뛰어난 기능을 추가

할 수 있다.

단위 목표

디자인 목표를 달성하는 데 필요한 로직과 알고리즘, 인터페이스 등을 아래에 나열하였다.

■ 파도 소리, 빗소리, 잡음 표시용 이미지 버튼

■ 버튼 하나로 소리를 재생, 정지시키는 방법

■ 파도 소리, 빗소리, 잡음 소리 데이터 파일

■ 정지시킬 때까지 계속 반복하여 소리 파일을 재생하는 방법

■ 화면에 버튼을 배열하는 방법

진행 단계

각 세부 목표를 달성하기 위한 실제 프로그래밍용 기본 지침을 다음에 나열하였다(엄격히 정의

한 것은 아님).

1. 가운데 위치하는 버튼 컴포넌트를 만든다

2. 인터페이스 컴포넌트들 - 버튼, 레이블 등을 모두 늘어 놓는다

3. 이미지, 소리 등 미디어 파일을 업로드한다.

4. 소리 반복 재생 알고리즘을 만든다

5. 토글 버튼 알고리즘(버튼 하나로 끄고 켜도록)을 만든다

6. 반복 재생과 토글 알고리즘을 버튼과 소리 파일에 모두 적용한다


새 컴포넌트

본 프로젝트에서 새로 사용하게 되는 중요한 컴포넌트들은 다음과 같다.

■ Clock

■ HorizontalArrangement

■ VerticalArrangement

■ 패딩(Padding)

■ 이미지 버튼(Button with image)

■ Player

새 블록

본 프로젝트에 새로 사용할 중요한 블록들은 다음과 같다.

■ IfElse

■ Clock1.Timer

■ = (비교 혹은 등가 블록)

■ Text

SounDroid 2.0 시작하기

우선 휴대폰이 컴퓨터에 연결되어서 앱 인벤터와도 연결이 가능한지 확인하도록 한다. 디자인 뷰

에서 보이는 결과는 최종 프로그램의 모습과 다를 수도 있다는 점을 염두에 둔다.

3장 프로젝트 파일을 웹 사이트로부터 받아 두었는지도 확인한다. 자세한 내용은 책의 머리말

을 참고한다.

이전에 만든 프로젝트의 연장선에 있기는 하지만 1.0 버전과는 차이점이 많으므로, 2.0 버전은

처음부터 새로 만드는 편이 낫다.


1. 새로운 프로젝트를 만들고 이름을 SounDroid2_0이라 짓는다(그림 3-2).

프로젝트 이름에 공백이나 특수문자는 쓸 수 없으므로 대신 밑줄 문자를 써서, 지금 만

들고 있는 프로젝트의 버전이 눈에 잘 띄도록 한다. 그러면 디자인 뷰에 내용이 빈 프로젝

트가 생긴다. 이제 앞서 계획한 진행 단계 중 첫 번째 단계를 시작해보자.

그림 3-2 SounDroid 2.0 프로젝트 시작하기

먼저 빈 레이블과 가로 세로 배열 컴포넌트를 써서 컴포넌트들을 모두 가운데에 배치하는

것으로 시작해보자.

2. 팔레트 칼럼의 Screen Arrangement 항목을 클릭해서 화면 배치 메뉴가 보이도록 한다.

그 중 가로 배열(HorizontalArrangements)을 선택한 후 뷰어 화면에다 끌어다 놓는다.

그림 3-3 가로 배열 아이템을 써서 버튼을 가운데 정렬하기


기억해두기

가로 배열(HorizontalArrangment), 세로 배열(VerticalArrangement) 컴포넌트는 다른 컴

포넌트를 담는 데 쓰는 컨테이너다. 정해진 방향으로 안에 담긴 컴포넌트들을 나열하는 데 쓰

인다. 가로 배열 컴포넌트는 그 안에 담은 컴포넌트들을 가로(수평방향)로 펼쳐 배치하고 세로

배열 컴포넌트는 그와 달리 컴포넌트들을 세로(수직방향)로 늘어 놓는다. 이 두 항목을 이용하

면 버튼을 화면 가운데에 놓을 수 있다.

3. 팔레트 칼럼을 클릭해서 베이직 팔레트 메뉴를 연다. 레이블 항목을 선택하고 방금 가져

다 놓은 가로 배열 속으로 끌어다 놓는다. 이 레이블이 바로 버튼을 가운데 배치하는 데

쓰이는 패딩이다. 가로 배열 컴포넌트는 스스로 모양과 크기를 조정해서 안에 있는 컴포

넌트들이 적절히 배치되도록 동작한다.

4. Screen Arrangements 팔레트를 클릭해서 연다. 세로 배열 컴포넌트를 끌어다가 가로 배

열 안의 앞서 넣은 레이블의 오른쪽에 놓는다. 세로 배열로 인해 가로 배열 크기가 바뀌게

되는데, 가로나 세로 배열은 항상 레이블 오른쪽에 위치한다(그림 3-4). 처음 뷰어에 컴포

넌트 두 개를 끌어다 놓았을 때가 기억나는가? 컴포넌트들이 세로로 뷰어의 왼쪽에 붙어

서 나왔었다. 그 기본 배열 방식을 Screen Arrangement 메뉴의 컴포넌트를 써서 바꾸고

있는 것이다.

그림 3-4 Screen Arrangement 컴포넌트로 기본 배열 방식 변경하기


더 진행하기 전에 각 컴포넌트 이름을 짓고 속성도 설정하자. 그러지 않고서 너무 많이 진

행하면 각 컴포넌트들 이름이 무엇이었는지, 무슨 속성을 설정하려고 했는지 잊어버리기

쉽다.

5. 애플리케이션의 이름을 Screen1 속성에서 설정해 적절한 제목이 나오게 하자. 컴포넌트

칼럼 내에 있는 Screen1을 클릭해서 선택한다. 속성 칼럼의 Title 속성 필드를 선택하고

Screen1이라 되어 있는 것을 SounDroid 2.0이라고 바꾸고 엔터를 누른다.

뷰어와 그와 연계된 안드로이드 디바이스의 제목이 둘 다 바뀔 것이다(안드로이드 쪽이

바뀌지 않으면 어느 때든 블록 에디터의 Restart Phone App 버튼을 눌러 주면 된다).

기억해두기

안드로이드 디바이스나 에뮬레이터에 연결하려면 반드시 블록 에디터를 열어 두어야 한다.

6. Label1 컴포넌트를 선택하고 이름을 padButtonCenterLe�로 한다.

일러두기

패딩용 엘리먼트의 이름은 항상 pad로 시작할 것을 권한다. 이렇게 하는 가장 중요한 이유는

나중에 블록 에디터를 써서 작업할 때 패딩용 엘리먼트들을 전혀 건드리지 않는 것이 일반적

이기 때문이다. 디자인 뷰에서 일단 크기와 배치 방식을 정하면 다시 바꿀 일이 없다. 이렇게

이름을 미리 지어 두면 나중에 블록 서랍을 찾을 때 도움이 된다. 이름 짓는 방법을 정해 놓으

면 자칫 발생하기 쉬운 공포의 ‘이름 중복' 문제가 일어날 확률도 낮아진다. 전체 블록 구조 또

한 깔끔하고 의도가 분명해지며 나중에 다시 파악하기도 쉬워진다.

7. padButtonCenterLe�로 새로 이름 붙인 컴포넌트를 선택한 뒤에 기본 텍스트로 들어 있

는 Text for Label1을 지운다. 텍스트를 없애고 엔터를 누르면 된다. 그러면 레이블의 크기

가 줄어들면서 사실상 없는 것처럼 되고 마는데, 곧 손볼 것이므로 걱정하지 않아도 된다.

Width 속성 텍스트 입력창을 클릭한 뒤, 보이는 세 가지 옵션 중 Fill Parent를 선택하고

나서 OK를 클릭한다(그림 3-5).

그림 3-5 패딩 레이블용 Fill Parent 옵션


padButtonCenterLe� 컴포넌트의 부모 컴포넌트는 가로 배열 컴포넌트다. Fill Parent 옵

션의 의미는 커질 수 있을 만큼 커져서 부모 컴포넌트 속을 꽉 채우라는 것이다. 가운데

정렬을 구현하기 위한 패딩용 컴포넌트로서 이 옵션이 제대로 동작하려면 부모 컨테이너

역시 Fill Parent 속성이 설정되어 있어야 한다.

8. 가로 배열을 선택한다. 컴포넌트 칼럼에 있는 이름을 클릭하거나 뷰어에서 가로 배열의

테두리를 클릭하면 된다. 속성 칼럼에 있는 Width 속성을 마찬가지로 Fill Parent로 설정

한다.

그러면 세로 배열 컴포넌트가 뷰어의 오른쪽으로 뛰어 움직이는 것을 볼 수 있다(하지만

안드로이드 디바이스 화면에는 변화가 없을 것이다. 세로 배열은 보이지 않는 컴포넌트이

기 때문이다). 레이블은 Fill Parent 속성을 충실히 따라서 세로 배열을 가능한 한 멀리,

오른쪽 끝까지 밀어 붙인다. 이제, 오른쪽에서도 똑같은 힘을 가해서 세로 배열을 가운데

둘 수 있는 뭔가가 필요하다.

9. 그림 3-6과 같이 레이블을 하나 더 끌어다가 세로 배열의 오른쪽에 놓는다. 컴포넌트 칼

럼의 Label1 컴포넌트를 선택하고 Rename 버튼을 누른다. 그리고 이름을 padButton

CenterRight으로 바꾼다. 속성 칼럼의 텍스트 필드 속 초기 텍스트를 선택한 뒤 지우

고 엔터를 누른다. 이제 padButtonCenterRight 레이블의 Width 속성을 선택하고 앞서

padButtonCenterLe�에 했던 것과 마찬가지로 Fill Parent로 설정한다.

그림 3-6 두 번째 레이블 padButtonCenterRight으로 인해 세로 배열이 가운데로 위치한 모습

이제 세로 배열이 가운데로 오게 된다. 패딩 컴포넌트는 세로 배열의 양쪽에서 밀면서 전

체 폭이 얼마가 되든 세로 배열을 가운데에 놓이게 한다.


10. 레이블을 하나 더 끌어다가 가로 배열, 세로 배열의 위쪽에 놓는다. 뷰어 창의 가장 위쪽

에 위치하도록 놓아야 한다. Text 속성을 Tap an image to begin relaxing으로 바꾼다.

드디어 첫 번째 디자인 목표를 완수하였다. 세로 배열을 가운데에 배치해서 이제 그 안에

버튼을 담을 수 있게 되었다.

그림 3-7 프로젝트의 현재 모습

사운드 반복을 위한 컴포넌트 추가하기

블록 에디터를 써서 소리가 반복 재생되도록 만들어 보자. 눈에 안 보이는 컴포넌트 두 개가 더

필요하다.

1. Basic 팔레트에서 Clock 컴포넌트를 선택해 뷰어 작업창에 끌어다 놓는다. 그러면 뷰어

아래쪽에 눈에 보이지 않는 컴포넌트용 영역에 놓인다.

2. 팔레트 칼럼을 클릭해서 Media 팔레트를 연다. Player 컴포넌트를 뷰어 작업창에 끌어다

놓는다. Player 역시 눈에 보이지 않는 컴포넌트다.

3. 이제 프로젝트 파일 위치에 있는 미디어들을 모두 미디어 칼럼에 올리자. 어떤 이미지, 소


리, 동영상을 쓸 것인지 이미 정했다면 한꺼번에 모두 올려도 된다. 미디어 칼럼의 Add 버

튼을 누르고 Upload File 창의 Choose File 버튼을 클릭한다. 3장 프로젝트 파일을 다운

로드해서 풀어 놓은 폴더로 이동해서 wavebutton.png 파일을 고른 뒤 열기 버튼을 클릭

한다. Upload File 팝업창의 OK 버튼을 클릭하면 wavebutton.png 파일이 올라간다.

나머지 모든 파일에 대해서도 같은 과정을 반복한다. 한 파일을 다 올리고 나서 다음 파일

을 올리도록 한다. 즉 미디어 칼럼에 마지막으로 올린 파일이 나타나는 것을 보고 난 후에

다음 파일을 올리기 시작하도록 한다. 브라우저 상단에 노란색으로 업로드 진행 상황이

보이지만 언제나 정확한 것은 아니다. 올리기가 완료되었는데도 가끔 도중에 멈춰 선 채

로 있는 경우가 있다. 미디어 칼럼에 올린 파일이 보이면 확실히 마무리가 된 것이므로 그

때는 다음 파일을 안심하고 올려도 된다.

4. 계속 디자인 단계를 진행하자. 팔레트 칼럼의 Basic 팔레트를 클릭해서 연다. 뷰어 가운데

에 배치되어 있는 세로 배열 위에 Button 컴포넌트를 끌어다 놓는다. 이를 두 번 더 반복

해서 총 세 개의 버튼이 세로 배열 속에 놓이도록 한다. 세로 배열의 크기가 버튼에 맞추

어 변할 것이다.

5. 가운데에 배치된 버튼이 세 개 생겼으므로 각각의 속성을 설정하자. 컴포넌트 칼럼에서

각 버튼의 이름을 바꾼다. 처음부터 의미 있는 이름을 주면 나중에 블록으로 프로그래밍

하는 작업이 더 쉬워진다. Component 칼럼의 Button1을 클릭한다. Rename 버튼을 누

르고 btnRain이라 써넣은 뒤 Rename 컴포넌트 팝업창의 OK 버튼을 누른다.

컴포넌트 이름이 버튼이면 이름을 btn으로 시작할 것을 권장한다(그림 3-8). 뷰어나 컴

포넌트 칼럼에서 첫 번째 버튼을 선택하고 속성 칼럼에 있는 텍스트 필드의 초기값(Text

for Button1)을 지워 없앤다.

그림 3-8 버튼 컴포넌트 이름 바꾸기

6. 위와 같은 방법으로 Button2 이름을 btnWave로 바꾼다. Button3은 btnWhitenoise로

한다.


이제 버튼에 쓸 이미지를 추가하자. btnRain 컴포넌트를 선택하고 Image 속성 아래에 있

는 텍스트 박스를 클릭한다(그림 3-9).

그림 3-9 버튼 이미지 속성 선택

7. 앞서 미디어 칼럼에 올린 미디어 파일 목록 가운데 rainbutton.png를 찾아서 선택한다.

그러면 뷰어에 선택한 이미지가 나타난다. 연결된 안드로이드 기기의 화면에서도 보일 것

이다. 기기 화면에서는 조금 크게 보이므로 속성 칼럼의 Width, Height 속성을 써서 크

기를 조절한다.

8. Width 속성을 선택하고, Property 선택창에서 Pixels 옵션을 클릭한다. 125를 넣고 OK

버튼을 누른다. Height 값도 마찬가지로 125로 설정한다(그림 3-10).

이제 버튼이 좀 더 보기 좋게 적당한 크기가 되었다. 미적이나 기능적으로 더 적당한 값이

라고 생각되는 것으로 바꾸어도 무방하다.

그림 3-10 이미지 버튼 크기 설정하기


9. 계속해서 버튼의 다른 속성들도 수정한다. btnWave 컴포넌트를 선택하고 초기 텍스트를

지운다. 지운 후 엔터를 반드시 눌러야 한다. 엔터키는 변경 내용을 저장하고 뷰어와 연결

된 기기에도 변경 내용을 전달한다. Image 속성을 고르고 앞서 언급한 미디어 목록 가운

데 wave.png 파일을 선택한다. 역시 마찬가지로 Width, Height 속성을 125픽셀로 한다.

10. 다음으로 btnWhitenoise의 초기 텍스트 값을 지운다. 위에서 한 것과 같이 Image 속성

은 Whitenoise.png로 하고, Width, Height 속성은 각각 125픽셀로 한다.

11. 뷰어 하단의 안 보이는 컴포넌트용 영역에서 Clock 컴포넌트를 선택한다. TimerEnabled

이벤트 예제를 보여줄 것이므로 여기서는 일단 속성 칼럼에서 TimerEnabled 체크박스

를 끈다. 즉, 하나의 소리파일을 재생하고 이어서 재생할 때 그 사이 비는 시간이 1000분

의 1초라는 뜻이다. TimerInterval 값은 1을 준다. TimerInteval은 Clock1 컴포넌트의 동

작 주기를 밀리초 단위로 나타낸 것이다. 타이머 가동은 버튼 클릭 이벤트를 통해서 한다.

타이머가 가동하면 적절한 소리를 내게 된다.

12. Label1을 컴포넌트 칼럼에서 선택한다. Rename 버튼을 누르고 이름을 labInstructions

로 바꾼다. 본 책에서는 레이블 이름은 lab으로 시작할 것이다.

13. 블록 에디터로 전환한다.

14. 버튼을 눌렀을 때 발생하는 이벤트를 처리해보자. My Blocks 탭에서 btnRain 서랍을 선

택한다(그림 3-11 참고).

15. when btnRain.Click do 레이블이 달린 이벤트 핸들러를 블록 에디터 작업창에 끌어

다 놓는다. 이것은 btnRain 버튼을 눌렀을 때 실행되는 이벤트 핸들러다. btnWave,

btnWhitenoise 버튼도 똑같이 해준다. 그러면 그림 3-12와 같이 작업창에 이벤트 핸들러

세 개가 생길 것이다.

버튼을 누를 때마다 Player1 컴포넌트에 알맞은 소리 파일이 로드되어 실행되어야 한다.

다시 디자인 뷰로 돌아가서 Player1 컴포넌트를 클릭해서 선택한다. 그러면 Source 속성

이 보일 것이다. 그런데 플레이어는 경우에 따라 실행해야 할 소리 파일이 하나가 아니라

셋이므로 여기서 한 가지 소리만 설정해서는 안 된다. 따라서 Player1 서랍에 있는 속성

블록을 써서 이벤트 핸들러의 Source 속성을 설정해야 한다.


그림 3-11 btnRain 블록 서랍이 열린 모습

그림 3-12 버튼 클릭 이벤트 핸들러 세 가지

16. 다시 블록 에디터로 돌아간다. My Blocks 칼럼에 있는 Player1 서랍을 클릭해서 연다.

오른편에 빈 소켓이 달린 set Player1.Source to 블록이 나타날 것이다. 이 블록을 써서

Player1 컴포넌트에 쓸 소리 데이터 파일을 지정할 수 있다. 물론 디자인 뷰의 미디어 칼럼

에 데이터 파일을 미리 올려 놓았어야 한다. 아직 .mp3 파일을 올려 놓지 않았다면 지금

이라도 해놓자.


17. set Player1.Source to 블록을 끌어다가 btnRain.Click 이벤트 핸들러의 튀어나온 팔 부

분 사이에 놓는다. 제자리에 딸깍 맞추어 들어갈 것이다(그림 3-13). 이제 블록의 빈 소켓

부분을 채워 넣을 차례다.

그림 3-13 Source 컴포넌트를 블록 에디터 작업창에 끌어다 놓기

18. 블록 서랍 칼럼에 있는 Built-In 탭을 클릭한다. Text를 클릭해서 Text 서랍을 연다. 이 서

랍 안에는 텍스트를 설정할 수 있는 온갖 블록들이 들어 있다. 지금은 소스 이름을 설정

하기 위해 단순한 text 블록을 사용한다.

19. text 블록을 작업창으로 끌어다가 set Player1.Source to 블록 소켓에 위로 가져와 놓는다.

소켓 자리에 딸깍 끼워질 것이다. 이어서 텍스트 블록의 초기값 text를 클릭한다. 그러면

텍스트 블록 안쪽 내용이 선택되어 수정 가능하게 된다(그림 3-14).

20. rain.mp3라고 써넣는다. 이 내용은 미리 올린 소리 데이터 파일의 이름과 정확히 같아야

한다. 예를 들어 raining.mp3 등과 같이 한다면 텍스트 블록은 제대로 동작하지 않고 따

라서 소리도 나지 않을 것이다.


그림 3-14 제자리를 잡은 텍스트 블록이 수정 가능한 상태가 된 모습

21. btnRain.Click 이벤트 핸들러에 임시로 블록을 놓고 소스가 제대로 설정되어 소리가 나

는지 확인해보자. My Blocks 탭을 선택한다. Player1 블록 서랍을 열고 call Player1.Start

메서드를 끌어다 btnRain.Click 이벤트 핸들러에 넣는다. 연결되어 있는 안드로이드 기

기의 Rain 버튼을 누르면 소리가 나와야 한다. 지금 문제는 소리가 딱 한번 나고 그친다

는 점이다(rain.mp3 재생 시간은 31초다). 핸드폰의 다른 동작을 방해하지 않은 채 반복

해서 계속 재생되게 하려면 지연 처리(deferred processing)라는 방법을 써야 한다. 지연 처

리란 블록이 실행된 이후에 사용자의 입력이나 이벤트를 받아 처리할 시간이 얼마간 주

어진다는 뜻이다. 만일 블록 처리에만 모든 시간을 할애하여 사용자의 입력이나 이벤트

를 처리하지 못하고 있으면 안드로이드 시스템은 프로그램이 오동작한다고 여기고 강제

로 종료시켜 버린다. 현재 잠시 멈춰둔 Player1.Start 메서드를 다시 계속해서 실행하게 하

는 용도로 쓰는 것이 클럭 컴포넌트다. 클럭이 동작하는 한 계속해서 블록에 지정된 코드

를 실행하고, 속성에 설정한 시간만큼 쉬었다가 다시 블록을 실행하는 일을 반복한다. 따

라서 버튼 이벤트 핸들러로 클럭 컴포넌트를 시작하도록 하면 된다.

22. Clock1 서랍을 열어서 Clock1.Timer 블록을 끌어다 블록 에디터 작업창에 놓는다. 블록

의 이름인 when Clock1.Timer do는 '클럭에 정해놓은 시간이 지나면 이 블록의 코드를

실행하라'는 의미다. btnRain.Click 이벤트 핸들러에 넣었던 Player1.Start 메서드 호출 블

록을 꺼내 Clock1.Timer 블록에 넣는다.

23. 이제 버튼 클릭 이벤트가 발생하면 Clock1.Timer를 동작하게 만들 차례다. Clock1 블

록 서랍을 열고 아래로 스크롤해서 Clock1.TimerEnabled to가 보일 때까지 내려간다.

Clock1.TimerEnabled 블록을 btnRain.Click 이벤트 핸들러 블록으로 끌어다 놓는다.


24. 다음은 Clock1.TimerEnabled 블록의 속성을 설정해야 한다. enabled 속성은 참이냐 거

짓이냐를 정해주는 것이므로 true 로직 블록을 Built-In 블록에서 가져온다. Built-In 탭

을 누르고 Logic 블록 서랍을 연다. true 블록을 끌어다가 Clock1.TimerEnabled 블록의

소켓에 놓는다(그림 3-15).

그림 3-15 Clock1.TimerEnabled 블록이 true 값으로 설정된 모습

25. 그림 3-15와 같이 이제 Rain 버튼을 누르면 소스는 rain.mp3으로, 클럭의 enabled 속성은

true 값으로 설정되었다. 이제 연결되어 있는 안드로이드 기기로 테스트 해보자. 남은 문제

는 일단 시작한 뒤 어떻게 제대로 멈추느냐다(소리를 멈추려면 블록 에디터의 Connect to

Device... Reset connections 를 누르면 된다).

소리 반복 재생 기능 제대로 다루기

반복 재생 기능을 좀 더 제대로 처리할 필요가 있다. 버튼을 누를 때마다 현재 소리가 재생 중인

지 체크해봐야 하고, 재생 중이면 멈추고 멈춰 있으면 재생을 시작한다. 앱 인벤터의 Control 블

록을 쓰면 프로그램 코드의 흐름과 로직을 원하는 대로 조정할 수 있다.

1. 블록 에디터의 Built-In 탭을 누르고 Control 블록 서랍을 클릭하여 연다. 우리가 원하는

흐름은 그림 3-16과 같다.

클럭 동작 시작

클럭이 동작중인가?

예

아니오

클럭을 멈춤

그림 3-16 버튼 이벤트 핸들러의 흐름도


이와 같이 구현하려면 IfElse 블록을 쓰면 된다. 먼저 주어진 조건이 참인지 검사해서,

참이면 첫 번째 블록을 실행하고, 참이 아니면 두 번째 블록을 수행한다. 그러므로 그림

3-17의 IfElse 블록의 동작은 이렇게 읽을 수 있다: “Clock1.TimerEnabled 값이 거짓이

면 참으로 하고, 참이면 거짓으로 바꾼다.” 이것으로 그림 3-16의 로직을 만들 수 있다.

그림 3-17 플레이어의 동작을 토글시키는 IfElse 블록

2. If Else 로직을 실제로 만들어 보자. Control 블록 서랍에서 If Else 블록을 끌어서

btnRain.Click 이벤트 핸들러 블록 안의 Player1.Source 블록 밑에 놓는다. 이어서 Logic

서랍에서 등호(=) 블록을 꺼내 IfElse 블록의 test 소켓에 가져다 끼운다(그림 3-18).

그림 3-18 IfElse 블록의 비교 검사부 만들기


3. 등호(=) 표시가 되어 있는 블록은 비교 기능을 한다. 두 개의 값을 비교해서 같은지 본다.

현재 클럭의 동작 상태를 false 값과 비교해야 하므로 클럭의 현재 상태 값을 비교 연산

블록의 첫 번째 소켓에 끼운다.

4. My Blocks 탭의 Clock1 블록 서랍에서 빈 소켓에 들어가게 생긴 Clock1.TimerEnabled

블록을 찾는다. 이 블록은 현재 클럭의 상태를 true 또는 false 값으로 돌려준다. 그 블록

을 끌어다 IfElse 블록용 비교 연산 블록의 첫 번째 소켓에 끼운다(그림 3-19).

그림 3-19 비교용 블록에 테스트할 조건 설정하기

5. 이제 Built-In 탭의 Logic 블록 서랍을 열고 false 블록을 꺼내 비교 연산 블록의 남은 소

켓에 끼운다. 이제 “Clock1.TimerEnabled 값이 거짓이면”을 의미하는 비교 조건문이 완

성되었다.

6. Timer.Enabled 블록이 false 값이면(즉 타이머가 멈추어 있으면), 소리가 재생되고 있지

않은 것이므로 타이머를 동작시켜야 한다. My Blocks 탭의 Clock1 블록 서랍을 열고 set

Clock1.TimerEnabled to 블록을 끌어다 IfElse 컨트롤 블록의 첫 번째 블록 칸에 놓는

다. 이번엔 로직 블록 서랍을 열고 true 블록을 끌어다 Clock1.TimerEnabled to 블록의

소켓에 끼운다.

7. Clock1.TimerEnabled 값이 이미 true로 되어 있으면 소리가 재생 중이라는 뜻이므로 타

이머를 다시 멈추어야 한다. set Clock1.TimerEnabled to 블록을 Clock1 서랍에서 끌어

다 IfElse 블록의 else do 블록에 넣는다. 그리고 false 블록을 Logic 서랍에서 가져다 set

Clock1.TimerEnabled to 소켓에 끼운다.


그림 3-20 완성된 토글 버튼 로직의 전체 그림

8. 연결된 안드로이드 폰에서 동작을 확인해 보자. Rain 버튼을 누르면 소리 재생이 시작

되고 한 번 더 누르면 멈출 것이다. 제대로 동작하지 않으면 만든 블록 전체 구성을 그림

3-19와 꼼꼼히 비교해 본다. 이제 버튼 하나가 디자인 목표와 같이 동작하게 되었으므로,

나머지 버튼들도 마찬가지로 구성한다. 하지만 일일이 블록 하나씩 처음부터 만들 필요

는 없다. 앱 인벤터의 복사 기능을 쓰면 전체 블록을 복사할 수 있다.

9. btnRain.Click 이벤트 핸들러의 set Player1.Source to 블록을 클릭한다. 블록이 선택되

었는지 아닌지는 주위에 달아오르는 듯한 빛이 나는가를 보면 된다. 선택된 것을 확인한

후 그 상태에서 키보드의 Ctrl+C를 누른다. 그러면 선택한 블록 전체가 메모리로 복사

된다.

10. 이어서 Ctrl+V를 누른다. Player1.Source 블록과 소켓에 들어가 있는 값들의 복사본이 나

타날 것이다. Ctrl+V를 한 번 더 누르면 복사본이 하나 더 생긴다. 그중 하나를 btnWave.

Click 이벤트 핸들러에 끌어다 놓는다. 그리고 나머지 하나는 btnWhitenoise.Click 이벤

트 핸들러에 끌어다 놓는다. 그런데 잘 보면 rain.mp3 블록도 그대로 복사된 것이 보일 것


이다. 각 이벤트 핸들러의 텍스트 블록 내용은 알맞게 바꾸어야 한다. rain.mp3이라 되어

있는 btnWave.Click 이벤트의 텍스트 블록의 텍스트를 클릭해서 수정 가능한 상태가 되

도록 한다. 값을 wave.mp3라 바꾼다(그림 3-21).

그림 3-21 복사한 블록의 텍스트 속성 바꾸기

11. 마찬가지로 btnWhitenoise.Click 이벤트 핸들러의 텍스트 블록은 whitenoise.mp3로 바

꾼다.

12. 이제 btnRain.Click 이벤트 핸들러의 IfElse 블록 전체를 복사해서, 다른 이벤트 핸들러

의 set Player1.Source 블록 아래에 끌어다 놓도록 하자. 먼저 btnRain.Click 이벤트 블

록의 IfElse 블록을 클릭한다. Ctrl+C를 누르고 이어서 Ctrl+V를 누르면 블록과 소켓 안

에 들어 있는 모든 내용이 복제된다. 이것을 끌어다가 btnWave.Click 블록의 Player1.

Source 블록 밑에 놓는다. 또 Ctrl+V을 눌러서 IfElse 복사본을 하나 더 만든다. 복사된

IfElse 블록을 btnWhitenoise.Click 이벤트 블록에 끌어다 놓는다. 그러면 그럼 3-22와

같은 블록 구성이 완성된다.


그림 3-22 반복 재생 기능이 추가된 SounDroid 2.0의 버튼 이벤트 핸들러들

각 버튼과 소리 재생 기능을 테스트해 본다. 동작하지 않으면 만든 블록 구성과 그림 3-22를

꼼꼼히 비교해 보기 바란다. 이로써 SounDroid 2.0의 디자인 목표를 달성했다.

■ wave, rain, white noise 이미지 버튼

■ 버튼 하나로 재생을 시작하고 중단하기

■ wave, rain, white noise 소리 데이터 파일

■ 멈출 때까지 소리 파일을 반복 재생하기

■ 화면에 버튼을 원하는 대로 배치하기

디자인 뷰로 돌아가 뷰어 상단의 체크포인트 버튼을 클릭하자. 체크포인트 버튼의 초기값을

SounDroid2_0�nal로 바꾸자. 이제 SounDroid 2.0 프로젝트의 사본이 생겼다. 잠시 만든 프로

그램을 가지고 놀다가, 슬슬 다음 단계를 시작할 준비를 하도록 하자!


SounDroid 프로젝트 개선하기: SounDroid 3.0

이번 목표를 수행하면서는 어떻게 하면 좀 더 보기 좋은 사용자 인터페이스를 만들 수 있는지 배

운다. 속성 칼럼에서 설정했던 속성들 상당수가 블록 에디터로도 설정 가능했다는 사실을 떠올

려 보자. 이는 곧 공백 조정과 배치 용도로 썼던 패딩 엘리먼트가 일단 설정한 후에라도 이벤트나

다른 프로그램 로직으로 수정이 가능하다는 뜻이다. 디자인 인터페이스로 컴포넌트를 배치하는

작업은 눈에 안 보이는 엘리먼트로 보이는 엘리먼트를 ‘밀어서’ 원하는 자리에 놓이게 하는 것이

핵심이다.

이번 과정에서 Clock 컴포넌트는 완전히 다른 용도로 쓰인다. 이전에는 .Timer 핸들러로 정해

진 시간에 이벤트를 발생시키는 기능을 이용했다면, 이번에는 특정 시간을 기록하는 또 다른 기

능을 이용하게 된다. 어떤 프로젝트든 클럭 컴포넌트의 Timer 및 Time and Date 기능은 매우 중

요하다.

디자인

그림 3-23은 3.0 버전의 디자인 스케치이다.

그림 3-23 SounDroid 3.0의 디자인 스케치


디자인 목표

SounDroid 프로그램의 개선을 위해 달성할 목표는 다음과 같다. 단계별 릴리즈를 내놓기 전 이

루어야 할 목표의 목록이라 여겨도 좋겠다.

■ 소리 재생이 시작될 때 가동하고, 재생이 멈출 때 함께 멈추는 타이머 만들기

■ 타이머를 보여주기

■ 편안하고 튀지 않는 백그라운드 이미지

■ 시각상 편의를 위해 버튼 사이를 좀 더 벌리기

단위 목표

목표 달성을 위해 만들어야 할 단위 목표를 아래 열거했다. 타이머 관련 부분이 가장 어려울 것

이다.

■ 소리 재생 시간 기록하기

■ 소리 재생 멈춤 시간 기록하기

■ 소리 재생 시작과 멈춤 사이 시간 기록하기

■ Screen1 배경으로 쓸 이미지 마련하기

■ 레이블에 표시하기

■ 버튼 사이에 쓸 패딩 레이블 만들기

진행 단계

앞서와 마찬가지로 사용자 인터페이스용 컴포넌트들을 배치한 후 블록 에디터로 넘어가 기능을

구현한다.

1. 타이머 레이블과 타이머 표시용 레이블 배치하기

2. 버튼 사이에 패딩 레이블 넣기

3. 배경 이미지 설정하기

4. 타이머 표시 레이블에 재생 시간을 표시하는 로직 만들기


새 컴포넌트

이번 프로젝트에서 처음 소개되는 컴포넌트는 아래와 같다.

■ 타이머로 사용하는 Clock

■ 배경 이미지

새 블록

프로그래밍할 때 필요한 새로운 블록들은 아래와 같다.

■ Procedure

■ If

■ Variable

SounDroid3.0 시작하기

디자인 뷰에 새 컴포넌트를 넣으면서 시작한다. 나중에 블록 에디터로 돌아와서 마무리할 것이다.

일러두기

단계별 목표는 디자인 뷰에서 체크포인트 저장을 하기 좋은 지점이다. 혹시 기능을 추가하려

다가 무언가 잘못되어 버렸다면 앞으로 돌아가서 새로 시도해 볼 수 있는 지점이 된다.

1. 디자인 뷰에서 Screen Arrangements 팔레트를 클릭해서 열고 가로 배열을 끌어다 Tap

image to begin 텍스트가 있는 레이블 labInstructions 바로 아래에 놓는다.

방금 추가한 컴포넌트가 버튼을 아래로 밀어 내려도 염려하지 말자. Basic 팔레트에서 레

이블을 두 개 끌어다가 방금 만든 가로 배열 안에 놓는다(그림 3-24).


그림 3-24 타이머 레이블 만들기

2. Label1 컴포넌트를 선택한다(뷰어나 컴포넌트 칼럼에서 클릭한다). 속성 칼럼의

FontBold 속성의 박스를 체크 표시하고 TextColor 속성은 yellow로 설정한다. 속성 칼럼

에서 텍스트 초기값을 Length of last relaxation: 으로 바꾸고 엔터를 누른다. Label1 블

록을 선택한 상태에서 컴포넌트 칼럼의 Rename 버튼을 누르고 이름을 labTimerLabel

로 고친다.

3. Label2 컴포넌트를 클릭하여 선택하고 텍스트 초기값을 지워서 빈 상태로 만든다. 속성

칼럼의 FontBold 속성의 박스를 체크 표시하고 TextColor 속성을 yellow로 설정한다. 이

레이블에 시간이 표시될 것이다. 레이블의 이름을 labTimerDisplay로 바꾼다.

4. 컴포넌트 칼럼의 labInstructions 레이블을 선택한다. TextColor 속성을 white로 바꿔서

배경색과 대비되어 잘 보이도록 한다. 현재는 배경색이 흰색이라 보이지 않겠지만 곧 배경

색을 고칠 것이다.

일러두기

디자인 뷰에서 눈에 안 보이는 컴포넌트를 놓쳤을 때에는 당황하지 말고 컴포넌트 칼럼에서

그 컴포넌트의 이름을 클릭해서 선택하면 된다. 그렇게 하면 디자인 뷰에서 그 컴포넌트가 다

시 선택되는 것을 볼 수 있을 것이다.


이제 앞서 만든 레이블 두 개를 패딩을 써서 휴대폰 화면상에 좀 더 예쁘게 배치돼 보이게

해보자.

5. 새 레이블 하나를 Rain 버튼과 Wave 버튼 사이에 끌어다 놓는다. 이름을 padSeparate

Button1로 바꾼다. Text 속성의 초기 텍스트 값을 지운다. Height 속성을 Fill Parent 값

으로 설정한다.

6. 레이블을 하나 더 끌어다 Wave 버튼과 Whitenoise 버튼 사이에 놓는다. 이름을

padSeparateButton2로 바꾼다. Text 속성의 초기 텍스트 값을 지운다. Height 속성을

Fill Parent 값으로 설정한다(그림 3-25). 각 padSeparate 버튼은 화면 크기와 무관하게

스스로 크기를 조정해서 버튼 사이의 간격을 일정하게 만들어 준다.

그림 3-25 패딩 컴포넌트로 사용자 인터페이스 컴포넌트 배치하기

7. 컴포넌트 칼럼에서 Screen1 컴포넌트를 고른다. BackgroundColor 속성을 클릭해서 컬

러 선택창을 연다. 색상을 None 값으로 바꾼다. Scrollable 속성을 끈다. 스크롤 가능한

화면 상태이거나 BackgroundImage 값과 색상이 다 설정되어 있으면 배경이 제대로 보이


지 않기 때문이다. 속성 칼럼에서 BackgroundImage 속성 박스를 클릭해서 미디어 선택

창을 연다. 미디어 칼럼에 미리 올려놓은 soundroid_background.png를 고른다.

팁

연결되어 있는 안드로이드 기기에서 배경을 제대로 보려면 블록 에디터의 Connect to

Device Reset connections 버튼을 눌러주어야 하는 경우가 있다.

타이머 카운터 처리부분 만들기

블록 에디터로 전환해서 타이머 카운터 처리부분을 만들 준비를 하자. 우선 작업창을 오른쪽으

로 옮겨서 버튼 이벤트 핸들러에서 멀리 떨어지게 한다. 블록 에디터의 빈 곳을 클릭한 후 끌어서

작업창의 뷰를 덜 복잡한 곳으로 옮기는 것이다. 작업창을 끌어 옮기는 동안 블록 에디터의 오른

쪽 위 구석에는 작업창의 전체 모습이 축소된 지도처럼 나타나 현재 뷰가 작업창의 어디쯤에 있

는지 알려준다. 이 축소 지도를 보고 작업창의 이곳저곳을 돌아다닐 수도 있다. 작업공간의 이런

저런 영역 사이를 오가는 데 쓰는 이 기법에 익숙해지면 편하다. 블록 에디터에서 작업을 시작한

곳 왼쪽에 블록을 추가하면 작업창은 알아서 수평 방향으로 더 늘어난다.

1. 블록 에디터 작업창을 오른쪽으로 끌어서 빈 공간을 확보한다. 이곳에 SounDroid 3.0 타

이머를 만들어 넣으려고 한다(그림 3-26). 끄는 동안 블록 에디터 축소 지도에 현재까지

만든 블록들이 보일 것이다.

소리 재생을 시작할 때 시스템의 시각을 기록하는 로직을 만들어 볼 것이다. 재생이 멈출

때 시각도 기록한다. 종료 시각에서 시작 시각을 빼면 재생 시간이 얼마인지 알 수 있다. 2

장에서 언급한 것처럼 뭔가 나중에 다시 쓸 필요가 있는 값을 저장할 때는 변수를 사용하

면 된다. 변수란 일종의 저장 장소로 어떤 값을 담아 놓고 나중에 참조하거나 꺼내서 처리

하는 데 쓴다. 우리가 담을 값은 시작 시각과 종료 시각 두 가지다.

2. 변수를 만드는 일을 변수를 '정의'한다고 한다. 앱 인벤터에서 변수를 정의하려면 Built-In

탭을 선택한다. De�nitions 블록 서랍을 클릭해서 연다. 변수(variable)를 두 개 끌어다 블

록 에디터 작업창에 놓는다.


그림 3-26 블록 에디터에 작업공간 확보하기

기억해두기

다른 컴포넌트와 마찬가지로 변수도 이름이 다른 것과 겹치지 않아야 한다. variable이라고

적힌 텍스트를 클릭하여 변수 이름을 바꿔보자. 텍스트를 클릭하면 텍스트 영역이 하이라이트

되면서 수정 가능한 상태가 된다. 첫 번째 변수의 이름은 varPlayStart로 한다.

이 책에서 쓰는 변수들은 모두 이름이 var로 시작하도록 하였다. 이렇게 하면 변수마다

유일한 이름을 짓는데 도움이 되고 나중에 변수에 넣은 값을 꺼내거나 아니면 값을 넣을

때 원하는 변수 블록을 빨리 찾는데도 유용하다. 두 번째 변수의 이름은 varPlayStop이

라 바꾼다(그림 3-27).


그림 3-27 시작/종료 시각을 담을 변수들 이름 바꾸기

일러두기

컴포넌트의 이름 앞에 쓰이는 명칭(var, lab 등)은 세 가지 면에서 중요하다. 첫째로 각 컴포넌

트들의 이름이 서로 겹치지 않도록 해주며 둘째로 여러 컴포넌트 서랍의 내용을 정렬할 때 이

름이 비슷한 컴포넌트들이 서로 가까이 놓이게 해준다. 이름이 알파벳 순으로 정렬되기 때문

이다. 마지막으로 화면에 정신 없이 블록들이 가득할 때, 어떤 특정 블록이 변수나 목록 선택

창에다 어떤 일을 하는지 등을 좀 더 쉽게 파악할 수 있다. 다른 프로그래밍 언어에서 변수나

함수 등의 이름을 짓는 방법이 이와 같지는 않겠지만, 명확하고 쉽게 따라할 수 있는 방법을

쓰는 것이 중요하다는 점에서는 동일하다.

3. 현재 변수에는 물음표 블록이 끼워져 있다. 그 물음표 블록을 선택하고 키보드의 삭제키

Delete를 눌러 없앤다. 그러면 정말로 블록을 지울 것인지 물어 올 것이다. Yes를 선택한

다. 나머지 변수의 물음표 블록도 같은 방법으로 지운다. 나중에 이 자리에 대신 빈 숫자

블록을 넣게 될 것이다. 1

1 　 (옮긴이) 변수에 아무런 블록이 끼워져 있지 않은 경우도 있다.


앱 인벤터는 우리가 변수에 어떤 종류의 값을 넣고 싶어 하는지, 즉 문자열인지 숫자인지,

아니면 Boolean 대수값(참/거짓)인지 등을 잘 찾아내 알려준다. 그래도 변수를 정의할 때

는 저장하고자 하는 값의 유형을 함께 적어 주어야 한다. 앱 인벤터를 쓰다가 나중에 다른

프로그래밍 언어로 바꿀 때도 변수를 정의할 때 그 유형을 같이 지정해야 한다.

4. Built-In 탭에 있는 Math블록 서랍을 클릭해서 연다. 첫 번째 블록은 숫자 블록으로 초기

값이 123으로 되어 있다. 숫자 블록을 끌어다 작업창에 놓는다. 클릭해서 값을 수정 가능

하게 하고 값을 0으로 바꾼다. 이 블록을 Ctrl+C, Ctrl+V 키를 눌러 복사한다.

5. varPlayStart, varPlayStop 변수의 소켓에 이 숫자 블록을 끌어다 끼운다.

이제 시작과 종료 시각을 저장할 변수 두 개를 만들었는데, 이제 어떤 버튼이 눌리면 그 시각

을 변수에 기록할 방법이 필요하다. SounDroid 프로그램에서 사용자가 발생시키는 이벤트는 세

가지가 있다. 정확히 말하면 세 종류의 버튼 클릭 이벤트라고 할 수 있다. SounDroid 2.0 프로젝

트에서는 이 세 가지 이벤트 핸들러에 동일한 코드를 복사해서 사용했는데, 여기서는 타이머가

기록을 시작, 중단하는 일을 하는 프로시저(procedure)를 만들고 각 버튼을 클릭하면 그 프로시

저를 부르게 할 것이다. 결과를 계산하고 표시하는 일도 함께 한다. 프로시저란 서브루틴이라고

도 하는데, 애플리케이션 내에서 반복해서 사용하게 되는 프로그램의 일부를 뜻한다. 프로시저

는 소리 재생이 시작하는 것인지 종료되는 것인지 판단하며, 또 그 시각을 적당한 변수에 저장하

는 일 등을 한다. 전체적인 알고리즘의 흐름은 그림 3-28과 같다.

타이머가 가동 중이었나?(소리가 재생되고 있었나?)

현재 시각을 varPlayStart에

저장한다

예 아니오 현재 시각을 varPlayStop에

저장한다

labTimerDisplay 레이블에 결과를 표시한다

varPlayStop에서

varPlayStart 값을 빼고

결과를 1000으로 나누어

초 단위로 바꾼다

그림 3-28 타이머 프로시저의 흐름도


타이머 처리 프로시저 정의하기

다음 단계를 밟아서 프로시저를 만들어 보자.

1. 블록 에디터 Built-In 탭에 있는De�nitions 서랍을 연다. Procedure 컴포넌트를 끌어다

가 작업창에 놓는다. 프로시저에는 두 가지 유형이 있는데, 하나는 인자를 받고 결과를

돌려주는 것이고 다른 하나는 인자와 돌려주는 값이 없는 평범한 것이다. 그중 후자를 고

른다. 프로시저 이름을 클릭하고 이름을 procTimer로 바꾼다. 앞으로 정의할 프로시저

는 이름이 모두 proc으로 시작한다.

2. 이제 그림 3-28를 바탕으로 프로시저를 만들어 보자. 예-아니오 판단을 하려면 IfElse 블

록을 쓰면 된다는 것을 앞서 배웠다. Built-In 탭의 Control 블록 서랍을 열고 IfElse 블록

을 하나 꺼내 procTimer 프로시저에 끌어다 놓는다.

IfElse 블록은 항상 무언가 조건을 검사한다. 우리가 해야 할 검사는 ‘클럭이 돌고 있는가

아닌가?’이다. SounDroid 2.0 개발할 때를 돌이켜 보면 클럭은 돌고 있는 동안 계속해서

소리를 재생했었다. 따라서 클럭이 돌고 있으면 소리는 현재 재생중인 것이다. 우리는 버

튼을 클릭할 때마다 procTimer 서브루틴을 가장 마지막에 불러서, 버튼 클릭에 의해 클

럭이 돌기 시작했는지 아닌지를 판단할 수 있도록 만들 것이다.

3. 비교 연산 블록(등호 블록)을 로직 서랍에서 꺼내 IfElse 블록에 끼운다. Clock1은 현재

클럭이 돌고 있는지 아닌지를 알려주는 블록을 포함하고 있다. 그 블록을 써서 토글 버튼

을 만들었던 것을 기억할 것이다.

4. My Blocks 탭의 Clock1 블록 서랍을 연다. 아래로 스크롤해서 Clock1.TimerEnabled 블

록을 찾는다. 그 블록을 끌어서 등호 블록의 첫 번째 소켓에 집어 넣는다(그림 3-29).

5. Clock1.TimerEnabled 블록의 값이 참인지 알아야 하므로 Logic 서랍에서 true 블록을

끌어다 등호 블록의 두 번째 소켓에 넣는다.

이제 두 가지 경우를 처리해야 한다. 값이 참이면 버튼을 눌러져서 지금 클럭이 막 돌기

시작했다는 뜻이므로 그 시각을 저장해 둔다. 앞서 재생 시작 시각을 저장할 변수를 정의

했을 때 My Blocks 탭의 My De�nitions 서랍에 블록이 두 개 만들어졌다. 첫 번째 블록

은 변수의 내용을 가져오는 기능을 하며, 두 번째 블록은 어떤 값을 변수에 집어넣는 기

능을 한다.


그림 3-29 procTimer용 판단 조건 만들기

6. My De�nitions 서랍을 열고 set global varPlayStart to 블록을 끌어내서 IfElse 블록의

첫 번째 칸, 즉 IfElse 블록의 then-do 부분에 끼워 넣는다. set 블록은 변수의 내용을 어떤

값으로 지정하게 해준다. 우리는 이 변수 값을 시스템의 현재 시각으로 설정하려고 한다.

기억해두기

시간, 날짜 처리는 모두 클럭 컴포넌트가 담당한다. 활용할 수 있는 내부 관련 기능이 풍부하

다. 그 가운데 하나가 시스템 타임 블록으로 휴대폰이나 현재 동작 중인 기기의 현재 시각을

알려준다.

7. Clock1 서랍을 열어서 이름이 call Clock1.SystemTime인 블록을 찾는다. 이 블록이

SystemTime 메서드를 부르는 기능을 하는 것으로, 어떤 블록의 소켓이든 넣어 놓으면 연

결된 블록에 현재 시스템의 시각을 넣어 준다. call Clock1.SystemTime 블록을 끌어다

IfElse 블록의 then-do 소켓에 있는 set globalPlayStart to 블록의 소켓에 끼운다.


그림 3-30 varPlayStart에 현재 시스템 시각을 넣어주는 블록도

이제 두 번째 처리부를 만들자. Clock1.TimerEnabled 값이 참이 아니라면 종료 시각을

varPlayStop에 넣어 주어야 한다. procTimer는 각 버튼이 눌린 직후에 불러야 함을 상기하기 바

란다. 따라서 procTimer가 검사할 때 클럭이 서 있으면 그것은 토글 버튼이 방금 클럭을 세웠다

는 뜻이므로 varPlayStop 변수값을 바꾸고 총 재생 시간을 표시해 주어야 한다.

1. My Definitions 서랍을 열고 set global varPlayStop to 블록을 끌어서 IfElse 블록의

else-do에 넣는다. 그리고 앞에 나왔던 Clock1.SystemTime 블록을 선택한 뒤 Ctrl+C,

Ctrl+V 키를 차례로 눌러서 하나 더 만든다. 복제된 Clock1.SystemTime 블록을 끌어서

set global varPlayStop to 블록에 넣는다.

이제 시작, 종료 시각이 다 설정되면 연산을 해서 결과를 TimerLabel 레이블에 표시하는

것만 남았다.

2. My Blocks 탭에서 labTimerDisplay의 블록 서랍을 선택한다. 이 안에 있는 블록들로 레

이블의 여러 속성을 설정할 수 있다. set labTimerDisplay.Text to 블록을 쓰는 방법은 변

수를 다룰 때 나온 set global 블록과 똑같다. set labTimerDisplay.Text to블록의 소켓에

무엇이든 끼워 넣으면 그 값이 레이블에 표시된다. set labTimerDisplay.Text to블록을 끌

어다 varPlayStop 블록 바로 아래에 맞춰 끼운다.

SystemTime 블록이 주는 시각은 단위가 밀리초이므로 변수에 넣을 때 약간 값을

바꾸어 주어야 한다. 계산은 매우 간단하지만 순서를 잘 맞추어 해야 한다. 공식은

(varPlayStop-varPlayStart)/1000이다.

3. 이 식을 labTimerDisplay.Text 블록에 집어 넣으려면 Built-In 탭의 Math 블록 서랍을 열

고 나누기 블록을 꺼낸다. 나누기 블록에는 나눗셈 연산 기호(/)가 표시되어 있다(그림

3-31).


4. Math 블록 서랍에서 빼기(-) 블록을 꺼내서 나누기 블록의 첫 번째 소켓에 넣는다.

5. 이제 My Blocks 탭의 My De�nitions 서랍을 열어서 global PlayStart, global PlayStop

블록을 꺼낸다. global PlayStop은 빼기 블록의 첫 번째 소켓에, global PlayStart 블록은

두 번째 소켓에 넣는다.

6. 작업창의 빈 곳을 클릭하고 숫자 1000을 친 후 엔터를 누른다. 그러면 숫자 1000이 담

긴 숫자 블록이 생긴다. 이 숫자 블록을 끌어서 나누기 블록의 남은 소켓에 넣는다. 이제

procTimer 프로시저는 그림 3-31과 같이 된다.

그림 3-31 완성된 procTimer 프로시저

procTimer 프로시저를 버튼 이벤트 핸들러에 추가하기

이제 갓 만들어 따끈한 프로시저를 버튼 이벤트 핸들러에 연결해 주는 일만 남았다.

1. My Blocks 탭의 My Definitions 블록 서랍을 연다. 프로시저를 만들고 나면 My

De�nitions 서랍에 그 프로시저를 불러 쓸 수 있는 호출 블록이 생긴다. 이 호출 블록은

기존의 메서드와 똑같은 방법으로 쓸 수 있다.

2. procTimer 호출 블록을 끌어서 btnRain.Click 이벤트 핸들러의 IfElse 아래에 놓는다.

btnWave.Click, btnWhitenoise.Click 이벤트 핸들러에도 똑같이 해준다.


그림 3-32 완성된 SounDroid 3.0 프로젝트 블록도

축하한다! 방금 우리의 첫 번째 업그레이드 버전 애플리케이션을 완성했다. 아이디어 초기 단

계에서부터 완성의 단계까지 밟아온 것이다. 그 과정에 디자인 문서를 만들고, 새로운 블록과 컴

포넌트를 생성하는 방법도 배웠다. 자, 이제 다음 장에서부터는 좀 더 멋진 애플리케이션을 만들

어 보자.

Documents

시작하세요! 앱 인벤터 : 코딩 한 줄 없이 안드로이드 앱 만들기