Android 개발환경 구축

Posted in 모바일 // Posted at 2010. 7. 12. 17:59
728x90
안드로이드 개발 환경 셋팅.
올 해, 2월에 안드로이드 공부를 시작하면서 정리한 글이다. 당시 최신 버전은 2.1 이었지만,
현재는 2.2 이다. 2.1 최신 버전을 설치하더라도 설치 과정은 동일하다

아래 글을 참고하자
------------------------------------------------------------------------------------------

이제 본격적으로 안드로이드 개발 세상으로 뛰어 들기 위해 개발 환경을 설정 합니다

안드로이드 SDK는 아래, 안드로이드 개발자 웹사이트에서 다운로드 제공하는 군요
>> 안드로이드 SDK 다운로드
안드로이드 SDK 윈도우, 맥, 리눅스를 모두 지원한댑니다
압축파일로 제공이 되는데 원하는 폴더에 압축을 푸는 것으로 설치가 완료되구요

그리고 안드로이드는 개발은 자바기반입니다. 자바 개발 킷인 JDK도 설치해야 하네요
>> JDK 다운로드
저는 JDK 6 버전을 설치했습니다

마지막으로 안드로이드 개발을 편하게 하기 위해 통합개발툴인 이클립스를 다운바다 설치 합니다
>> 이클립스 다운로드
Eclipse IDE for java Developers 버전을 다운받고, 안드로이드 SDK처럼 압축을 해제하는 것으로 설치가 완료되구요

이제 이클립스를 통해 안드로이드 개발이 가능하도록 ADT(Adnriod Developement Tools)라는
이클립스 플러그인을 설치합니다.
이클립스가 설치된 폴더의 eclipse.exe를 처음 실행하면 다음 그림과 같이 workspace를 설정하라고 나오네요
안드로이드 개발을 위한 workspace를 원하는 제가 지정한 폴더로 선택했습니다



이클립스가 실행되면, 상단 메뉴에서 Help -> Install New Software 메뉴로 들어가서 Add 버튼을 클릭하고
아래 그림과 같이 적당한 이름을 주고 url을 입력합니다
https://dl-ssl.google.com/android/eclipse/


OK버턴을 클릭하면 다음과 같은 창이 뜨는데 Developer Tools 를 체크한 후 Next 하다가 약관 동의하고
Finish 합니다. 그러면 ADT 설치가 진행됩니다





설치 과정 중에 Security Warning 가 나오면 그냥 OK 하시고 설치가 완료되면 이클립스를 재 시작합니다

이제 이클립스를 위한 안드로이드 개발 플러그인인 ADT를 설치 완료 하였습니다

다음으로 이클립스에 안드로이드 SDK 위치를 지정해 줘야 하는데요..
이클립스의 상단 메뉴에서 Windows -> Preference를 실행하면 다음과 같은 창이 나오는데
이전에 설치한 안드로이드 SDK 위치를 지정해 줍니다



다음으로 안드로이드 버전별 SDK와 에뮬레이트를 다운 받습니다
이클립스 상단 메뉴에 Window -> Android SDK and AVD Manager 를 실행 한후,
Available Packages 메뉴에서 설치를 원하는 API 버전을 선택합니다. 전 모두 선택했습니다


그리고 우측 하단의 Install Selected 버튼을 클릭하고 Accept All 하고 설치를 시작합니다



자.. 이제 마지막 하나, 에뮬레이터 AVD를 설정하고 설치를 완료합니다
역시 이클립스 상단 메뉴 Window -> Android SDK and AVD Manager 를 실행한 후 왼쪽의 Virtual Devices를 선택한 후 New 버턴을 클릭합니다. 아래와 그림과 같이 새로운 AVD를 생성합니다




이제 드디어 설치가 완료 되었네요~
아.. 지루한 작업이었습니다 ㅎㅎ;

그럼. Hello World 를  찍어 보도록 해야 겠네요 ~~

[Book] JQuery 책 구매

Posted in 모바일/Javascript // Posted at 2010. 7. 12. 13:16
728x90

한 때 웹개발을 수 년간 했었다
초기 ASP를 기반으로 해서 다양한 웹 사이트를 개발했었다
당시 자바스크립트 공부도 꽤 했으며 다양하게 응용도 했었다

