제 3 장 자기소개서 앱 만들기 2 (디자이너창 작업)

5. 구성요소 작업

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

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

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

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

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

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

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

2-1. 구체적으로는, 디자이너창의 좌측에 위치한 팔레트컬럼에서 기본(Basic)드로워를 열고 4개의 캔버스(Canvas)와 3개의 버튼(Button)을 한개씩 교대로 선택하여 뷰어로 드래그한다. 이에 대한 스크린샷은 다음과 같다.

2-2. 구성요소(components)컬럼에서 해당 버튼(Button1)을 클릭하고 컬럼의 하측에 있는 이름바꾸기버튼(Rename)을 누르면 이름바꾸기 구성(Rename Component)대화상자가 나타난다.

 2-3. 상기 대화상자에서 새로운 이름(New name)난에서 Button1을 ButtonPhoneNumber로 정정한 다음 버튼(OK)를 클릭하면 속성컬럼의 해당버튼의 명칭이 정정된다.  마찬가지로, Button2와Button3를 각각 ButtonBlog, ButtonFacebook으로 정정한다.

이에 대한 스크린샷은 다음과 같다.

2-4. 구성요소(컬럼에서)에서 폰넘버 버튼(ButtonPhoneNumber)를 클릭하고 우측에 위치한 해당 속성(Properties)컬럼에서 이미지(Image)난을 클릭하면 미디어(Media)컬럼에서 금방 업로드한 8개의 이미지가 나타나고, 그림파일(mamama.png)을 선택하고 버튼(OK)를 클릭하면 뷰어의 이미지 영역에 선택된 이미지가 나타남과 동시에 연동하고 있는 에뮬레이터(또는 안드로이드폰)에도 마찬가지로 이미지가 나타난다.

이에 대한 스크린샷은 다음과 같다. 

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

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

2-3. 나머지의 버튼구성요소(ButtonBlog, ButtonFacebook)에 대해서도 마찬가지로, 해당 속성(Properties)컬럼의 이미지(Image)난에서 그림파일(blog.png, facebook.png)을 선택하고 버튼(OK)를 클릭한다.

이에 대한 스크린샷은 다음과 같다. 

2-4. 배경이미지에 대해서는, 스크린의 배경이미지로 업로드하였지만, 디자인의 구성요소(예를 들면, 버튼)와 별도의 1 개의 이미지로 형성되어 구성요소와의 조화를 이루는 것이 곤란하다. 이점을 고려하여 이미지의 일부를 삭제하면서 4 개의 이미지(flower01.jpg, flower02.jpg, flower03.jpg, flower04.jpg)로 분할한다.

2-5. 상기 버튼의 상, 하부에 배치하고 캔버스구성요소에 대해서도, 상기 버튼의 이미지를 로딩하는 방법과 마찬가지로, 해당 속성컬럼의 배경이미지(BackgroundImage)난에서 상기 분할된 이미지를 순차적으로 로딩한다.

이에 대한 스크린샷은 다음과 같다.

2-6. 상기 스크린샷에 나타나 바와 같이 3개의 버튼중 2개의 버튼만 나타난다. 이 것은 캔버스의 배경이미지용 그림파일의 높이가 크기 때문이다.  이를 해소하기 위해 그림의 높이를 조정하는 방법이 있지만, 배경그림이므로 캔버스의 높이를 제한하는 것이 편리하다. 이에 관련하여,캔버스(Canvas1, Canvas2, Canvas3, Canvas4)의 높이를 각각 30, 50, 50, 100 픽셀로 정정하고 아울러서 이들 캔버스의 폭을 일괄하여 Fill parent(부모의 폭과 동일함)으로 정정한다.

따라서, 디자인창에서는 3개의 버튼이 모두 나타나지 않지만, 안드로이드폰 또는 에뮬에이터에서는 화면에 모두 나타난다.  이에 대한 스크린샷은 다음과 같다.

참고사항: 배경이미지의 사이즈(높이)를 무시하고 캔버스의 높이를 일방적으로 줄였지만 배경그림의 사이즈는 캔버스에 의해 마스킹되기 때문에 다행히도 배경그림의 해상도에는 변함이 없다.  배경이미지의 해상도에 이상이 발생하는 경우에는 포토샵 등의 도구를 사용하여 버튼의 이미지와 캔버스의 배경그림을 각각 별도의 레이어를 사용하여 버튼이미지에 해당하는 부분만큼 절단하여 삭제하면 간단하게 해결할 수 있다.

2-7. 이제부터는, 넌비지블한 구성요소인 폰콜(PhoneCall)과 액티비티스타터(ActivityStarter)에 대해 설명한다.

2-7-1. 팔레트컬럼의 쇼설(Social)드로워를 열고 폰콜(PhoneCall)을 선택하여 뷰에 드래그하면,뷰어의 내부에서는 클록의 모습을 드러내지 않고, 넌비지블한 영역(뷰어의 외부하단 영역)에 클록의 모습이 나타난다. 

여기서, 폰콜(PhoneCall)구성요소는, 버튼폰넘버 버튼을 터치하면 소정의 전화번호로 전화를 걸기위해 사용된다.

2-7-2. 마찬가지로, 팔레트컬럼의 기타구성요소(Other stuff)드로워를 열고 액티비티 스타터(ActivityStarter)를 선택하여 뷰에 드래그하면, 뷰어의 내부에서는 액티비티스타터의 모습을 드러내지 않고, 넌비지블한 영역(뷰어의 외부하단 영역)에 액티비티스타터의 모습이 나타난다.

여기서, 액티비티스타터(ActivityStarter)는 블로그와 페이스북을 터치하면 브라우저를 런칭하여 해당 사이트를 브라우징하기 위해 사용된다.

2-8. 상기 디자인한 구성요소(PhoneCall, ActivityStarter)와 이전에 디자인한 구성요소를 전체적으로 나타내는 디자이너창의 모습은 다음의 스크린샷과 같이 나타난다.