터치커넥트

기본보기

목록보기

전체보기(88)

목록열기

광고공모전 정보~ KB국민카드의 꿈꾸는 광고인 시작~! | 강좌/활용팁

백승은 | 2013-04-17

세상은 바야흐로 경쟁의 시대!!
가수가 되는 것도 배우가 되는 것도
서바이벌이라는 경쟁에서 살아남아야 되는 시대!!

광고인을 꿈꾸는 사람들의 서바이벌 공모전
KB국민카드 『꿈꾸는 광고인』 이 시작되었는데,
입상 혜택이 상당히 매력적이어서 눈에 많이 띄네요!!

- KB국민카드 광고제작 파트너!
- 최우수 1명 광고대행사 입사!
- 총 상금 7천 8백만 원!

상금의 규모도, 광고대행사 입사라는 혜택도 매우 끌리지만,,
KB국민카드 광고제작 파트너가 된다면
내가 앞으로 쌓아갈 광고인으로서의 커리어에
정말 멋진 경력을 하나 추가할 수 있어
더욱 기대되는 공모전입니다.

아래 영상이 바로 『꿈꾸는 광고인』 1기인 <F5>란 팀이
KB국민카드 광고제작 파트너로 참여하여 제작한,
실제 TV 광고로 on-air 되었던 KB국민카드의 CF입니다~

이 광고를 보니
KB국민카드 『꿈꾸는 광고인』 에
더욱 욕심이 생기네요!!

다음은 KB국민카드 『꿈꾸는 광고인』 일정이에요!

4월 12일(금) ~ 5월 20일(월) 낮 12시
접수기간!

5월 24일(금)
1차 합격자 15개팀 발표!

5월27일(월) ~ 5월30일(목)
2차 면접심사!

5월 31일(금)
최종발표
=> 꿈꾸는 광고인 6개팀을 포함한 총 11팀 선정!

각 제출형태별로 양식이나 용량 제한이 있어서
실제 응모접수 전에 양식과 용량을 필히 참고하셔야 합니다!!
(KB국민카드 『꿈꾸는 광고인』 : http://www.facebook.com/kbcardggum)

그리고 모든 접수는 이메일로만 받아요!!
접수하실 때는 지원서와 작품 or 기획서를 메일로!!
(접수 이메일: kbcardggum@gmail.com)

참고로, 『꿈꾸는 광고인』 은
성별과 연령에 제한은 없지만
광고계에 종사하는 사람은 참여할 수 없는
미래의 광고인에게만 기회가 주어지는 공모전이에요!!

1인 이상 4인 이하 한 팀을 구성할 수 있고,
한 팀에서 여러 작품을 응모할 수 있어
다양한 아이디어로 많은 작품을 응모하면 합격 확률이 그만큼
높아지지 않을까 생각해 봅니다.

대한민국의 최대의
두뇌 서바이벌에 도전하라!!

KB국민카드 『꿈꾸는 광고인』의 카피처럼
정말 머리를 많이 굴려서 기발한 아이디어를 내 봐야겠어요!!
일단 무조건 도저언~!!!

응모 마감까지는 1달 넘게 남았으니,
충분히 시간을 두고 준비하면 좋은 결과가 있지 않을까요~?
광고인의 꿈을 KB국민카드 『꿈꾸는 광고인』 을 통해 다들 이뤄보자구요!
(http://www.facebook.com/kbcardggum)

덧글 0개

iPhone 어플리케이션 개발을 위한 준비 | 강좌/활용팁

운영자　 | 2010-03-31

iPhone 어플리케이션은 Xcode란 개발툴에서 코코아터치 프레임워크와 Objective-C 언어를 사용하여 개발합니다. 코코아 터치는 맥 OS X의 핵심 프레임워크인 코코아를 기본으로 아이폰/터치라는 모바일 기기의 특성에 맞추어진 iPhone 개발의 기본 API입니다.

그렇기 때문에 아이폰 어플리케이션 개발을 위해 기본적으로 알아야할 사항은 통합개발 환경인 Xcode와 인터페이스 빌더라는 툴의 사용법, Cocoa Touch 프레임워크, Objective-C 크게 세가지입니다. 이번에는 간단히 iPhone OS의 계층구조를 중심으로 iPhone 어플리케이션 제작을 위해 접근하는 방법에 대해서 알아 보겠습니다.

1. iPhone OS 계층 구조
아래의 그림은 애플에서 설명하는 아이폰 OS의 기술 계층입니다. 이에 대한 자세한 내용은 아이폰 개발자 센터의 iPhone OS Technology Overview란 문서에 잘 정리되어 있습니다.

가장 로우레벨의 Core OS부터 가장 상위단계인 코코아 터치까지의 계층구조입니다. 주로 하단은 API가 C로 제공되며 상위로 올라 오면서 Objective-C로 제공됩니다. 많이 사용되는 로우레벨의 API들은 상위단계에서 쉽고 편하게 사용할 수 있는 프레임워크로 제공됩니다. 간 계층의 간단한 설명은 아래와 같습니다.

1) Core OS
메모리/프로세서 관리, 파일 시스템, 네트워크, 각종 하드웨어 드라이버등, 운영체제 하단의 커널 레벨에서 제공하는 커널 API 입니다. 흔히 이야기하는 시스템 프로그래밍에 관련된 C를 기반으로 한 라이브러리를 제공합니다.

2) Core Services
Core Foundation, CFNetwork, SQLite, POSIX threads와 같은 파일입출력, 저수준 데이터 타입, 소켓등에 관련된 서비스입니다. Core OS 레벨에 비교적 쉽게 접근할 수 있는 API를 제공합며 대부분 C로된 프레임워크를 제공됩니다. 여기서 제공하는 많은 기능들은 상단 코코아터치의 Foundation Framework에서 Objective-C 프레임워크로 제공됩니다.

