스마트폰 어플리케이션, 웹표준, 차세대 웹으로 달려가는 웹투로그

스마트폰 어플리케이션 기획하기 1. 사용 환경 파악

onemanbo — Fri, 27 Aug 2010 01:00:00 +0900

스마트폰 어플리케이션, 이른바 '앱스'를 기획한다는 것은 스토리 보드를 만들고 하는 식의 기술적인 면에서는 일반 웹 기획과 큰 차이가 없어 보입니다. 화면이 작기에 UI를 잘 구성하고, 메뉴 접근성을 높인다라던가 각 플랫폼적인 특성(애플에서 동영상은 MP4파일로 변환해야 실행이 가능하다류의 특성)을 파악해야 하는 면은 아주 구체적인 부분이라 기회가 되면 좀 더 나중에 설명할 수 있도록 하고 오늘은 먼저 스마트폰(모바일)개발시 사용 환경의 특성에 따른 주요 컨텐츠적 요소가 무엇인지 생각해 보겠습니다. 이는 사용자들이 과연 어떨 때 스마트폰을 이용하는가 하는 조건과 관계가 있습니다. 정리하자면 스마트폰을 이용하는 사람들은 다음 세 가지의 기본 조건 아래에 있습니다.

1. 이동하면서 사용한다
2. 항상 휴대하고 다닌다
3. Air time의 장난감이다.

즉, 스마트폰은 사람들이 항상 휴대하며 이동 중에 이용하는데, 대개가 가장 많이 이용하는 시간이(스마트 오피스를 이용하는 사람을 제외하고) 쉬는 시간인, 어른을 위한 컴퓨터 장난감이라는 것입니다. 뉴스나 트위터를 하는 행위 또한 반드시 해야하는 일은 아니므로 여가 시간, 이동 시간을 때우는 행동이라할 수 있습니다. 스마트폰 어플리케이션을 기획할 때 기획자는 사용자가 이러한 환경에 처해있다는 것을 먼저 머리속에 꼭 집어 넣고 있어야 합니다.

이러한 환경을 검토하고 스마트폰 어플리케이션을 기획할 때 해당 어플리케이션이 가지고 있고 가져야할 필수 컨텐츠적인 속성은 다음 세가지라고 생각합니다.

물론 일반적으로는 위의 세가지 요소 가운데 한 두가지만 극대화시켜서 기획되게 될 것입니다. 하지만 예를들어 정보 전달을 중시하는 스마트폰 앱스지만 거기에 오락적 성격과 생활 중에 빈번히 이용하는 요소를 곁들인다면 금상첨화겠지요? 즉, 이 세가지 요소는 각자 독자적인 특성들을 갖고 있지만 세 가지의 특성이 복합적으로 작용할 때 그 스마트폰의 활용도와 효과가 극대화된다고 할 수 있습니다.

<정보형 어플의 사례>

첫번째 정보형 어플의 경우는 대표적인 사례가 뉴스형태의 어플일 것입니다. 최근 출시되어 인기를 얻고 있는 메뉴판 닷컴의 쿠폰 어플도 정보형에 가깝습니다. 일기예보나 건강보험공단의 건강 관련 정보 서비스도 정보를 제공해주는 어플입니다. 모두 유용한 정보를 제공해 줌으로써 어플의 가치를 갖습니다.

<오락형 어플의 사례>

두번째 오락형 어플의 경우는 말그대로 오락들이 대표적입니다. 앱스 다운로드의 1위가 대부분 게임이라는 것은 사람들이 스마트폰을 통해 Killing time을 하는 경우가 많다는 것의 방증입니다. 이 오락형은 다양한 형태의 변형이 가능한데, 월드컵 시기의 '부부젤라'어플이나 맥주 원샷류의 프로그램, 닮은꼴 찾기 같은 프로그램들은 말그대로 즐기는 앱스입니다. 게임을 개발할 것이 아니라면 이런류의 개발은 단기간의 이벤트성(광고)을 가진다고 할 수 있습니다.

<생활형 어플의 사례>

세번째 생활형의 경우는 말그대로 생활에 필요한 각종 정보와 기능들을 제공해주는 것입니다. 정보형과 약간 겹치는 부분은 있으나 다이어트 도우미나 생리주기 계산, 가계부, 지하철 또는 버스정보 제공과 같은 앱스들은 생활 중에 지속적으로 사용할 수 있도록 해주는 기능들을 가지고 있습니다. 이것은 먼저 설명한 사용행태 가운데 '이동성'과 '휴대성'이 이와같은 앱스를 가능하게 만든 것으로 이해할 수 있습니다.

정리하자면 이와같이 스마트폰 어플리케이션을 만드는 데 있어 자사, 혹은 자신의 기획 요소가 스마트폰의 사용환경에 걸맞는지, 그리고 "정보형+오락형+생활형" 특성을 적절하게 잘 섞었는지를 생각해 보는 것은 기초 기획에 있어 앱스의 성공에 큰 도움을 주게 될 것입니다.

