호박에 줄 긋기 part1

자! 이번 시간에는 저번 튜토리얼에서 다루었던 PUNCH앱을 디자인을 통해 좀 더 시각적으로 만들어 보겠습니다. 디자인만 하냐고요? 그건 아닙니다. 구성요소들의(Components) 속성(Properties)를 설정하여 적절한 효과를 내는 방법도 알아볼 것 입니다. 정신 똑바로 차리시고! 그렇다고 긴장은 너무하지 마시고. 출발해 봅시다!

이 튜토리얼을 시작하기 전에

아래 사항을 꼭 준비하세요.

  • 튜토리얼 2번 프로젝트 (이번 튜토리얼은 저번 시간에 만들었던 프로젝트의 연장 입니다.)
  • 안드로이드 폰(앱인벤터로 만든 앱은 안드로이드 스마트폰에서만 작동합니다.)
  • 스마트폰과 PC가 공유하는 WiFi 네트워크 또는 스마트폰과 PC를 연결하는 케이블
  • 드림코드에서 제공하는 배포파일 (저번까지 완성한 프로젝트, 그림파일, 소리파일, 완성된 소스코드)

미리 보기

완성된 모습은 아래와 같습니다.
어때요? 디자인이 들어가니 좀 더 볼만하지 않나요? 쓰는 맛도 더 있을 듯 하고!

배울 수 있는 기능

이 튜토리얼을 통해 여러분이 배울 수 있는 기능은 다음과 같습니다.

  • layout을 사용한 구성요소 배치방법
  • properties의 사용예시
  • blocks를 이용하여 구성요소들의 크기 및 비율 맞추는 방법

이번 튜토리얼은 복수앱을 완성함과 동시에 주요 기능에 대해서도 배울텐데요…음… 좀 흐름이 헷갈릴지도 모르겠어요. 최대한 헷갈리지 않게 최선을 다 해 준비를 했으나! 긴장을 놓지 말아주세요~ 구성요소를 배치하기 위한 Layout의 기능을 알아보는 것부터 출발하겠습니다. 우선 저번 시간에 만들었던 프로젝트를 여시고~ 긴장 끈 꼭 잡으시고~ 출발합시다!

Layout 기능

구성요소를 배열할 때에는 Layout 기능을 사용합니다. 화면 왼쪽 Palette 구역의 Layout을 클릭하면 3가지 (Horizontal Arrangement, Table Arrangement, Vertical Arrangement) 배열 방법이 표시됩니다.
#Horizontal Arrangement : 두 가지 이상의 구성요소들을 가로로 배열시켜 줍니다.
#Table Arrangement : 구성요소를 표 형식으로 배열 시켜줍니다.
#Vertical Arrangement: 두 가지 이상의 구성요소들을 세로로 배열 시켜 줍니다.
(아래 그림은 복수앱을 완성하기와 상관이 없습니다. 단지 기능을 보여주기 위해 사용한 것입니다. 따라 하셨다면 꼭 삭제 해주세요.)

이제 layout을 사용해 복수앱을 제작해 보겠습니다. (이 부분은 따라해주세요.) ① [layout] -> [Horizontal Arrangement]를 클릭한 후 화면에 드래그하여 배치합니다. ②, ③ 가로로 배열할 Namebox와 NameInputBtn를 각각 Horizontal Arrangement 안에 배치합니다. ④ 같은 방법으로 [Vertical Arrangement]를 Horizontal Arrangement 아래에 드래그 하여 배치합니다. ⑤, ⑥ 세로로 배열할 NameLabel과 TouchBtn는 Vertical Arrangement 안에 배치하여 놓습니다.

위의 화면 사진에서 Components 구역에 들여쓰기를 통해 HorizontalArrangement1에 NameBox, NameInputBtn이 속해 있으며 verticalArrangement1 안에 NameLabel과 TouchBtn이 속해 있음을 나타내고 있습니다.
배치가 끝난 후 Layout의 관한 설정(넓이, 위치조정 등)도 필요합니다. 그러나 이해를 돕기 위해 좀 더 뒤에 다루도록 하겠습니다. 참아 주세요.ㅜㅜ 그럼 다음페이지로 넘어가 properties의 설정을 해 봅시다.

잠시만요! 넘어가기 전에! 이 페이지에서 한 일이 뭐였죠?? 구성요소(components)를 Layout을 사용하여 배치했다는것! 기억하세요!

댓글