- 앱 인벤터 또는 Thunkable에서 사용할 수 있는 다양한 구성 요소를 검토하세요.
- 앱에 도움이 될 수 있는 구성 요소 하나 찾기
- 튜토리얼을 살펴보고 적어도 하나의 컴포넌트를 앱에 코딩하세요.
이 단원의 활동은 다음과 같습니다:
스마트폰 구성 요소
이제 앱에서 사용할 구성 요소(센서 포함)를 선택하고 코딩할 차례입니다. 사용 가능한 다양한 구성 요소를 통해 앱에서 다양한 작업을 수행할 수 있으므로 자신에게 맞는 구성 요소를 선택해야 합니다!
이 레슨은 앱에서 사용할 수 있는 다양한 컴포넌트에 대해 배울 수 있는 참고 자료입니다.
지금쯤이면 플랫폼을 선택하셨겠지만, 사용 가능한 구성 요소를 파악할 수 있도록 App Inventor와 Thunkable의 모든 구성 요소를 나열해 보겠습니다.
앱에 계획한 기능을 구현하는 데 사용할 수 있는 컴포넌트를 찾아보세요.
카테고리별 컴포넌트 목록
다음 구성 요소는 표준을 벗어난 구성 요소입니다. 사용자 인터페이스 컴포넌트를 넘어 사용자가 앱과 상호 작용할 수 있도록 하는 컴포넌트입니다.
전체 목록은 아니지만 현재 사용 가능한 대부분의 구성 요소를 다루고 있습니다. 씽커블과 앱 인벤터는 계속해서 더 많은 기능과 컴포넌트를 추가하고 있습니다.
아래 정보도 이 문서에서 확인할 수 있습니다.
| 기능 설명 | 앱 인벤터 | 썽커블 |
|---|---|---|
| 사용자가 동영상을 촬영할 수 있도록 허용합니다. 소셜 앱, 동영상 공유 앱 또는 사용자가 동영상을 녹화할 수 있는 다른 모든 앱에서 사용할 수 있습니다. | 캠코더 | 카메라 |
| 사용자가 사진을 찍을 수 있도록 허용합니다. 이는 사용자가 프로필 사진을 설정하거나 사진을 찍어 공유하거나 갤러리에 저장할 수 있는 앱에 유용할 수 있습니다. | 카메라 | 카메라 |
| 사용자가 사진 라이브러리에서 이미지를 선택할 수 있습니다. 사용자가 앱을 사용하지 않고 찍은 사진을 선택할 수 있습니다. | 이미지 선택기 | 파일(사진 라이브러리) |
| 사용자가 클릭할 수 있는 동영상을 앱에 임베드할 수 있습니다. 동영상은 .wmv, .3gp 또는 .mp4 형식이어야 하며 1MB보다 크지 않아야 합니다. | 비디오 플레이어 | 비디오 |
| 텍스트를 다른 언어로 번역할 수 있습니다. 외부 번역 서비스에 의존하므로 앱에 인터넷 액세스 권한이 있어야 합니다. | 번역기 | 연설 |
| 사용자가 소리나 소음을 녹음할 수 있습니다. | 사운드 레코더 | 사운드 |
| 이 오디오 컴포넌트는 소리를 재생합니다. 노래, 연설, 시와 같은 "긴" 소리에 가장 적합합니다. Thunkable에는 모든 길이의 오디오를 위한 단 하나의 컴포넌트인 사운드만 있습니다. | 플레이어 | 사운드 |
| 플레이어 구성 요소와 매우 유사하지만 알림 "땡"과 같은 짧은 소리에 가장 적합합니다. | 사운드 | 사운드 |
| 사용자의 음성을 텍스트로 번역합니다. 이 기능은 핸즈프리 기능이 필요한 앱에 특히 유용합니다. | 음성 인식기 | 연설 |
| 이 컴포넌트는 사용자가 텍스트를 입력하면 앱이 이를 소리 내어 읽어주는 스피치 레코더의 반대 역할을 합니다. | 텍스트 음성 변환 | 연설 |
| 앱에서 JSON 애니메이션을 재생할 수 있습니다. | 사용 불가 | 애니메이션 |
전화를 걸고, 이메일을 보내고, 문자를 보내고, 특정 유형의 정보를 공유하는 데 앱이 필요한 경우 이러한 소셜 구성 요소가 도움이 될 수 있습니다.
| 기능 설명 | 앱 인벤터 | 썽커블 |
|---|---|---|
| 사용자의 연락처를 표시하고 사용자가 해당 목록에서 누군가를 선택할 수 있도록 합니다. | 연락처 선택기 | 사용 불가 |
| 사용자가 사용자의 연락처 목록에서 이메일 주소를 입력할 수 있도록 허용합니다. | 이메일 선택기 | 사용 불가 |
| 사용자가 전화 연락처 목록에서 전화번호를 선택할 수 있습니다. | 전화 번호 선택기 | 사용 불가 |
| 사용자가 클릭할 수 있는 동영상을 앱에 임베드할 수 있습니다. 동영상은 .wmv, .3gp 또는 .mp4 형식이어야 하며 1MB보다 크지 않아야 합니다. | 비디오 플레이어 | 비디오 |
| 사용자가 앱에서 전화를 걸 수 있도록 합니다. | 전화 통화 | 공유 |
| 사용자가 앱을 통해 다른 사용자의 휴대폰으로 문자 메시지를 보낼 수 있도록 허용합니다. | 문자 메시지 | 공유 |
| 이 오디오 컴포넌트는 소리를 재생합니다. 노래, 연설, 시와 같은 "긴" 소리에 가장 적합합니다. Thunkable에는 모든 길이의 오디오를 위한 단 하나의 컴포넌트인 사운드만 있습니다. | 플레이어 | 사운드 |
| 사용자가 앱의 메시지, 이미지 또는 기타 콘텐츠를 이메일, 메시징 등 사용자의 휴대폰에 있는 다른 앱과 공유할 수 있도록 허용합니다. | 공유 | 공유 |
| 앱과 트위터 간의 커뮤니케이션을 허용합니다. 사용자는 트윗을 검색하고, 메시지를 주고받고, 팔로워 목록을 확인하는 등의 작업을 할 수 있습니다. | 트위터 | 사용 불가 |
| Thunkable을 사용하면 앱에 광고를 추가할 수 있습니다. 모든 앱은 다운로드하거나 게시하기 전에 먼저 Thunkable의 승인을 받아야 합니다. | 사용 불가 | 광고 |
이러한 구성 요소를 사용하면 앱이 웹, 디바이스 및 기타 앱과 같은 앱 외부의 개체와 상호 작용할 수 있습니다.
| 기능 설명 | 앱 인벤터 | 썽커블 |
|---|---|---|
| 카메라나 Google 지도와 같은 다른 앱이나 휴대폰에 설치된 사용자가 만든 앱을 앱에서 시작할 수 있도록 허용합니다. | 활동 시작 | 링크 열기(제어 블록) |
| 앱에 지도를 임베드할 수 있습니다. 앱 인벤터에는 지도에 추가할 수 있는 마커 및 도형과 같은 구성 요소가 포함되어 있습니다. 이러한 기능은 Thunkable의 코드에 추가됩니다. | 지도 | 지도 |
| 사용자가 앱 내에서 웹 페이지를 볼 수 있도록 허용합니다. | 웹 뷰어 | 웹 뷰어 |
| 앱이 외부 웹사이트와 정보를 주고받을 수 있도록 합니다. | 웹 | 웹 API |
| 사용자가 앱에서 전화를 걸 수 있도록 합니다. | 전화 통화 | 공유 |
| 이러한 구성 요소를 통해 앱이 블루투스 장치와 연결할 수 있습니다. | 블루투스 클라이언트, 블루투스 서버, BluetoothLE(확장) | 블루투스 저에너지 |
| 이 오디오 컴포넌트는 소리를 재생합니다. 노래, 연설, 시와 같은 "긴" 소리에 가장 적합합니다. Thunkable에는 모든 길이의 오디오를 위한 단 하나의 컴포넌트인 사운드만 있습니다. | 플레이어 | 사운드 |
| 외부 소스(센서, 웹, 데이터 파일)에서 데이터를 수집하여 차트 형식으로 표시하는 데 사용됩니다. | 차트, 차트데이터2D | 사용 불가 |
| 아두이노와 같은 직렬 장치에 연결하는 데 사용할 수 있습니다. | 시리얼 | 사용 불가 |
| 앱 사용자가 사용자 이름과 비밀번호로 가입할 수 있도록 허용합니다. 이를 위해서는 먼저 Firebase 계정을 설정해야 합니다. | 사용 불가 | 로그인 |
| 앱에 PDF 파일을 삽입할 수 있습니다. | 사용 불가 | PDF 리더 |
앱이 주변 환경이나 사용자에 대한 정보를 수집해야 하는 경우 앱 인벤터와 Thunkable에서 액세스할 수 있는 몇 가지 센서를 소개합니다.
| 기능 설명 | 앱 인벤터 | 썽커블 |
|---|---|---|
| 휴대폰이 흔들리고 있는지, 휴대폰을 똑바로 들고 있는지 거꾸로 들고 있는지 확인할 수 있습니다. 이 기능은 휴대폰을 잡는 방식에 따라 화면의 방향을 바꾸거나 앱이 흔들림에 반응하도록 하려는 경우에 매우 유용합니다. | 가속도계 센서 | 가속도계 |
| 가속도계 센서를 사용하여 휴대폰을 들고 있는 사용자의 걸음 수를 측정하고 이동 거리도 추정할 수 있습니다. | 만보계 | 사용 불가 |
| 휴대폰이 기울어져 있는지 감지할 수 있습니다. 가속도계보다 더 정확하며 휴대폰의 방향이 얼마나 바뀌었는지 측정할 수 있습니다. | 자이로스코프 센서 | 자이로스코프 |
| 자속 밀도를 측정하는 데 사용됩니다. 모든 휴대폰이 이 기능을 지원하는 것은 아닙니다. | 자기장 센서 | 자력계 |
| 앱에서 현재 시간을 가져오거나 타이머를 사용할 수 있도록 허용합니다. 시간 제한 알람을 설정하거나 타이머를 사용할 때 유용할 수 있습니다. | 시계 | 타이머 |
| 휴대폰 위치의 위도와 경도를 수집합니다. 이 센서는 사용자 근처의 관심 지점을 검색해야 할 때 언제든지 유용하게 사용할 수 있습니다. | 위치 센서 | 위치 센서 |
| 휴대폰이 물체에 가까이 있는지 여부를 알려줍니다. 사용자가 휴대폰을 귀에 가까이 대고 있는지 확인하는 데 자주 사용됩니다. 모든 휴대폰이 이 기능을 지원하는 것은 아닙니다. | 근접 센서 | 사용할 수 없음 |
| 앱에서 바코드를 읽을 수 있도록 허용합니다. | 바코드 스캐너 | 카메라 |
| 주변 기압을 측정합니다. | 바로미터 | 사용 불가 |
| 상대적인 주변 공기 습도를 측정합니다. 대부분의 모바일 장치에서는 일반적이지 않습니다. | 습도계 | 사용 불가 |
| 조도를 측정합니다. | 라이트센서 | 사용 불가 |
| 앱이 다른 NFC(근거리 무선 통신) 지원 장치와 데이터를 공유할 수 있도록 합니다. | NearField | 사용 불가 |
| 기기의 물리적 방향에 대한 정보를 롤, 피치, 방위각 등 3차원으로 제공합니다. | 오리엔테이션 센서 | 사용 불가 |
| 주변(외부) 온도를 측정합니다. | 온도계 | 사용 불가 |
앱은 이러한 구성 요소를 사용하여 상대방, 기기, 클라우드에 데이터를 저장할 수 있습니다.
| 기능 설명 | 앱 인벤터 | 썽커블 |
|---|---|---|
| 앱 내에서 정보를 업데이트하고 저장할 수 있는 블록입니다. 앱을 닫으면 모든 정보가 지워집니다. | 변수 | 앱 변수 |
| 앱이 모바일 디바이스에 로컬로 정보를 저장하고 업데이트하여 앱 내에서 사용할 수 있도록 합니다. 앱 실행 사이에 데이터를 저장하고 검색할 수 있습니다. 썽커블에서 데이터뷰어와 데이터뷰어그리드는 '나만의 테이블 만들기' 옵션을 사용하여 데이터를 로컬에 저장할 수 있습니다. | TinyDB | 저장된 변수 데이터 뷰어 목록 데이터 뷰어 그리드 |
| 앱이 클라우드에 데이터를 저장, 검색 및 업데이트할 수 있도록 하여 앱의 여러 사용자 간에 데이터를 공유할 수 있도록 합니다. Thunkable은 Firebase를 사용하여 클라우드 변수를 제공합니다. DataViewer 및 DataViewerGrid는 Airtable, Google 스프레드시트 및 Webflow에 연결할 수 있습니다. 앱 인벤터의 스프레드시트 컴포넌트는 Google 스프레드시트에 연결됩니다. | CloudDB FirebaseDB 스프레드시트 | 클라우드 변수 - (파이어베이스) 데이터 뷰어 목록 데이터 뷰어 그리드 |
앱 내에서 분류 및 생성 AI 도구에 머신러닝 모델을 사용하세요.
| 기능 설명 | 앱 인벤터 | 썽커블 |
|---|---|---|
| AI 채팅 봇인 OpenAI의 ChatGPT와 커뮤니케이션할 수 있습니다. | 챗봇 | 개방형 AI 서비스(텍스트 완성) |
| 앱에 DALL-E를 포함시켜 이미지를 생성하고 편집할 수 있습니다. | 이미지봇 | 개방형 AI 서비스(이미지 생성) |
| 나만의 머신러닝 모델(이미지, 사운드, 포즈)을 생성하여 앱에서 사용할 수 있습니다. | 개인 이미지 분류기 개인 오디오 분류기 포즈넷 익스텐션 티처블 머신 (모두 확장자를 추가해야 합니다). | 사용 불가 |
앱에서 그리기를 활성화하고 스프라이트를 추가하여 애니메이션을 적용하고 게임을 만들 수 있습니다.
| 기능 설명 | 앱 인벤터 | 썽커블 |
|---|---|---|
| 사용자가 그림을 그릴 수 있는 영역을 화면에 추가합니다. 애니메이션을 적용할 수 있는 스프라이트를 추가할 수 있는 곳이기도 합니다. | 캔버스 | 캔버스 |
| 이러한 컴포넌트는 게임이나 애니메이션 내에서 애니메이션을 적용하고 상호 작용할 수 있는 요소입니다. | ImageSprite 공 |
Sprite |
Thunkable의 디자이너 창에서 컴포넌트를 추가할 수 있습니다. 컴포넌트의 이름을 입력하여 검색할 수 있습니다.
새로운 드래그 앤 드롭 버전의 Thunkable에서는 디자이너가 아닌 블록 탭에서 보이지 않는 컴포넌트를 찾을 수 있습니다. 따라서 컴포넌트를 검색 중인데 찾을 수 없는 경우 블록 탭에서 찾아보세요.
활동: 새로운 구성 요소 배우기
예상 시간: 60분
학습할 구성 요소를 선택하세요.
- 앱에서 사용할 구성 요소 또는 센서를 하나 이상 선택하세요.
- 앱에서 컴포넌트를 사용하기 위한 문서 및/또는 튜토리얼을 찾아보세요. 여기에서 시작할 수 있습니다:
- 새 컴포넌트를 사용하여 앱 코딩하기
멘토 팁
모범 모범 사례: 선택한 컴포넌트가 앱에 완벽할 필요는 없습니다! 새로운 컴포넌트에 대해 배우고 있다면 그것만으로도 충분합니다. 작동할 것 같은 컴포넌트를 선택했다가 작동하지 않는다고 해도 괜찮습니다. 코딩 세계에서는 이러한 연구를 '스파이크' 라고 부르는데, 이는 가능한 한 빨리 땅속을 파헤치려고 하기 때문입니다(마치 철제 스파이크를 땅에 박는 것과 비슷합니다).
학생들에게 물어볼 수 있는 안내 질문 애플 워치용 앱을 만든다면 애플 워치에는 어떤 종류의 구성 요소가 들어갈 수 있을까요? (심박수 모니터, 자이로스코프 - 걸음 수 추적용, 블루투스). 얼마나 많은 데이터를 수집하고 있나요? 이 데이터를 사용하여 AI 모델을 학습시킬 수 있나요?
멘토 팁은 AmeriCorps의 지원을 받아 제공됩니다.
프로그래머로서 배울 수 있는 최고의 기술 중 하나는 막혔을 때나 사용법을 배워야 할 때 도움이 되는 리소스를 찾는 방법입니다.
이 활동은 연습입니다!
제작하려는 앱과 정확히 일치하지 않을 수도 있지만 컴포넌트로 코딩을 연습하면 나중에 앱을 직접 만들 때 도움이 될 것입니다.
돌아보기
이 레슨은 앱을 빌드하는 데 사용할 수 있는 모든 컴포넌트에 대한 참고 자료입니다. 컴포넌트 사용법을 배우기 위한 튜토리얼이나 문서를 찾는 것은 쉽지 않습니다!
주요 용어 검토
- 사용자 인터페이스 컴포넌트 - 버튼, 레이블, 텍스트 상자 등 사용자가 상호작용할 수 있는 표준 컴포넌트
- 미디어 컴포넌트 - 미디어 구성 요소의 예로는 사진, 오디오, 비디오가 있습니다.
- 센서 - 다양한 목적으로 데이터를 수집하는 휴대폰에 설치된 다양한 유형의 장치
- 소셜 구성 요소 - 사용자가 앱을 통해 전화를 걸고, 이메일을 보내고, 문자를 보내고, 물건을 공유할 수 있는 기능
- 연결 컴포넌트 - 앱이 웹 및 다른 앱과 같은 앱 외부의 장소와 상호 작용할 수 있도록 하는 기능입니다.
- 스토리지 컴포넌트 - 앱, 기기, 클라우드에 정보를 저장할 수 있는 블록 및 컴포넌트입니다.
- AI 컴포넌트 - 앱 내에서 머신 러닝 모델 또는 생성 AI 도구를 사용할 수 있는 컴포넌트입니다.
추가 리소스
Thunkable을 위한 기타 유용한 튜토리얼 사이트
- draganddropcode.com
- 썽커블 유튜브 채널
- 테크노노베이션 졸업생 Meenakshi Nair의 Thunkable Udemy 강좌
일반 리소스
- 걸스코드잇 테크노베이션 튜토리얼
- 전체 컴포넌트 참조 목록 (인쇄용 Google 문서)