모바일 웹 VS 모바일 앱 논쟁은 이제 시작

onemanbo — Wed, 25 Aug 2010 05:00:00 +0900

스마트폰으로 컨텐츠가 제작되기 시작하면서 실무선에서 고민해야할 문제는 스마트폰용 웹을 만들 것인가, 앱을 만들 것인가 일 것입니다. 이 질문에 대한 이해에는 약간의 사전 지식이 필요하므로 (불필요한 분들도 많겠지만) 조금 설명을 하고 지나가겠습니다.

1. 모바일 앱

앱은 말그대로 모바일용 어플리케이션입니다. 줄여서 '앱'이라고 칭하고 있죠. 스마트폰용 OS에서 최적화되어 돌아가는 프로그램입니다. 대다수가 쓰는 데스크탑과 노트북의 윈도우 OS에 한글/오피스/게임과 같은 '커다란 앱'이 돌아가는 것처럼 말이죠. 이 앱들은 윈도우 OS에 최적화되어있습니다. 만일 컴퓨터 OS가 리눅스라면 윈도우에서 돌아가는 대다수의 어플리케이션들이 실행되지 않습니다. 지금까지 데스크탑과 노트북은 사실상 윈도우 OS가 모두 장악했으므로 이러한 문제가 거의 발생하지 않았습니다. 그런데 손에 들고 다니는 컴퓨터인 스마트폰에 와서는 얘기가 좀 달라집니다. 스마트폰을 제작하는 회사가 각각의 스마트폰용 OS프로그램을 깔고 스마트폰을 판매하기 시작하여 한 스마트폰에서 돌아가는 앱이 다른 스마트폰에서는 돌아가지 않는 '놀라운(!)' 불편함이 발생하는 것이지요. 바야흐로 나타난 스마트폰 춘추전국시대가 벌어지면서 생겨난 일입니다.

<스마트폰용 앱은 윈도우 앱처럼 바탕화면에 아이콘으로 표현되어 누르면 실행이 됩니다>

누구의 불편함이냐구요?
사용자도 사용자겠지만 사실 앱을 개발하려는 서비스 공급자에게 가장 불편한 일입니다.
하나의 기획의 서비스나, 기존 서비스를 모바일 앱으로 제공하려면 애플용 앱, 안드로이드용 앱, 윈도우용 앱, 바다용 앱... 이렇게 다 만들어 줘야할지도 모르는 상황이 발생해 버렸으니까요. 그 제작비와 유지비가 만만치 않은 것입니다.

물론 이런 불편함을 개선하고자 어플리케이션 퍼블리싱을 통합할 OS통합형 플랫폼들을 개발하려는 시도가 국내외에서 진행되고 있지만 국내의 경우는 가장 많은 활용도가 있는 애플이 통합 플랫폼에서 제외된 상태이고, 먼저 시작했다는 해외에서는 솔직히 말씀드려 아직까지 어떻게 돌아가고 있는지 조차 잘 모르겠습니다. 아직 요원한 것으로 보입니다.

2. 모바일 웹

여기서 스마트폰 전용웹의 필요성이 나옵니다. 물론 이 웹 또한 각 OS업체의 브라우저마다 다르게 표현되므로 똑같은 문제가 발생합니다. 윈도우 익스플로어 브라우저에서 잘 돌아가는 플래시 프로그램이 애플의 사파리에서는 안돌아가는 현상이 발생하는 것이죠. 그런데 여기서는 문제가 다르게 해결될 수 있습니다. 웹표준 개발이 바로 그것입니다. 모든 브라우저에서 호환될 수 있게 웹표준을 지켜서 모바일 웹을 개발하게 되면 어떤 모바일 웹 환경에서도 다 똑같이(아주 약간은 다릅니다만) 서비스를 제공할 수 있는 것이지요.

<뜨아.. 스마트폰 접근시 자사 서비스가 이 모양이면 장사 되겠습니까>

<이렇게..스마트폰용 웹을 만듭시다>

인터넷에서 정보를 제공하는 서비스를 하는 업자라면 즉, 웹서비스를 하는 업자라면 굳이 자신의 서비스를 '앱'으로 만들어봤자 껍데기만 '앱'이지 안에 메뉴나 표현은 모두 '웹'과 다를 바가 없으므로 굳이 자사 서비스를 '앱'으로 만들 필요가 없습니다. 좀 있어 보이고 싶어 "우리도 '앱'서비스를 한다!"고 외치고 싶지 않다면요. 비용대비 효과 면에서 자금력이 있는 기업이 아니라면 어플리케이션을 각각의 플랫폼별로 만들 것이 아니라 웹표준을 지키는 스마트폰용 웹페이지 하나만 만들어 주면 되는 것이지요.(제작 비용은 정말 엄청난 차이가 있을겁니다)

