꾸숑의 IT 월드

이번 시간에는 미디어 섹션에 있는 '카메라'로 사진 촬영하는 법을 알아보자. 카메라로 사진을 찍기 위해서는 사진을 보이기 위한 '이미지'나 '캔버스'가 있어야 한다. 먼저 다음과 같이 디자이너 에디터를 준비하자. 팔레트의 '그리기 & 에니메이션' 파트에서 캔버스를 화면 중앙에 배치한다. 처음 캔버스를 가져가 두면 작은 크기의 캔버스가 나타난다. 속성창에 가서 캔버스의 높이와 너비를 '부모 요소에 맞추기'로 설정한다. 하단부에 버튼을 하나 가져다 두고 이름과 텍스트를 적당히 입력한다. 미디어섹션에서 카메라를 하나 드래그해서 화면 중앙에 드랍해 보자. 카메라는 보이지 않는 컴포넌트이기 때문에 스마트폰 화면에 나타나지 않고 스마트폰 하단부에 표시된다. 이제 블록 에디터에 가서 블록들을 배치해 보자. 먼저 버튼..

6.설정아이콘의 사용법 앱인벤터 블록들을 보면 블록 좌측 상단에 ☸모양의 파란색 설정 아이콘이 있다. 이 아이콘은 블록의 항목을 더 추가할 수 있도록 하는 아이콘이다. 공통 블록안에 있는 각 세부 블록들은 위의 설정 아이콘을 가지고 있는 것들이 여러개 있다. 이 블록들은 필요에 따라 블록의 인수나 항목을 더 추가해 줄 수 있는 것이다. 설정 아이콘을 클릭하면 항목을 더 추가할 수 있는 도구가 열린다. 필요한 만큼 항목을 더 추가한다. 문자열 또한 얼마든지 더 추가할 수 있다. 7.블록 정리하기 앱인벤터의 단점이 코딩이 길어지다 보면 각각의 블록들이 여기저기 흩어져 있어서 화면이 산만해지기 일쑤라는 것이다. 이때 각 블록들을 보기 좋게 정리해 주는 기능이 있다. '가로로 배열하기', '세로로 배열하기', ..

이번 시간은 앱인벤터2 왕초보 강좌 14번째 시간으로 시간 선택버튼(TimePicker)의 사용법에 대해서 알아보겠다. 시간 선택 버튼을 클릭하고 원하는 시간을 셋팅하면 개발자가 원하는 부분에 그 시간이 표시되는 앱을 만들어 보자. 다음 그림과 같이 디자이너 에디터 화면을 구성한다. 사용자 인터페이스에서 '날짜 선택 버튼'을 끌어다 뷰어 창의 핸드폰 화면 중앙에 놓는다. 그리고 '시간 선택 버튼' 아래에다 레이아웃 항목안에 있는 수평배치 블록을 세개 끌어다 놓는다. 그리고 수평배치 블록 안에 레이블을 끼워 넣어서 위와 같은 배치를 만든다. 레이블들의 이름을 보면 '시_레이블'과 '분_레이블'이 있다. 검은선 위아래의 시, 분 레이블의 이름을 1, 2로 구분 했다. 수평 배치 레이아웃과 수직 배치 레이아웃..

스위치는 말그대로 전기를 켜고 꺼듯이 On과 Off 의 두가지 상태를 나타내는 것이다. 이 두가지의 상태에 따라 각각의 용도와 내용을 설정하고 이용할 수 있다. 우리가 스위치를 가장 많이 보는 것이 계약서의 동의를 구하는 칸일 것이다. 처음에는 Off 상태에 있다가 동의 한다는 표시로 스위치를 클릭하면 On 상태가 되면서 녹색으로 색깔이 변하는 것을 많이 보았을 것이다. 이번 시간에는 스위치의 사용법에 대해 자세히 알아보자. 먼저 다음 그림과 같은 디자이너 화면을 구성하자. 이번 앱은 우리가 많이 보는 계약서의 동의를 요구하는 상황을 가정해 보고 스위치의 상태를 하단에 글자로 나타낼 것이다. 사용자 인터페이스에서 스위치를 드래그 드랍방식으로 스마트폰 중앙에 배치한다. 레이블들을 위아래에 두어서 스위치의 ..

이번 시간에는 앱에서 알림 경고, 메시지, 선택 대화창 보이기등을 보여주는 알림(Notifier) 컴포넌트의 사용법에 대해서 알아보겠다. 먼저 디자이너 에디터의 화면을 다음과 같이 구성한다. 알림(Notifier) 컴포넌트의 사용법을 알아보기 위해 두개의 버튼을 사용한다. 첫번째 버튼은 일반적인 알림 설정에 대한 방법을 알아보기 위한 버튼이고 두번째 버튼은 앱을 종료할때 선택 대화창을 띄워 종료가 확실한지 물어보는 대화창을 띄워 볼 것이다. 두개의 버튼을 화면 가운데에 배치하고 위아래로 레이블을 두어서 버튼의 위치를 조정한다. 그리고 알림 컴포넌트를 화면가운데에 배치한다. 그러면 알림 컴포넌트는 보이지 않는 컴포넌트이기 때문에 Screen1 화면 아래쪽에 위치 할 것이다. 이제 블록 에디터에서 작업을 이..