Core Foundation - 배열, 스트링, 날짜, URL, 로우레벨 데이터등 아이폰 어플리케이션을 위한 기본적인 C API를 제공합니다.
CFNetwork - BSD 소켓 및 HTTP, FTP 프로토콜등 네트워크에 쉽게 접근할 수 있는 API를 제공하는 프레임워크입니다.
Core Location - GPS, 주변검색등에 사용할 수 있는 사용자의 현재 위치(위도, 경도) 정보와 관련된 API를 제공하는 프레임워크입니다.
SQLite - 아이폰 어플리케이션에서 쉽게 사용할 수 있는 파일기반의 경량 데이터베이스 입니다. SQLite에 관련된 보다 자세한 내용은 이전 포스팅을 참조해 주세요.
XML - XML 파싱을 위한 libXML2 라이브러리를 제공합니다.

이외에 보안, 주소록등에 관련된 서비스를 제공합니다.

3) Media
비디오, 오디오, 2D/3D 그래픽, 에니메이션을 구현할 수 있는 API를 제공합니다. Objective-C 또는 C로된 API를 제공합니다.

Quartz - OS X의 벡터를 기반으로 한 그래픽 엔진입니다. 선과 도형을 그리고 이미지, 비트맵, PDF를 출력하고 색상, 위치에 관련된 C로된 API를 Core Graphic 프레임워크를 통해 제공합니다.
Core Animation - 각종 에니메이션과 시각효과를 제공하는 Objective-C로된 프레임워크입니다.
OpenGL ES - 게임등과 같은 고성능의 2D/3D 그래픽 출력을 위한 OpenGL ES 1.1에 기반한 C 프레임워크입니다. OpenGL ES를 사용한 게임은 이를 지원하는 다양한 모바일 플랫폼에서의 포팅을 쉽게 할 수 있습니다. 자세한 내용은 공식 홈페이지를 참조하시기 바랍니다.
Core Audio - 마이크를 통해 녹음하고 음악파일을 출력하고 각종 음향효과를 제공하는 C로된 오디오 관련 프레임워크입니다.
OpenAL - OpenGL ES와 유사한 개념의 크로스 플랫폼을 지원하는 게임등을 위한 고성능 3D 오디오 라이브러리입니다. 자세한 내용은 공식 홈페이지를 참조 하시기 바랍니다.
동영상 - mov, mp4, 3gp와 같은 각종 동영상 파일을 출력을 지원합니다. 이는 Objective-C를 기반으로 한 Media Player framework를 이용하여 손쉽게 접근할 수 있습니다.

4) Cocoa Touch
iPhone개발의 기본이 되는 계층으로 Objective-C를 기반으로 한 핵심적인 두개의 프레임워크를 가지고 있습니다. 사용자 인터페이스, 이벤트 처리등과 함께 위에서 언급한 로우레벨의 기술들을 보다 쉽게 사용할 수 있는 프레임워크를 제공합니다.

Foundation Framework - 배열, 스트링, 날짜 로우레벨 데이터등에 관련된 클래스를 제공하는 기본적인 프레임워크입니다. 위의 Core Foundation에서 제공하는 기본 API들의 Objective-C 레퍼 클래스를 제공합니다.
UIKit Framework -각종 컨트롤, 윈도우등의 UI, 이벤트 처리등 iPhone 어플리케이션의 사용자 인터페이스와 관련된 API를 제공하는 프레임워크입니다.

2. Mac or iPhone

Mac의 Cocoa와 iPhone의 Cocoa touch는 이름에서 부터 알 수 있듯이 매우 비슷합니다. 가장 큰 차이점은 역시 인터페이스에 관련된 부분으로 이와 관련하여 Mac에서는 AppKit이란 프레임워크를 iPhone에서는 UIKit이란 프레임워크를 제공합니다.

Foundation Framework는 거의 유사하지만 아이폰의 특성상 제거 또는 변경된 부분이 있습니다. 아이폰은 코코아 바인딩, Objective-C 2.0의 가비지 컬렉션, 애플스크립트, NSUndoManage등은 지원하지 않습니다.

개인적으론 시간이 충분하다면 맥에서 코코아 프로그래밍으로 시작한 후에 코코아 터치로 넘어가도 큰 어려움은 없을 것 같습니다.

3. C or Objective-C
대표적인 코코아 프로그래밍 서적인 Cocoa Programming for MAC OS X (번역본:코코아 프로그래밍)의 저자 아론 힐리가스는 그의 저서에서 아래와 같이 이야기 했습니다.

"C와 Java/C++같은 객체지향 언어를 알고 있다면 두시간이면 Objective-C를 마스터할 수 있다"

OOP와 프로그래밍 언어에 대한 개념만 있다면 Objective-C를 익히는 것은 쉽다라는 의미인 것 같습니다.

사실 어느 언어나 기본지식만 있으면 언어 자체를 익히는데는 그다지 어려움이 없습니다. 하지만 해당 플랫폼에 대한 지식과 핵심 라이브러리나 프레임워크를 배우는데 더욱 많은 시간을 소비해야 합니다. 아이폰도 Xcode, 인터페이스빌더의 사용법, OS X에서의 프로그래밍에대한 이해와 코코아 API를 배우는데 Objective-C 언어 자체를 배우는 것보다 더 많은 시간이 필요합니다.

