[앱개발 팁] 어플 만드는 간단한 방법 - 오픈소스 import 해와서 개발하기

앱개발

처음 어플을 만들 때 정말 막막합니다.

일단 제일 먼저 안드로이드 환경설정을

하셔야 겠죠... 그리고 안드로이드 스튜디오나

이클립스와 같은 개발 툴로 개발을 하면 됩니다.

요즘 대세는 안드로이드 스튜디오지만

기존방식을 선호하시는 분들은 이클립스를

계속 사용하시거나 안드로이드 스튜디오와

병행해서 사용합니다.

안드로이드 스튜디오

이클립스

어찌 되었든 처음 개발을 할 때처럼 막막한게 없습니다.

그런데 꼭 하나부터 열까지 다 만들 필요는 없답니다.

왜냐하면 인터넷, 특히 구글에는 정말 엄청나게 많은

안드로이드 예제가 있으니깐요~ 게다가 그 예제들만

잘 가져다 사용해도 어지간한 어플은 다 만들 수 있다는거!

오픈소스

오픈소스 혹은 open API 형태로 자바 라이브러리와

간단한 안드로이드 예제는 어플 개발할 때 정말 유용합니다.

저만 하더라도 제가 직접 개발하는 비중보다 오픈소스를

이용하는 비중이 더 많습니다. 물론 제가 원하는 기능들이

모두 담긴 예제는 별로 없으니 기본적인 개발은 할 수 있어야

되고, 서로 다른 기능들과 예제, 오픈된 라이브러리들을

가져다가 붙이고, 수정하면서 내 것으로 만들 수 있어야 됩니다.

오픈소스를 이용한 자바 프로그램 개발

제가 예전에 작성한 글입니다.

참고해 보시기 바랍니다.

자바로 안드로이드를 개발하므로

자바 오픈소스 라이브러리를 사용해서

자바 프로그램을 만들 수 있으면

안드로이드 개발할 때도 많은 도움이 됩니다.

구글검색

얼마 전에 아직 졸업을 못한 친구가 졸업 작품으로

안드로이드 어플을 만든다고 합니다.

그런데 안면인식이나 지문인식 하는 어플을

만든다고 하네요;;; 허... 절대 간다하지 않을 거고

과연 완벽하게 사람의 얼굴을 인식하는 소스가

인터넷에 있을 리는 없죠

그래도 얼굴 인식을 하는 간단한 어플이라도

한 번 찾아보면서 설명을 드리겠습니다.

한글로 검색하는 것보다는 영어로 검색하는게 유리합니다.

영어 자료가 훨씬 많으니깐요~

그러므로 중/고등학교 영어 단어에

익숙하시다면 더욱 유리하겠죠~

저도 콩글리쉬 정도입니다 ㅎㅎ

일단 안드로이드 예제이므로 검색어에

기본적으로 'android' 단어를 넣어주고

얼굴인식이므로 face detecor 정도로

검색을 해주려고 치다보니 아주 친절하게도

구글에서는 자동 완성된 검색어를 추천해 줍니다~

detecter인지 detector인지 헷깔렸는데

고민할 필요가 없어졌네요 ㅋㅋㅋ

검색 결과가 나왔습니다~

한국인 인지라 한글이 가장 먼저 눈에 들어 옵니다.

심심하면 옴 이미지 얼굴 인식

위에 글에 먼저 들어가 봤습니다.

하지만 들어가 보니 FaceView라는

클래스를 복사해서 붙여 넣은 내용과

결과 캡처해 놓은 거 하나 뿐이네요..

참고로 지금 제가 찾는 건 안드로이드 예제로

안드로이드 스튜디오나 이클립스에서

바로 어플로 실행 가능한 소스를 찾고 있는 겁니다.

완벽한 안드로이드 프로젝트는 소스 외에도

여러 디렉토리와 이미지, 파일 등으로 구성되어 있습니다.

이클립스에서 실행 가능한 안드로이드 프로젝트는

기본이 위와 같이 구성되어 있습니다.

안드로이드 스튜디오의 디렉토리 구조는

위와 같습니다. 100% 똑같지는 않고 위에

보이는 디렉토리는 꼭 있어야 됩니다.

어쨌든 위와 같은 완벽한 프로젝트 예제를

찾고 있는 겁니다.

어쨌든 위에서 나온 검색 결과 중에 밑에서

두 번 째에 검색 결과로 들어가 봤습니다.

일본어가 들어가 있어 심기는 불편하지만

지금 그게 문제가 아니죠... 얼른 소스부터ㅋ

Android Tips #15..........

들어갔더니 알 수 없는 일본어와

이상한 남자 한 명의 사진이 있습니다.

그런데... 제일 밑에 보니 뭔가 눈에

쏙 들어오는 링크가 있습니다!!!!

FaceDetectorSample

두둥~ 얼굴감지샘플이랍니다 ㅋㅋㅋ

눌렀더니 아래와 같은 화면이 나옵니다.

게다가 오른쪽 아래에는 정말 친숙한

Download 라는 단어까지 있습니다.

간단히 설명을 드리자면

구글에서 프로그램 소스를 구하시다 보면

위에 github라는 사이트를 자주 접하시게

될 겁니다. SVN과 같이 프로젝트를 공유할 수

있는 사이트로 정말 유용한 사이트입니다.

게다가 소스까지 무료로 내려 받을 수 있구여~

Download ZIP을 누르기 전에 파일 리스트 중에

FaceDetectorSample 디렉토리로 들어가 봅니다.

위와 같이 구성되어 있습니다.

안드로이드 프로젝트가 맞습니다.

얼핏 보니 이클립스에서 구동할 수

있는 프로젝트인 거 같습니다.

