[아장아장 개발 공부] 모두의 앱 인벤터: 로그인부터 앱 설치까지

카테고리 없음 2023. 7. 24. 22:00

콘텐츠의 난이도	콘텐츠를 읽는데 필요한 시간 / 앱 제작 시간	필요한 선수 지식
하	10분 / 30분	• 중학교 수준의 영어: 영어로 되어 있는 앱 인벤터의 UI와 블록 코딩을 이해하는 데 도움이 됨. • 블록 코딩(엔트리, 스크래치 등) 프로그램 사용 경험: 유사한 프로그램을 사용해 보았다면 블록 에디터의 사용 방법을 이해하는 데 매우 도움이 됨.

이번 포스팅에서는 앱 인벤터 로그인, UI (User Interface) 알아보기, Hour Of Code 앱 제작, 그리고 만든 앱을 내 폰에 설치하는 방법을 설명하고자 한다.

준비물: Google 계정. 구글 계정이 없다면 구글 (https://www.google.com/)에서 계정을 만들어 오자.

지난 콘텐츠 읽으러 가기 ▶️ [아장아장 개발 공부] 모두의 앱 인벤터 맛보기

앱 인벤터 로그인하기

구글 계정이 준비되었다면 앱 인벤터 공식 홈페이지에 접속하여 구글 계정으로 로그인해야 한다. 아이디를 만들거나 개인 정보를 입력하는 등의 별도의 가입 절차 없이 앱 인벤터 공식 홈페이지에서 구글 계정으로 로그인하고 사용 약관에 동의하면 프로그램을 바로 사용할 수 있다.

1. 앱 인벤터 공식 홈페이지(https://appinventor.mit.edu/) 접속

2. Create Apps! 클릭

3. Google 계정에 로그인

4. Terms of Service 창이 뜨면 약관 내용을 확인하고 I accept the terms of service! 클릭

5. Welcome to App Inventor! 창이 뜨면 Continue 클릭

6. 튜토리얼 안내창이 뜨면 Close 클릭해 닫기 (우리는 Hour Of Code 튜토리얼로 바로 들어갈 것이므로 여기서 보이는 튜토리얼 창은 닫습니다.)

튜토리얼 열기

튜토리얼 앱을 만들기 위해 튜토리얼에 들어간다. 튜토리얼에는 앱 제작을 위해 필요한 이미지, 소리 등의 미디어 파일이 기본으로 추가되어 있다. 그리고 왼쪽에는 사용자가 쉽게 따라 할 수 있도록 앱 제작 과정을 GIF로 제공한다.

1. 화면 왼쪽 위에 있는 MIT APP INVENTOR 로고 클릭

2. 메뉴에서 Educators → Tutorials 클릭

3. Beginner Tutorials 클릭

4. Hello Codi!의 Tutorial 클릭 (앱에 필요한 소리 및 이미지가 포함된 HourofCode 창이 열림)

앱 인벤터 UI 알아보기

앱 인벤터의 UI를 살펴보자. 앱 인벤터에는 크게 두 개의 작업 공간으로 나누어져 있다. 바로 디자이너와 블록 에디터이다. 앱 인벤터 오른쪽 위에 디자이너와 블록 에디터 화면을 열 수 있는 버튼이 있다.

디자이너(Designer) 화면 구성

디자이너에서는 앱의 레이아웃 작업을 할 수 있고 다섯 개의 창으로 구성되어 있다.

Palette(팔레트): 앱 제작에 사용할 수 있는 모든 컴포넌트가 모여있다.
Viewer(뷰어): 팔레트에 있는 컴포넌트들을 드래그해 놓은 곳이며, 앱의 디자인을 확인할 수 있다.
Components(컴포넌트): 뷰어에 추가한 컴포넌트의 목록을 보여준다. (Screen 컴포넌트는 기본으로 추가되어 있음)
Media(미디어): 이미지, 소리 등의 업로드한 미디어 파일의 목록을 보여준다.
Properties(속성): 각 컴포넌트의 속성(높이, 너비, 폰트, 색상 등)을 변경할 수 있다.

블록 에디터(Blocks) 화면 구성

블록 에디터에서는 블록 모양의 코드를 맞추어 앱의 기능을 구현할 수 있고 세 개의 창으로 구성되어 있다.

Blocks(블록): 사용할 수 있는 블록들이 모여 있다. Built-in 블록, Component 블록(사용자가 추가한 컴포넌트에서 사용할 수 있는 블록), Any Component 블록으로 나누어져 있다.
Media(미디어): 이미지, 소리 등의 업로드한 미디어 파일의 목록을 보여준다 (디자이너 화면의 미디어와 동일함).
Viewer(뷰어): 블록을 드래그해 놓는 곳이며, 앱 기능 구현을 위한 코딩을 하는 곳이다.

Hour Of Code 앱 제작하기

앱 인벤터의 UI에 대해서 알아보았으니 이제 앱을 제작해 보자. 디자이너에서 앱을 디자인하고 블록 에디터를 열어 코딩을 하는 순서로 설명하겠다.

앱 디자인하기

앱 인벤터를 열면 처음 보이는 화면은 Designer 화면이다. 왼쪽 팔레트 목록에서 원하는 컴포넌트를 Viewer로 끌어다 놓는 방법으로 앱 화면을 디자인할 수 있다.

1. User Interface 팔레트에서 Button과 Lable을 Viewer로 드래그

Button: 사용자가 클릭하는 부분이므로 버튼 컴포넌트를 사용
Label: Touch the Bee!라는 간단한 사용 방법을 텍스트로 보여주기 위함

2. Media 팔레트에서 Sound를 Viewer로 드래그

화면을 터치했을 때 소리가 나게 할 것이므로 Sound 컴포넌트가 필요함
Sound처럼 앱 실행 시 실제로 눈에 보이지 않는 컴포넌트들은 Viewer 하단에 Non-visible components에서 목록 확인 가능

Button과 Label 컴포넌트 속성 변경하기

컴포넌트의 속성을 변경해서 조금 더 앱다운 디자인을 만들어 보자.

1. Viewer에서 Text for Button1을 클릭

2. Properties 창에서 다음의 값을 변경

Height: Automatic (자동으로 설정됨)
Width: Fill Parent (스크린의 가로 폭에 맞춤)
Image: codi.jpg로 설정
Text: 기존 텍스트 값(Text for Button1) 지우기

3. Viewer에서 Lable을 클릭

4. Properties 창에서 다음의 값을 변경

BackgroundColor: 원하는 색
FontSize: 30
Height: Automatic (자동으로 설정됨)
Width: Fill Parent (스크린의 가로 폭에 맞춤)
Image: codi.jpg로 설정
Text: Touch the Bee! 입력
TextAlignment: center1 (텍스트 가운데 정렬)

Sound 추가하기

1. Viewer의 Sound를 클릭

2. Properties의 Source → Bee-Sound.mp3 클릭 → OK 클릭

코드 작성하기

디자인이 완성되었으니 이제 기능을 구현할 차례이다. 먼저, 어떤 기능을 넣을 것인지 정리해 본다.

화면을 터치하면 Bee-Sound 소리가 난다.

Button 코드 작성하기

1. 블록 에디터 창을 열기 위해 화면 오른쪽 위의 Blocks 클릭

2. 왼쪽 Blocks에서 Screen1 아래에 있는 Button1 클릭 (Button1에서 쓸 수 있는 코드 목록이 Viewer에 보임)

3. when [Button1].Click 블록을 Viewer의 빈 곳에 드래그

4. 왼쪽 Blocks에서 Screen1 아래에 있는 Sound1 클릭 (Sound1에서 쓸 수 있는 코드 목록이 Viewer에 보임)

5. call [Sound1].Play, call [Sound1].Vibrate 블록을 Viewer의 빈 곳에 드래그

6. 왼쪽 Blocks에서 Built-in 아래에 있는 Math 클릭

Math 블록: 더하기, 빼기, 곱하기, 나누기 등의 연산이나 수학 공식을 사용할 수 있는 블록의 모임

7. 0 블록을 millisecs 옆으로 끌어다 놓기

milliseconds(밀리세컨즈): 1 세컨즈(초) = 1000 밀리세컨즈(밀리초)

앱 설치하기(Android only)

앱의 디자인과 코딩을 끝냈다면 폰에 앱을 설치해서 테스트해 보자. 먼저, 제작한 앱을 폰에 설치하기 위해서는 폰에 설치할 수 있는 형태의 파일로 만들어 줘야 한다. Android 운영체제에서는 그러한 파일을 APK (Android Application Package)라고 한다. APK 파일을 만들면 앱 설치를 위한 QR 코드가 생성되고 QR 코드를 스캔하면 폰에 앱을 설치할 수 있다.

1. 앱 인벤터 메뉴에서 Build → Android App. (apk) 클릭