저는 이전에 "공공기관용 앱스, 그 방향은?" http://v.daum.net/link/6592023 이라는 포스트에 이런 언급을 해놨습니다.

대부분 공공기관은 앱(App)을 만들필요가 없다. 그냥 '스마트폰 전용 풀브라우징 미니웹'을 제공하라.

공공기관 홈페이지에 나오는 서비스들이 대개가 국민들에게 기본 정보를 제공하는 것이기에 이 수준의 서비스를 스마트폰에서 제공하려는 데 굳이 '앱'을 개발할 필요가 있겠느냐 하는 것입니다. 예산 낭비인 것이죠.

요즘 m.daum.net/m.naver.com과 같이 스마트폰용 웹사이즈에 맞춘 작은 스마트폰용 웹을 웹표준에 맞춰 하나만 개발해 놓으면 그게 안드로이드폰이든 윈도폰이든 애플폰이든 다 들어갈 수 있게 됩니다. 게다가 앱처럼 바탕화면에 아이콘도 깔아놓을 수 있으니 뭐, 사실 앱과 웹의 차이가 거의 없는 것이나 다름없다고 할 수 있겠습니다. 차이가 있다면 '웹'은 네트워크가 반드시 필요하다는 것이고 어떤 '앱'은 인터넷이 연결되지 않더라도 사용할 수 있다는 것인데, 대부분의 스마트폰 사용자가 3G통신이 가능하므로 이 문제는 지엽적인 문제라고 할 수 있겠습니다.

경우에 따라 제 설명이 어려울 수도 있겠다 싶어, 정리하는 질문/답으로 글을 마무리할까 합니다.(물론 답은 매우 주관적인 제 의견입니다)

# 앱을 만들어야 할까, 웹을 만들어야 할까?

자사 핵심서비스가 무엇인지 먼저 명확히 밝히고, 해당 서비스가 스마트폰의 주요 특징(이동형/GPS/LBS/사진과영상의활용/킬링타임 등)과 연결되어 파급력있는 효과를 낼 수 있는지 판단하여 YES면 앱을 만들고 NO면 굳이 만들 필요가 없다고 생각함. 자사 핵심서비스가 웹형태로 전달 가능한 것이라면 모바일 웹을 만들어 제공하는 것이 비용 및 관리 면에서 훨씬 효과적임

# 스마트폰용 앱을 만든다면 몇 개나 만들어야 할까?

"반드시 만들어야 한다"는 결론을 갖고 있다는 전제하에, 현 단계에서는 애플과 안드로이드용 앱 2개를 만드는 것이 낫고 한 개만을 개발할 예산을 갖고 있다면 현재는 애플 앱을 개발하는 것이 나음. 단, 장기적으로는 안드로이드용 앱 개발도 필요하다고 판단됨. 윈도우나 아직 오픈되지 않은 삼성의 '바다'등의 OS용 앱은 추후 스마트폰 시장의 전개정도와 자사 기존 앱들의 효과를 판단하여 최소 1년 정도 후에 판단해도 늦지 않다고 봄

아이폰 개발, 배경이미지를 만들어봅시다!

onemanbo — Tue, 10 Aug 2010 16:28:58 +0900

오늘은 아래와 같은 화면을 XCODE로 만들어 보도록 하겠습니다.

오늘은 탭바는 만들지 않겠습니다.
탭바를 만들었다는 전제 조건하에 위화면을 구성해 보겠습니다.

File > New Project 메뉴를 클릭하면 아래와 같은 화면이 나타 납니다. Window-based Application 타입을 선택한 후 오른쪽 하단의 Choose를 클릭하여 다음 화면으로 넘어 갑니다.

생성할 프로젝트명은 원하시는걸로 입력하세요(ex, bgex)
프로젝트 이름까지 입력하시고 나면 아래와 같은 화면을 접하실 수 있습니다.
(다른 분들은 저와 살짝 다르게 보일 수 있습니다. 단순한 화면 구성의 차이이니 이 프로젝트를 하시는데 큰 문제는 없습니다.)

여기까지는 기본 프로젝트를 만드는 단계이고 이제 이 프로젝트에서 쓰일 이미지 파일들을 Resources 폴더로 넣도록 하겠습니다.

오른쪽의 Finder 에서 원하는 이미지를 선택 한 후 Resources 폴더로 드래그 앤 드롭 합니다. 그러면 창이 하나 뜨는데 copy item into ~ 이부분을 체크 하시고 Add 버튼을 눌러 주세요.

이제 Resources 폴더에 있는 MainWindow.xib 파일을 더블클릭하여 인터페이스 빌더를 열고 Library 창에서 Image View를 선택한 후 Window 창에 끓어다 놓습니다. 가운데 있는 창에서 자모양의 아이콘을 선택하고 가로와 세로의 길이를 위와 같이 지정해 줍니다.