하지만 상관 없습니다.

안드로이드 스튜디오에서도

불러올 수 있으니깐요 ~

아까 Download Zip을 누르니

바로 다운이 됩니다~

이제 압축 풀고 구동만 해보면 됩니다.

import 및 어플 구동은 다음 포스팅에서

하도록 하겠습니다~~~!!! 퇴근해야되요 ㅎ

[HTML5] 웹소켓(WebSocket), AngularJS, Jetty 서버를 이용한 동적 웹 페이지 개발

요즘 프로젝트를 하면서 부쩍 동적인 화면 구성에

관심이 많이 생겼습니다. 정확히는 관심이 생겼다기

프로젝트여서 관심을 가질 수 밖에 없는 상황이지만

이게 할 수록 재미가 생기네요~ 웹 소켓이나

AngularJS라는 전에는 해보지 않았던 것들도

새로 알게 됐습니다! 웹소켓은 HTML5가 나오면서

웹 브라우저를 통해 양방향 소켓 통신이 가능한

기술이다란 이야기는 들어 봤지만 실제로 해보니

신기하기도 하지만 아직도 잘 모르겠네요 ㅎ

아 그런데 위에서 말한 웹 페이지의 동적화면 구성에

있어서는 AngularJS를 사용했습니다.

JavaScript를 이용해서 웹 화면을 작업하는데

있어서 인력, 시간을 확연히 줄이게 해주는

기술이라고 합니다~ 아직 간단한 예제만

해봤지만 몇 줄 만으로 동적인 화면 구성이

가능한데 웹 개발을 해보신 분이 AngularJS를

사용해보니 신기하기도 하고 편하기도 하답니다.

일단 확실한 건 전에 비해 코드량을 엄청

줄일 수 있다고 하네요~

아 그리고 결정적으로 구글이 만든 기술입니다!

일단 기존에 웹 페이지 제작에 있어서 문제점은

화면 갱신을 위해서는 화면을 다시 리프레쉬 해야 된다.

어설프게 들은 얘기를 꺼내자면 예전에 AJAX나

아이프레임 등을 통해 전체 화면이 아닌 필요한

부분만 갱신하는 기술이 있었다고 들었습니다.

(정확히는 모릅니다 ㅠㅠ)

그런데 이 것도 어찌 되었든 뭔가 문제가 있었고,

그런 문제/단점 등을 보완해서 나온 것이

AngularJS 입니다. 철저한 MVC의 분리와

데이터와 화면에 binding을 통해 모델 값이

바뀌면 바로 View에도 적용이 됩니다.

정말 간단한 예제를 하나 올려 봅니다.

기존 HTML 언어와 큰 차이는 보이지 않습니다.

하지만 차이는 있습니다~!

ng-controller나 ng-click, 그리고 {{xx}} 형태의

중괄호, ng-model 이 보입니다. 이게 AngularJS의

모든 건 아니고, 기존에는 없던 개념들 중에 일부입니다.

위와 같이 화면을 구성하고 WebsocketClientController.js를

구성해주면 동적 화면 구성이 가능합니다. 물론

WebsocketClientController.js 개발을 위해서는

AngularJS를 좀 공부하셔야겠죠~! 

모니터링 그래프 데이터를 얻기 위해 요청/응답의 무한 반복

아 당연히 응답을 받기 위해서는 요청을 보내야겠죠!

접속하고 싶은 인터넷 주소를 쳐야(요청)

해당 주소의 웹 페이지(응답)를 받는 거니깐요!

하지만 상황에 따라서는 굳이 요청이 필요없는

경우도 있을 수 있습니다. 무조건 데이터를 받는

경우나 계속 값을 확인하고 최신의 값을

화면에 보여주는 경우는 요청 없이 서버 쪽에서

바로 화면으로 값을 보내줘도 되는 겁니다.

요청이라는 단계를 생략하니 당연히 부하도

덜 할 것이고, 속도도 빨라질 겁니다.

이러한 방식을 구현하기 위해 사용한 것이

웹 소켓(WebSocket)입니다.

간단히 말하면 요청 없이 서버에서 클라이언트로

바로 데이터를 보내줄 수 있으며, 당연히 클라이언트에서

서버로도 데이터를 보낼 수 있습니다.

즉 양방향 통신이 가능해 집니다.

웹 소켓을 이용한 자바 서버 예제입니다.

웹 소켓을 이용해서 서버를 띄우는 방법은

여러가지가 있는 듯 합니다.

그 중에 전 제티를 이용해서 서버를

띄웠습니다. 예제를 찾다가 구동되는 걸

찾은게 jetty 예제입니다 ㅎㅎㅎㅎ

위의 자바 예제로 웹소켓 서버를 띄우고,

AngularJS로 웹 페이지로 클라이언트로

접속해서, client의 요청이 없이 제티 서버 쪽에서

웹으로 데이터를 주는 간단한 예제를 구성해

봤습니다. 여러 웹 페이지를 띄워

하나의 제티 서버로 붙어서 서버로부터

데이터를 받는 동안 다른 웹 페이지에서는

요청을 보내 응답을 받아 보기도 했습니다.

정말 나와 있는 기술들을 보면 놀라울 뿐입니다!

있는 기술 잘만 사용해도 괜찮은 거 하나는

만들 수 있을 거 같고, 정말 실력 좋으면

요즘 트렌드인 1인 기업도 가능하지 않을까요?ㅎ

좀 오버하긴 했지만 어찌 되었든 요즘 프로젝트를

하면서 정말 세상에는 기술들이 많구나라는 걸

매일 매일 깨닫고 있습니다.

따라가기 벅차네요 ㅠㅠㅠㅠ