1) C의 선행학습이 필요한가?
개발경험이 있으신 분들은 그동안의 경험을 바탕으로 어떻게 공부해야 할지 나름대로 방법이 있을 것입니다. 하지만 처음 시작하시는 분들은 Objective-C가 C를 기반으로 하고 있기 때문에, 반드시 C를 공부한 후에 Objective-C를 공부해야하는 지에 대해 질문을 하시는 분들이 있습니다.

이 부분은 아마 많은 분들이 차이가 있을 것 같습니다. 제 생각은 "반드시 필요하지는 않다" 입니다. Objective-C는 C에서 확장된 슈퍼셋이라고 하지만 Objective-C를 공부하기 위해 반드시 C를 먼저 공부해야 할 필요는 없을 것 같습니다.

C를 이해한 후에 Objective-C를 시작하는 것이 이론상으로도 맞고, 정상적인 방법일 것입니다. 하지만 대부분의 Objective-C 서적이나 메뉴얼에는 기본적인 문법에 대한 설명이 있고, 전문 C 서적보다는 범위가 작습니다. Objective-C를 사용할 수 있을 만큼 최소한의 문법만 알고 시작하는 것이 더 접근이 쉬울 것 같습니다.

아래는 iPhone 어플케이션의 샘플 소스중에 한부분입니다. 기존에 C/C++ 개발자들도 이런 Objective-C의 문법을 처음 보게되면, 이것이 C와 관련이 있고 C에서 확장되었다는 사실이 잘 이해가 가지 않을 것입니다.

처음 시작하시는 분이라면 차라리 이런 혼란을 피하고 코코아 어플리케이션을 바로 제작할 수 있는 Objective-C로 시작하는 것도 한 방법이라고 생각됩니다.

2) 접근방법
사실 가장 좋은 것은 아래와 같이 가장 로우레벨단계 부터 이해하고 올라 가는 것이 기초도 탄탄하고 가장 좋은 방법일 것입니다.

메모리/CPU등 컴퓨터 하드웨어에 대한 이해
OS에 대한 이해
컴파일러에 대한 이해
C언어
시스템 프로그래밍
자료구조/알고리즘
Objective-C
OOP, 디자인 패턴
Cocoa API

위의 단계대로 차례로 지식과 실력을 쌓아서 접근하면 좋겠지만, 당장 아이폰 어플리케이션을 만들고 싶은데 지루하고 많은 시간을 필요로 합니다. 흥미를 잃지 않고 접근하는 방법은 위의 순서와 반대로 접근하는 것입니다.

Objective-C에 대한 메뉴얼을 대충(?) 한번 읽어 보고 바로 책, 웹사이트, 동영상등의 간단한 튜토리얼등을 따라해 보면서 실제 실행되는 모습을 보면 계속 흥미를 유지할 수 있습니다.

그후에 어느정도 감이 생기면 직접 만들고 싶은 어플리케이션을 목표로 잡습니다. 첫 목표는 과한 욕심은 버리고 간단하고 쉬운 어플리케이션 부터 시작합니다. 아무리 간단해도 따라해 보며 만들었던 것과는 달리 원하는 기능을 직접 구현하는 것은 매우 어렵습니다. 자료도 많이 찾아 보아야되고, 다른 샘플 소스에서 복사해 와야 하는 경우도 있고, 관련 커뮤니티를 통해 도움을 받을 수도 있습니다. 관련자료들은 이전의 iPhone 어플리케이션 개발을 위한 준비 - 3. 관련 자료 포스팅을 참고하시기 바랍니다.

우여곡절끝에 만들어 내면 부족한면이나 필요한 부분이 무엇인지 조금씩 보이게 될 것 입니다. 필요에 의해 공부를 하다보면 아마 위의 순서를 거슬러 올라 접근하게 되는 경우가 많을 것 같습니다. 그러면 차차 복잡하고 어려운 어플리케이션을 만들 수 있을 것입니다.

막상 처음 시작하게 되면 알아야 할 것은 많고 답답한 마음만 드실 것입니다. 하지만 안타깝게도 왕도는 없습니다. 흥미와 열정을 유지하면서 차근차근 해 나가다 보면 어느새 바라는 어플리케이션을 만들수 있는 날이 눈앞에 와있을 것 입니다.

간혹 주위에 개발경험이 전혀 없는 분들로 부터 "무엇부터 시작해야 아이폰 어플리케이션을 만들 수 있냐?"는 질문을 들으면서 이와 관련해서 간단히 포스팅을 해보아야 겠다고 생각했습니다.

정리는 해보았는데 역시 어렵네요. 제가 봐도 이상한 용어들만 난무하고 설명도 중구난방이고, 개발을 처음 하시는 분들이 보면 잘 이해가 안가실 것 같다는 생각이 듭니다.

출처 : http://www.cocoadev.co.kr/200

덧글 0개

구글맵 API 정리 | 강좌/활용팁

운영자　 | 2010-03-30

1 최근 변경 소식

1.1 2009/3/30

구글 맵검색 연동 방법추가.

1.2 2009/3/17

지도 서비스가 된다. 지도 서비스를 받기 위해서는 http://maps.google.com 대신 http://maps.google.co.kr 을 이용해야 한다.
지도 서비스가 되면서, 길찾기 기능도 추가되었다. 수도권으로만 한정한다면, 매우 정확한 정보를 보여준다.
Map api 에서도 maps.google.com 대신 maps.google.co.kr 로 API를 요청해야 한다.
이 페이지의 모든 예제들의 API 요청주소를 maps.google.co.kr 로 변경했다.

