꾸숑의 IT 월드

이번 시간에는 앱인벤터로 로그인 화면을 제작해 보겠다. 로그인 화면은 모든 웹, 앱의 기본사항으로 모두들 쉽게 제작할 수 있을 것이라고 생각하지만 막상 제작에 들어가 보면 상당히 까다로운 작업이 기다리고 있는 것을 알 수 있을 것이다. 로그인 화면을 다른 프로그램으로 제작하려고 하면 최소 1~2일이 걸리는 작업이지만 앱인벤터로는 1~2시간이면 충분히 제작할 수 있기 때문에 역시 쉽고 교육적인 프로그램인 것이 틀림없다. 앱인벤터2 강좌 33: tinyWebDB를 이용한 로그인 화면 만들기 이번 시간에는 tinyWebDB를 이용한 로그인 화면 만들기를 해 보도록 하겠다. 28강 강좌에서는 tinyDB를 이용해 로그인 화면 만들기를 해 보았는데 어떤분이 모바일이나 인터넷에서 로그인 할 수 있도 kusson.t..

1편과 2편에서는 구글 SDK를 이용해서 tinyWebDB 사설 DB를 구글 앱엔진에 등록하고 사용하는 방법을 알아보았다. 이번 3편에서는 구글 앱엔진 등록법 마지막 편으로 구글 대시보드에서 제공하는 구글 쉘 코드 편집기를 이용해 tinyWebDB 사설 DB를 구글 앱엔진에 등록하는 법을 알아보겠다. 나도 처음에는 구글 대시보드상에서 바로 앱엔진에 등록하는 방법이 없나 하고 궁금했었는데 역시나 그 방법도 있었다. 이제 그 방법을 간단히 설명하고 마무리 하도록 하겠다. 1편과 2편을 보지 않으신 분을 먼저 1, 2편을 좀 살펴보시고 오길 권하고 컴퓨터 바탕화면에 appinventordb 폴더가 있는 것으로 가정하고 시작하겠다. 샘플 코드 다운 받는곳은 'http://appinventor.mit.edu/ex..

앱인벤터의 tinyWebDB를 사용하려면 구글 대시보드의 DB를 이용해야 한다. 그런데 구글 대시보드를 이용하려면 구글 앱엔진에 deploy를 해 줘야 한다. deploy란 말의 뜻은 '배치하다, 전개하다'등의 뜻인데 구글의 앱엔진에 배치한다. 즉 등록한다라는 의미로 이해하면 되겠다. 2년전에 필자가 구글 앱엔진에 등록할때는 구글 앱론처라는 것을 이용해서 등록했었다. 그런데 요즘 앱인벤터로 tinyWebDB를 이용하려는 사람들이 있어서 조금 알아보았더니 요즘은 앱론처를 사용하지 않고 구글 SDK 콘솔에서 바로 deploy 하는 방법을 쓰고 있었다. 그래서 두번에 걸쳐 구글 SDK 콘솔에서 구글 앱엔진에 deploy하는 방법을 설명하려고 한다. 이번 시간에는 그 첫번째 시간으로 'Hello World' 웹..

암송법 중에서 아주 효과가 좋기로 소문난 허니비 암송법이라는 것이 있다. 꿀벌이 붕붕붕 소리를 내며 부지런히 날라다니는 것에 착안해서 개발한 암송법으로 특히 교회 다니는 사람들이 성경 구절 암송하는데 유용하다고 한다. 이 방법은 학생들이 암기 과목을 공부할 때나 영어 단어 외울때도 효과가 좋은 것으로 알려져 있는데 이번 시간에는 앱인벤터로 바로 이 허니비 암송법을 구현해서 설명하겠다. 허니비 암송법이란 긴 문장을 4~5개의 문단으로 끊어서 반복하는 것인데 예를 들어 설명해 보도록 하자.윤동주 시인의 서시를 외운다고 가정하자. 서시죽는 날까지 하늘을 우러러 (A)/한 점 부끄럼이 없기를(B)/ 잎새에 이는 바람에도 (C)/ 나는 괴로워했다(D) / 별을 노래하는 마음으로(E) / 모든 죽어가는 것을 사랑해..