그러나 윈도우 응용프로그램을 수 년간 개발하면서 웹 개발을 조금 멀리 했었다

그리고 이후 웹 개발 프로젝트를 수 년간 관리했었다
이 때는 실무 개발보다는 프로젝트 관리자 입장에서 웹을 바라보았으며 코드보다는 성능, 가용성,
연동, 안정성 등을 위주의 관리적 경험이 대부분이었다

그리고 지금...
모바일 웹 부문을 맡게 되면서 다시 웹을 실무수준으로 개발하게 되었다
현재의 웹은 과거 경험했던 웹 보다 더욱 체계화 되었으며 표준에 대한 요구가 많이 늘었음을 느낀다

지금은 웹 개발을 한다는 의미보다 웹을 한다는 의미로 받아 들이고 있다
웹은 소프트웨어 환경에서 빼 놓을 수 없는 플랫폼이다.
웹 개발을 다시 한다는 편협한 시각보다는 웹을 이해한다라는 거시적 관점에서 다시 시작해 보려 한다

그 출발으로, 자바스크립트 라이브러리로 유명한 JQuery 책을 신청했다

과거 언젠가..
더 이상 자바스크립트 공부를 섬세히 할 일이 없을 것이다... 라는 나의 예측이 어긋난 것이다.

HTML5 책, HTML5 & API 입문

Posted in 모바일/HTML5 // Posted at 2010. 7. 9. 14:07
728x90

내가 본, HTML5를 주제로 한 첫번째 책이다
그간 온라인을 통해서만 HTML5 기술을 습득해 왔는데, 책이 나왔다길래 바로 구입했다
모바일 플랫폼 중 1차로 모바일 웹 부분을 담당하게 될 것 같고 관심도 있고 해서 보게 되었다



한글로 된 첫 번째 HTML5 기술 서적이지만 일본서적의 한글 번역본이다
저자는 '시라이시 슌페이'라는 일본사람이다

이 책 이후로 올 6월에 한국 저자가 발간한 책이 추가로 나온 것 같다

책에서는 HTML5에 관련한 대부분의 기술 요소들을 다루고 있으며 간단한 데모 코드도 제시하고 있다
HTML5와 관련한 전반적인 기술 요소를 빠르게 훓어 볼 수 있는 책이다

HTML5 마크업이야 워낙 직관적이라 쉬울 테고, API 부분도 나름대로 깔끔하게 정리한 느낌이다
반면 API 부분의 깊이 있는 탐색은 좀 부족하지 않나 싶다

책을 보기 시작하여 일주일이 채 되지 않아 다 보게 되었다
기존 인터넷을 통해 일부 선행 학습을 한 탓에 쉽게 볼 수 있었던 것 같다
짧은 시간에 많은 정보를 쉽게 습득했다는 점에서 좋은 점수를 줄 만 하다

조금 더 깊은 내공을 위해서는 또 다시 인터넷을 통해 공부하고 적용해 봐야 겠다

728x90
모바일 웹은 모바일 단말기의 브라우저에서 동작하기 때문에 앱(App)처럼 별도의 설치나 업데이트
과정이 필요치 편리하다.

그리고 모바일 앱(App)의 경우 아이폰, 안드로이드, 윈도모바일 등 각 플랫폼마다 개발하는 환경이나
언어가 서로 상이해서 각각 별도로 개발해야 하지만 웹은 그럴 필요가 없다

이러한 특징은 전통적인 데스크탑의 윈도우어플리케이션과 웹어플리케이션과의 차이점과 거의 동일한 개념이다.

모바일 시장의 성장과 환경의 보편화로 모바일 앱(App)도 성장을 하겠지만 모바일 웹도 그에 못지않은 영역을 구축해 나갈 것 같다

물론 모바일 웹이 모바일 앱에 비해 가지는 단점도 몇 가지 있는데...
그중에서도 모바일 단말기 즉 디바이스의 고유 기능을 사용할 수 없다는 것이 가장 안타깝다
고유기능이라 함은 디바이스의 전화번호부, SMS, 일정관리, 사진, 파일시스템 등을 말하며 이들 컨텐트에 접근해서 핸들링 할 수 없다는 것이다

