제 4 장 스크린 초기화, 변수 및 타이머 2 (디자이너창 작업)

5. 구성요소 작업

앱인벤터의 디자이너창을 사용하여 외관을 구성하는 디자인에 대해 설명한다.

1. 컴퓨터에 미리 준비된 이미지를 디자이너창에서 업로드하는 방법에 대해 설명한다.

1-1. 이미지 등의 업로드에 대해서는, 디자이너창의 중앙우측의 하부에 위치한 미디어(Media)컬럼에 있는 추가버튼(Add…)을 클릭하면, 대화상자(Upload File…)가 다음의 스크린샷과 같이 나타난다.

1-2. 이 대화상자에서 버튼(파일 선택)을 클릭하고 컴퓨터에 미리 준비한 그림파일을 찾아서 선택하고 열기(O)버튼을 클릭한 다음, 버튼(OK)을 클릭한다.

1-3. 그림 파일이 4개이므로 상기 작업을 4회 반복하면, 디자이너창의 미디어(Media)컬럼에는 다음의 스크린샷과 같이 업로드한 그림파일이 4개 나타난다. 

참고 사항: 상기 그림파일을 클릭하여 컴퓨터에 다운로드할 수 있다.

2. 일반적으로, 팔레트(Palette)컬럼에 있는 복수의 드로워 중에서 한개의 드로워를 열고 아이콘을 뷰어(Viewer)에 드래그하고, 해당 구성 및 속성을 적절하게 정정한다.

2-1. 구체적으로는, 디자이너창의 좌측에 위치한 팔레트컬럼에서 기본(Basic)드로워를 열고 이미지(Image)를 선택하여 뷰어로 드래그한다.  이에 대한 스크린샷은 다음과 같다.

2-2. 디자이너창의 우측에 위치한 속성(Properties)컬럼에서 그림(Picture)난을 클릭하면 미디어(Media)컬럼에서 금방 업로드한 4개의 이미지가 나타나고, 첫번째 그림파일(introduction01.png)을 선택하고 버튼(OK)를 클릭하면 뷰어의 이미지 영역에 선택된 이미지가 나타남과 동시에 연동하고 있는 에뮬레이터(또는 안드로이드폰)에도 마찬가지로 이미지가 나타난다.  이때에 뷰어에 그림화면이 나타나지 않는 경우에는 구성요소인 이미지(image1)의 속성난에서 폭과 높이를 각각 Fill parent와 150픽셀로 설정하면 나타난다.

참고사항: 이와 같이 서로 연동하여 이미지의 나타남을 확인하는 것을 라이브 테스트(Live Test)라고 한다.

참고 사항: 미디어(Media)컬럼에서 미리 업로드하지 않아 이미지가 나타나지 않는 경우에는,추가버튼(Add…)을 누르고, 상기 미디어(Media)컬럼에서 업로드한 방식과 마찬가지로 직접 업로드하여도 된다.

2-3. 마찬가지로, 클록(Clock)을 선택하여 뷰어로 드래그한다.

참고 사항: 구성요소컬럼(Components)의 스크린(Screen1)에 대응하는 속성컬럼(Properties)의 스크린방향(ScreenOrientation)난에서 스크린의 수평, 수직방향으로 고정하는 Portrait 및 Landscape를 선택할수 있다. 스크린을 양방향으로 동시에 원하는 경우에는 디폴트값으로Unspecified가 있다.

2-4. 이와 같이 드래그하면 뷰어의 내부에서는 클록의 모습을 드러내지 않고, 넌비지블한 영역(뷰어의 외부하단 영역)에 클록의 모습이 나타난다. 이 때에, 디자이너 창의 우측에 위치한 속성(Properties)컬럼의 시간간격(TimeInterval)난에 디폴트값으로 1000 msec (1초)가 나타난다.  시간간격(Time Interval)을 변동시키고자 하는 경우에는 소망의 값을 직접 입력한다.

참고 사항: 상기 설명한 바와 같이 구성요소가 나타나는 영역은, 화면에 나타나는 비지블 구성요소(Visible Component)영역 및 뷰어의 외부하단에 나타나는 넌비지블한 구성요소(Non-visible Component)영역으로 구분한다.