2 구글의 개발자 포용 정책

구글은 다양한 개발자를 자신의 영역으로 끌어들이기 위한 개방정책을 사용한다. 그래서 대부분의 서비스들이 서비스를 제어할 수 있는 API를 공개적으로 제공하고 있다. 개발자는 이 API를 이용해서 구글이 선보인 서비스를 단순히 둘러보는 정도에 그치지 않고, 다양한 응용을 시도해볼 수 있다. 구글 MAP같은 경우 구글에서 서비스를 만들어내기도 전에, 구글이 제공한 API를 이용해서 자신들만의 독특한 서비스를 만들어낸 사용자들이 있다. http://HousingMaps.com 의 경우 미국 주요도시의 집값 정보를 보여주며, http://ChicagoCrime.org 는 도시내의 범죄와 범행위치를 검색하는 서비스를 제공하고 있다.

자신의 제품을 사용하거나 테스트해줄 많은 개발자들을 확보하는건 소프트웨어 회사가 성장하기 위한 가장 중요한 동력원임은 말할필요도 없을 것이다. 기존에도 개발자를 자신의 영역으로 끌어들이기 위한 노력을 해왔던건 사실이지만, 많은 제한을 둔 폐쇄적인 형태로 이루어졌었다. 구글은 정보를 완전히 공개하고 있으며, 많은 우호적인 개발자 세력을 만들어냈다. 이들 개발자는 구글매니아로 불리우는 중요 고객이기도 하다. 최근에는 국내 대형포탈들도 이러한 공개 개발자 포용정책을 펴나가는 추세다.

3 구글 Map API

구글 Map은 Ajax기술을 사용하는 구글의 대표적인 서비스들 중 하나이다. 구글은 단순히 서비스를 제공하는데 그치지 않고 개발자의 참여를 끌어들이기 위해 API를 공개하고 있다. 구글 Map API를 이용하면 자신의 사이트에 구글 Map을 붙이고, 테스트하면서 새로운 응용을 만들 수 있다. Map API를 사용하기 위해서는 Map Key를 받아야 하는데, http://www.google.com/apis/maps 를 방문해서 Map을 사용할 URL만 명시해주면 바로 Key를 받을 수 있다. 그다음 생성된 코드를 가져다 붙이기만 하면 자신의 사이트에서 바로 구글 Map을 붙일 수 있다.

Map Key는 구글 maps 자바스크립트를 불러올때 key에 명시하면 된다.

<script src="http://maps.google.co.kr/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>

아래는 필자의 사이트에 붙인 Google Map이다.

4 구글 MAP API 분석

구글 MAP API는 JavaScript로 제어된다. 여기에서는 완전한 형태의 HTML 파일을 보여주지는 않을 것이다. 완전한 HTML 페이지를 만드는건 Map Key를 생성할 때 만들어지는 HTML 코드를 이해하는 것만으로 충분할 것이다.

4.1 기본

구글 Map을 불러오기 위한 가장 기본이 되는코드다. 서울주변을 보여준다.

var map = new GMap2(document.getElementById("map")); 
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

setCenter을 이용해서 보여줄 위치를 지정한다. 첫번째 인자는 좌표를 지정하기 위해서 사용한다. 두번째 인자는 지도의 해상도를 결정하기 위해서 사용한다. 숫자가 클 수록 더 자세한 결과를 보여준다.
[http]

simple.html 예제

구글 맵은 맵, 위성, 합성의 3가지 모드를 제공된다. setMapType메서드를 이용하면 모드를 변경할 수 있다. 따로 지정하지 않을 경우 맵모드로 실행된다.

setMapType(G_SATELLITE_TYPE) : 위성모드
setMapType(G_HYBRID_TYPE) : 합성모드

4.2 Map에서의 이동

다음은 맵에서 중심을 이동하는 예제다. panTo 메서드를 이용하면 해당 중심으로 지도를 부드럽게 이동시킨다. 길찾기등의 기능구현에 유용하게 사용할 수 있을 거 같다.

var map = new GMap2(document.getElementById("map")); 
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4); 
window.setTimeout(function() { 
    map.panTo(new GLatLng(42.615527631349245, 128.353515625)); 
}, 2000);

animate.html 예제

4.3 Control 버튼 추가하기

맵을 확대기시커나 모드를 바꾸거나 하는등의 제어를 위한 컨트롤 버튼을 추가한다.

var map = new GMap2(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

control.html 예제

4.4 Event Listener

event listener는 GEvent.addListener를 호출해서 생성한다. 이것은 맵에서 발생하는 이벤트를 알려준다. 아래의 예제에서 맵을 움직일 경우 변경된 좌표가 출력되는걸 확인할 수 있을 것이다.

var map = new GMap2(document.getElementById("map")); 
GEvent.addListener(map, "moveend", function() { 
  var center = map.getCenter(); 
  document.getElementById("message").innerHTML = center.toString(); 
}); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

event.html 예제

4.5 정보창 열기

openInfoWindow를 이용하면 원하는 지역에 DOM정보를 출력할 수 있다. 다음은 맵중앙에 저는 여기에 살아요메시지를 출력하는 코드다.

map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4); 
map.openInfoWindow(map.getCenter(), 
                   document.createTextNode("저는 여기에 살아요"));

infowindow.html 예제

4.6 맵에 표시하기

이번 예제는 overlay기능을 이용해서 지도에 랜덤하게 10개의 마크를 표시한다. 마크에 사용되는 이미지는 기본 이미지이며, 사용자 정의 아이콘을 만들 수도 있다. 서울시를 기준으로 작성했다.