내가 티스토리 블로그를 시작하고 제일 많이 신경을 쓴 부분이 앱인벤터2 강좌를 진행하는 것이었다. 소프트웨어(SW)를 따로 전공한 것은 아니지만 몇년전에 접한 앱인벤터라는 프로그램으로 인해 나도 여러가지 앱을 개발하고 개발한 앱을 구글의 플레이 스토어에 출시할 수 있었다. 앱인벤터는 SW를 잘 모르는 사람일지라도 약간의 공부만 하면 쉽게 이해할 수 있고 간단한 앱까지도 만들 수 있다. 앱인벤터는 처음 SW를 접하는 어린이들이나 비전공자들이 SW의 원리를 이해할 수 있도록 만든 프로그램이기 때문에 어려운 SW 용어 대신 블럭들을 연결하는 형식으로 프로그램을 제작하기 때문에 누구든지 쉽게 앱을 만들 수 있는 것이다. 다른 모든 SW 프로그램을 제작하는 사람들도 마찬가지 이겠지만 내가 앱인벤터로 앱을 제작해 ..

무당벌레 추적하기 게임을 만들어 보겠다. 이 게임은 David Wolber, Hal Abelson Ellen Spertus, Liz looney 등이 지은 '앱인벤터2'라는 책에서 소개된 '무당벌레 추적'이란 내용을 조금 확장한 것이다. 여기에 소개된 내용이 게임을 만드는데 필요한 여러 요소를 골고루 잘 포함하고 있어 이 게임을 잠시 소개한다. 우선 캔버스를 하나 배치시키고 그 위에 이미지 스프라이트를 3개 가져다 둔다. 그 스프라이트위에 진딧물, 무당벌레, 개구리등 세종류의 그림을 올린다. 그리고 무당벌레의 에너지 레벨을 볼수있는 슬라이더를 하나 배치하고 얼마나 오랫동안 무당벌레가 개구에게 잡혀먹지 않고 버티는지 시간을 볼 수 있는라벨, 그리고 newGame등의 버튼을 배치한다. 사진 고르기에는 무당벌..

이번 시간에는 tinyWebDB를 이용해서 구글의 클라우드 데이타 센터와 데이터를 주고 받는 방법에 대해 알아 보겠다. 구글의 클라우드 대시보드에 개인 DB를 개설한 사람은 그쪽 프로젝트 ID를 이용해 데이터를 주고 받을 수 있다. 앱인벤터 디자이너 에디터에서 tinyWebDB의 ServiceURL 입력란에 프로젝트 ID를 이용하여 "http://프로젝트ID.appspot.com/"라고 입력한다. 앱인벤터 디자이너 에디터에 위와 같이 요소들을 배치한다. tinyWebDB의 ServiceURL 입력란에 프로젝트 ID를 이용하여 "http://프로젝트ID.appspot.com/"라고 입력하는 것을 잊지 않도록 한다. 이제 블럭에디터에 위와 같은 프로그램을 구성하자. 인풋박스에 데이터를 입력하고 '데이터 입력..