웹 자체가 브라우저에서 해석되고 실행되기에 어찌보면 당연한 것이지만 그래도 이러한 제약이
모바일 웹의 기능 확장에 걸림돌이 될 소지는 충분히 있어 보인다

모바일 장치 자체가 굉장히 개인화된 영역이고 이러한 개인성향의 컨텐츠가 웹 컨텐츠와 융합될 수 있다면 다양한 모바일 웹 어플리케이션이 개발 가능하지 않겠는가?

그런데. 이것이 불가능 하지 않다 !!!
바로 PhoneGap 이다. http://www.phonegap.com/

폰갭은 HTML, JavaScript 을 기반으로 하는 오픈소스 개발 프레임워크로 아이폰, 안드로이드폰, 블랙베리 등의 SDK 핵심 기능을 지원하는 굉장히 고마운 놈이다

폰갭을 이용하면 모바일 웹에서도 디자이스의 고유 기능을 가져다 쓸 수 있다고 한다
점점 알아볼것이 많이 생긴다 --;

그리고 폰갭 이외에도
Bondi, Titanium Mobile 라는 것도 있는데, 역시 유사한 기능을 제공해 주는 프레임워크라 한다

PhoneGap Roadmap

 

RED - not possible for this device

YELLOW - we're working on it!

GREEN - works!

  

 

 

iPhone

Android

Blackberry
(OS 4.5)

Symbian1

Windows

Mobile

Palm

Maemo*

Geolocation

 

 

 

 

 

 

 

Accelerometer

 

 

OS 4.7

 

HTC only 

 

 

Camera

 

 

 

 

 

 

 

Vibration

 

 

 

 

 

 

 

Contacts API

 

 

 

 

 

 

 

SQLite Functionality

 

 

 

 

 

 

 

XMPP API

 

 

 

 

 

 

 

File system IO

 

 

 

 

 

Read only

 

Gesture / Multitouch

 

Android 2.0

 

 

 

 

 

SMS API

 

 

 

 

 

 

 

Telephone API

 

 

 

 

 

 

 

Copy / Paste

 

 

 

 

 

 

 

Sounds (Play)

 

 

 

 

 

 

 

Sounds (Record)

 

 

 

 

 

 

 

Bluetooth

 

 

 

 

 

 

 

Wifi Adhoc connection

 

 

 

 

 

 

 

Maps

 

 

 

 

 

 

 

Orientation change

 

 

 

 

 

 

 

Network availability

 

 

 

 

 

 

 

Magnetometer

 3GS only

 

 

 

 

 

 

Storage

 

 

 

 

 

 

 

 

다음(Daum), Sparrow framework

Posted in 모바일/Javascript // Posted at 2010. 7. 8. 14:01
728x90
다음(Daum)에서 개발한 오픈소스자바스크립트 프레임워크이다

http://uie.daum.net/sparrow/


브라우저의 HTML5 호환성 점수

Posted in 모바일/HTML5 // Posted at 2010. 7. 5. 14:15
728x90

HTML5은 차세대 웹 표준으로 자리를 잡겠지만 현재까지는 표준안이 완성된 것은 아니다
따라서 각 브라우저에서 HTML5의 각종 태그와 API에 대한 지원이 서로 상이하다

http://www.html5test.com/ 에서는 현재 브라우저가 HTML5를 얼마나 지원하는지 검사해 준다
HTML5의 각 세부 요소별로 점수를 계산하여 300점 만점 기준으로 종합 점수를 보여준다

아래는 내 PC에 설치된 IE, 크롬, 사파리, 파이어폭스를 검사 해 본 결과이다

IE 8.0                   :  27 점
크롬 5.0                : 197점   
파이어폭스 3.6.6   : 139점
오페라 10.60         : 159점
사파리 5.0             : 207점

사파리가 가장 좋은 점수를 받았다
역시 플래시를 거부하고 HTML5 를 적극지원하겠다던 애플다운 행보인 것 같다
구글의 크롬 역시 높은 점수를 기록했으며 파이어폭스나 오페라는 그저그런 수준인 듯...
(뭐얌.. 지원할 꺼면 언능언능 지원하던지 않구선.. )

마이크로소프트의 경우 다음버전인 IE9에서는 HTML58를 전폭 지원한다고 했으니 다음에 검사한번
해 봐야 겠다