map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12); 
 
var bounds = map.getBounds(); 
var southWest = bounds.getSouthWest(); 
var northEast = bounds.getNorthEast(); 
var lngSpan = northEast.lng() - southWest.lng(); 
var latSpan = northEast.lat() - southWest.lat(); 
 
// 랜덤 포인트를 만들고 각각의 포인트에 마킹을 한다. 
for (var i = 0; i < 10; i++) { 
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(), 
                          southWest.lng() + lngSpan * Math.random()); 
  map.addOverlay(new GMarker(point)); 
} 
// 랜덤 포인트를 만들고 이것을 연결한다.  
var points = []; 
for (var i = 0; i < 5; i++) { 
  points.push(new GLatLng(southWest.lat() + latSpan * Math.random(), 
                          southWest.lng() + lngSpan * Math.random())); 
} 
points.sort(function(p1, p2) { 
  return p1.lng() - p2.lng(); 
}); 
map.addOverlay(new GPolyline(points));

overlay.html 예제

4.7 클릭 이벤트 제어

맵에 클릭을 할경우 이벤트를 받아서 마킹을 하는 예제다. 앞서 배웠던 addListenr메서드를 이용해서 click 이벤트를 기다리고, 클릭이 발생하면 addOverlay메서드를 이용해서 마킹을 한다.

map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12); 
GEvent.addListener(map, "click", function(marker, point)  
{ 
  if (marker)  
  { 
    map.removeOverlay(marker); 
  } else { 
    map.addOverlay(new GMarker(point)); 
  } 
});

click.html 예제

4.8 마커에 정보 창 출력하기

10개의 마커를 랜덤하게 표시하고, 마커를 클릭하면 클릭이벤트에 대한 Listener가 작동하도록 해보자. Listener 함수는 openInfoWindowHtml메서드를 이용해서 정보창을 출력한다.

var map = new GMap2(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12); 
function createMarker(point, number)  
{ 
  var marker = new GMarker(point); 
  GEvent.addListener(marker, "click", function()  
  { 
    marker.openInfoWindowHtml("Marker #<b>" + number + "</b>"); 
  }); 
  return marker; 
} 
 
var bounds = map.getBounds(); 
var southWest = bounds.getSouthWest(); 
var northEast = bounds.getNorthEast(); 
var lngSpan = northEast.lng() - southWest.lng(); 
var latSpan = northEast.lat() - southWest.lat(); 
for (var i = 0; i < 10; i++)  
{ 
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(), 
                        southWest.lng() + lngSpan * Math.random()); 
  map.addOverlay(createMarker(point, i + 1)); 
}

markerinfo.html 예제

4.9 탭 사용하기

openInfoWindowsTabs메서드 와 GInfoWindowTab 클래스를 이용하면, 탭을 제어할 수 있다. 다음 예제는 마커를 클릭하면 2개의 tab을 가진 Info Windows를 띄운다.

var map = new GMap2(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12); 
 
var infoTabs = [ 
    new GInfoWindowTab("탭1", "안녕하세요.<br><img src=http://www.joinc.co.kr/images/joinc.png border=0>"), 
    new GInfoWindowTab("탭2", "반갑습니다."), 
]; 
 
var marker = new GMarker(map.getCenter()); 
GEvent.addListener(marker, "click", function() { 
    marker.openInfoWindowTabsHtml(infoTabs); 
}); 
map.addOverlay(marker); 
marker.openInfoWindowTabsHtml(infoTabs);

tab.html 예제

4.10 사용자 정의 아이콘 사용하기

사용자 정의 아이콘을 사용하는 예제다. 아이콘은 구글에서 제공하는 mini marker이미지들을 사용하기로 했다. 완전한 사용자 정의 아이콘을 만들기 위해서는 원본이미지와 함께 그림자 이미지가 쌍으로 준비되어야 한다.

var map = new GMap2(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12); 
 
var icon = new GIcon(); 
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; 
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; 
icon.iconSize = new GSize(12, 20); 
icon.shadowSize = new GSize(22, 20); 
icon.iconAnchor = new GPoint(6, 20); 
icon.infoWindowAnchor = new GPoint(5, 1); 
 
// 10개의 랜덤위치를 찾아서 marking한다. 
var bounds = map.getBounds(); 
var southWest = bounds.getSouthWest(); 
var northEast = bounds.getNorthEast(); 
var lngSpan = northEast.lng() - southWest.lng(); 
var latSpan = northEast.lat() - southWest.lat(); 
for (var i = 0; i < 10; i++) { 
    var point = new GLatLng(southWest.lat() + latSpan * Math.random(), 
                      southWest.lng() + lngSpan * Math.random()); 
map.addOverlay(new GMarker(point, icon)); 
}

icon.html 예제

4.11 아이콘 클래스 사용하기

지도서비스를 하게 된다면, 여러개의 아이콘들이 사용될 것이다. GIcon클래스를 이용하면 아이콘을 쉽게 관리할 수 있다.