왼쪽 Window 창에서 UIImageView를 선택하시고 오른쪽 상단탭중 젤 왼쪽에 있는 탭을 선택하신 후 image의 오른쪽에 있는 화살표를 눌러 좀전에 넣어둔 이미지 중 menu_bg.png 파일을 선택 합니다.

Background 는 선택을 하신 후 Opacity를 0으로 처리 하시면 됩니다. 지금까지 잘 따라하셨다면 아래와 같은 화면이 나타나고 이제 그 위에 버튼 이미지들을 올려 놓도록 하겠습니다.

Library 창에서 Round Rect Button을 Window 창으로 끌어 놓고 가운데 있는 인스펙터 창에서 Background의 이미지를 menu1.jpg로 선택을 해 줍니다.

위와 같은 방식으로 나머지 두개도 처리를 합니다.

이제 마지막 남은 전체에 백그라운드를 지정하는 화면 입니다. bgexAppdelegate.m 파일을 여신 후 위와 같이 입력을 하시면 됩니다.
소스코드 :
window.backgrondColor = [[UIColor alloc] initWidthPatternImage:[UIImage imageNamed:@”bg.jpg”]];

이제 완료 되었으니 한번 실행해 보시죠. ㅋㅋ 짜잔~!!!

CSS 선택자(selector)에 대해서 정리해봅니다. 4

onemanbo — Fri, 09 Jul 2010 13:56:14 +0900

6. 선택자 조합

1) 하위 선택자

가장 많이 쓰이는 방법이죠
상위요소가 포함하는 하위요소에 스타일을 지정하고자 할때 쓰이며, 선택자와 선택자 사이에 공백으로 구분합니다.

<div>
<p>div가 아닌 p요소에 적용됩니다.</p>
</div>

2) 자식 선택자

이방법은 익스6과 구버전에선 지원하지않습니다.
하위선택자와 다른점은 상속이 되질 않는다는것입니다.

<style type="text/css">
.parent > p {color:red;}
</style>

<div class="parent">
<p>자식선택자</p> <- 이곳에만 적용이 되겠죠
<div>
<p 하위선택자</p>
</div>
</div>

3) 인접 선택자

같은레벨에서의 요소중에 첫번째요소 + 두번째요소 라고 생각하시면됩니다.

<style type="text/css">
h1 + h2 {color:gray;} : h2요소에 적용됩니다.
</style>

<h1>첫번째요소</h1>
<h2>두번째요소</h2> <- 이곳에만 적용이 되겠죠
<p></p>
<h2>세번째요소</h2>
<p></p>

h2가 같은레벨에 두군데가있지만, 첫번째요소와 인접한 요소에만 적용이되지요.

7. 선택자 그룹화

다수요소에 동일한 선언을 하고싶을때 콤마(,)로 구분하여 지정할수있지요
div>p, p.note {color:blue;} <- 두가지 다른요소에 색상을 파랑으로 한번에 지정해줄수있어요~

아이폰 개발, 좌표값과 주소 구하기

onemanbo — Tue, 29 Jun 2010 10:56:32 +0900

아이폰 어플중에서 지도에 자기 좌표가 찍히고 주소가 나오는 어플들을 많이들 보셨을 텐데요.
오늘은 좌표값과 주소 구하는 방법에 대해서 알아보겠습니다.

이 기능은 참 많은 어플들을 통해서 활용이 가능할 것 같습니다.
우선 작업목표를 정해보았습니다.

<좌표값으로 현재 주소를 검색하는 어플을 만들기 위한 순서>
1. 새 프로젝트 (Window-based Application)를 생성한다.
2. 새 프로젝트에 뷰를 하나 추가한다.
3. 추가한 뷰에 검색된 결과를 보여줄 화면(Label,Button등등)을 구성한다.
3. 현재 좌표값을 구한다.
4. 구해진 좌표값을 화면에 뿌린다.
5. 구해진 좌표값에 해당하는 주소를 구글맵에서 받아온다.
6. 받아온 결과를 화면에 뿌려준다.

막상 써 놓으니 음... 생각보단 간단하네요~!!
자~~ 이제 목표는 정해졌으니 하나씩 해보면 됩니다.ㅋ

이제 작업목표에서 정한 순서로 진행과정을 살펴보겠습니다..

시작해 볼까요~

1. 새 프로젝트를 생성합니다.
XCode에서 File->New Project->Window-based Application을 클릭하세요.
(아시는 분들도 많겠지만 혹시 모르는 분도 있을까 해서 아래 이미지 참조)

2. 새 프로젝트를 윈도우 베이스로 만들었지만 뭔가 보여줄 화면이 필요합니다.
화면용 파일을 하나 프로젝트에 추가합니다.
XCode화면의 Groups&Files 영역에서 마우스 오른쪽 클릭해서 Add->New File을 합니다.

