NEW 앱인벤터2 강좌 1. 앱인벤터의 구조 알아보기

전체 강좌 목록 보러 가기:
http://semicolon1.dothome.co.kr/appinventor.html

post_std_01_01.png

저번 시간에 앱인벤터의 메인화면 구조에 대해 알아보았습니다.
이번에는 앱 작업 화면의 구조에 대해 알아보겠습니다.


0. 프로젝트 열기

post_std_01_02.png

먼저 프로젝트를 하나 생성후 눌러서 들어가보세요.
그러면 저런 창이 뜰텐데, 이제 계속 저 화면에서 앱 작업을 할겁니다.
자세히말하면 저기는 화면 디자인이고, 블록 편집하는 곳도 따로있죠!

1. 디자이너 영역 구조 탐구

post_std_01_03.png

사진의 순서대로 디자이너의 구조를 알아보겠습니다.

0. 상단 메뉴
먼저, 상단 메뉴는 화면 전환과 스크린 추가등을 담당하는 버튼들이 있습니다.

Screen1▼

현재 열려있는 스크린의 이름 입니다.

여기서 스크린을 전환할 수 있습니다.

스크린 추가

새 스크린을 추가합니다.

스크린 제거

현재 스크린을 삭제합니다.

단, Screen1을 삭제가 불가능 합니다.

디자이너

해당 스크린의 디자이너를 엽니다.

블록

해당 스크린의 블록 에디터를 엽니다.

1. 팔레트
팔레트는 마치 그림 그릴때 물감을 짜놓은 팔레트에서 원하는 색의 물감을 골라 쓰는 것 처럼 여러 컴포넌트들의 목록이 있고, 필요한걸 뽑아 쓰기 위한 공간 입니다.

2. 뷰어
뷰어는 실제 앱의 화면을 미리보는 곳 입니다. 이곳에 팔레트의 컴포넌트를 끌어다 둡니다.
실제 기기와는 다소 위치 차이가 있을 수 있습니다.

뷰어에 숨겨진 컴포넌트 나타내기

보이기가 체크 해제되어 있는 컴포넌트를 표시합니다.

전화 크기( )

미리보기 영역의 크기를 각 기기의 해상도로 변경합니다.

[휴대폰 화면 영역]

이곳에서 컴포넌트를 두고 작업하고, 앱 화면을 미리볼 수 있습니다.

3. 컴포넌트
현재 해당 스크린에 있는 모든 컴포넌트를 트리(Tree) 구조로 보여줍니다.

4. 미디어
앱에 넣을 미디어파일(이미지, 사운드 등)을 업로드 하는 곳 입니다.

5. 속성
선택한 컴포넌트의 상세 속성을 지정할 수 있는 곳 입니다.

2. 블록 영역 구조 탐구

post_std_01_04.png

이번에는 사진의 순서대로 블록영역의 구조를 알아보겠습니다.

1. 블록
기본 제공 블록과 각 컴포넌트에서 제공하는 블록을 꺼내 쓰는 곳 입니다.

2. 미디어
앱에 넣을 미디어파일(이미지, 사운드 등)을 업로드 하는 곳 입니다.

3. 뷰어
실제 블록을 가져다 놓으면서 로직 작업을 하는 영역 입니다.
블록이 늘어남에 따라 공간은 자동으로 확장 됩니다.

4. 오류 알림

[경고] post_std_01_05.png

블록 구성 중에 일반적인 경고를 표시합니다.

화살표로 경고가 있는 블록으로 이동 가능합니다.

[오류] post_std_01_06.png

블록 구성 중에 앱 실행에 오류를 일으키거나 빌드를 실패하게 할 수 있는 블록을 표시합니다.

화살표로 경고가 있는 블록으로 이동 가능합니다.

Show Warnings

post_std_01_07.png

경고나 오류가 있는 블록의 한쪽에 경고 또는 오류 아이콘을 띄웁니다.

이 아이콘을 누르면 오류 메시지가 뜹니다.

5. 배낭
블록을 보관할 수 있는 공간으로, 다른 프로젝트들과도 내부 블록을 공유합니다.

6. 작업영역 컨트롤

정위치

post_std_01_08.png

현재 블록 뷰어의 위치를 정 중앙으로 이동합니다.

확대 / 축소

post_std_01_09.jpg

블록 뷰어를 확대/축소 합니다.

휴지통

post_std_01_10.png

블록을 삭제할때 여기에 드래그&드랍 합니다.

 

다음 강좌에서는 앱인벤터2의 부가기능&Tip에 대해 알아보겠습니다.
감사합니다.

댓글

Copied title and URL