이번 시간에는 지난번 (http://kusson.tistory.com/65)시간에 이어 구글 대시보드에 tag와 value값을 넣는 방법을 좀 더 구체적으로 알아보겠다. 앱인벤터에서는 tinyWebDB를 제공하는데 이것은 구글의 클라우드 데이터 베이스에 자료를 저장하고 필요하면 그 데이터를 다시 가져올 수 있는 방법이다. 클라우드 시스템은 분실이나 바이러스 오염에 대한 걱정없이 데이터를 저장할 수 있고 또 인터넷이 연결된 곳이면 어디서든지 그 자료를 이용할 수 있어 대단히 편리한 시스템이다. 그런데 구글의 클라우드 데이터 베이스를 이용하려면 몇가지 기본적으로 셋팅해 주어야 하는 조건들이 있기 때문에 설명을 잘 보고 따라해야 한다. 익숙해 지면 별 어렵지 않으나 처음 하는 사람들에게는 상당히 까다롭고 힘든..

앱인벤터2로 shooting 게임을 제작하는 것에 관심이 있는 사람이 많아 shooting 게임 강좌2를 계속 이어가기로 했습니다. 지난 shooting 게임 강좌1에서는 shooting 게임 제작을 위한 변수 설정과 초기 상태를 설정하는 방법을 설명했습니다. 그리고 실제 게임 구동 파트에서는 장애물 출현과 미사일 발사 버튼을 터치했을때 일어나는 상황을 기술했었습니다. 이번 시간에는 그 나머지 부분에 대해서 강좌를 이어가도록 하겠습니다. 저번 시간에 미사일을 발사 하고 끝이 났는데요 이제 미사일 발사 이후에는 어떤 상황이 벌어질까요? 벌어질 수 있는 상황을 한번 상상해 보도록 하겠습니다. 미사일과 장애물의 충돌이 있을 수 있고 또 충돌없이 그냥 지나칠수 도 있습니다. 미사일이 장애물과 충돌했다는 것은 미..

이번에는 게임의 꽃이라고 할 수 있는 슈팅게임을 제작해 보겠다. 앱인벤터로도 슈팅게임을 제작할 수 있는데 화려한 여타 모바일 게임을 흉내내기는 어려워도 재미있게 시간을 보낼 수 있는 간단한 슈팅게임을 만들수는 있다. 배경화면과 전투기, 미사일등을 배치하고 장애물이 랜덤하게 떨어지게 만든 뒤 미사일을 발사해서 장애물을 폭파하게 만드는 게임을 제작해 보겠다. 이번 강좌에서는 장애물을 하나만 배치했지만 실제 게임을 제작한다면 장애물을 여러개 배치해서 여러 곳에서 장애물이 출몰하고 미사일도 여러발 발사할 수 있게 하고 전투기가 폭파되면 3~4대 까지 게임을 다시 시작할 수 있게 하는 등 우리가 다른 슈팅게임에서 볼 수 있는 완성도 높은 게임을 만들 수 있다. 여기서는 앱 인벤터로 슈팅게임을 배우는 단계이므로 최..

앱인벤터2는 여러가지 센서를 지원해 주는데 가속센서, 자이로스코프센서, 위치센서, NearField 센서, 방향센서 등등 우리가 잘 알지도 못하는 다양한 종류의 센서를 제공하고 있다. 우리가 약속이나 타지방으로 여행을 할 경우 차를 주차해 놓고 몇시간 후 차를 주차한 곳으로 돌아가서 다시 차를 운전해 와야 할 경우가 많이 생긴다. 차를 주차해 놓은 장소를 쉽게 기억할 수 있으면 좋지만 술이나 한잔 한다던지, 또 여러가지 이유로 차를 어디에 주차해 두었는지 잘 기억이 나지 않는 경우가 생길 수 있다. 이때 위치센서를 이용해서 내차의 주차 위치를 기억해 주는 앱을 실행해 둔다면 나중에 어렵지 않게 차를 찾을 수 있다. 앱인벤터2 디자이너 에디터에 위와같이 주소 정보를 표시할 label과 WebViewer하나..

운전중에 스마트폰을 사용하는 것은 대단히 위험한 일이라는 것을 여러분 모두가 아실 것이다. 어떤 보고에 의하면 음주운전보다 위험한 것이 운전중 스마트폰을 사용하는 것이라는 얘기가 있었다. 이제 이러한 위험을 사전에 방지하기 위해 운전중에는 문자나 전화를 사용하지 않고 상대방에게 내가 운전중이라는 메시지와 나의 위치를 보낼 수 있는 앱을 개발해 보도록 하겠다. 위와같이 앱인벤터2 디자이너 에디터에 화면을 구성한다. 처음에 나오는 "문자가 오면 아래 메시지가 자동 전송됩니다."라는 문구는 이 앱을 설명하는 라벨이다. 그 다음줄에 나오는 "운전중입니다. 곧 연락드리겠습니다."라는 말은 그 아래 텍스트 박스에 입력하는 문자가 표시되는 라벨이다. 여기에 표시되는 문자가 누군가로부터 문자가 왔을때 전송되는 문자다...

이번시간에는 여러분이 TV에서 한번쯤 보셨을 게임을 하나 만들어 보겠다. 일본의 영장류 연구소에서 침팬지를 오랫동안 연구하고 있었는데 아유무라는 침팬지에게 어렸을 때 부터 숫자를 기억하게 하는 훈련을 시켰다. 커가면서 하나둘씩 과제를 잘 처리하더니 나중에는 인간이상의 기억력을 보이는 여러 정황을 목격하게 된다. 그게 우리에게 잘 알려진 숫자 누르기 게임이다. 컴퓨터 모니터에 1부터 10까지의 숫자가 잠시 보이고 숫자는 커턴으로 가려서 뒤의 숫자가 보이지 않게 한다. 그런데 아유무는 거침없이 1부터 올라가는 순서로 숫자를 클릭하는 것이다. 그 속도가 얼마나 빠른지 인간이 따라갈 수 없을 정도의 스피드와 정확도를 겸비하고 있었다. 나도 그 화면을 보면서 숫자를 기억해 볼려고 한참 노력했는데 아유무를 도저히 ..

이번 시간에는 앱인벤터2로 만드는 게임시리즈 18번째로 화면에 9개의 숫자를 임의로 보여주고 다시 복원하는 게임을 만들어 보겠다. 이 게임은 카드 암기게임을 실행하기 전에 한두번 정도 해 보면 두뇌를 조금 각성시키는 효과가 있을 것으로 생각한다. 이 게임 또한 TinyDB에 나온 숫자를 저장하고 유저가 버튼을 누르때 마다 저장된 숫자와 유저가 누른 숫자가 맞는지 확인하는 절차를 거친다. 그림을 보면서 설명하겠다. 앱인벤터2 디자이너 에디터에 위와 같이 화면을 구성한다. 화면 중간의 숫자들은 TableArragement를 3×3으로 구성해서 숫자를 하나씩 채워준다. TableArragement 아래에 나오는 HorizontalArragement 9칸은 유저가 버튼을 눌렀을때 정답이면 그 숫자가 들어가는 자..

이번 시간에는 앱인벤터2로 만든 앱을 실제로 구글 플레이 스토어에 출시하는 법에 대해서 알아보겠다. 필자는 앱인벤터2로 만든 앱 30여가지를 구글 플레이 스토어에 출시해 놓고 있다. 대부분의 앱들은 무료로 등록 했지만 한가지 앱은 유료로 판매하고 있다. 물론 반응이 꽤 좋은 앱들도 있지만 반응이 신통치 않은 앱들도 있다. 그러나 꾸준히 새로운 아이디어로 앱을 개발해서 스토어에 출시 한다면 좋은 결과를 얻을 수 있을 것이라고 믿고 계속 올리고 있다. 그러면 이제 앱인벤터2로 개발한 앱을 구글 플레이 스토어에 등록해 출시 하는 방법을 설명하겠다. 실제로 좀 익숙해 지면 간단한 작업일 수 있으나 처음 해 보는 사람에게는 꽤 까다로운 작업 일 수도 있으므로 최대한 자세히 설명하겠다. 먼저 앱을 구글 플레이 스토..

이번에는 유초등학생들이 사용할 수 있는 덧셈 앱을 제작해 보겠다. 앱인벤터로 더하기 빼기 계산을 하는 것은 아주 쉬운일이나 적당한 알고리즘으로 학생들이 좋아할 만한 암산앱을 개발하는 것은 쉬운일이 아니다. 코딩작업을 얼마해보지 않은 사람은 어떤 방향으로 앱을 개발하는 것이 좋을지 생각하는 것 조차 쉽지 않을 것이다. 한자리와 한자리 암산을 계산하는 것은 너무 단순하니 두자리와 한자리 숫자를 암산하는 문제를 생각해보자. 시작 버튼을 누르면 화면에 두개의 숫자가 표시되고 아래에 답과 비슷한 숫자가 4개 표시된다. 그러면 게이머는 맞는 버튼을 클릭하게 되고 맞으면 스코어가 1점씩 올라간다. 그리고 화면에는 다시 문제가 표시된다. 디자이너 에디터에 위와 같이 컴포넌트들을 배치한다. 상단에는 점수를 표시하는 La..

저번 강좌에서 말했다시피 앱인벤터로도 게임을 개발해서 구글 플레이 스토어에 등록할 수 있다. 그래서 그런지 많은 분들이 aia파일을 요청하셔서 대부분은 파일을 보내드리고 있다. 제가 강의하고 있는 게임들은 대부분 구글플레이 스토어에 등록한 게임들이며 여기에 공개하는 내용은 조금 축약해서 설명하고 있다. 이 시간에는 카드 암기게임에 대해 설명한다. 트럼프 카드 한질이 52장이나 여기에는 한가지 그림의 갯수에 해당하는 13장만 가지고 설명을 진행한다. 1.5초 동안 클로버 카드가 화면에 노출되었다가 사라지고 다음카드가 또 1.5초 동안 보이고 사라지는 식으로 13장 모두가 나오면 플레이어가 화면하단의 번호 버튼을 눌러 암기한 카드를 맞추면 된다. 맞으면 그 카드가 하단에 쌓이고 틀리면 경고 메시지가 나오며 ..

앱인벤터로 게임을 개발해서 구글 플레이 스토어에 등록할 수 있다고 하니 관심을 가지는 사람이 많은 것 같다. 그래서 제가 이제까지 개발한 여러 게임들을 순차적으로 공개해 볼 생각이다. 먼저 두더지 잡기 게임에 대해 설명한다. 두더지 잡기 게임은 5×5개의 구멍 즉 25개의 구멍에서 두더지 2마리가 무작위로 출현한다. 타이머를 0.8초로 설정했기 때문에 0.8초 간격으로 두마리의 두더지가 나오는데 다른 구멍으로 가기 전에 손가락으로 터치를 해야한다. 터치를 하면 점수가 일점씩 올라가고 50점이 되면 게임을 그만두겠냐고 알림창을 띄운다. 이제 그림을 통해 구체적인 방법을 설명하겠다. 위의 그림은 게임의 초기화면이다. 가운데 두더지 잡기란 버튼을 클릭하면 두더지 잡기 게임화면으로 넘어간다. 먼저 앱인벤터2의 ..

많은 사람들이 잘 모르고 있지만 앱인벤터는 수학 계산을 위한 여러가지 함수를 제공하고 있다. 덧셈, 뺄셈을 기본으로 사칙연산은 물론이고 로그, 절대값 심지어 삼각함수에 대한 처리도 지원한다. 우리가 고등수학에서 배웠던 대부분의 함수들을 지원하기 때문에 중고등학생들을 위한 수학앱도 개발할 수 있다. 그래서 이번 시간에는 앱인벤터로 삼각함수에 대한 그래프를 그려보고 학생들을 위한 수학앱을 어떻게 개발할 것인지에 대해 생각해 보도록 하자. 위의 그림이 우리가 중고등학교 수학시간에 배웠던 사인 코사인 그래프이다. 사인함수는 x값이 증가 함에 따라 같이 증가하다가 90˚부터 감소하고 180˚, 270˚, 360˚에서 각각 변곡점을 갖는 위의 그림과 같은 함수이다. 코사인그래프는 사인함수보다 90˚ 느린 함수라고 ..

앱인벤터는 기본적으로 구글 클라우드에서 제공하는 CC(Creative Cloud) 프로그램이다. 따라서 인터넷이 연결되어 있는 곳이면 어디서든지 사용할 수 있는 장점이 있다. 그러나 이것은 인터넷을 사용할 수 없는 곳에서는 사용할 수 없다라는 것과 똑같은 말이다. 따라서 CC프로그램이 아니라 오프라인 프로그램도 누군가는 필요할 것이다. AppInventor2 Ultimate가 오프라인에서 사용할 있는 앱인벤터 프로그램이다. 줄여서 AI2U라고 하겠다. AI2U가 가지는 장점도 많이 있다. 인터넷이 없는 곳에서도 사용할 수 있다라는 것이 가장 큰 장점이겠지만 도서관이나 커피숍같이 사람이 많은 곳에서 인터넷을 사용한다면 속도가 느려져서 프로그램을 사용하기가 너무나 불편해진다. 특히 앱인벤터는 블럭을 많이 사..

앱인벤터로 작성한 앱에서 버튼을 누르면 아두이노 보드의 신호등이 점등하는 프로그램을 제작해 보겠다. 앱인벤터와 아두이노 보드사이에 통신을 하기 위해서는 프로세싱 프로그램의 매개가 필요하다. 앱인벤터와 프로세싱프로그램 그리고 아두이노 보드사이에 서로 통신을 주고 받으며 프로그램을 실행한다. 다음과 같이 앱인벤터 프로그램을 작성하자. 앱인벤터의 디자이너 에디터에 위와 같이 버튼2개와 Web1을 배치시킨다. Web1 Url에 내 컴퓨터의 Ip 주소와 포터 번호를 적어준다. 이것은 지난번 강좌에서 설명했기 때문에 여기서는 설명하지 않는다. 잘 모르시는 분은 http://kusson.tistory.com/93 을 참고하기 바란다. Traffic Light On버튼을 누르면 프로세싱 서버로 '1'을 보내고 버튼의 ..

앱인텝터와 서버의 통신 프로그램 앱인벤터로 작성한 프로그램과 프로세싱 서버 프로그램과의 통신을 시도하는 프로그램을 작성해보자. 프로세싱 언어는 MIT에서 개발한 언어로 학생, 예술가, 또는 취미로 프로그램을 공부하는 사람도 쉽게 쓸 수 있도록 만들어져 있다. 이 언어는 자바를 기반으로 만들어진 언어중의 하나로 현재 프로세싱(https://processing.org/) 싸이트에서 다운받아 사용할 수 있다. 오픈소스이며 기존 언어보다 쉽게 이미지나 애니메이션을 렌더링하거나 통신이 가능하다. 먼저 앱인벤터로 두개의 버튼을 만들고 "On"과 "Off"를 누르면 서버 화면의 색상을 바꾸는 프로그램을 제작해 보자. 프로그램을 제작하는 프로세스는 다음과 같다. 1. 앱인벤터를 실행한다. 2. "On" 버튼을 누르면 ..

앱인벤터2는 스크린에디터와 블럭에디터 2개의 스크린으로 구성되어 있기 때문에 스크린 복사를 하는 것이 불가능한 구조다. 블럭에디터에서는 블럭전체를 복사할 수 있는 기능이 최근에 추가되어 블럭전체를 복사할 수 있으나 스크린에디터와 블럭에디터 2개 모두를 동시에 복사하는 것은 아직 지원되지 않기 때문에 특수한 방법을 쓰야한다. 스크린에디터와 블럭에디터 2개를 모두 복사하는 방법을 소개한다. 위의 그림에서 보듯이 killing Time_pub 앱은 7개의 스크린으로 구성되어 있다. 만일 2번 스크린을 8번으로 옮기고 싶다면 어떻게 해야할까? 앱인벤터로 앱을 많이 제작하다보면 몇번 스크린을 몇번으로 옮겨야 하는 경우가 많이 발생한다. 따라서 이 방법을 잘 알아두면 꼭 필요할 때 요긴하게 쓰일 수 있다. 이 방법..

1.구글 대시보드 DB 사용법과 TinyWebDB의 이용 앱인벤터2에서 TinyWebDB를 이용하는 방법에 대해서 설명하겠습니다. 일반적으로 TinyWebDB를 이용하는 방법은 2가지가 존재하는데요 첫째는 공용 DB를 이용하는 방법과 둘째는 개인 DB를 이용하는 방법입니다. 공용DB를 이용하는 방법은 다음과 같습니다. 일단 앱인벤터2를 실행시키고 디자이너 에디터에서 TinyWebDB를 하나 준비합니다. 그리고 TinyWebDB1의 ServiceURL을 http://appinvtinywebdb.appspot.com/로 설정합니다. 그리고 이 주소를 웹브라우저 주소창에 그대로 쳐넣은다음 인터넷에 들어가 보면 /storeavalue:와 /getvalue: 항목이 나옵니다. /storeavalue:에는 본인이 ..

일반적으로 C나 자바등 프로그램을 처음 배우는 사람들은 1부터 100까지 더하는 프로그램을 짜보고는 하는데 앱인벤터에서도 1부터 100까지 더하는 프로그램을 쉽게 짜 볼 수 있다. 먼저 일반적인 프로그램에서 1부터 100까지 더하는 프로그램을 보자 for (int i = 1; i