3. 이제 화면도 만들었습니다.
Command+R 키로 그냥 한번 실행해봅니다. 아무것도 없습니다..
화면에 뭔가 만들어주어야 합니다. 다른 것을 사용해도 되겠지만 이번 작업에서는 단순하게 Label로 모두 처리하도록 합니다.

아래화면 참고해서 같이 만들어보죠.

참고로 화면에 구성된 Label들은 소스파일의 IBOutlet로 선언된 변수들과 연결해주어야 합니다.

4. Label과 아웃렛과의 연결 하셨다면 이제 좌표값을 구해보겠습니다.
좌표값을 구하기 위해서는 CoreLocation.framework을 현재 프로젝트에 추가해주어야 합니다.
추가했나요? 이젠 좌표구하는 부분 소스를 보겠습니다.

=============================================================================================

/*
viewDidLoad 이벤트에 CLLocationManager를 생성해서 실행줍니다.
그러면 #pragma mark - 이하 부분이 자동적으로 실행됩니다.
핵심 소스가 여기입니다.
*/

- (void)viewDidLoad {
self.locationManager = [[CLLocationManager alloc] init];
[locationManager startUpdatingLocation];
locationManager.delegate = self;
locationManager.distanceFilter = kCLDistanceFilterNone;
locationManager.desiredAccuracy = kCLLocationAccuracyBest;
}

#pragma mark -
#pragma mark CLLocationManagerDelegate Methods
- (void)locationManager:(CLLocationManager *)manager didUpdateToLocation:(CLLocation *)newLocation fromLocation:(CLLocation *)oldLocation {

if (startingPoint == nil)
self.startingPoint = newLocation;

NSString *latitudeString = [[NSString alloc] initWithFormat:@"위도 : %g°", newLocation.coordinate.latitude];
latitudeLabel.text = latitudeString;
[latitudeString release];

NSString *longitudeString = [[NSString alloc] initWithFormat:@"경도 : %g°", newLocation.coordinate.longitude];
longitudeLabel.text = longitudeString;
[longitudeString release];

}

- (void)locationManager:(CLLocationManager *)manager didFailWithError:(NSError *)error {

NSString *errorType = (error.code == kCLErrorDenied) ? @"Access Denied" : @"Unknown Error";
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Error gettingg location from Core Location" message:errorType delegate:nil cancelButtonTitle:@"Okay" otherButtonTitles:nil];
[alert show];
[alert release];

}
==============================================================================================

5. 좌표값을 받아서 구글맵에서 주소를 조회하는 부분을 보겠습니다.
1) 구글맵에 주소 조회 쿼리를 보내서 결과(XML)를 받아오는 기능을 구현합니다.
2) 받아온 결과(XML)을 파싱하는 기능을 구현합니다.

위에 1), 2)는 유기적으로 함께 구동됩니다.

==================구글맵에 주소 조회 쿼리 보내기=========================

-(IBAction)loadXMLData{
self.xmlUrl = @"http://maps.google.com/maps/api/geocode/xml?latlng=37.630478,127.090199&language=kr&sensor=true";
xmlConnection = [[NSURLConnection alloc]
initWithRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:xmlUrl]]
delegate:self];

if (xmlConnection == nil)
NSLog(@"Connect error");
else
[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;

xmlParseData = [[NSMutableArray alloc] init];
xmlValue = [[NSMutableString alloc] init];
currectItem = [[NSMutableDictionary alloc] init];
receiveData = [[NSMutableData alloc] init];
}

#pragma mark URLConnection delegate methods

- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response {
NSLog(@"Receive: %@, %@, %d",
    [response URL],
    [response MIMEType],
    [response expectedContentLength]);
}

- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error {
NSLog(@"%@", [error localizedDescription]);
[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
}

- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data {
//NSString *str = [[NSString alloc] initWithData:data encoding:0x80000000 + kCFStringEncodingDOSKorean];
//NSData *data1 = [str dataUsingEncoding:NSUTF8StringEncoding];
[receiveData appendData:data];
}

- (void)connectionDidFinishLoading:(NSURLConnection *)connection {

//NSString *str = [[NSString alloc] initWithData:receiveData encoding:0x80000000 + kCFStringEncodingDOSKorean];
//NSData *data = [str dataUsingEncoding:NSUTF8StringEncoding];
//NSXMLParser *parser = [[NSXMLParser alloc] initWithData:data];
NSXMLParser *parser = [[NSXMLParser alloc] initWithData:receiveData];

[parser setDelegate:self];

[parser parse];

[parser release];

[[UIApplication sharedApplication] setNetworkActivityIndicatorVisible:NO];

[xmlConnection release];
[receiveData release];
}

================================조회 결과 XML을 파싱하여 화면에 보여주기================================

#pragma mark XMLParse delegate methods
//#pragma mark NSXMLParser delegate methods

- (void)parserDidEndDocument:(NSXMLParser *)parser {
self.clickBtn;
}

- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName attributes:(NSDictionary *)attributeDict {
if ([elementName isEqualToString:@"address_component"])
elementType = etItem;

[xmlValue setString:@""];
}

- (void)parser:(NSXMLParser *)parser didEndElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName {

if (elementType != etItem)
return;

if ([elementName isEqualToString:@"long_name"]) {
[currectItem setValue:[NSString stringWithString:xmlValue] forKey:elementName];
} else if ([elementName isEqualToString:@"short_name"]) {
[currectItem setValue:[NSString stringWithString:xmlValue] forKey:elementName];

} else if ([elementName isEqualToString:@"address_component"]) {
[xmlParseData addObject:[NSDictionary dictionaryWithDictionary:currectItem]];
}
}

- (void)parser:(NSXMLParser *)parser foundCharacters:(NSString *)string {
if (elementType == etItem) {
[xmlValue appendString:string];
}
}

좀 부족했지만 위 설명을 잘 수행한다면 다음과 같은 화면이 나오게 됩니다...(제가 사는곳입니다. ㅎㅎㅎ)

부족한 부분은 첨부된 소스 보면 이해가 될겁니다. 파일첨부합니다~!! 화이팅하세요~

FindArea.zip

아이폰 개발시 유용한 탭바 커스텀(Custom Tab Bar) 구현하기

onemanbo — Fri, 25 Jun 2010 15:32:03 +0900

요즘 잘나가는 앱들을 살펴보면 이쁜 배경에 이쁜 버튼 ..
정말 우리 나라 사람들은 디자인을 참 중요히 여기는 것 같습니다.

저만 해도 같은 기능이라도 기본 베이직 스킨보다는 이쁜 배경을 가진 앱을 더 선호하게 되더라고요.

그래서 오늘은 Tab Bar 를 커스텀 구현하는 내용을 포스팅 하도록 하겠습니다.
제가 지금 부터 하는 커스텀은 약간의 뺑기(?) 라고 할수 있어요. 눈 속임이랄까, 정말 탭바 버튼 하나하나에 커스텀을 하는게 아니고 배경 자체를 덮어서 오른쪽 클릭하면 배경 탭바이미지1를 보여주게하고 왼쪽 클릭하면 2 배경탭바 이미지를 보여주게하는 내용입니다.

탭바 전체를 덮어야하기 때문에 아래 와 같은 이미지 2개가 필요합니다. (버튼이 늘어날수록 물론 이미지는 더 필요하겠죠?

별로 어렵지 않습니다. 후다닥 만들어 보겠습니다.
프로젝트 새로 선택하셔서 Tab Bar Application 선택해서 적당한 프로젝트 명으로 만들어주세요. 저는 TabBar 라고 만들었어요.
그리고 탭바 배경이미지가 될 2개의 이미지를 리소스 폴더에 넣어주시고요. ( 이미지는 소스파일 참고하세요 )

그리고 소스에 아래와 같이 프로그래밍 해주세요 . 설명 참고하시면 이해 가실거예요.

TabBarAppDelegate.h

#import <UIKit/UIKit.h>

@interface TabBarAppDelegate : NSObject <UIApplicationDelegate, UITabBarControllerDelegate> {
UIWindow *window;
UITabBarController *tabBarController;
UIView *tabBarBg;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;
@property (nonatomic, retain) IBOutlet UIView *tabBarBg;

@end

TabBarAppDelegate.m

#import "TabBarAppDelegate.h"

@interface UITabBarController (private)
- (UITabBar *)tabBar;

@end

@implementation TabBarAppDelegate

@synthesize window;
@synthesize tabBarController;
@synthesize tabBarBg;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

CGRect frame = CGRectMake(0, 0, 480, 49); //탭바 아래쪽 위치 좌표

tabBarBg = [[UIView alloc] initWithFrame:frame];
UIImage *tabBarBackgroundImage = [UIImage imageNamed:@"MENU1.png"]; //이미지를 변수에 저장

UIColor *color = [[UIColor alloc] initWithPatternImage:tabBarBackgroundImage]; //변수에 저장된 이미지를 UIColor 형 타입으로 저장

[tabBarBg setBackgroundColor:color]; //위에서 선언인 UIView 에다 이미지를 올리기
[color release];
[[tabBarController tabBar ] insertSubview:tabBarBg atIndex:0]; //탭바 atIndex 0번째에 위에 이미지 올린 UIView 집어넣음

// Add the tab bar controller's current view as a subview of the window
[window addSubview:tabBarController.view];
[window makeKeyAndVisible];

return YES;
}

// 탭바 선택할 때 호출되는 곳 (이 이벤트를 쓰기 위해서는 탭바를 delegate 로 지정해야해요 이건 아래쪽에 그림과 함께 설명해드릴게요)
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {

NSInteger tabIndex = tabBarController.selectedIndex; //현재선택된 탭바 index를 인트형 변수에 할당

if (tabIndex == 0) { //0번째 탭이 선택되면 이미지 를 MENU1.png로 변경

UIImage *tabBarBackgroundImage = [UIImage imageNamed:@"MENU1.png"];

UIColor *color = [[UIColor alloc] initWithPatternImage:tabBarBackgroundImage];

[tabBarBg setBackgroundColor:color];
[color release];
[tabBarBackgroundImage release];

}else { //그 외 선택되면 이미지 를 MENU2.png로 변경
UIImage *tabBarBackgroundImage = [UIImage imageNamed:@"MENU2.png"];

UIColor *color = [[UIColor alloc] initWithPatternImage:tabBarBackgroundImage];

[tabBarBg setBackgroundColor:color];
[color release];
[tabBarBackgroundImage release];

}

}

- (void)dealloc {
[tabBarController release];
[tabBarBg release];
[window release];
[super dealloc];
}

@end

소스 자체는 어렵지 않죠? ^^
근데 소스 중간에 설명했듯이 didSelectViewController 이 이벤트를 사용할려면 tabBar가 gelegate로 지정되어 있어야 쓸수 있어습니다. 아래 와 같이 연결해주면 tabbar 가 gelegate로 지정이 됩니다.

그럼 실행해 볼까요?

참 쉽죠잉~~

소스파일 첨부합니다 ^^

TabBar.zip

CSS 선택자(selector)에 대해서 정리해봅니다. 3

onemanbo — Fri, 04 Jun 2010 11:25:02 +0900

5. 가상요소와 가상클래스-2

3) first-line, first-letter 가상요소

<style type="text/css">
body {font-size:12px;}
h2 {color:#666;}
.line p:first-line {font-size:12px; font-weight:bold; color:#44C4DF; width:100%;}
.letter p:first-letter {color:#E7963D; font-size:22px; text-indent:4em; font-weight:bold;}
</style>

문자 그대로 이해를 하시면 가장 편할듯 하네요.
first-line은 문단의 첫번째 줄에 적용이 되는 것 이구요,
fist-letter는 첫 글자에 스타일이 적용되는 것 입니다.
문제의 IE6에서도 적용이 되네요~

<h2>first-line 가상요소</h2>
<div class="line">

<p>옛날에 금잔디 동산에 메기 같이 앉아서 놀던곳 물레방아 소리 들린다 메기야 내 희미한 옛생각 동산 수풀은 우거지고 장미꽃은 피어 만발하였다 </p>

</div>
<h2>first-letter 가상요소</h2>
<div class="letter">

</div>

4) before, after가상요소

<style type="text/css">
body {font-size:15px; line-height:150%;}
.cnt p:before {content:"노래시작" ; color:red;}
.cnt p:after {content:"노래끝" ; color:red;}
</style>

<div class="cnt">
<p>옛날에 금잔디 동산에 메기 같이 앉아서 놀던곳 물레방아 소리 들린다 메기야 내 희미한 옛생각 동산 수풀은 우거지고 장미꽃은 피어 만발하였다
물레방아 소리 그쳤다 메기 내 사랑하는 메기야 지금 우리는 늙어지고 메기 머린 백발이 다 되었다 옛날에 노래를 부르자 메기 내 사랑하는 메기야</p>
</div>

문단의 처음과 끝에 가상컨텐츠가 적용되어있는것을 볼수있습니다.
IE6,7은 안되고 IE8부터 인식합니다.

이번 6.2 지방 선거는 트위터 선거였다

onemanbo — Thu, 03 Jun 2010 10:26:21 +0900

국내 트위터 사용자가 대략 63만을 돌파했다고 한다. 그것도 선거 전후로 이틀만에 8만이 늘어났다고 하니 선거와 트위터의 연관관계가 없다고 그 누구도 말할 수 없는 상황에 이르렀다.

트위터 국내 가입자 63만 돌파 ( http://wikitree.co.kr/main/news_view.php?id=9558 )

미투데이가 네이버 등빨을 안고 100만을 돌파했다고는 하지만 청소년 층이 많은 미투데이와 청년 중장년층 위주의 트위터는 사용자층이 확연히 다르다는 점에서 트위터는 보다 더 사회적 영향력을 가지고 있다고 할 수 있다.

<트위터를 통해 선거를 독려하는 개그맨 김제동님입니다. 이밖에 다양한 연애인들의 트윗홍보가
인상깊었던 선거입니다. (출처=김제동님 트위터) >

아침부터 트위터에는 선거 결과에 대한 자축으로 타임라인이 가득 채워져 있다. 트위터 사용자들은 높은 선거참여율을 만든 데에 대한 만족감, 여당의 선거 참패에 대한 기쁨을 표현하고 있다. 선거 전날과 당일날까지 타임라인에는 선거 촉구에 대한 트윗밖에 없었다 해도, 독촉 및 인증샷으로 채워져 있었다 해도 과언이 아니다. (물론 현 여당 성향의 트윗 유저도 있었을 것이나 그들은 단순히 선거 독려 수준의 트윗은 있었을지언정 자기 정치색을 표현하면서 선거를 독려하는 트윗은 거의 하지 않았던 것 같다)

<선거가 끝난 하루뒤에도 선거에 관련된 트윗들은 끝없이 올라오고 있습니다.>

아직 트위터 사용자 수가 전체 인터넷 사용자 수에 비해 한 줌 정도 밖에 되지 않더라도, 아이폰 사용자가 전체 핸드폰 사용자 수에 비해 이제 갓 80만을 넘은 수준이더라도 정부 여당은 그 파장이 어느정도인지를 생각해 보아야 할 것이다.

<화가 임옥상님은 20대 투표인증샷을 통해 트위터에 응모하면 판화 1000점을 선물하는 이벤트를 통해
투표를 독려했는데요,,본인의 사비를 털어, 10만명의 투표를 독려하려고 했다니,, 선관위보다 낫네요 ㅎㅎ>

아이폰은 고작 80만대로 대한민국의 무선인프라와 모바일 환경을 바꾸어 놓았다. 트위터 안에서의 선거 열풍은 그 미디어 성격으로 말미암아 80만 유저의 찻잔 속 태풍이 아니라 '온라인 상의 새로운 미디어 힘'으로 나타났다. 실제 데이터가 이들로 인해 어떻게 변하였을지 아직 알 수 없으나 이들의 활동이 실제로 이번 지방선거의 참여율을 높였으며 이들의 정치적 성향이 선거 결과에 영향을 미쳤음을 간과할 수 없을 것이다.

패한 쪽에 한 마디 하자면..
“ '트위터를 이용한 선거 운동'에 족쇄를 채웠던 그 시각과 이해 수준으로는
새로운 미디어 환경에서 지속적인 패배를 약속할 수 밖에 없다. ”

또한 이러한 실시간 SNS가 이번 선거를 통해
정치 환경에 새로운 견제 장치로 등장한 것임을 명확히 깨달아야 한다.

그리고 보다 더 근본적으로 '어떤 정치를 어떻게 해야하는지'에 대해 다시금 고민해야할 것이다.

CSS 선택자(selector)에 대해서 정리해봅니다. 2

onemanbo — Mon, 31 May 2010 15:57:58 +0900

5. 가상요소와 가상클래스-1

1) first-child가상 클래스

<style type="text/css">
.lyrics {font-size:12px; font-weight:bold; color:#44C4DF; width:500px;}
.lyrics p:first-child{color:#E7963D; font-size:15px; text-indent:1em;}
</style>

lyrics클래스의 자식요소중에 첫 번째 p요소에만 속성이 적용됩니다.
익스6이하버전에선 안되구요.
적절히 쓰면 불필요한 클래스를 사용하지않아도 되는 방법이죠~

2) 링크 가상 클래스
이 부분은 많이들 쓰는것이니 간단히 정의만 보겠습니다.

선언 순서에 유의해야합니다. link -> visited -> hover -> active -> focus 순으로 지정합니다.

[Objective-C의 객체 상속]

onemanbo — Fri, 28 May 2010 17:53:20 +0900

객체를 상속한다는 말은 모태가 되는 객체를 만들어 놓고 그 객체의 모든 것을 받아서 다른 객체를 만든다는 말입니다.
왜 그런짓을 할까요?

간단히 말해서 똑같은 코딩을 또 하기 싫어서 그렇지요..^^

- 간단한 예제로 객체 상속에 대해 알아보겠습니다.

TableView에 우리나라의 시도 목록을 뿌려주고 각각의 시,도를 클릭하면 해당 구,군의 목록이
다음 화면에 뿌려지는 것을 만들려고 합니다.
이런것을 만들때 필요한 주요기능은 아래 나열한 정도입니다.
---------------------------------------------------------------------------------------------------------
1. XML데이타를 Http로 받아오기
2. 받아온 XML데이타를 파싱하기
3. 파싱한 데이타를 TableView에 뿌리기
4. 목록 클릭하면 상세목록 뿌리기
---------------------------------------------------------------------------------------------------------

이때 시,도목록 뿌리는 로직과 구,군목록 뿌리는 로직은 공통되는 부분이 많습니다.
이런 공통되는 기능을 하나의 Global객체에 모두 구현해둔 다음 Global객체를 상속받아서
특수한 부분만 추가 구현된 시,도 목록 뿌리는 객체와 구,군 목록 뿌리는 객체를 만들어 보았습니다.

첨부된 소스파일을 참고하시기 바랍니다.^^

아 그리고 XML 데이타 포멧은 아래와 같습니다..

------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<data>
    <item>
        <name>강남구</name>
    </item>
</data>

------------------------------------------------------------------------------------------------------

testProj2.zip