NEW 앱인벤터2 강좌 6. 컴포넌트에 대해 알아보자

이 글은 읽는데 약 6분이 걸립니다.

전체 강좌 목록:
http://semicolon1.kr/appinventor.html

이번 강좌부터는 앱인벤터의 컴포넌트에 대해서 알아보도록 하겠습니다.


0. 컴포넌트란?

먼저, 사전에 검색해보면 component: 구성 요서, 부품이라는 뜻으로 나옵니다.
앱인벤터에서도 마찬가지인데요, 앱을 만들기 위한 부품으로 보시면 됩니다.

특정 기능을 가지고 있는 컴포넌트를 모아서 앱을 제작하죠.
예시로 카메라를 제어하고 싶다면! 카메라 제어 기능을 가진 카메라 컴포넌트를 추가해서 사용할 수 있습니다.

1. 앱인벤터의 컴포넌트

앱인벤터에서 컴포넌트는 위 사진과 같이 디자이너의 좌측 팔레트에 카테고리 별로 분류되어 있습니다.
여기서 원하는 기능의 컴포넌트를 선택 후, 드래그해서 가운데 휴대폰 화면의 원하는 위치 끌어다 놓으면 됩니다.

그럼 컴포넌트의 종류와 기능에 대해 간단히 알아보겠습니다.
참고로 컴포넌트는 앱인벤터가 업데이트 됨에 따라 추가되거나 삭제될 수 있습니다.
그런 것들은 댓글로 알려주시면 수정하겠습니다.

마지막 업데이트: 2021/09/18

사용자 인터페이스

버튼

사용자의 터치 이벤트를 받을 수 있습니다.

체크박스

항목을 체크해서 선택할 수 있습니다.

날짜선택버튼

날짜 선택 창이 뜨고, 날짜 선택이 가능합니다.

이미지

사진을 표시합니다.

레이블

텍스트를 표시합니다.

목록선택버튼

버튼을 누르면 선택할 수 있는 리스트가 나타납니다.

목록뷰

항목(요소)들을 나열해서 보여주는 용도이며, 각 항목 중 하나를 선택할 수 있습니다.

알림

토스트 메시지를 띄우거나 다이얼로그(알림창)을 띄우거나 로그(Log)를 찍을 수 있습니다.

암호텍스트박스

텍스트박스와 기능은 같나, 암호 입력 창처럼 텍스트가 별표(*)로 변환됩니다.

슬라이더

시크바(SeekBar) 입니다. 가운데 컨트롤러를 좌우로 드래그하여서 값을 조절할 수 있습니다.

스피너

버튼을 누르면 그 아래로 작은 리스트 뷰가 펼쳐지며 항목을 선택할 수 있습니다.

스위치

말 그대로 껐다 켰다 할 수 있는 스위치입니다.

텍스트박스

텍스트를 입력할 수 있는 상자입니다.

시간선택버튼

시간 선택 창이 뜨고, 시간 선택이 가능합니다.

웹뷰어

웹 페이지를 표시하는 용도입니다.

레이아웃

수평배치

컴포넌트를 수평으로 배치합니다.

스크롤가능수평배치

컴포넌트를 수평으로 배치하되, 화면을 벗어나면 자동으로 수평 스크롤바가 생성됩니다.

표형식배치

컴포넌트를 표처럼 배열할 수 있습니다.

수직배치

컴포넌트를 수직으로 배치합니다.

스크롤가능수직배치

컴포넌트를 수직으로 배치하되, 화면을 벗어나면 자동으로 수직 스크롤바가 생성됩니다.

미디어

캠코더

동영상을 찍을 수 있습니다.

카메라

사진을 찍을 수 있습니다.

이미지선택버튼

사진을 선택할 수 있는 창을 띄워주고, 선택한 사진의 경로를 가져옵니다.

플레이어

비교적 긴 사운드(노래 등)을 재생하는데 사용합니다.

소리

비교적 짧은 사운드(효과음, 5초 내외)를 재생하는데 사용합니다.

그 이상의 경우 잘립니다.

녹음기

휴대폰의 마이크로 소리를 녹음합니다.

음성인식

사용자가 하는 말을 텍스트로 변환합니다(TTS).

음성변환

텍스트를 소리로 변환해 읽어줍니다(STT).

비디오플레이어

동영상을 재생합니다.

얀덱스번역

러시아 최대 검색엔진 운영 기업인 얀덱스(Yandex)에서 제공하는 번역기입니다. 성능은 그럭저럭입니다.

그리기 & 애니메이션

캔버스 내에만 배치 가능하며, 공처럼 튕기는 등의 움직임을 가집니다.

캔버스