'모바일 > HTML5' 카테고리의 다른 글

[HTML5] Web Workers (웹 워커)  (7) 2010.08.05
HTML5 Demo, A Look At HTML5 and its Canvas Tag  (4) 2010.07.29
[HTML5] HTML5 개요와 기술적 특징  (50) 2010.07.21
HTML5 책, HTML5 & API 입문  (10) 2010.07.09
HTML5 도입, 서버측 기술은 ?  (6) 2010.06.29

구글, 안드로이드 개발 공부

Posted in 모바일 // Posted at 2010. 7. 5. 12:35
728x90

현재 프로젝트는 모바일 환경을 기반으로 한다
그리고 나에게 일차적으로 주어진 미션은 모바일 웹 개발 부문이다

개인적으로는 모바일 앱(App) 개발도 흥미를 가지고 있다
그 중에서도 구글의 안드로이드 개발을 조금씩 공부하고 있는데 프로젝트를 당장 구현하는 것이
아니라 진도가 좀 늦긴 하다. 그러나 매일 조금씩 공부하고 개인적인 앱도 한번 제작해 볼 요량이다

그런데 이.. 안드로이드.. 자바기반 개발 환경이다
이클립스로 개발하는데 비주얼스튜디오에 익숙한 나에게는 낯설기도 하고 툴의 기능이 조금 불편하기도 하다. 그리고 한글화가 안 되어 있다는 점과 MSDN 에 버금가는 완벽에 가까운 헬퍼(Helper) 문서가 없는 점도 아쉬운 부분이다

지금 책 한권 보며 진도를 빼고 있는데, 책 다보고 나서 간단한 앱 한번 구현해 볼 예정이다. 책을 아무리 보고 이해했더라도 직접 구현해 보면 많은 문제에 봉착하고 이러한 상황을 해결해 나가면서 기술이 점점 내 것이 되어가는 것이다

프로젝트에서 요구하는 것이 아니라서 진도는 좀 늦어질 것 같다

트위터, 단축 URL 프로세스 조사

Posted in 모바일 // Posted at 2010. 7. 2. 15:51
728x90

트위터를 보면 글에 인터넷 주소 링크를 심심찮게 볼 수 있다
그리고 대부분의 링크 주소는 꽤 심플하다

그런데 링크를 클릭해서 넘어가보면 다른 주소, 원래의 긴~ 주소 페이지로 이동한다
그럼 긴 URL 을 짧은 URL로 매핑 시켜주는 무엇인가가 있다는 예기인데...
트위터가 제공하는 걸까? 아니면 실제 컨텐츠 제공자가 지원하는 걸까?

팀장님으로 부터 조사 임무를 부여받고, 살펴 보게 되었다
아래는 조사 후 팀에 공유한 메일 내용이다

그나저나 이 조사 덕에 기존에 관심을 두지 않았던 트위터에 가입하게 되고 재미까지 느끼고 있다
조사하는 시간은 약 1시간 정도였는데, 트윗질은 하루 종일 했다는 ... ㅎ
------------------------------------------------------------------------------------------
아시다시피 트위터는 글 수 제한(140)이 있습니다

외부링크주소(URL) 역시 글 수에 포함되기 때문에 URL 단축 기법이 이용됩니다

URL을 줄일 수 있는 방법이 필요한데, 현재 트위터에서 사용되고 있는 대부분의
단축 URL 기법은 트위터와는 무관한 제 3자에 의해 제공됩니다

 

3자에 의한 URL 단축 서비스 제공

기본적으로 URL을 단축해 주는 시스템은 3자에 의해 제공됩니다

URL을 단축해 주는 사이트가 굉장히 많으며 트위터는 물론 기사원문을 제공하는 곳과도
완전히 별개의 사이트 입니다.
아래는 단축 URL 에 대한 서비스 흐름도 입니다


 

단축 URL 을 제공하는 사이트 목록입니다(꽤 많네요..)

http://bit.ly http://tln.kr http://durl.kr http://tinyurl.com http://yep.it http://foldurl.com http://is.gd http://j.mp http://tr.im http://url.fm

http://qurl.net http://url123.com http://ataja.es http://lin.kz http://lnk.in http://shurl.net http://simurl.com http://tinyclink.com http://urlcut.com http://w3t.org http://2u.lc

 

 

