앱인벤터의 구성 알아보기 - 앱의 디자인과 블록코딩.

안녕하세요, 공대 하누니 입니다!

이번 시간에는 앱인벤터의 기본적인 구성을 알아볼텐데요.

앱인벤터는 앱을 직접 제작해 볼 수 있는 웹페이지로

http://appinventor.mit.edu/explore/

위에 주소를 첨부해 놓았어요^^

URL을 클릭하면 다음과 같이 앱인벤터 홈페이지가 나타날텐데요!

오른쪽 위의 Create apps!를 클릭!

하시면 위와 같은 화면을 볼 수 있습니다.

앱을 제작하기 위해 왼쪽 맨 위의 Start new project를 클릭해볼까요?

Proejct name: 에 원하는 프로젝트의 이름을 입력한 후,

OK를 눌러 프로젝트 제작을 시작합니다.

(단, 프로젝트 이름의 시작은 영어로 시작해야 하며

이 후 영어,숫자 또는 언더바( _ ) 사용하여 프로젝트 이름을 작성해야 합니다.

한글은 사용 불가능합니다.)

드디어 앱인벤터의 기본화면에 도착했습니다!(짝짝짝)

영어버전으로 앱을 제작해도 되지만

쉽게 이해하기 위해 한글버전으로 바꿔볼까요?

왼쪽 위에 English를 클릭해 한국어로 변경해줍니다.

잠시 빈 화면이 나타나고 제작한 앱 목록을 볼 수 있는 화면이 나타날꺼예요~

당황하지~말~고~

조금만 기다리시면 한국어로 변경된 앱 제작화면이 나타납니다.

그럼, 앱인벤터 화면의 구성에 대해 알아봅시다!

앱인벤터 화면은 크게 디자이너화면과 블록화면으로 나뉩니다.

아래와 같이 프로젝트를 시작하고 바로 나타나는 화면이 디자이너 화면입니다.

제일 먼저, 디자이너 화면의 제일 왼쪽의

팔레트는 앱의 디자인과 핸드폰의 기능들을 사용할 수 있는 곳입니다.

현재 화면이 가운데에 위치한 스마트폰 화면이 띄워져있는 뷰어와 함께 사용합니다.

우리가 그림을 그릴 때, 도화지와 물감을 담아놓는 팔레트가 있다면 

팔레트에서 물감을 붓으로 가져와 도화지에 그림을 그리죠?

마찬가지로 물감과 같이 앱의 필요한 기능을 팔레트에서 가져와

붓 대신 마우스로 드래그 해서

도화지의 기능을 하는 뷰어에 가져오면

우리가 그림을 그리듯 앱을 제작할 수 있습니다.

디자인을 담당하는 기능 외에도

소리, 기울기,  음성인식, 지도 등의 기능사용 여부도

이 팔레트 부에서 결정할 수 있습니다.

팔레트 부는

주로 디자인을 담당하는 사용자 인터페이스, 레이아웃, 그리기& 애니메이션과

핸드폰의 기능을 사용할 수 있는 미디어, Maps, 센서, 소셜, 연결

데이터를 관리하는 저장소, 실험적 등으로 구성되어 있습니다.

쉬운 이해를 위해 팔레트에서 기능을 조금 추가해놓았습니다.

컴포넌트 부는 뷰어에서 사용한 요소들이 한 눈에 보기 좋게 정리되어 있습니다.

컴포넌트 부에서 자신이 사용한 요소들과 요소들의 포함관계를 확인할 수 있습니다.

미디어 부는 이미지, 소리, 동영상 등을 추가할 수 있는 부분으로

미디어의 추가와 관리를 담당합니다.

속성 부는 컴포넌트에서 선택한 요소의 속성을 관리하는 부분입니다.

주로 높이, 넓이, 색상, 텍스트, 보이기 여부 등의 속성을 선택할 수 있습니다.

다음로 블록화면으로 넘어가 볼까요?

속성 위의 디자이너, 블록 중 블록을 클릭합니다.

그럼 블록코딩이 가능한 창으로 전환이 되는데요!

이 화면은 다시 위의 디자이너, 블록을 클릭하여 변경이 가능합니다.

블록화면은 블록코딩을 하여 디자인한 화면에 동작을 넣어주는 부분인데요.

블록코딩이란 장난감 블록을 끼우고 쌓아서 물체를 만들듯이

블록을 조립해 화면 또는 구성요소의 동작을 지정하는 것을 말합니다.

화면 왼쪽의 블록 부에서 명령어를 가져와 코딩을 하는 방식으로 진행됩니다.

제어는 조건을 지정해주는 부분으로

원하는 횟수나 조건만큼 동작을 반복하고 값을 전달해줍니다.

반복적인 구조나 조건을 걸고 싶을 때 사용합니다.

논리는 식의 참, 거짓 여부 또는 같음을 비교해주고

그리고, 또는의 연결기능을 해줍니다.

이는 독립적으로는 사용이 불가능하고 다른 식과 연결여 사용합니다.

수학은 말그대로

식의 연산과 값 지정이 필요할 때 사용합니다.

텍스트는 글자 입력, 비교 또는 수정과 같은 기능을 합니다.

리스트란? 여러 항목을 나열한 목록으로

주로 두 가지 이상의 항목을 사용할 경우

이를 한눈에 보기 좋게 또는 수정이 용이하게 목록화해주는 것을 말합니다.

기차로 비유해보면

기차라는 리스트 이름안에는 첫번째 칸과 두번째 칸이 순서대로 연결되어 있습니다.

여기서 첫번째 칸과 두번째 칸이 리스트의 항목이 되고 기차의 칸이라는 목록이 생기겟죠?

리스트는 이러한 목록에서의 항목 추가, 수정, 비교와 같은 기능을 합니다.

색상은 말 그대로 색을 지정할 수 있는 부분입니다.

변수란? 직역하면 변경가능 한 값을 말합니다.

찰흙이라는 변수가 있다면 저희가 만드는 모양에 따라 자동차가 될 수도 있고 건물이 될 수도 있습니다.

이처럼 변수는 한 값을 갖지만 지정하기에 따라 원하는 값으로 변경이 가능합니다.

때문에 변수에서는 변수의 초기화(이름과 값을 지정), 값 가져오기 등의 행동이 가능합니다.

여기서 전역변수는 다른 모든 곳에서도 사용할 수 있는 값을 말하고

지역변수는 자기 자신의 영역에서만 사용할 수 있는 값을 말합니다.

버튼이라는 요소에서 전역변수를 지정한다면 이 값은 모두와 함께 사용한다는 말이므로 체크박스와 같은 다른 요소에서도 이 값을 사용할 수 있습니다. 

반대로 버튼 요소에서 지역변수를 지정한다면 이는 버튼 내에서만 사용할 수 있는 값이 됩니다.

함수란? 원하는 동작들을 하나의 이름으로 묶을 수 있는 부분입니다.

예를 들어, 토끼, 강아지, 고양이, 사자를 하나로 묶어 동물이라고 부를 수 있죠?

이와 같이 원하는 동작들 하나하나를 함수에 넣어 이름을 지정해주면

함수명을 쓰는 것 만으로 함수 내의 동작들을 사용할 수 있습니다.

이 외에도 각각의 컴포넌트들이 갖는 명령어들이 많이 있지만

이는 이 후에 직접 앱을 만들어보면서 사용할 예정입니다!

다음 글에서 봬요~^^

※ 오타와 기타 수정 및 부족한 부분을 댓글로 달아주시면 큰 도움이 됩니다!

잘 읽으셨나요?? 공감도 한번 꾸욱~ 눌러주세요^^☞