그림을 그리거나 이미지 스프라이트, 공 등을 넣어서 움직일 수 있는 곳을 제공합니다.

이미지스프라이트

공과 유사하나, 외관을 이미지로 지정할 수 있습니다.

지도

지도 위에 원을 그립니다.

형상모음

GeoJson 파일을 이용해서 지도 위해 특정 경로를 긋거나 하는데 사용됩니다.

선연결

지도 위에 선을 긋습니다.

지도

지도를 표시합니다.

마커

지도 위에 마커를 표시하며, 특정 지점을 표시하는데 사용합니다.

Navigation

OpenRouteService 서비스로 두 지점의 길을 찾습니다.

다각형

지도 위에 다각형을 그립니다.

사각형

지도 위에 사각형을 그립니다.

센서

가속도센서

휴대폰에 있는 가속도 센서를 이용해 가속도를 측정합니다.

바코드센서

카메라로 바코드나 QR코드를 읽을 수 있습니다.

Barometer

기압을 측정합니다.

시계

날짜/시간을 가져오거나 계산하는 등 시간 관련 기능을 사용하는데 사용합니다.

자이로센서

각속도를 측정합니다.

Hygrometer

주변 습도를 측정합니다.

LightSensor

빛의 세기를 측정합니다.

위치센서

현재 휴대폰의 위치를 가져옵니다.

MagneticFieldSensor

자기장 센서 입니다.

NFC

NFC를 관련 기능을 사용합니다.

방향센서

휴대폰의 방향을 측정하는데 사용됩니다(나침판 등).

만보기

걸음수를 대략적으로 측정합니다.

근접센서

휴대폰의 근접센서를 이용해 화면 근처에 물체가 있는지 확인합니다.

Thermometer

주변 온도를 측정합니다.

소셜

연락처선택버튼

연락처를 선택할 수 있는 창을 엽니다.

이메일선택

사용자가 이메일을 입력 시 아래쪽에 자동완성을 띄워줍니다.

전화

전화를 겁니다.

전화번호선택버튼

전화번호를 선택할 수 있는 창을 엽니다.

공유

텍스트나 파일을 다른 앱을 통해 공유할 수 있습니다.

ex) 카톡으로 텍스트 보내기

문자메시지

문자를 보냅니다.

트위터

트위터 관련 활동을 합니다.

저장소

클라우드DB

Redis 서버를 이용해 웹상에 데이터를 저장하고 가져옵니다.

파일

휴대폰에 텍스트 파일을 저장할 수 있습니다.

타이니DB

해당 앱만 접근할 수 있는 경로에 데이터를 키-값 형태로 저장합니다.

타이니웹DB

MIT에서 운영하는 웹서버에 키-값 형식으로 값을 저장하거나 가져옵니다.

제한이 있으며, 다른 사람에 의해 값이 수정될 수 있고, 불안정하므로 추천되지 않습니다.

연결

액티비티스타터

인텐트를 실행할 수 있습니다.

블루투스클라이언트

블루투스 서버에 접속할 기기에서 사용합니다.

블루투스서버

블루투스 서버를 생성할 기기에서 사용합니다.

Serial

아두이노 같은 기기와 연결해 시리얼 통신을 합니다.

HTML/XML을 파싱 하거나 JSON 처리, 웹서버에 요청 전달/받기 등을 수행합니다.

레고® 마인드스톰®

Nxt드라이브

LEGO MINDSTORM NXT에 관련해서 센서나 모터 등을 조작할 수 있는 기능을 제공합니다.

Nxt색상센서

Nxt조도센서

Nxt소리센서

Nxt터치센서

Nxt초음파센서

Nxt직접명령

Ev3모터

LEGO MINDSTORM EV3에 관련해서 센서나 모터 등을 조작할 수 있는 기능을 제공합니다.

Ev3색상센서

Ev3자이로센서

Ev3터치센서

Ev3초음파센서

Ev3소리

Ev3UI

Ev3명령어

실험실

파이어베이스DB

구글에서 제공하는 FirebaseDB를 사용합니다.

기본적으로 개인만의 무료 DB를 조금 제공합니다.

확장기능
*.aix 파일을 가져와서 앱인벤터에 없는 기능을 추가할 수 있습니다.
# puravidapps의 확장기능 목록
# 앱인벤터 제공 확장기능 목록
만능은 아니며, JAVA 프로그래밍이 가능하다면 직접 제작할 수 있습니다.
# 확장기능의 기본적인 구조 설명(3번 문단부터)
# 앱인벤터 컴포넌트 추가를 위한 세부 설명

다음 강좌 부터 각각 컴포넌트를 상세하게 알아보도록 하겠습니다.
감사합니다.

댓글

제목과 URL을 복사했습니다