var map = new GMap2(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
 
// 아이콘에서 사용할 이미지/그림자 이미지, Info Windows등 객체의  
// 속성을 결정한다. 
var baseIcon = new GIcon(); 
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; 
baseIcon.iconSize = new GSize(20, 34); 
baseIcon.shadowSize = new GSize(37, 34); 
baseIcon.iconAnchor = new GPoint(9, 34); 
baseIcon.infoWindowAnchor = new GPoint(9, 2); 
baseIcon.infoShadowAnchor = new GPoint(18, 25); 
 
function createMarker(point, index) { 
  // Create a lettered icon for this point using our icon class 
  var letter = String.fromCharCode("A".charCodeAt(0) + index); 
  var icon = new GIcon(baseIcon); 
  icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png"; 
  var marker = new GMarker(point, icon); 
 
  GEvent.addListener(marker, "click", function() { 
    marker.openInfoWindowHtml("지역 <b>" + letter + "</b>"); 
  }); 
  return marker; 
} 
 
var bounds = map.getBounds(); 
var southWest = bounds.getSouthWest(); 
var northEast = bounds.getNorthEast(); 
var lngSpan = northEast.lng() - southWest.lng(); 
var latSpan = northEast.lat() - southWest.lat(); 
for (var i = 0; i < 10; i++) { 
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(), 
                          southWest.lng() + lngSpan * Math.random()); 
  map.addOverlay(createMarker(point, i)); 
}

iconclass.html 예제

4.12 마커 드래그

마커는 클릭, 다른장소로의 드래그 등이 가능한 상호작용하는 객체다. 이 예제는 맵에서 마커를 클릭하고 드래그하는 이벤트를 처리하는 방법을 알려준다. 드래그는 click, dragstart, drag, dragend의 4가지 타입의 이벤트를 발생한다.

    var map = new GMap2(document.getElementById("map")); 
    var center = new GLatLng(37.51025350131836, 127.06023216247559); 
    map.setCenter(center, 16); 
    map.setMapType(G_SATELLITE_MAP); 
 
    var marker = new GMarker(center, {draggable: true}); 
 
    GEvent.addListener(marker, "dragstart", function() { 
        map.closeInfoWindow(); 
    }); 
 
    GEvent.addListener(marker, "dragend", function() { 
        map.openInfoWindowHtml("여기를 약속장소로...");  
    }); 
 
    map.addOverlay(marker); 
}

drag.html 예제

4.13 SideBar를 통한 맵 링크

google map에서 검색을 해보면 지도 옆에 SideBar를 통해서 맵을 제어하는 걸 볼수 있다. 여기에서는 SideBar를 이용해서 map을 제어하는 방법에 대해서 알아보겠다.

우선 셈플을 테스트해보도록 한다.
[http]

sidebar.html 예제

<script language="JavaScript" type="text/javascript"> 
    // 이 변수에 side bar에 이벤트가 발생했을 때 출력할 HTML코드가 저장된다. 
    var side_bar_html = ""; 
 
    // side bar에는 여러개의 마커에 대한 HTML요소가 사용되므로 
    // 배열로 정의 한다.  
    var gmarkers = []; 
    var htmls = []; 
    var i = 0; 
 
    // marker을 만든다.  
    // 첫번째 인자는 위치, 두번째 인자는 이름, 세번째 인자는 설명이다. 
    function createMarker(point, name, html) 
    { 
        var marker = new GMarker(point); 
        // click 이벤트에 대한 listener 함수 정의 
        GEvent.addListener(marker, "click", function()  
        { 
            marker.openInfoWindowHtml(html); 
        }); 
        gmarkers[i] = marker; 
        htmls[i] = html; 
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>'; 
        i++; 
        return marker; 
    } 
 
    function myclick(i) 
    { 
        gmarkers[i].openInfoWindowHtml(htmls[i]); 
    } 
    var map = new GMap2(document.getElementById("map")); 
    // GSmallMapControl대신에 GLargeMapControl을 사용했다. 
    map.addControl(new GLargeMapControl()); 
    map.addControl(new GMapTypeControl()); 
    map.setCenter(new GLatLng(37.51030456483467, 127.05190658569336),14); 
    map.setMapType(G_SATELLITE_MAP); 
 
    // 테스트에 사용할 marker를 만든다.  
    var point = new GLatLng(37.508500299402435, 127.06263542175293); 
    var marker = createMarker(point, "반디엔 루인스", "제가 애용하는 서점 입니다"); 
    map.addOverlay(marker); 
 
    var point = new GLatLng(37.50209991181568, 127.03652143478394); 
    var marker = createMarker(point, "시티문고", "가끔 강남에 갈일이 있으면 시간을 때우는 장소로.."); 
    map.addOverlay(marker); 
 
    var point = new GLatLng(37.517802011991854, 127.0405125617981); 
    var marker = createMarker(point, "로터리 오락실", "드럼메니아 V2때문에 갑니다"); 
    map.addOverlay(marker); 
 
    var point = new GLatLng(37.5056235973398, 127.0512306690216); 
    var marker = createMarker(point, "onnet", "제가 다니는 회사지요"); 
    map.addOverlay(marker); 
 
    // <div> side_bar에 side_bar_html 문서를 배치한다. 
    document.getElementById("side_bar").innerHTML = side_bar_html; 
</script>

5 XML과 비동기 HTTP를 이용한 지도 생성

이번 예제는 경도/위도와 지역정보를 포함한 data.xml을 다운로드 받아서, 지도에 마커를 표시한다. GDownloadUrl메서드를 이용해서 파일을 다운로드 받을 수 있다. 다운로드 받은 XML파일은 GXml메서드를 이용해서 처리한다. 마커를 클릭하면 지역정보가 표시된다.

<script language="JavaScript" type="text/javascript"> 
var side_bar_html = ""; 
var gmarkers = []; 
var htmls = []; 
var i = 0; 
 