컨텐츠 공급자가 직접 제공하는 Fancy Url

팬시 URL 기법은 이전부터 존재 했던 방식으로 유저가 URL을 기억하기 쉽도록 서비스 사에서 직접 단축 url을 제공하는 방식입니다

예를 들어, 네이버 블로그의 경우 다음과 팬시 url 이 제공됩니다

실제 주소: http://blog.naver.com/NBlogMain.nhn?blogId=mkex&

Fancy Url: http://blog.naver.com/mkex/


이는 블로그 주소는 물론 게시물 주소도 해당됩니다. 서비스를 제공하는 업체에서 직접
제공하는 방식입니다

 

이 개념을 적용해 컨텐츠 공급자 차원에서 트위터를 겨냥해 단축 url 을 제공해 주는 경우도
있습니다.
국내 위키트리라는 뉴스 사이트에서는 기사 원문에 대해 단축 url 을 직접 생성 해 주며 글 내용도 자동 생성해 줍니다

 

아래 그림과 같이 기사 원문에서 트위터 이미지를 클릭하면,

 

다음과 같이 트위터 글 쓰기 폼이 열리며 단축 주소와 글 내용이 자동 생성되어 열립니다

 


 


오픈 API를 이용한 연동 가능

트위터는 기능에 대한 API 를 오픈하고 있어 이를 이용하면 외부 사이트에서 트위터로 글을
등록할 수 있습니다

현재 대표적으로 트위터에 이미지를 등록하는 http://twitpic.com  에서 트위터의 Open API 를 이용해 이미지를 등록해 줍니다. 이 방식을 활용하면 우리의 서비스 글을 트위터로 올리는
편리한 프로세스를 (제한적이지만) 만들 수 있을 것 같습니다

아래는 트위터에 이미지를 등록해 주는 사이트 목록입니다

 

http://twitpic.com http://www.yfrog.com http://www.mobypicture.com http://www.twitgoo.com http://tweetphoto.com

 

이상 기본적인 조사입니다

추가 확인 사항 있으면 회신해 주세요

HTML5 도입, 서버측 기술은 ?

Posted in 모바일/HTML5 // Posted at 2010. 6. 29. 18:38
728x90

모바일 웹 사이트 개발을 위해 HTML5를 선택하기로 했지만, 이는 클라이언트 기술일 뿐 막상
서버측 기술은 어떤걸 쓰야 할지 고민이다

문제는 웹 표준이다. 모든 모바일 장비에서 원활히 돌아가야 하기에 표준을 준수하는게 중요하다

ASP.NET 을 사용하자니 각종 서버 컨트롤과 웸폼, 뷰스테이트, 포스트백 등의 매커니즘을 위해
닷넷 프레임워크 차원에서 자동 생성하는 HTML 태그들이 마음에 걸린다.
아직 상세히 테스트를 해 보진 않았지만 예상하기에 대략 호환성에 문제가 있지 않을까 싶다

그러면 ASP냐? 이건 뭐.. MS 자체에서도 기술지원을 그만 둔 과거 기술이기에 시대를 거스르고
싶진 않다. 그러면 JSP, PHP? 이건 내가 잘 모르는 기술이다. 물론 이 환경이 꼭 필요하다면 개발자를
채용해서 담담하도록 하면 되지만, 이 기술들이 필수로 필요하다는 이유가 없다

그러면 ASP.NET 을 ASP 처럼 구현한다?
즉 서버 컨트롤이나 자동 바인딩, 포스트 백 등등 ASP.NET 웹폼 기술은 전혀 사용하지 않고 요청에 대한 처리만 담당하고 프리젠테이션 부문의 디스플레이는 일일이 수동으로 하는 것이다

뭐, 대략 가능은 하겠으나 그리 땡기지는 않는다

우연히 회사 동료랑 예기하다가 MVC 패턴을 고려하게 되었다
닷넷에서도 MVC 프레임워크를 철저히(?) 제공해 주며 이전 서버컨트롤의 난무함(?)이 없다고 하니
일단은 가장 적합한 모델이지 않나 싶다

닷넷이 제공하는 MVC 프레임워크에서 프리젠테이션 컨트롤들과 데이터 연동을 어떤 식으로 하는지
확인해 봐야 겠다