앱인벤터2에서 목록 선택 버튼과 목록뷰는 비슷한 기능을 하는 컴포넌트들이다. 둘의 차이점을 들자면 목록 선택 버튼은 이것도 하나의 버튼이기 때문에 이 버튼을 눌러야 이벤트가 발생하는 이벤트성 컴포넌트란 것이고 목록뷰는 화면에 처음부터 목록이 표시되고 이 목록중 하나를 선택하면 다음 이벤트가 일어나는 구조이다. 즉 초기 화면이 복잡해서 리스트를 띄우면 화면이 지저분해 지거나 복잡해 질때는 목록 선택 버튼을 사용하면 좋고 처음부터 화면에 리스트가 나타나는 것이 좋을 때는 목록뷰를 사용하면 좋다는 것이다. 다음과 같이 화면에 목록뷰를 배치하고 레이블을 위아래로 두어서 목록뷰의 위치를 조정한다. 목록뷰는 화면에 바로 리스트가 표시된다. 리스트의 성분은 우측 리스트뷰의 속성에 이름을 적어 넣으면 된다. 각 이름들..

이번 시간에는 이미지블록을 공부해 보는 시간으로 이미지를 전환하는 방법을 배우면서 이미지 블록의 모든 것을 공부해 보자. 이미지 전환 동영상 이해를 돕기 위해서 오늘 설명하는 내용의 결과 동영상을 미리 보여 주겠다. 동영상 처럼 앱을 켜면 이미지가 왼쪽에서 오른쪽으로 15도 각도로 회전한 상태에서 이동한다. 그리고 화면 중앙의 15도 각도로 회전한 이미지를 클릭하면 이미지가 똑바로 서고 그 다음부터 이미지를 한번씩 클릭 할 때마다 이미지가 바뀐다. 5개의 이미지만 준비되어 있지만 얼마든지 더 많은 수의 이미지를 바꿔가면서 앱을 구성할 수 있다. 팔레트 창에서 이미지 항목을 화면 중앙에 배치한다. 속성창을 보면 Clickable이 있는데 이걸 체크해 줘야 이미지를 클릭하는 것이 먹힌다. 사진 항목의 빈 박..

이번 시간에는 레이아웃의 세부 활용에 대해 알아보겠다. 순서상 레이아웃을 다룰 시간은 아니지만 레이아웃을 알아야 화면 구성을 마음대로 할 수 있기 때문에 레이아웃을 먼저 하고 다음 시간 부터 순서대로 진행하도록 하겠다. 앱인벤터에서는 기본적으로 컴포넌트들을 배치하면 수직으로 죽 나열이 된다. 즉 수평으로 컴포넌트들을 배치하는 것은 되지 않는다. 그래서 컴포넌트들을 여러 방향으로 배치하기 쉽게 하기 위해서 사용하는 것이 레이아웃이다. 팔레트 창에서 레이아웃 메뉴에 들어가면 5가지의 항목들이 준비되어 있다. 수평배치 컴포넌트를 뷰어창에 끌어다 놓아 보자. 처음 수평배치 레이아웃만 배치시키면 상당히 큰 사각형이 나타난다. 이 사각형 안에 버튼이나 레이블등등 을 배치하면 수평으로 컴포넌트들이 배치가 되는 것이다..

이번 시간은 앱인벤터2 왕초보 강좌 세번째 시간으로 날짜 선택버튼의 사용법에 대해서 알아보겠다. 사용자 인터페이스 세번째 항목인 '날짜 선택 버튼'을 끌어다 뷰어 창의 핸드폰 화면 중앙에 놓는다. 그리고 '날짜 선택 버튼' 아래에다 레이아웃 항목안에 있는 수평배치 블록을 네개 끌어다 놓는다. 그리고 수평배치 블록 안에 레이블을 끼워 넣어서 위와 같은 배치를 만든다. 레이아웃은 가장 많이 쓰는 블록들 중 하나이기 때문에 순서가 되지 않았지만 앱인벤터2 왕초보 강좌 네번째 시간에 설명하도록 하겠다. 수평 배치 블록 안에 레이블을 2개씩, 그리고 네번째 수평배치 블록 안에는 6개의 레이블을 배치 해 두었으므로 일단 위의 그림을 보고 따라해 보기 바란다. 이제 블록 에디터로 가서 좌측 블록창 중단에 있는 '날짜..