[※ 영상속에는 앱인벤터에 대한 지식이 없어도 바로 따라 하실 수 있도록 상세히 설명 되어 있으니, 꼭 영상을 보시기 바랍니다]
(아래 이미지들을 클릭하면 선명하게 확인 가능 합니다)
이번 영상에서는 카메라 콤포넌트를 이용하지 않고 한 줄짜리 간단한 블록코딩을 통하여 스마트폰 저장소에 저장된 사진을 Image 콤포넌트로 불러 오는 방법에 대한 영상입니다. 이 영상 자체로 큰 역할을 하는 앱은 아니나, 다른 앱제작에서 충분히 활용될 수 있는 부분이기에 이 번 영상을 통해 다루고 있습니다. (난이도 : 下)
최종 앱의 모습은 아래와 같습니다.
① 컴포넌트 구성 : 아래 이미지를 참고하여 전체 컴포넌트를 구성해주세요.
② 전체 블록 코딩 : 아래는 블록 코딩의 전체 이미지 입니다. 이하 세부적으로 블록별 상세히 설명이 진행됩니다...
[※ 영상속에는 앱인벤터에 대한 지식이 없어도 바로 따라 하실 수 있도록 상세히 설명 되어 있으니, 꼭 영상을 보시기 바랍니다]
(아래 이미지들을 클릭하면 선명하게 확인 가능 합니다)
이번 시간부터는 앱을 하나 만들어 볼 텐데요,사진을 찍고 그 위에 간단한 표시나 글자를 입력하여 문자나 카톡과 같은SNS로 지인에게 전송 할 수 있는 앱을 만들어 보겠습니다.
단순히 사진만 보내는 것 보다,어떤 정보를 표시하면 굉장히 유용할 때가 있어요.
예를 들어,모임 장소를 찾아오는 친구에게 지도나 캡처한 사진을 보내 줄 때 그냥,사진만 보내는 것 보다,사진위에 표시하거나 필요한 안내 문자를 입력 한 후 보내주면 굉장히 편리 하겠죠.기존에 저장된 갤러리 사진도 되고,즉석에서 바로 찍어 표시하는 것도 가능한 앱입니다.
이 번 앱 제작 영상에서는 한 번에 완성형으로 가는 것 보다,앱 인벤터의 주요 기능들을 익힐 수 있도록, 상-하로 2편으로 제작되었습니다. 현재글은 하편 최종 완결편입니다.
최종 앱의 모습은 아래와 같습니다.
【 아래 1편 완성 이후부터 시작합니다. 】
① 컴포넌트 구성 : 아래 이미지를 참고하여 전체 컴포넌트를 구성해주세요.
② 전체 블록 코딩 : 아래는 블록 코딩의 전체 이미지 입니다. 이하 세부적으로 블록별 상세히 설명이 진행됩니다...
③ 캔버스 전체 디자인 참조.
우선 전체화면을 참고하면서, 지난시간 디자인 완료부분부터 시작하면 됩니다.
그리고 아래와 같은 넌비지어블 컴포넌트(Non visiable Component)가 필요하니 , 해당 항목들을 찾아서 폰화면위로 드래그해서 놓으면, 폰 화면 바로아래로 추가가 됩니다.
④ 색 바꾸기 영역의 설정
아래에 있는 BLACK, RED, GREEN, BLUE 색버튼에 대해 색 설정을 해주세요~
⑤ 사진, 열기, 저장, 지우기, Line SIZE 버튼에 대한 구성 :
대부분 폰트 크기는 15~16으로 하였고, 굵은 폰트의 볼드에 체크 하였어요.
우선 텍스트칸에, 사진, 열기, 저장과 같은 제목을 써주세요, 하지만 나중에 이부분들은 구글에서 저작권에 문제 없는 이미지로 다운받아 변경하게 됩니다. 그래서 우선, Height와 width는 별다른 설정을 해주지 않아도 됩니다. 나중에 이미지 크기를 조정할 때 이미지에 맞추어 조절해야하기 때문이예요.
⑤ Text Size , 폰트 픽커, 선택컬러, 컬러표시용 레이블에 대한 구성 :
아래 이미지를 참고해서 구성해주세요. 폰트를 구성해주는 것만 스피너 콤포넌트로 구성하고 나머지는 Lable을 이용하면 됩니다.
그리고 스피너를 클릭하게 되면 아래처럼 실행이 됩니다.
⑥ 메시지(Message) 컴포넌트의 구성 :
아래 메시지 입력창 컴포넌트를 구성해 주세요. 메시지 입력창은 TextBox 컴포넌트로 구성하면 됩니다.
⑦ Send MMS, MMS, Send SNS, SNS 버튼에 대해 구성 :
멀티 문자를 보낼 수 있는 MMS 보내기 버튼과 카톡이나 네이버 밴드, 페이스북 혹은, 이메일이나 구글 드라이브 등으로 특정표시를 한 사진과 함께 멘트를 달아 보낼 수 있는 컴포넌트 구성입니다.
제목을 Lable 컴포넌트를 이용하면 되구요, MMS 와 SNS는 버튼 컴포넌트로 하면 됩니다.
⑧ 앱 버튼 아이콘 이미지 꾸미기 :
앱 버튼에 넣어줄 이미지를 위해 보통 구글등에서 검색하실 텐데요, 그냥 보이는 사진을 그 대로 사용하기 보다는, 저작권등에도 신경써서 하시는 것이 좋습니다. camera png 또는 camera icon 등으로 검색한 다음 도구 메뉴를 클릭하면 나타나는 사용권한 메뉴를 눌러보세요.
그럼 몇가지 메뉴가 뜨는데요, 수정후 재사용가능 또는 재사용 가능 , 비상업적 용도로 재사용 가능 등의 옵션을 체크해서 나타나는 이미지를 사용하시는 걸 추천해 드려요.
그리고 앱버튼들의 아이콘용으로 사용할 이미지는 배경이 투명한 PNG 이미지를 사용하면 앱 버튼의 모습이 훨씬 깔끔해 집니다. 다만, PNG라고 하더라도 배경이 모두 투명한 건 아니니, 이때는 포토샵과 같은 편집프로그램으로 배경을 투명 처리해 주면 좋습니다. ^^;
그래서 아래와 같이 이미지를 업로드하고 높이와 폭을 적절히 이미지 크기를 고려해서 맞추어 주세요.
그리고 Text 항목에 적혀 있는 사진 이라는 글자는 지워 주세요.
나머지 아이콘에 대해서도 처리한 아래 이미지를 참고하세요.
⑨ 세부 블록 코딩.
위의 코딩 블록을 참고해서 전체 블록코딩을 완성해 주세요.
⑩ 가로보기 기능
- 만약 폰을 가로로 했을 때 앱 화면이 가로로 바뀌길 원한다면, Screen1을 클릭하고, Properties 편집창 아래쪽에 보면 ScreenOrientation 이라는 항목이 있어요, 그 부분에 옵션을 Sensor로 바꾸어 놓으면, 폰에 있는 자이로 센서에 의해 폰이 가로로 기울어 질때 센서에 반응해서 앱로 가로로 바뀌게 해줍니다.
그럼, 이상으로 "사진에 특정표시하고 MMS, SNS 등으로 보낼 수 있는 앱" 만들기에 대해 설명을 드렸습니다.
[※ 영상속에는 앱인벤터에 대한 지식이 없어도 바로 따라 하실 수 있도록 상세히 설명 되어 있으니, 꼭 영상을 보시기 바랍니다]
(아래 이미지들을 클릭하면 선명하게 확인 가능 합니다)
이번 시간부터는 앱을 하나 만들어 볼 텐데요, 사진을 찍고 그 위에 간단한 표시나 글자를 입력하여 문자나 카톡과 같은 SNS로 지인에게 전송 할 수 있는 앱을 만들어 보겠습니다.
단순히 사진만 보내는 것 보다, 어떤 정보를 표시하면 굉장히 유용할 때가 있어요.
예를 들어, 모임 장소를 찾아오는 친구에게 지도나 캡처한 사진을 보내 줄 때 그냥, 사진만 보내는 것 보다, 사진위에 표시하거나 필요한 안내 문자를 입력 한 후 보내주면 굉장히 편리 하겠죠. 기존에 저장된 갤러리 사진도 되고, 즉석에서 바로 찍어 표시하는 것도 가능한 앱입니다.
이 번 앱 제작 영상에서는 한 번에 완성형으로 가는 것 보다, 앱 인벤터의 주요 기능들을 익힐 수 있도록, 3회로 풀어서 올려 드리려고 합니다.
최종 앱의 모습은 아래와 같습니다.
1회차 에서는 캔버스 컴포넌트의 활용과,버튼을 이용하여 색을 변경하고 캔버스에 그릴 수 있는 기능에 대해 진행됩니다.
【 1회차 최종 완성본 】
① 컴포넌트 구성 : 아래 이미지를 참고하여 전체 컴포넌트를 구성해주세요.
② 전체 블록 코딩 : 아래는 블록 코딩의 전체 이미지 입니다. 이하 세부적으로 블록별 상세히 설명이 진행됩니다..
③ 캔버스1(Canvas1) 의 배치와 설정(properties)
화면 위쪽 영역에 이미지를 올려놓고 그리기 할 수 있는 캔버스 컴포넌트를 올려보겠습니다.
캔버스 컴포넌트는 Drawing and animation 항목에 있습니다.
캔버스 컴포넌트를 폰 화면 속으로 이렇게 끌어다 놓으면 됩니다.
그리고 캔버스 영역을 정할 텐데요, 높이는 250 Pixel로 하고 가로 크기는 화면에 최대로 차도로고 Fill parent로 하겠습니다.
④ 수평정렬상자의 설정 (HorizontalArrangement )
그림을 그려줄 여러 색의 버튼들을 배치해야 하는데요,
버튼을 그냥 놓게 되면 가로로 가지런히 배치가 되지 않습니다.
이럴 때는 Layout 메뉴에 있는 수평정렬 상자를 이용하면 됩니다.
그리고 이 수평정렬 상자가 가로로는 꽉 채우도록 Fill parent로 하지만, 높이는 버튼 크기에 따라 자동으로 맞추어 지도록 Automatic 상태 그대로 둡니다.
⑤ 색상 버튼의 구성 :
버튼의 구성은 이렇게 4개로 해보겠습니다.
유저 인터페이스 메뉴로 가서 버튼 컴포넌트를 끌어다 놓습니다.
그리고 텍스트 항목에 BLACK 이라고 입력합니다.
Font Bold에 체크 하고, Font size는 16으로 합니다.
Red, Green, Blue, 버튼에 대해서도 같은 방법으로 작업해줍니다.
》 그리고 버튼의 크기를 정해보겠습니다.
높이는 40 픽셀로 하고, 폭은 70픽셀로 합니다.
만약에 앱화면에서 글자가 모두 보이지 않을 경우 폭을 더 넓혀 주어야 할 수도 있습니다.
다음 버튼들도 같은 방법으로 작업해줍니다.
⑥ 버튼 컴포넌트들의 이름 설정 :
버튼들의 이름을 정해줍니다. Canvas와 같이 하나만 나오는 컴포넌트를 제외하고는 이름을 체계적으로 붙여주는 것이 좋습니다.
제 경우는 버튼의 경우 맨 앞에 button 철자를 줄여서 btn이라 사용하고_ 언더바로 구분한 다음 버튼의 이름을 붙여주는 식으로 합니다. 만약 Lable 컴포넌트를 사용할 때는 약자로 lbl이라고 사용하는 식으로 합니다.
이렇게 하면, 나중에 블록코딩을 할 때 헷갈리지 않게 하여 코딩을 하기가 쉬워집니다.
⑦ 지우기 버튼 설정 :
그린 내용을 지울 수 있는 지우기 버튼과 그리기 선의 굵기를 정해줄 슬라이드 컴포넌트를 배치할 텐데요.
나란히 수평으로 배치될 수 있도록 'Layout' 항목에 있는 수평정렬상자를 먼저 배치합니다.
그리고 폭의 옵션만 'Fill parent‘로 바꾸어 줍니다.
여기에 버튼을 하나 끌어다 놓고, text 항목에 ‘지우기’라는 한글 이름을 넣어줍니다.
그리고 폰트 볼드에 체크하고, 폰트 사이즈를 16으로 하여 키워줍니다.
슬라이더의 설정
⑧ 캔버스 화면에 기본 이미지 불러오기 :
앱을 실행했을 때 기본 배경으로 쓰일 이미지를 캔버스에 올려 주겠습니다.
캔버스 컴포넌트 클릭하고 우측 속성 메뉴 중 Background Image를 선택합니다. 적당한 이미지를 고른 다음 Upload File을 클릭하여 올려줍니다
만약 이미지를 바꾸고 싶으면, 같은 방법으로 다른 이미지를 선택하여 업로드 하면 이미지를 바꿀 수 있습니다.
이미지 업로드를 하고서 OK 버튼를 클릭하면 아래와 같이 기본배경이미지 설정이 완료 된다.
： 구글 계정으로 아래 앱인벤터 접속사이트로 접속하여 로그인한다. 앱 인벤터는 PC에 따로 프로그램을 설치 할 필요 없이 웹상에서 저작할 수 있게 만들어 졌다. 따라서 인터넷만 연결되어 있다면, 집에서건 회사에서건 카페 노트북에서건 기존 제작하던 프로젝트를 열어 편집을 이어나갈 수 있는 큰 장점이 있다. 물론 PC설치버전과 USB에서 실행할 수 있는 무설치 포터블 버전도 제공한다.
【 제작한 앱을 테스트 하기 위한 3가지 방법! 】 1. 앱파일('xxx.apk')을 출력하고 폰을 PC와 USB연결이나 QR코드로 xxx.apk파일을 다운받아 직접 APK파일을 설치후 테스트 하는 방법. (파일을 설치하는 게 번거롭지만, 제일 정확하고 확실한 테스트 방법)
2. 가상 폰 시뮬레이터인 "ai starter"를 통해서 확인하는 방법. (안드로이드 기기가 없어도 테스트 할 수 있지만 스마트폰의 가속도, 기울기, GPS센서 등을 테스트해볼 수 없는 단점이 있다)
3. 앱 다운로드 및 설치 없이, 앱 편집중인 상태에서도 실시간 연결되어 확인해볼 수 있는 방법으로 2가지가 있다.
- AI Companion 이용법 : 앱 제작중인 상태에서 WiFi를 통해 실시간으로 스마트폰과 연결되어 테스트가 가능한 방법으로, 편집화면을 수정하면 수정된 내용이 그 즉시, 스마트폰 화면에도 적용되는 장점이 있다. (단, 같은 공유기(WiFi)에 연결되어 있어야 하며, 종종 접속이 끊기는 단점이 있다. 그리고 사전에 애래와 같은 방법으로 AI Companion 앱을 스마트폰에 설치하면 이용할 수 있다)
- PC와 USB 직접 연결 법 : 역시 실시간 편집과 테스트가 가능한 방법으로 AI Companion 방법보다는 연결이 안정적이다. 단, 스마트폰 설정에서 개발자모드 처리와 스마트폰 제조사별로 PC용 통합 드라이버를 다운받아 설치해야 한다.
▶ 3. AI 컴패니언 설치하기 (① wifi로 연결하여 앱 테스트 하는 방법)
→ 위 방법중에서 가장 확실하고 편리한 3번째 AI COMPANION 을 이용한 방법을 이용해보자.
스마트폰에서 플레이스토어에 접속한 후 AI2 companion 을 검색하여 설치한다.
앱 인벤터 툴에서 앱제작이 완료되면 아래처럼 메뉴에서 AI Companion 메뉴를 클릭 하면 QR 코드창이 뜬다.( 메뉴 : Connect 》AI Companion )
AI Companion QR 코드
그런 다음스마트폰에 설치한 "MIT AI2 Companion" 앱을 실행시킨다.
- QR 코드상에 있는 "lzsifj" 를 아래화면처럼 빈칸에 직접입력하고 "connect with code"버튼을 클릭하거나,
"scan QR code" 버튼으로 위 QR코드를 스캔후 기다리면 된다.(길면 1분 까지도 기다려야 함)
- 아래처럼 QR코드가 스캔된후 스마트폰과 연결되는 과정이 진행된다.
- 연결이 완료되면 아래처럼 앱이 스마트폰에서 실시간으로 실행되는 것을 볼 수 있다.
(앱이 설치된 것은 아니며, 종종 커넥션이 끈기는 경우가 발생한다)
- 만약 연결 에러가 날경우 아래처럼 Reset Connection을 클릭하고 AI Compainon으로 재연결 시도를 한다.
▶ 4. AI Starter 설치
：AI Starter를 설치하면, 안드로이드 기기가 없어도 제작한 앱을 'AI Starter'라는 에뮬레이터를 통해 PC에서 테스트 해볼 수 있다. 다만, 구동 속도가 느리고, 스마트폰에 들어 있는 GPS, 기울기센서, 가속도센서, 음성인식기능 등을 테스트 할 수 없다.
- 아래 이미지 처럼, 에뮬레이터가 실행되며, #1~#4 와 같은 순서로 작동이 된다. 이 과정에서 에뮬레이터 화면상에 설치 옵션 같은 것이 뜨면 클릭하여 설치해 주어야 한다. (다소 시간이 걸린다)
#2 이미지에서 잠금표시를 마우스로 밀면 다음 화면으로 넘어간다
- 설치된 후 아래처럼 앱 인벤터 메뉴에서 'Emulator'를 클릭하면 에뮬레이터 상에서 작성한 앱이 구현되는 것을 볼 수 있다.
▶ 5. USB 연결
- 스마트폰을 USB로 PC와 연결하면, AI Companion처럼 실시간으로 앱을 테스트 해볼 수 있다. 다만, 처음에 연결을 위해 처음에 조금 복잡한 과정이 필요하다. USB 연결의 장점은 테스트를 위해 많으면 수십, 수백번에 이르는 번거로운 앱 설치 과정을 생략할 수 있으며, WiFi를 이용한 접속방법 보다 훨씬 안정적으로 실시간 테스트가 가능하다는 장점이 있다. (아래 셋업 상의 메뉴는 삼성 갤럭시 노트2를 예시로 설명)
앱인벤터는 그 유명한 MIT(메사추세츠 공과대학교)와 구글(google)이 협력하여 개발한 App 저작도구입니다.
[ App inventor 특징 ]
《 앱 인벤터는 코딩을 잘 몰라도 쉽게 스마트폰 앱을 만들 수 있게 해 준다 》
： 일반적으로 안드로이드 앱을 만들기 위해서는 자바나 코틀린 프로그래밍 언어를 익혀 Android studio 툴 상에서 복잡한 코딩을 통해 구현하게 됩니다. Android studio 툴 익히는 것도 만만치 않죠. (아이폰용 IOS 앱은 오브젝트-C 나 스위프트 언어를 익혀 X-Code 툴에서 구현함-이건 더 어려움)
그래서 프로그래밍 비전공자들에겐 쉽게 엄두를 내지 못합니다. 하지만, 앱 인벤터를 이용하면, 전공의 구분 없이 누구나 쉽게 시작해서 단기간에 간단한 건 몇 분도 안되어 뚝딱 앱을 만들어 내는 놀라움을 선사합니다.
바로 스크래치를 개발했던 MIT의 블록 코딩 기술을 적용했기 때문입니다. 스크래치는 저학년 초등생들도 프로그래밍의 개념을 배우고 쉽게 프로그램을 짤 수 있게 한 툴로서, 마치 아이들이 블록을 조립하듯 쉽게 코드를 구성해 줍니다.
스크래치와 아두이노 에뮬레이터를 연결하면 아두이노 제어도 가능합니다. 물론 앱인벤터도 가능합니다 - 이는 앱 인벤터 응용 카테고리에서 다룰 예정입니다.
MIT의 블럭코딩 도구 "스크래치"
"앱인벤터"를 이용하여 5분만에 제작한 앱
《 한글 메뉴를 지원합니다. 》
코딩을 자동으로 해주는 툴이라도 툴 자체가 영문이면 배울 때 어려움을 느낄 수 있습니다. 하지만 이런 툴의 메뉴를 영어가 아닌 한국어로 바로 설정할 수 있어 접근성을 더욱 높였습니다.
(개인적으로는, 영문 메뉴가 익숙하지 않더라도 처음부터 영어 메뉴 모드로 익히시는 것을 추천합니다. 포토샵 등과 같은 툴도 처음엔 한글 버전으로 배웠다가 직장 등에서 영문 버전 사용에 당황함을 느꼈다는 사례도 있듯이, 만국 능통어로 제작된 영어로 익혀두면, 추후에 인벤터 관련하여 영어 메뉴로 된 학습자료나 최신 자료를 접할 때 바로 습득할 수 있는 장점이 있습니다. )
《 앱 인벤터로 제작 가능한 구체적인 예시 》
앱 인벤터로 충분히 제작 가능한 기능 앱 유형은 :
사진 보기, 웹페이지 뷰, 음성인식과 출력, 음악 재생, 동영상 재생, 음성 변환, 번역, 사진&동영상 촬영
문자 메시지, 전화, 공유하기 기능 앱, 데이터 읽기 및 저장 기능 앱, 블루투스 통신 활용 앱,
그림 그리기, 애니메이션 만들기, 타이머 기능 이용하기, 자이로 센서 활용 앱, 바코드&QR 코드 스캔, 위치센서 활용앱, 방향센서 활용앱, NFC 기능 활용, 가속도 센서, GPS, 근접센서 등을 활용한 앱과 블루투스, WIFI 통신을 이용하면 아두이노/라즈베리파이 등을 제어할 수 있습니다.
《 안드로이드 폰&태블릿 없어도 에뮬레이터 활용 제작 가능 》
앱 인벤터로 앱을 제작하기 위해서는 후 테스트
《 앱 인벤터 실행 저작 방식 》
특별한 프로그램의 설치가 필요 없다. 기존 웹브라우저를 통하여 앱인벤터 사이트에 접속&회원가입&로그인 후 웹상에서 제작 가능! (단, 인터넷 익스플로러에서는 실행되지 않고, 아래 구글의 크롬, 애플의 사파리, 모질라의 파이어폭스에서 실행 가능)
인터넷이 연결된 웹상에서만 가능한 것은 아니며 오프라인 버전(설치 및 무설치버전)을 다운 받아 설치하여 앱을 만들 수도 있다. 다만 프로그램을 실행하고 처음 구글 아이디로 로그인 과정에서는 인터넷 연결이 필요하다.
《 앱 인벤터 구동 조건(시스템 환경) 》
[PC]
- Windows : Windows XP, Windows Vista, Windows 7 이상 모두 가능
- Macintosh(Intel CPU) : Mac OS X 10.5, 10.6 이상 모두 가능
- GNU/Linux : Ubuntu 8 이상, Debian 5 이상 모두 가능 (일부 기능은 조건 필요)
[Browser]
- Google Chrome 4.0 (구글 크롬 4.0) 이상 모두 가능
- Apple Safari 5.0 (애플 사파리 5.0) 이상 모두 가능
- Mozilla Firefox 3.6 (모질라 파이어폭스 3.6) 이상 모두 가능 (일부 기능은 조건 필요)
[Android 폰&태블릿]
- Android Operating System 2.3 (Gingerbread) 이상 모두 가능 : 안드로이드 OS 2.3 진저브레드 버전 이상은 모두 가능
《 앱 인벤터 제작 과정-프로세스 》
1. 웹브라우저를 선택하여 열기(구글 크롬 예시)
2. 구글의 크롬 브라우저를 다운로드하여 설치한다.
3. 구글(www.google.co.kr)에 접속하여 구글 계정을 만들고 로그인한다.(구글계정으로만 앱-인벤터 실행가능)
