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

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

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


 

post_std_07_000.png

0. 컴포넌트란?

post_std_07_001.png

네이버 사전 캡쳐

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

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

1. 앱인벤터의 컴포넌트

post_std_07_002.png

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

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

사용자 인터페이스

post_std_07_003.png

버튼

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

post_std_07_004.png

체크박스

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

post_std_07_005.png

날짜선택버튼

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

post_std_07_006.png

이미지

사진을 표시합니다.

post_std_07_007.png

레이블

텍스트를 표시합니다.

post_std_07_008.png

목록선택버튼

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

post_std_07_009.png

목록뷰

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

post_std_07_010.png

알림

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

post_std_07_011.png

암호텍스트박스

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

post_std_07_012.png

슬라이더

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

post_std_07_013.png

스피너

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

post_std_07_014.png

스위치

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

post_std_07_015.png

텍스트박스

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

post_std_07_016.png

시간선택버튼

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

post_std_07_017.png

웹뷰어

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

레이아웃

post_std_07_018.png

수평배치

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

스크롤가능수평배치

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

post_std_07_019.png

표형식배치

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

post_std_07_020.png

수직배치

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

스크롤가능수직배치

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

미디어

post_std_07_021.png

캠코더

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

post_std_07_022.png

카메라

사진을 찍을 수 있습니다.

post_std_07_023.png

이미지선택버튼

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

post_std_07_024.png

플레이어

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

post_std_07_025.png

소리

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

그 이상의 경우 잘립니다.

post_std_07_026.png

녹음기

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

post_std_07_027.png

음성인식

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

post_std_07_028.png

음성변환

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

post_std_07_029.png

비디오플레이어

동영상을 재생합니다.

post_std_07_030.png

얀덱스번역

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

그리기 & 애니메이션

post_std_07_031.png

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

post_std_07_032.png

캔버스

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

post_std_07_033.png

이미지스프라이트

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

지도

post_std_07_034.png

지도 위에 원을 그립니다.

post_std_07_035.png

형상모음

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

post_std_07_036.png

선연결

지도 위에 선을 긋습니다.

post_std_07_037.png

지도

지도를 표시합니다.

post_std_07_038.png

마커

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

post_std_07_039.png

Navigation

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

post_std_07_040.png

다각형

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

post_std_07_041.png

사각형

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

센서

post_std_07_042.png

가속도센서

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

post_std_07_043.png

바코드센서

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

post_std_07_044.png

Barometer

기압을 측정합니다.

post_std_07_045.png

시계

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

post_std_07_046.png

자이로센서

각속도를 측정합니다.

post_std_07_047.png

Hygrometer

주변 습도를 측정합니다.

post_std_07_048.png

LightSensor

빛의 세기를 측정합니다.

post_std_07_049.png

위치센서

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

post_std_07_050.png

MagneticFieldSensor

자기장 센서 입니다.

post_std_07_051.png

NFC

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

post_std_07_052.png

방향센서

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

post_std_07_053.png

만보기

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

post_std_07_054.png

근접센서

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

post_std_07_055.png

Thermometer

주변 온도를 측정합니다.

소셜

post_std_07_056.png

연락처선택버튼

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

post_std_07_057.png

이메일선택

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

post_std_07_058.png

전화

전화를 겁니다.

post_std_07_059.png

전화번호선택버튼

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

post_std_07_060.png

공유

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

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

post_std_07_061.png

문자메시지

문자를 보냅니다.

post_std_07_062.png

트위터

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

저장소

post_std_07_063.png

클라우드DB

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

post_std_07_064.png

파일

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

post_std_07_065.png

타이니DB

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

post_std_07_066.png

타이니웹DB

MIT에서 운영하는 웹서버에 키-값 형식으로 값을 저장하거나 가져옵니다.
제한이 있으며, 다른 사람에 의해 값이 수정될 수 있고, 불안정하므로 추천되지 않습니다.

연결

post_std_07_067.png

액티비티스타터

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

post_std_07_068.png

블루투스클라이언트

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

블루투스서버

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

post_std_07_069.png

Serial

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

post_std_07_070.png

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

레고® 마인드스톰®

post_std_07_071.png

Nxt드라이브

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

Nxt색상센서

Nxt조도센서

Nxt소리센서

Nxt터치센서

Nxt초음파센서

Nxt직접명령

post_std_07_072.png

Ev3모터

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

Ev3색상센서

Ev3자이로센서

Ev3터치센서

Ev3초음파센서

Ev3소리

Ev3UI

Ev3명령어

실험실

post_std_07_073.png

파이어베이스DB

구글에서 제공하는 FirebaseDB를 사용합니다.
기본적으로 개인만의 무료 DB를 조금 제공합니다.

 

확장기능

*.aix 파일을 가져와서 앱인벤터에 없는 기능을 추가할 수 있습니다.
# puravidapps의 확장기능 목록
# 앱인벤터 제공 확장기능 목록

만능은 아니며, JAVA 프로그래밍이 가능하다면 직접 제작할 수 있습니다.
# 확장기능의 기본적인 구조 설명(3번 문단부터)
# 앱인벤터 컴포넌트 추가를 위한 세부 설명

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

댓글

Copied title and URL