function myclick(i) 
{ 
    gmarkers[i].openInfoWindowHtml(htmls[i]); 
} 
function load() 
{ 
  var map = new GMap2(document.getElementById("map")); 
  var center = new GLatLng(37.51030456483467, 127.05190658569336); 
 
  map.addControl(new GSmallMapControl()); 
  map.addControl(new GMapTypeControl()); 
  map.setCenter(center, 14); 
 
  function createMarker(point, name, html) 
  { 
    var marker = new GMarker(point); 
    GEvent.addListener(marker, "click", function() 
    { 
      marker.openInfoWindowHtml("<b>" + name + "</b>"); 
    }); 
    gmarkers[i]=marker; 
    htmls[i]=html; 
    side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>'; 
    i++; 
    return marker; 
  } 
 
  GDownloadUrl("data.xml", function(data, responseCode) 
  { 
    var xml = GXml.parse(data); 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) 
    { 
      var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), 
                            parseFloat(markers[i].getAttribute("lng"))); 
      map.addOverlay(createMarker(point, markers[i].getAttribute("name"), markers[i].firstChild.nodeValue)); 
    } 
    document.getElementById("side_bar").innerHTML = side_bar_html; 
  }); 
 
} 
</script> 
  </head> 
  <body onunload="GUnload()"> 
    <div id="map" style="width: 600px; height: 340px"></div> 
    <div id="side_bar"></div> 
    <img src=../images/eyes.gif height=0 width=0 onload=javascript:load()> 
  </body> 
</html>

다음은 data.xml의 내용이다. 효율성과는 거리가 멀게 만들어졌다.

<markers> 
  <marker lat="37.508500299402435" lng="127.06263542175293" name="반디앤 루인스"><![CDATA[<a href=http://www.joinc.co.kr>www.joinc.co.kr</a>]]></marker> 
  <marker lat="37.50209991181568" lng="127.03652143478394" name="시티문고"><![CDATA[<a href=http://teamblog.co.kr>joinc teamblog</a>]]></marker> 
  <marker lat="37.50312128705489" lng="127.05825805664062" name="개미책방"><![CDATA[<a href=http://bbs.joinc.co.kr>joinc bbs</a>]]></marker> 
  <marker lat="37.517802011991854" lng="127.0405125617981" name="로터리오락실"><![CDATA[<a href=http://bbs.joinc.co.kr>joinc bbs</a>]]></marker> 
  <marker lat="37.5056235973398" lng="127.0512306690216" name="울회사"><![CDATA[<a href=http://bbs.joinc.co.kr>joinc bbs</a>]]></marker> 
</markers>

async.html 예제

6 Google 검색엔진 연동

6.1 GoogleBar를 이용한 검색엔진 활용

GoogleBar를 이용하면, 구글맵검색결과와 지도를 연동할 수 있다. 이를 위해서는 GGoogleBarOptions 객체를 설정하고 GMap2생성자의 옵션으로 넘겨주면 된다. 이제 GMap2.enableGoogleBar()를 이용하는 것으로 GoogleBar를 활성화 할 수 있다. GoogleBar의 화면은 google map의 메인화면에서와 비슷한 모습과 느낌을 보여준다.

다음과 같이 간단하게 google 지도 검색과 연동할 수 있다.

function initialize()  
{ 
    var map; 
    if (GBrowserIsCompatible())  
    { 
        var mapOptions = { 
            googleBarOptions : { 
            style : "new", 
            } 
        } 
        map = new GMap2(document.getElementById("map_canvas"), mapOptions); 
        map.setCenter(new GLatLng(37.51030456483467, 127.05190658569336), 13); 
        map.setUIToDefault(); 
        map.enableGoogleBar(); 
    } 
}

구글 검색엔진 연동 예제

덧글 1개

구글맵 API 정리된 사이트 링크 | 강좌/활용팁

운영자　 | 2010-03-30

구글 지도 API를 사용해야 하는 모양이다 하고

찾다보니 정말 정리가 잘 되어 있더라고요. 정보 공유합니다.

제가 먼저 찾았던 곳은 이곳
http://blog.naver.com/imgsoul/140102340598 imgsoul님께 감사드립니다.

구글 맵 API : http://code.google.com/intl/ko-KR/apis/maps/
구글 MAP API 분석 : http://www.joinc.co.kr/modules/moniwiki/wiki.php/Site/Google/Service/GoogleMapAPI
구글 지도 API 배우기 예제 : http://www.rsequence.com/google_map_ko/index.html

API가 잘 정리되어 있는 포스트는
http://www.joinc.co.kr/modules/moniwiki/wiki.php/Site/Google/Service/GoogleMapAPI

끝내주게 정리해 놓으셨네요. 감사합니다.~~

출처: http://cafe.naver.com/mcbugi/41105

덧글 0개

아이폰 웹APP 개발 작업 | 강좌/활용팁

운영자　 | 2010-03-30

아이폰 웹 애플리케이션 만들기
with HTML, CSS, and JavaScript

개인적인 FAULT BOOK입니다.

아이폰 웹 앱 개발 : JQtouch and PhoneGap

- 개발 환경 준비

PHONEGAP(이하 폰갭) 최초 구성시 흩어진 자바스크립트 파일을 모아주기 위해 GMAKE가 포함된 유틸리티가 필요합니다. XCODE가 있으면 됩니다.

폰갭 다운로드 : 아이폰을 제외한 다른 폴더는 필요없지만 빌드용 메이크 파일은 남겨주세요.

XCODE 로 프로젝트 빌드 : 아이폰 프로젝트 열어서 빌드하면 생성되는 LIB 폴더 안에 있는 PHONEGAP.JS 파일. 아이폰용을 제외한 다른 폴더는 삭제하였습니다.

JQTOUCH 다운로드.

기타 에디터 : XCODE로 작업해도 좋구요. BBEDIT BBedit 에서 개발한 Textwangler (무료) 추천해드려요. FTP 접속기능도 있고 괜찮다고 생각합니다.

추가로 필요한 것이 있으면 계속 살펴보도록 하죠. 그림을 참고하세요.

프로젝트 폴더구조

-코딩

독타입 : 선언을 하지 않았을 때 에니메이션이 작동하지 않을 경우도 있었는데 없어도 작동하기도 하네요. 다른 DTD 선언은 필요없는 것 같습니다.

<!doctype html>

헤더 : 스타일과 스크립트를 넣어주면 되겠죠.

스크립트 : 가능하면 JQUERY 스타일 코딩을 하는게 좋겠죠.

스타일 : 타입과 미디어 포맷을 지정해주세요.

바디 : 화면전환이 DIV의 ID별로 운영이 되니 우선 소스를 살펴 보면서 구성을 좀 알아가도록 합니다.

- 화면 구성

기본적인 화면 구성과 에니메이션 등은 JQTOUCH 의 파일을 참조하여 작성했습니다. 스타일도 잘 구성되어 있습니다.
각 화면은 하나의 div 태그 안에 담겨있게 되며 첫 화면은 가장 상단에 위치한 div 태그가 됩니다.

아이콘과 스플래쉬 화면

JQTOUCH 인스턴스 생성 코드를 그대로 사용했습니다.
    <script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                icon: 'jqtouch.png',
                addGlossToIcon: false,
                startupScreen: 'jqt_startup.png',
                statusBar: 'black',
                preloadImages: [
                    '../../themes/jqt/img/back_button.png',
                    '../../themes/jqt/img/back_button_clicked.png',
                    '../../themes/jqt/img/button_clicked.png',
                    '../../themes/jqt/img/grayButton.png',
                    '../../themes/jqt/img/whiteButton.png',
                    '../../themes/jqt/img/loading.gif'
                    ]
            });
    </script>

파일 경로와 이미지는 알맞게 변형하여 사용하면 되겠습니다.

초기화면

여러 화면 중 첫화면을 지정하는 방법은 current 클래스를 사용하거나 가장 최초에 등록된 화면이 첫 화면이 됩니다.
<div id="test" class="current">

페이지 이동

페이지를 이동하기 위해 링크 태그를 사용합니다.
<li><a class="flip" href="#animations">Flip</a></li>

링크 클래스에 사용되는 스타일값은 화면전환 지정 스타일입니다. 화면전환 방법에서 더 살펴보도록 하겠습니다.

헤더

toolbar 클래스를 사용합니다.
        <div class="toolbar">

추가로 헤더 안의 타이틀 작성 목적의 내용을 적는다면 h1 태그를 사용하면 가운데 정렬된 툴바의 제목을 볼 수 있습니다. 글자수 제한 기능이 있어 영문 11자 이상의 글자는 ... 으로 보여집니다.
               <div class="toolbar">
                   <h1>메인 화면</h1>

리스트

기본적으로 순서가 없는 ul li 를 사용하여 내용을 구성합니다. 미리 구현된 rounded 클래스를 사용하여 모양을 다듬을 수 있습니다.
        <ul class="rounded">
                <li><a class="flip" href="#animations">Flip</a></li>
            </ul>

현재 ol li 의 경우는 스타일이 구현되어 있지 않습니다.

단 구분용 소제목

단 구분을 위해 사용하는 소제목은 h2 태그 스타일이 구현되어 있네요.
<h2>구분용 제목</h2>

뒤로가기 버튼

뒤로가기 버튼을 위해 구현된 스타일을 사용합니다. 더 자세한 내용은 스타일 부분에서 살펴보도록 하죠.
    <a href="#" class="back">뒤로</a>
이동 페이지를 명시하지 않아도 뒤로가기 기능이 정상적으로 작동합니다. 이것은 JQTouch.js 파일에 backSelector 라는 항목으로 액션이 지정되어 있기 때문입니다.
다음 3가지의 클래스가 등록되어 있습니다.
    '.back, .cancel, .goback'

이미지

평범한 이미지 테그를 사용하여 이미지를 보여줍니다.
<img src="jqt_startup.png" />

이미지에 링크를 걸 경우 반드시 화면전환 스타일을 지정해야 링크가 작동하는 것 같습니다.
<a class="flip" href="#animations"><img src="abcmart_splash<?=rand(1,2)?>.png" /></a>

PHP서버에 돌아가고 있기 때문에 PHP구문이 작동합니다.

기타 텍스트

일반 텍스트를 사용하기 위해 미리 정의된 info 클래스를 활용할 수 있습니다.
    <div class="info">
               안녕하세요 작업이 진행중입니다.<br />
    </div>
화면 좌 우측 여백을 주기 위한 편법으로 ul 태그를 사용할 수도 있었습니다.
    <ul class="info">
               안녕하세요 작업이 진행중입니다.<br />
    </ul>

이정도 작업을 통해 아래와 같은 화면을 만들수 있었습니다. 계속 작업하면서 추가할 내용을 적어두고 있는데 어느정도 정리되면 다시 한번 올려볼께요.

작업해보면 한계가 드러나겠지만 화려한 그래픽과 빠른 속도가 필요하지 않은 앱은 웹기술만으로도 제품을 만들수도 있을 것 같네요. 이방법이 쉬워서인지 아직까지 오브젝트C 코딩은 하지 않고있네요.. ㅋ

출처 : http://cafe.naver.com/mcbugi/37581

덧글 0개