[hello world 오픈세미나]공공정보와 네이버 오픈api
DESCRIPTION
TRANSCRIPT
공공정보와����������� ������������������ 네이버����������� ������������������ 오픈API����������� ������������������ 매쉬업����������� ������������������ 서비스����������� ������������������ 모델과����������� ������������������
기술적����������� ������������������ 고려����������� ������������������ 사항����������� ������������������ NHN 컨텐츠제휴팀 옥상훈 부장
2����������� ������������������ ����������� ������������������
現 NHN 컨텐츠 제휴팀 부장 現 공공정보활용지원센터(한국정보화진흥원) 자문위원 現 ZDNet UX 컬럼니스트 (2007~현재) 前 Adobe, Macromedia RIA Consulting 前 한국 SW 아키텍트 연합 공동 회장(2008~2010) 前 한국자바 개발자 협의회 회장(2007~2008)
<저서> - NHN 오픈 API를 활용한 매시업 (2012.9.14, 공저) - okgosu의 플렉스 4.5 & 플래시 빌더 정석(2011.6) - okgosu의 액션스크립트의 정석(2010.4) - 예제로 배우는 플렉스(2006.9)
* 네이버 Open API 개발가이드 작성 (2011.10.18)
발표자 소개
목차
1. 네이버����������� ������������������ 오픈����������� ������������������ API����������� ������������������ 종류와����������� ������������������ 활용����������� ������������������ 팁����������� ������������������ 1.1.����������� ������������������ 네이버����������� ������������������ Open����������� ������������������ API����������� ������������������ 플랫폼����������� ������������������ 구성����������� ������������������ ����������� ������������������
1.2.����������� ������������������ 네이버����������� ������������������ Open����������� ������������������ API����������� ������������������ 이용등록����������� ������������������
1.3.����������� ������������������ 네이버����������� ������������������ 지도����������� ������������������ Open����������� ������������������ API����������� ������������������ 개요����������� ������������������
1.4.����������� ������������������ 네이버����������� ������������������ 검색����������� ������������������ Open����������� ������������������ API의����������� ������������������ 호출����������� ������������������
1.5.����������� ������������������ 네이버����������� ������������������ Open����������� ������������������ API����������� ������������������ 검색����������� ������������������ 대상����������� ������������������ ����������� ������������������
2. 오픈API����������� ������������������ 매쉬업����������� ������������������ 서비스시����������� ������������������ 기술적����������� ������������������ 고려����������� ������������������ 사항����������� ������������������ 2.1.����������� ������������������ API����������� ������������������ 핵심����������� ������������������ 기술의����������� ������������������ 이해����������� ������������������ ����������� ������������������
2.2.����������� ������������������ XML과����������� ������������������ JSON����������� ������������������ ����������� ������������������
2.3.����������� ������������������ REST(Representational����������� ������������������ State����������� ������������������ Transfer)����������� ������������������
2.4.����������� ������������������ OAuth����������� ������������������ 인증����������� ������������������ 방식의����������� ������������������ 이해����������� ������������������
2.5.����������� ������������������ Open����������� ������������������ API����������� ������������������ 프로그래밍����������� ������������������ 구현����������� ������������������ 방법����������� ������������������
3. ����������� ������������������ 공공정보와����������� ������������������ 네이버����������� ������������������ 오픈API����������� ������������������ 매쉬업����������� ������������������ 비즈니스����������� ������������������ 모델����������� ������������������ ����������� ������������������ 3.1.����������� ������������������ 공공정보����������� ������������������ 목록����������� ������������������ ����������� ������������������
3.2.����������� ������������������ 국가공유자원포털����������� ������������������
3.3.����������� ������������������ 서울����������� ������������������ 열린����������� ������������������ 데이터����������� ������������������ 광장����������� ������������������ ����������� ������������������
3.4.����������� ������������������ 스마트 모바일 앱개발지원센터
3.5.����������� ������������������ 공공정보활용지원센터����������� ������������������ ����������� ������������������
4. 공공정보와����������� ������������������ 네이버����������� ������������������ 오픈API����������� ������������������ 매쉬업����������� ������������������ 서비스����������� ������������������ 개발����������� ������������������ 데모����������� ������������������ ����������� ������������������
����������� ������������������
����������� ������������������
����������� ������������������
1. 네이버����������� ������������������ 오픈����������� ������������������ API����������� ������������������ 종류와����������� ������������������ 활용����������� ������������������ 팁
5����������� ������������������ ����������� ������������������
1.1.����������� ������������������ 네이버����������� ������������������ Open����������� ������������������ API����������� ������������������ 플랫폼����������� ������������������ 구성����������� ������������������ ����������� ������������������
네이버����������� ������������������ Open����������� ������������������ API����������� ������������������ 플랫폼은����������� ������������������ 네이버����������� ������������������ 서비스들을����������� ������������������ 외부에서����������� ������������������ 이용할����������� ������������������ 수����������� ������������������ 있도록����������� ������������������ 공개한����������� ������������������ 개발자����������� ������������������ 인터페이스입니다.����������� ������������������ 네이버����������� ������������������ Open����������� ������������������ API����������� ������������������ 플랫폼은����������� ������������������ 크게����������� ������������������ 3가지로����������� ������������������ 구성되어����������� ������������������ 있습니다.����������� ������������������
네이버����������� ������������������ 지도,����������� ������������������ 검색����������� ������������������ API����������� ������������������ 미투데이����������� ������������������ API����������� ������������������ 소셜게임����������� ������������������ API����������� ������������������
검색����������� ������������������ 지도����������� ������������������ 인증����������� ������������������
카페����������� ������������������ 기타����������� ������������������
인증����������� ������������������ 글쓰기����������� ������������������ 댓글����������� ������������������
미투����������� ������������������ 친구����������� ������������������ 프로필����������� ������������������
화면����������� ������������������ 뷰����������� ������������������ 플랫폼����������� ������������������
통신����������� ������������������ 친구����������� ������������������ 프로필����������� ������������������
6����������� ������������������ ����������� ������������������
1.2.����������� ������������������ 네이버����������� ������������������ Open����������� ������������������ API����������� ������������������ 이용등록����������� ������������������ (검색)����������� ������������������
네이버����������� ������������������ Open����������� ������������������ API����������� ������������������ 플랫폼����������� ������������������ 개발을����������� ������������������ 위해서는����������� ������������������ 개발자����������� ������������������ 등록����������� ������������������ 후����������� ������������������ API����������� ������������������ 키를����������� ������������������ 발급����������� ������������������ 받아야����������� ������������������ 합니다.����������� ������������������ 소셜게임은����������� ������������������ 개발자����������� ������������������ 등록만����������� ������������������ 하면����������� ������������������ 됩니다.����������� ������������������ ����������� ������������������
1) 네이버����������� ������������������ Open����������� ������������������ API:����������� ������������������
http://dev.naver.com/openapi/register����������� ������������������ 에서����������� ������������������ 개발자����������� ������������������ 등록
을����������� ������������������ 한����������� ������������������ 다음����������� ������������������ API����������� ������������������ 종류에����������� ������������������ 따라����������� ������������������ 다음의����������� ������������������ API����������� ������������������ 키를����������� ������������������ 발급����������� ������������������ 받습니다.����������� ������������������
A. 검색결과����������� ������������������ API,����������� ������������������ 검색관련기능����������� ������������������ API:����������� ������������������ 검색API����������� ������������������ 키를����������� ������������������ 발급����������� ������������������ 받
습니다.����������� ������������������
B. 지도API:����������� ������������������ 웹,����������� ������������������ 안드로이드,����������� ������������������ 아이폰����������� ������������������ 중����������� ������������������ 하나의����������� ������������������ 환경정보를����������� ������������������
입력한����������� ������������������ 후����������� ������������������ 지도����������� ������������������ API����������� ������������������ 키를����������� ������������������ 발급����������� ������������������ 받습니다.����������� ������������������
����������� ������������������
2) 미투데이����������� ������������������ API����������� ������������������ :����������� ������������������ ����������� ������������������ ����������� ������������������
http://me2day.net/me2/app/get_appkey����������� ������������������ 에서����������� ������������������ 개발자����������� ������������������ 및����������� ������������������
애플리케이션����������� ������������������ 등록을����������� ������������������ 한����������� ������������������ 다음����������� ������������������ 애플리케이션����������� ������������������ 키를����������� ������������������ 발급����������� ������������������ 받습니
다.����������� ������������������
3) 소셜게임����������� ������������������ API:����������� ������������������
http://appfactory.naver.com/registerApp.nhn����������� ������������������ 에서����������� ������������������ 개발
자����������� ������������������ 등록을����������� ������������������ 한����������� ������������������ 다음����������� ������������������ 완료된����������� ������������������ 애플리케이션을����������� ������������������ 등록합니다.����������� ������������������ ����������� ������������������
7����������� ������������������ ����������� ������������������
1.2.����������� ������������������ 네이버����������� ������������������ 지도����������� ������������������ OpenAPI����������� ������������������ ����������� ������������������ 개요����������� ������������������
웹����������� ������������������ 사이트를����������� ������������������ 비롯하여����������� ������������������ 아이폰,����������� ������������������ 안드로이드폰에����������� ������������������ 지도를����������� ������������������ 표시할����������� ������������������ 수����������� ������������������ 있으며,����������� ������������������ 지도상의����������� ������������������ 원하는����������� ������������������ 위치에����������� ������������������ 데이터를����������� ������������������ 함께����������� ������������������ 표시할����������� ������������������ 수����������� ������������������ 있습니다.����������� ������������������ 지도는����������� ������������������ 자바스크립트,����������� ������������������ 플래시,����������� ������������������ 안드로이드(2.0),����������� ������������������ iOS(3.1)����������� ������������������ 이상을����������� ������������������ 지원합니다.����������� ������������������ ����������� ������������������
지도����������� ������������������ API����������� ������������������ 설명����������� ������������������
JavaScript����������� ������������������ 2.0����������� ������������������ JavaScript����������� ������������������ 1.0의����������� ������������������ 좌표계산을����������� ������������������ 비롯한����������� ������������������ 성능과����������� ������������������ 기능을����������� ������������������ 개선한����������� ������������������ 버전입니다.����������� ������������������
JavaScript����������� ������������������ 1.0����������� ������������������ 초기����������� ������������������ 자바스크립트����������� ������������������ 네이버����������� ������������������ 지도����������� ������������������ API����������� ������������������ 입니다.����������� ������������������
Static����������� ������������������ Map����������� ������������������ 1.0����������� ������������������ 자바스크립트����������� ������������������ 없이����������� ������������������ 웹����������� ������������������ 페이지에����������� ������������������ 네이버����������� ������������������ 지도를����������� ������������������ 보여����������� ������������������ 줄����������� ������������������ 때����������� ������������������ 사용합니다.����������� ������������������
Flash����������� ������������������ 플래시,����������� ������������������ 플렉스에서����������� ������������������ 액션스크립트����������� ������������������ 3.0으로����������� ������������������ 서비스를����������� ������������������ 개발할����������� ������������������ 때����������� ������������������ 지도를����������� ������������������ 보여줄����������� ������������������ 수����������� ������������������ 있습니다.����������� ������������������
Android����������� ������������������ 안드로이드에서����������� ������������������ 네이버지도API를����������� ������������������ 사용하기����������� ������������������ 위한����������� ������������������ 버전입니다.����������� ������������������
iOS����������� ������������������ iOS에서����������� ������������������ 네이버지도API를����������� ������������������ 사용하기����������� ������������������ 위한����������� ������������������ 버전입니다.����������� ������������������
8����������� ������������������ ����������� ������������������
1.3.����������� ������������������ 네이버����������� ������������������ Open����������� ������������������ API����������� ������������������ 이용등록����������� ������������������ (지도)����������� ������������������
지도키는����������� ������������������ id당����������� ������������������ 여러����������� ������������������ 개����������� ������������������ 발급����������� ������������������ 가능하며,����������� ������������������ 웹사이트용,����������� ������������������ 안드로이드용,����������� ������������������ iOS용으로����������� ������������������ 따로����������� ������������������ 발급����������� ������������������ 받아야����������� ������������������ 합니다.����������� ������������������ 웹사이트용일����������� ������������������ 경우는����������� ������������������ 지도를����������� ������������������ 구동할����������� ������������������ 웹사이트����������� ������������������ URL,����������� ������������������ 안드로이드는����������� ������������������ 패키지명,����������� ������������������ iOS는����������� ������������������ 번들아이디를����������� ������������������ 명시합니다.����������� ������������������ PC에서����������� ������������������ 웹사이트로����������� ������������������ 구동����������� ������������������ 테스트할����������� ������������������ 경우는����������� ������������������ URL을����������� ������������������ http://localhost로����������� ������������������ 입력합니다.����������� ������������������
9����������� ������������������ ����������� ������������������
1.4.����������� ������������������ 네이버����������� ������������������ 검색����������� ������������������ Open����������� ������������������ API의����������� ������������������ 호출����������� ������������������
네이버����������� ������������������ 검색����������� ������������������ Open����������� ������������������ API는����������� ������������������ 아래와����������� ������������������ 같은����������� ������������������ URL을����������� ������������������ 호출하여����������� ������������������ XML����������� ������������������ 형태로����������� ������������������ 결과를����������� ������������������ 받습니다.����������� ������������������ ����������� ������������������
http://openapi.naver.com/search?key=25536aa0b400d0ec5e01f9453e0bf07a&query=nhn&target=book&display=3����������� ������������������ ����������� ������������������ 1) URL:����������� ������������������ http://openapi.naver.com/search����������� ������������������
2) 필수매개변수:����������� ������������������ 반드시����������� ������������������ 추가����������� ������������������ 해야����������� ������������������ 하는����������� ������������������ 값들로서����������� ������������������ URL의����������� ������������������ ‘?’����������� ������������������ 기호����������� ������������������ 뒤에����������� ������������������ 붙는����������� ������������������ 문자열로서����������� ������������������ ‘이름=값’의����������� ������������������ 배열이����������� ������������������ ‘&’기호로����������� ������������������ 연결����������� ������������������ ① 오픈API키:����������� ������������������ key=25536aa0b400d0ec5e01f9453e0bf07a����������� ������������������ (각자����������� ������������������ 발급����������� ������������������ 받아야����������� ������������������ 함)����������� ������������������ ② 검색어:����������� ������������������ query=nhn����������� ������������������ ����������� ������������������ ③ 검색대상:����������� ������������������ target=book����������� ������������������ (target값은����������� ������������������ 검색����������� ������������������ 대상에����������� ������������������ 따라����������� ������������������ ����������� ������������������ 20종)����������� ������������������
3) 선택����������� ������������������ 매개변수:����������� ������������������ 추가하지����������� ������������������ 않아도����������� ������������������ 되는����������� ������������������ 값들로서,����������� ������������������ 검색����������� ������������������ 건수,����������� ������������������ 페이징����������� ������������������ 관련����������� ������������������ 값들����������� ������������������ ����������� ������������������ ① 표시건수:����������� ������������������ ����������� ������������������ display=3����������� ������������������ (3건만����������� ������������������ 표시하도록,����������� ������������������ 명시����������� ������������������ 안하면����������� ������������������ 10,����������� ������������������ 최대����������� ������������������ 100)����������� ������������������ ② 검색시작����������� ������������������ 페이지����������� ������������������ 위치:����������� ������������������ start=1(최대����������� ������������������ 1000)����������� ������������������
*����������� ������������������ 참고)����������� ������������������ URL에����������� ������������������ ‘?’����������� ������������������ 뒤에����������� ������������������ &기호로����������� ������������������ 값을����������� ������������������ 붙여서����������� ������������������ 호출하는����������� ������������������ 방식은����������� ������������������ GET,����������� ������������������ <input>태그에����������� ������������������ 넣어서����������� ������������������ 보내는����������� ������������������ 방식은����������� ������������������ POST����������� ������������������ 방식임����������� ������������������ (여기선����������� ������������������ GET방식으로����������� ������������������ 설명함)����������� ������������������
10����������� ������������������ ����������� ������������������
1.4.����������� ������������������ 네이버����������� ������������������ 검색����������� ������������������ Open����������� ������������������ API의����������� ������������������ 호출����������� ������������������
다음����������� ������������������ 링크를����������� ������������������ 웹브라우저에서����������� ������������������ 열어본����������� ������������������ 다음����������� ������������������ XML����������� ������������������ 소스를����������� ������������������ 파악합니다.����������� ������������������ ����������� ������������������ ����������� ������������������ 결과는����������� ������������������ RSS����������� ������������������ 포맷����������� ������������������ http://openapi.naver.com/search?key=25536aa0b400d0ec5e01f9453e0bf07a&query=nhn&target=book&display=3����������� ������������������
인터넷����������� ������������������ 익스플로러����������� ������������������ 브라우저����������� ������������������ 화면����������� ������������������ 크롬����������� ������������������ 브라우저����������� ������������������ 화면����������� ������������������
11����������� ������������������ ����������� ������������������
1.5.����������� ������������������ 네이버����������� ������������������ Open����������� ������������������ API����������� ������������������ 검색����������� ������������������ 대상����������� ������������������ (target����������� ������������������ 변수����������� ������������������ 값)����������� ������������������
API����������� ������������������ 구분����������� ������������������ target����������� ������������������ 변수����������� ������������������ 값����������� ������������������ API����������� ������������������ 구분����������� ������������������ target����������� ������������������ 변수����������� ������������������ 값����������� ������������������
실시간����������� ������������������ 급상승����������� ������������������ 검색어 rank 지식iN kin
책 book 영화 movie
쇼핑����������� ������������������ shop 자동차 car
카페 cafe 카페글 cafearticle
추천����������� ������������������ 검색어 recmd 성인����������� ������������������ 검색어����������� ������������������ 판별 adult
이미지 image 전문자료 doc
영화인 movieman 지역 local
백과사전 encyc 블로그 blog
웹����������� ������������������ 문서 webkr 뉴스 news
오타변환 errta 바로가기 shortcut
2. 오픈API����������� ������������������ 매쉬업����������� ������������������ 서비스시����������� ������������������ 기술적����������� ������������������ 고려����������� ������������������ 사항����������� ������������������
13����������� ������������������ ����������� ������������������
2.1.����������� ������������������ API����������� ������������������ 핵심����������� ������������������ 기술의����������� ������������������ 이해����������� ������������������
• 오픈����������� ������������������ API를����������� ������������������ 이용한����������� ������������������ 개발����������� ������������������
– API����������� ������������������ 키����������� ������������������ 발급����������� ������������������
– API����������� ������������������ 호출����������� ������������������ URL과����������� ������������������ 파라미터����������� ������������������ 이해����������� ������������������
• 데이터����������� ������������������ 포맷:����������� ������������������ XML,����������� ������������������ JSON����������� ������������������
– 2011년����������� ������������������ 기준����������� ������������������ API의����������� ������������������ 55%가����������� ������������������ JSON����������� ������������������ 지원����������� ������������������
• 프로토콜:����������� ������������������ REST,����������� ������������������ XML-RPC,����������� ������������������ SOAP����������� ������������������
– http를����������� ������������������ 기반으로����������� ������������������ 작동����������� ������������������
• 인증:����������� ������������������ Oauth����������� ������������������
14����������� ������������������ ����������� ������������������
2.2.����������� ������������������ XML과����������� ������������������ JSON����������� ������������������ ����������� ������������������
XML����������� ������������������ ����������� ������������������
⁻ 데이터����������� ������������������ 교환에����������� ������������������ 폭넓게����������� ������������������ 쓰이는����������� ������������������ 텍스트����������� ������������������ 포맷����������� ������������������
• SOAP,����������� ������������������ XML-RPC,����������� ������������������ RSS,����������� ������������������ ����������� ������������������ RDF,����������� ������������������ ATOM����������� ������������������ 에����������� ������������������ 사용����������� ������������������
⁻ 열고����������� ������������������ 닫는����������� ������������������ 태그로����������� ������������������ 인한����������� ������������������ 데이터량����������� ������������������ 증가����������� ������������������ ����������� ������������������
⁻ 형식����������� ������������������ 검증에����������� ������������������ 유리����������� ������������������
[XML]����������� ������������������ ����������� ������������������ <?xml����������� ������������������ version="1.0"����������� ������������������ encoding="UTF-8"����������� ������������������ ?>����������� ������������������ <message>����������� ������������������
����������� ������������������ <type>normal</type>����������� ������������������ ����������� ������������������ <content>hello</content>����������� ������������������
<message>����������� ������������������
[JSON]����������� ������������������ ����������� ������������������
{“message”:����������� ������������������ ����������� ������������������ {“type”����������� ������������������ :����������� ������������������ “normal”,����������� ������������������ ����������� ������������������ “content”����������� ������������������ :”hello”}����������� ������������������ ����������� ������������������ }����������� ������������������
}����������� ������������������ ����������� ������������������
JSON(JavaScript����������� ������������������ Object����������� ������������������ Notation)����������� ������������������ ⁻ Javascript에서����������� ������������������ 유래한����������� ������������������ 간략한����������� ������������������ 포멧����������� ������������������
⁻ XML보다는����������� ������������������ 데이터량����������� ������������������ 적음����������� ������������������
⁻ 각종����������� ������������������ NoSQL저장소와의����������� ������������������ 통신에도����������� ������������������ 쓰임����������� ������������������ (Couchb
ase,����������� ������������������ MongoDB)����������� ������������������
15����������� ������������������ ����������� ������������������
2.3.����������� ������������������ REST(Representational����������� ������������������ State����������� ������������������ Transfer)����������� ������������������
• 2000년����������� ������������������ Roy����������� ������������������ Fielding의����������� ������������������ 박사����������� ������������������ 학위����������� ������������������ 논문에서����������� ������������������ 제안된����������� ������������������ 설계����������� ������������������ 스타일����������� ������������������
• Http����������� ������������������ 메소드를����������� ������������������ 활용하지만����������� ������������������ 웹에����������� ������������������ 국한되진����������� ������������������ 않음����������� ������������������
– 리소스����������� ������������������ 조회����������� ������������������ :����������� ������������������ GET����������� ������������������
– 새로운����������� ������������������ 리소스����������� ������������������ 추가����������� ������������������ :����������� ������������������ POST����������� ������������������
– 존재하는����������� ������������������ 리소스����������� ������������������ 변경����������� ������������������ :����������� ������������������ PUT����������� ������������������
– 존재하는����������� ������������������ 리소스����������� ������������������ 삭제����������� ������������������ :����������� ������������������ DELETE����������� ������������������
• REST����������� ������������������ 스타일의����������� ������������������ URL����������� ������������������
– 책����������� ������������������ 목록:����������� ������������������ http://okgosu.net/book����������� ������������������
– ID가����������� ������������������ 1인����������� ������������������ 책����������� ������������������ 조회����������� ������������������ :����������� ������������������ http://okgosu.net/book/1����������� ������������������
16����������� ������������������ ����������� ������������������
2.4.����������� ������������������ OAuth����������� ������������������ 인증����������� ������������������ 방식의����������� ������������������ 이해
1. 기술적 관점에서는 애플리케이션이 사용자 정보에 접근해 실행 권한 획득 2. 서비스 관점에서는 회원 가입 절차를 단순화 하는데도 사용 가능
17����������� ������������������ ����������� ������������������
2.4.����������� ������������������ OAuth����������� ������������������ 인증����������� ������������������ 방식의����������� ������������������ 이해����������� ������������������
• 목적����������� ������������������ – 특정����������� ������������������ 서비스(앱)에서����������� ������������������ 다른����������� ������������������ 서비스에����������� ������������������ 가입된����������� ������������������ 사용자����������� ������������������ 정보에����������� ������������������ 접근할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 방법����������� ������������������
– 예)����������� ������������������ 미투데이API로����������� ������������������ 개발한����������� ������������������ 앱에서����������� ������������������ 네이버����������� ������������������ 유저����������� ������������������ 정보����������� ������������������ 가져오기����������� ������������������
• 용어����������� ������������������ 정리����������� ������������������ – 컨슈머:����������� ������������������ API로����������� ������������������ 만든����������� ������������������ 서비스����������� ������������������ (예:����������� ������������������ 미투데이����������� ������������������ API로����������� ������������������ 개발한����������� ������������������ 앱),����������� ������������������ OAuth를����������� ������������������ 이용하여����������� ������������������ 유저����������� ������������������ 정보에����������� ������������������ 접근가능����������� ������������������ ����������� ������������������
– 서비스����������� ������������������ 프로바이더:����������� ������������������ API를����������� ������������������ 제공하는����������� ������������������ 서비스����������� ������������������ (예:����������� ������������������ 네이버����������� ������������������ Open����������� ������������������ API����������� ������������������ 서비스),����������� ������������������ OAuth����������� ������������������ 접근을����������� ������������������ 지원����������� ������������������
– 유저:����������� ������������������ 서비스����������� ������������������ 프로바이더와����������� ������������������ 컨슈머를����������� ������������������ 사용하는����������� ������������������ 개인����������� ������������������ (예:����������� ������������������ 네이버����������� ������������������ 회원)����������� ������������������
18����������� ������������������ ����������� ������������������
앱 vs 웹
앱개발 비용 측면에서 플랫폼별 개발외에 멀티플랫폼 개발 기술이나 하이브리드 개발 기술도 고려 가능 게임은 앱으로 작성함. 단, 웹으로 할 경우는 지극히 단순한 게임에 한함 모바일 웹은 새로운 기존 웹페이지에 대한 모바일 버전 대응용
구분 앱 웹
멀티플랫폼 플랫폼별 개발 지원가능
개발언어 플랫폼별로 다름 html5
디바이스 제어 가능 부분가능
업데이트 앱스토어를 통함 즉시가능
그래픽 처리 직접 제어 브라우저 성능에 의존
사용자 알림 푸쉬 가능 웹페이지 접속시에만 확인가능
데이터 저장 로컬 저장 가능 부분 가능
네트웍 사용 네트웍 없이 구동 가능 불가능
실행 방법 폰 화면에서 바로 구동 브라우저 또는 바로가기 추가시
19����������� ������������������ ����������� ������������������
2.5.����������� ������������������ Open����������� ������������������ API����������� ������������������ 프로그래밍����������� ������������������ 구현����������� ������������������ 방법����������� ������������������
[방법1]����������� ������������������ JSP에서����������� ������������������ 모든����������� ������������������ 오픈����������� ������������������ API����������� ������������������ 관련����������� ������������������ 로직����������� ������������������ 처리����������� ������������������ ����������� ������������������ ����������� ������������������ 1) 오픈����������� ������������������ API����������� ������������������ 파라미터����������� ������������������ 추출:����������� ������������������ query,����������� ������������������ target,����������� ������������������ key����������� ������������������ 등����������� ������������������ ����������� ������������������ 2) 오픈����������� ������������������ API����������� ������������������ 호출����������� ������������������ 및����������� ������������������ XML����������� ������������������ 결과����������� ������������������ 수신����������� ������������������ 3) XML����������� ������������������ 결과����������� ������������������ 파싱����������� ������������������ 및����������� ������������������ html����������� ������������������ 출력����������� ������������������ ����������� ������������������ à����������� ������������������ JSP의����������� ������������������ 컨트롤����������� ������������������ 로직과����������� ������������������ 화면로직(html)이����������� ������������������ 섞이게����������� ������������������ 되어����������� ������������������ 복잡해짐����������� ������������������
[방법2]����������� ������������������ Ajax����������� ������������������ UI에서����������� ������������������ 오픈API����������� ������������������ 호출����������� ������������������ 및����������� ������������������ 결과����������� ������������������ 표시����������� ������������������ +����������� ������������������ JSP에서����������� ������������������ 오픈����������� ������������������ API����������� ������������������ 호출����������� ������������������ 결과����������� ������������������ 리턴����������� ������������������ ����������� ������������������ 1) Ajax에서����������� ������������������ JSP로����������� ������������������ 오픈����������� ������������������ API����������� ������������������ 파라미터����������� ������������������ 전송:����������� ������������������ query,����������� ������������������ target,����������� ������������������ key����������� ������������������ 등����������� ������������������ ����������� ������������������ 2) JSP에서����������� ������������������ 오픈����������� ������������������ API����������� ������������������ 파라미터����������� ������������������ 추출:����������� ������������������ query,����������� ������������������ target,����������� ������������������ key����������� ������������������ 등����������� ������������������ 3) JSP에서����������� ������������������ 오픈����������� ������������������ API����������� ������������������ 호출����������� ������������������ 및����������� ������������������ XML����������� ������������������ 결과를����������� ������������������ 리턴����������� ������������������ 4) Ajax에서����������� ������������������ XML����������� ������������������ 결과����������� ������������������ 파싱����������� ������������������ 및����������� ������������������ html����������� ������������������ 출력����������� ������������������ ����������� ������������������ ����������� ������������������ *컨트롤����������� ������������������ 로직과����������� ������������������ 화면로직을����������� ������������������ 분리할����������� ������������������ 수����������� ������������������ 있음����������� ������������������ *자바스크립트는����������� ������������������ 보안����������� ������������������ 때문에����������� ������������������ 오픈����������� ������������������ API를����������� ������������������ 호출한����������� ������������������ 결과를����������� ������������������ 직접����������� ������������������ 수신할����������� ������������������ 수����������� ������������������ 없으므로����������� ������������������ 프록시JSP를����������� ������������������ 통해����������� ������������������ 결과값을����������� ������������������ 받아야����������� ������������������ 함����������� ������������������
20����������� ������������������ ����������� ������������������
<%@����������� ������������������ page����������� ������������������ language="java"����������� ������������������ contentType="text/html;����������� ������������������ charset=UTF-8"����������� ������������������ ����������� ������������������ pageEncoding="UTF-8"%>����������� ������������������ <%@����������� ������������������ page����������� ������������������ import="java.net.URLEncoder"����������� ������������������ %>����������� ������������������ <%@����������� ������������������ page����������� ������������������ import="org.apache.commons.httpclient.HttpClient"����������� ������������������ %>����������� ������������������ <%@����������� ������������������ page����������� ������������������ import="org.apache.commons.httpclient.methods.GetMethod"����������� ������������������ %>����������� ������������������ <%@����������� ������������������ page����������� ������������������ import="org.apache.commons.httpclient.HttpStatus"����������� ������������������ %>����������� ������������������ <%����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ String����������� ������������������ key����������� ������������������ =����������� ������������������ “000000000000000000000000";����������� ������������������ //����������� ������������������ 오픈����������� ������������������ API����������� ������������������ 키����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ String����������� ������������������ target����������� ������������������ =����������� ������������������ request.getParameter("target");����������� ������������������ //����������� ������������������ 검색����������� ������������������ 대상����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ String����������� ������������������ query����������� ������������������ =����������� ������������������ request.getParameter("query");����������� ������������������ //����������� ������������������ 검색어����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ String����������� ������������������ url����������� ������������������ =����������� ������������������ "http://openapi.naver.com/search?query="����������� ������������������ +����������� ������������������ query����������� ������������������ ����������� ������������������ +����������� ������������������ "&target="����������� ������������������ +����������� ������������������ target+����������� ������������������ "&key="����������� ������������������ +����������� ������������������ key;����������� ������������������ //����������� ������������������ API����������� ������������������ 호출����������� ������������������ URL����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ request.setCharacterEncoding("utf-8");����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ HttpClient����������� ������������������ client����������� ������������������ =����������� ������������������ new����������� ������������������ HttpClient();����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ GetMethod����������� ������������������ method����������� ������������������ =����������� ������������������ new����������� ������������������ GetMethod(url);����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ try{����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ int����������� ������������������ statusCode����������� ������������������ =����������� ������������������ client.executeMethod(method);����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ out.clearBuffer();����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ response.reset();����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ response.setStatus(statusCode);����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ if(statusCode����������� ������������������ ==����������� ������������������ HttpStatus.SC_OK)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ String����������� ������������������ result����������� ������������������ =����������� ������������������ method.getResponseBodyAsString();����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ response.setContentType("text/xml;����������� ������������������ charset=utf-8");����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ out.println(result);����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ catch����������� ������������������ (Exception����������� ������������������ e)����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ out.println(e.toString());����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ finally����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ if(method����������� ������������������ !=����������� ������������������ null)����������� ������������������ method.releaseConnection();����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������ ����������� ������������������ %>����������� ������������������
api_proxy.jsp����������� ������������������ 작성����������� ������������������ 예����������� ������������������
21����������� ������������������ ����������� ������������������
//����������� ������������������ 단순히����������� ������������������ 특정����������� ������������������ URL만����������� ������������������ 받아서����������� ������������������ 처리����������� ������������������
<?php����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ if����������� ������������������ (isset����������� ������������������ ($_GET["url"])����������� ������������������ )����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $url����������� ������������������ =����������� ������������������ trim($_GET["url"]);����������� ������������������ //����������� ������������������ url����������� ������������������ 요청값����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ if����������� ������������������ (strlen($url)����������� ������������������ >����������� ������������������ 0)����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $resultxml����������� ������������������ =����������� ������������������ file_get_contents($url);����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ echo����������� ������������������ $resultxml;����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������
?>����������� ������������������
����������� ������������������
//����������� ������������������ 쿼리����������� ������������������ 스트링이����������� ������������������ 별도로����������� ������������������ 있을����������� ������������������ 경우����������� ������������������ ����������� ������������������
<?php����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ define('KEY',����������� ������������������ ‘00000000000000000000000');����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ if����������� ������������������ (isset����������� ������������������ ($_GET["url"])����������� ������������������ )����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $url����������� ������������������ =����������� ������������������ trim($_GET["url"]);����������� ������������������ //����������� ������������������ url����������� ������������������ 요청값����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ if����������� ������������������ (strlen($url)����������� ������������������ >����������� ������������������ 0)����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $query����������� ������������������ =����������� ������������������ ����������� ������������������ trim($_GET["query"]);����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ naver����������� ������������������ api����������� ������������������ 처리����������� ������������������ 및����������� ������������������ 쿼리����������� ������������������ 스트링����������� ������������������ 생성����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ if����������� ������������������ (isset����������� ������������������ ($_GET["query"])����������� ������������������ )����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $query����������� ������������������ =����������� ������������������ ����������� ������������������ urlencode($_GET["query"]);����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $encoding����������� ������������������ =����������� ������������������ ����������� ������������������ trim($_GET["encoding"]);����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $coord����������� ������������������ =����������� ������������������ ����������� ������������������ trim($_GET["coord"]);����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $url����������� ������������������ =����������� ������������������ $url."?key=".KEY."&query=".$query."&encoding=".$encoding."&coord=".$coord;����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $resultxml����������� ������������������ =����������� ������������������ file_get_contents($url);����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ echo����������� ������������������ $resultxml;����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������
?>����������� ������������������
api_proxy.php����������� ������������������ 작성����������� ������������������ 예����������� ������������������
3.����������� ������������������ 공공정보와����������� ������������������ 네이버����������� ������������������ 오픈API����������� ������������������ 매쉬업����������� ������������������ 비즈니스����������� ������������������ 모델����������� ������������������ ����������� ������������������
23����������� ������������������ ����������� ������������������
3.1. 공공정보 목록
제공 정보 별 ⁻ 행정/복지 : 기상정보, 우편번호, 국가기록물, 법령정보, 오픈플랫폼 3D지도
⁻ 교통/지리: 버스 도착정보, 서울시GIS
⁻ 문화/관광: 관광정보, 유물/문화재 정보, 공연전시 정보
⁻ 생활/도서: 국립중앙도서관, 국회도서관, 국가지식자료 등
제공처 별 ⁻ 지자체: 서울시 열린 데이터 광장, 전주시 공공정보 Open API 등
⁻ 정부기관: 국가공유자원포털, 우체국, 통계청, 국가법령정보센터, 기상청, 관광공사 등
24����������� ������������������ ����������� ������������������
3.2. 국가공유자원포털 국가공유자원포털(http://www.data.go.kr)
- 행전안전부 주도로 185건 API 보유, 계속 추가 예정
⁻ 인기 프로그램 Top 10 중 6개는 버스 운행 정보 관련 API
⁻ 오픈API의 62%는 아직 SOAP 방식으로 제공되며, 31%만 REST 방식
25����������� ������������������ ����������� ������������������
3.3. 서울 열린 데이터 광장 서울 열린 데이터 광장(http://data.seoul.go.kr)
⁻ 2012년 10월 현재 오픈API 130 공개, 현재 830종 데이터 공개 중
⁻ 개발자 모임 및 개발자 테스트 사이트 운영����������� ������������������
26����������� ������������������ ����������� ������������������
3.4. 스마트 모바일 앱개발지원센터 스마트 모바일 앱개발지원센터 (http://www.smac.or.kr)
⁻ 40여 국내 공공기관에 제공하는 오픈 API를 비롯해 포털/이통사API에 대해
일목요연하게 정리
27����������� ������������������ ����������� ������������������
3.5. 공공정보활용지원센터 공공정보활용지원센터 (https://www.pisc.or.kr)
⁻ 공공정보 개방 요청 및 활용에 관한 에로사항과 서비스 지원 신청
28����������� ������������������ ����������� ������������������
3.6. 공공정보 활용 비즈니스
공공정보 API 선택시 고려사항 ⁻ 제도: 대부분 비상업용에 한해 제공함
⁻ 쿼리량: 사용량에 대한 제한이 있음
⁻ 용도: 버스, 날씨, 우편번호 정보 중심
비즈니스 모델 ⁻ 생활 정보 중심으로 개발, 즉 매일 변화하는 정보들 (버스, 날씨 등)
⁻ 상업적 사용에 관한 제도 마련 중 (공공정보활용지원센터)
⁻ 재능 기부
⁻ 공공정보 활용 공모전
[데모]����������� ������������������ ����������� ������������������
공공정보와����������� ������������������ 네이버����������� ������������������ 오픈API����������� ������������������ 매쉬업����������� ������������������ 서비스����������� ������������������ 개발����������� ������������������ 예����������� ������������������ ����������� ������������������
:����������� ������������������ 네이버����������� ������������������ 지도����������� ������������������ +����������� ������������������ 서울시����������� ������������������ 안심먹거리����������� ������������������ POI����������� ������������������
30����������� ������������������ ����������� ������������������
개발 목표
네이버 지도에서 서울시 안심먹거리 POI 정보 표시
적용 API ⁻ 네이버 지도
⁻ 서울시 안심먹거리 POI 정보
⁻ 네이버 주소-좌표 변환 API
31����������� ������������������ ����������� ������������������
<!DOCTYPE����������� ������������������ html����������� ������������������ PUBLIC����������� ������������������ "-//W3C//DTD����������� ������������������ XHTML����������� ������������������ 1.0����������� ������������������ Transitional//EN"����������� ������������������ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">����������� ������������������
<html����������� ������������������ xmlns="http://www.w3.org/1999/xhtml"����������� ������������������ xml:lang="ko"����������� ������������������ lang="ko">����������� ������������������
<head>����������� ������������������
<meta����������� ������������������ http-equiv="Content-Type"����������� ������������������ content="text/html;����������� ������������������ charset=utf-8"����������� ������������������ />����������� ������������������
<title>네이버����������� ������������������ 지도����������� ������������������ OpenAPI����������� ������������������ -����������� ������������������ 자바스크립트����������� ������������������ 2.0����������� ������������������ 버전����������� ������������������ 지도����������� ������������������ 생성</title>����������� ������������������
<script����������� ������������������ type="text/javascript"����������� ������������������ ����������� ������������������
src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=f8a20b93f0bf315be90d4a35145ef0fa">����������� ������������������ <!--����������� ������������������ 지도����������� ������������������ 라이브러리,����������� ������������������ 지도����������� ������������������ Key����������� ������������������ 설정����������� ������������������ -->����������� ������������������ ����������� ������������������
</script>����������� ������������������
</head>����������� ������������������
<body>����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ <input����������� ������������������ type="button"����������� ������������������ onclick="callOpenAPI()"����������� ������������������ value="����������� ������������������ 서울안심먹거리����������� ������������������ 정보조회"����������� ������������������ />����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ <div����������� ������������������ id="result"></div>����������� ������������������
<!--����������� ������������������ 지도를����������� ������������������ 표시할����������� ������������������ DIV����������� ������������������ 영역����������� ������������������ 설정����������� ������������������ -->����������� ������������������ ����������� ������������������
<div����������� ������������������ id����������� ������������������ =����������� ������������������ "testMap"����������� ������������������ style="border:1px����������� ������������������ solid����������� ������������������ #000;����������� ������������������ width:500px;����������� ������������������ height:400px;����������� ������������������ margin:20px;"></div>����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <script����������� ������������������ type="text/javascript">����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ 다음����������� ������������������ 단계에서����������� ������������������ 여기에����������� ������������������ ����������� ������������������ 네이버����������� ������������������ 지도����������� ������������������ 생성����������� ������������������ 스크립트를����������� ������������������ 넣을����������� ������������������ 것����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ </script>����������� ������������������
</body>����������� ������������������
</html>����������� ������������������
[1-1단계]����������� ������������������ html����������� ������������������ 템플릿����������� ������������������ 및����������� ������������������ 지도����������� ������������������ 자바스크립트����������� ������������������ 설정����������� ������������������ ����������� ������������������
32����������� ������������������ ����������� ������������������
var����������� ������������������ oPoint����������� ������������������ =����������� ������������������ new����������� ������������������ nhn.api.map.LatLng(37.5010226,����������� ������������������ 127.0396037);����������� ������������������ //����������� ������������������ 지도의����������� ������������������ 좌표����������� ������������������ 설정����������� ������������������ ����������� ������������������
nhn.api.map.setDefaultPoint('LatLng');����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ 위도����������� ������������������ 경도����������� ������������������ 좌표계����������� ������������������ 사용����������� ������������������ ����������� ������������������ (LatLng,����������� ������������������ TM128,����������� ������������������ UTMK)����������� ������������������ ����������� ������������������
oMap����������� ������������������ =����������� ������������������ new����������� ������������������ nhn.api.map.Map('testMap'����������� ������������������ ,{//����������� ������������������ 지도����������� ������������������ 생성����������� ������������������ (옵션����������� ������������������ 설정)����������� ������������������ ����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ point����������� ������������������ :����������� ������������������ oPoint,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ 지도의����������� ������������������ 중심점����������� ������������������ 좌표����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ zoom����������� ������������������ :����������� ������������������ 10,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ 지도의����������� ������������������ 축척레벨����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ enableWheelZoom����������� ������������������ :����������� ������������������ true,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ 마우스����������� ������������������ 휠����������� ������������������ 동작으로����������� ������������������ 지도를����������� ������������������ 확대/축소할지����������� ������������������ 여부����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ enableDragPan����������� ������������������ :����������� ������������������ true,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ 마우스로����������� ������������������ 끌어서����������� ������������������ 지도를����������� ������������������ 이동할지����������� ������������������ 여부����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ enableDblClickZoom����������� ������������������ :����������� ������������������ false,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ 더블클릭으로����������� ������������������ 지도를����������� ������������������ 확대할지����������� ������������������ 여부����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ mapMode����������� ������������������ :����������� ������������������ 0,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ 지도����������� ������������������ 모드(0����������� ������������������ :����������� ������������������ 일반����������� ������������������ 지도,����������� ������������������ 1����������� ������������������ :����������� ������������������ 겹침����������� ������������������ 지도,����������� ������������������ 2����������� ������������������ :����������� ������������������ 위성����������� ������������������ 지도)����������� ������������������ ����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ activateTrafficMap����������� ������������������ :����������� ������������������ false,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ 실시간����������� ������������������ 교통����������� ������������������ 활성화����������� ������������������ 여부����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ activateBicycleMap����������� ������������������ :����������� ������������������ false,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ 자전거����������� ������������������ 지도����������� ������������������ 활성화����������� ������������������ 여부����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ minMaxLevel����������� ������������������ :����������� ������������������ [����������� ������������������ 1,����������� ������������������ 14����������� ������������������ ],����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ 지도의����������� ������������������ 최소/최대����������� ������������������ 축척����������� ������������������ 레벨����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ size����������� ������������������ :����������� ������������������ new����������� ������������������ nhn.api.map.Size(500,����������� ������������������ 400)����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ 지도의����������� ������������������ 크기����������� ������������������
});����������� ������������������
[1-2단계]����������� ������������������ 지도����������� ������������������ 생성����������� ������������������ 스크립트����������� ������������������ 추가����������� ������������������ ����������� ������������������
API����������� ������������������ 참조:����������� ������������������ http://dev.naver.com/openapi/apis/map/javascript_2_0/reference����������� ������������������
33����������� ������������������ ����������� ������������������
����������� ������������������ 네이버����������� ������������������ 지도����������� ������������������ OpenAPI����������� ������������������ ����������� ������������������ 컨트롤����������� ������������������
네이버����������� ������������������ 지도는����������� ������������������ 지도����������� ������������������ 인스턴스를����������� ������������������ 생성하면����������� ������������������ 여기에����������� ������������������ 줌,����������� ������������������ 실시간����������� ������������������ 교통정보,����������� ������������������ 그리기����������� ������������������ 객체����������� ������������������ 등����������� ������������������ 다양한����������� ������������������ 컨트롤들을����������� ������������������ 추가할����������� ������������������ 수����������� ������������������ 있습니다.����������� ������������������ ����������� ������������������ ����������� ������������������ API����������� ������������������ 참조:����������� ������������������ http://dev.naver.com/openapi/apis/map/javascript_2_0/reference����������� ������������������ ����������� ������������������
1����������� ������������������ 기본����������� ������������������ 지도����������� ������������������ 표시����������� ������������������ 2����������� ������������������ 지도����������� ������������������ 상����������� ������������������ 마커����������� ������������������ 및����������� ������������������ 정보창����������� ������������������ 이용����������� ������������������ 3����������� ������������������ 지도����������� ������������������ 줌����������� ������������������ 컨트롤����������� ������������������ 등록����������� ������������������ 4����������� ������������������ 위성/겹침����������� ������������������ 지도����������� ������������������ 사용,����������� ������������������ 주제별����������� ������������������ 지도����������� ������������������ 5����������� ������������������ 선����������� ������������������ 그리기����������� ������������������ 6����������� ������������������ 자전거����������� ������������������ 범례����������� ������������������ 7����������� ������������������ 교통����������� ������������������ 범례����������� ������������������ 8����������� ������������������ Draggable����������� ������������������ Marker����������� ������������������ 9����������� ������������������ 원����������� ������������������ 그리기����������� ������������������
34����������� ������������������ ����������� ������������������
[지도����������� ������������������ 중심점����������� ������������������ /����������� ������������������ 확대레벨����������� ������������������ 지정하기]����������� ������������������
var����������� ������������������ newPoint����������� ������������������ =����������� ������������������ new����������� ������������������ nhn.api.map.LatLng(37.241965,1
31.865000);����������� ������������������ //����������� ������������������ 독도����������� ������������������ ����������� ������������������
oMap.setCenter(newPoint);����������� ������������������ //����������� ������������������ -����������� ������������������ 지도����������� ������������������ 생성시����������� ������������������ 지정한����������� ������������������ 중심
점으로����������� ������������������ 중심점을����������� ������������������ 설정한다����������� ������������������
oMap.setLevel(11);����������� ������������������ //����������� ������������������ -����������� ������������������ 지도의����������� ������������������ 레벨을����������� ������������������ 특정����������� ������������������ 값으로����������� ������������������ 설정합
니다.����������� ������������������ (숫자가����������� ������������������ 커질수록����������� ������������������ 확대)����������� ������������������
[1-3단계]����������� ������������������ 화면����������� ������������������ 컨트롤����������� ������������������
35����������� ������������������ ����������� ������������������
요청URL:����������� ������������������ http://openapi.seoul.go.kr:8088/sample/xml/SearchGoodFoodInfoService/1/5/1/1/����������� ������������������
내용:����������� ������������������ 강남구에����������� ������������������ 위치한����������� ������������������ 원산지표시����������� ������������������ 우수����������� ������������������ 음식점에����������� ������������������ 속해있는����������� ������������������ 업체명����������� ������������������ ����������� ������������������
서울시����������� ������������������ 안심먹거리����������� ������������������ API����������� ������������������
36����������� ������������������ ����������� ������������������
<script����������� ������������������ type="text/javascript"����������� ������������������ src="jquery-1.6.4.js"></script>����������� ������������������
<script>����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ params����������� ������������������ =����������� ������������������ {"url"����������� ������������������ :����������� ������������������ "",����������� ������������������ "query":"",����������� ������������������ "key":"f8a20b93f0bf315be90d4a35145ef0fa",����������� ������������������ "encoding":"utf-8",����������� ������������������ "coord":"latlng"}����������� ������������������ //����������� ������������������ 전송할����������� ������������������ 파라미터����������� ������������������ 정의����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ function����������� ������������������ callOpenAPI()����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ params.url����������� ������������������ =����������� ������������������ ����������� ������������������ "http://openapi.seoul.go.kr:8088/sample/xml/SearchGoodFoodInfoService/1/5/1/1/"����������� ������������������ ;����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ q����������� ������������������ =����������� ������������������ $.param(params);����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ ajax_url����������� ������������������ =����������� ������������������ "api_proxy.php?"����������� ������������������ +����������� ������������������ q;����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $.ajax({����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ type:����������� ������������������ "get",����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ url:����������� ������������������ ajax_url,����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ contentType:����������� ������������������ "text/xml;����������� ������������������ charset=utf-8",����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ dataType:����������� ������������������ "xml",����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ error:����������� ������������������ function(xhr,����������� ������������������ status,����������� ������������������ error)����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ alert("error����������� ������������������ :����������� ������������������ "����������� ������������������ +status);����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ },����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ success:����������� ������������������ showResult����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ api����������� ������������������ 호출����������� ������������������ 성공시����������� ������������������ 실행되는����������� ������������������ 함수����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ });����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������
����������� ������������������
����������� ������������������
[2-1단계]����������� ������������������ 서울시����������� ������������������ 안심먹거리����������� ������������������ API����������� ������������������ 호출����������� ������������������
37����������� ������������������ ����������� ������������������
var����������� ������������������ pos_name����������� ������������������ =����������� ������������������ "";����������� ������������������
function����������� ������������������ showResult(xml)����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $(xml).find("row").each(function(idx)����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ t����������� ������������������ =����������� ������������������ $(this).find("CTF_NAME").text();����������� ������������������ //����������� ������������������ 음식점명����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ pos_name����������� ������������������ =����������� ������������������ t.replace("<![CDATA[",����������� ������������������ "").replace("]]>",����������� ������������������ "");����������� ������������������ //����������� ������������������ CDATA����������� ������������������ 태그����������� ������������������ 제거����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ addr����������� ������������������ =����������� ������������������ $(this).find("CTF_ADDR").text().replace("<![CDATA[",����������� ������������������ "").replace("]]>",����������� ������������������ "");����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $("#result").append("<br/>����������� ������������������ <a����������� ������������������ href=\"javascript:showPos('"����������� ������������������ +����������� ������������������ addr����������� ������������������ +����������� ������������������ "')\">"����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ +����������� ������������������ pos_name����������� ������������������ +����������� ������������������ ":"����������� ������������������ +����������� ������������������ addr����������� ������������������ +����������� ������������������ "</a>");����������� ������������������ //����������� ������������������ 주소에����������� ������������������ showPos함수����������� ������������������ 적용.����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ });����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������
</script>����������� ������������������
����������� ������������������
����������� ������������������
[2-2단계]����������� ������������������ 서울시����������� ������������������ 안심먹거리����������� ������������������ API����������� ������������������ 호출����������� ������������������ 결과����������� ������������������ 처리����������� ������������������
38����������� ������������������ ����������� ������������������
참고사이트:����������� ������������������ http://dev.naver.com/openapi/apis/map/javascript_2_0/reference#coordtrans����������� ������������������
요청URL:����������� ������������������ http://openapi.map.naver.com/api/geocode.php����������� ������������������ ����������� ������������������
예시:����������� ������������������ 강남구����������� ������������������ 논현동����������� ������������������ 91-18의����������� ������������������ 위/경도값����������� ������������������ ����������� ������������������
http://openapi.map.naver.com/api/geocode.php?key=f8a20b93f0bf315be90d4a35145ef0fa&encoding=utf-8&coord=latlng&query=%EA%B0%95%EB%82%A8%EA%B5%AC%20%EB%85%BC%ED%98%84%EB%8F%99%2091-18����������� ������������������
����������� ������������������
네이버����������� ������������������ 주소-좌표����������� ������������������ 변환����������� ������������������ API����������� ������������������
39����������� ������������������ ����������� ������������������
var����������� ������������������ oMarker;����������� ������������������
����������� ������������������ ����������� ������������������ function����������� ������������������ showPos(addr)����������� ������������������ {����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ if(oMarker����������� ������������������ !=null)����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ oMap.removeOverlay(oMarker);����������� ������������������ //����������� ������������������ 기존����������� ������������������ 마커����������� ������������������ 제거����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ params.url����������� ������������������ =����������� ������������������ ����������� ������������������ "http://openapi.map.naver.com/api/geocode.php"����������� ������������������ ;����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ params.query����������� ������������������ =����������� ������������������ ����������� ������������������ addr����������� ������������������ ;����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ q����������� ������������������ =����������� ������������������ $.param(params);����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ ajax_url����������� ������������������ =����������� ������������������ "api_proxy.php?"����������� ������������������ +����������� ������������������ q;����������� ������������������ //openapi����������� ������������������ 호출����������� ������������������ URL과����������� ������������������ 주소를����������� ������������������ 파라미터로����������� ������������������ 전달����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ $.ajax({����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ type:����������� ������������������ "get",����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ url:����������� ������������������ ajax_url,����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ contentType:����������� ������������������ "text/xml;����������� ������������������ charset=utf-8",����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ dataType:����������� ������������������ "xml",����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ error:function(xhr,����������� ������������������ status,����������� ������������������ error)����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ alert("error����������� ������������������ :����������� ������������������ "����������� ������������������ +status);����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ },����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������
[3-1단계]����������� ������������������ 주소좌표변환����������� ������������������ API����������� ������������������ 호출����������� ������������������ 및����������� ������������������ 지도����������� ������������������ 마커����������� ������������������ 추가����������� ������������������
40����������� ������������������ ����������� ������������������
success:function(xml)����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ pos_x����������� ������������������ =����������� ������������������ parseFloat($(xml).find("x").text().substr(0,����������� ������������������ 11));����������� ������������������ //����������� ������������������ 문자열값을����������� ������������������ 숫자로����������� ������������������ 변환����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ pos_y����������� ������������������ =����������� ������������������ parseFloat($(xml).find("y").text().substr(0,����������� ������������������ 10));����������� ������������������ //����������� ������������������ 문자열값을����������� ������������������ 숫자로����������� ������������������ 변환����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ newPoint����������� ������������������ =����������� ������������������ new����������� ������������������ nhn.api.map.LatLng(pos_y,����������� ������������������ pos_x);����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ oMap.setCenter(newPoint);����������� ������������������ //����������� ������������������ -����������� ������������������ 지도����������� ������������������ 생성시����������� ������������������ 지정한����������� ������������������ 중심점으로����������� ������������������ 중심점을����������� ������������������ 설정한다����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ oSize����������� ������������������ =����������� ������������������ new����������� ������������������ nhn.api.map.Size(28,����������� ������������������ 37);����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ oOffset����������� ������������������ =����������� ������������������ new����������� ������������������ nhn.api.map.Size(14,����������� ������������������ 37);����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ var����������� ������������������ oIcon����������� ������������������ =����������� ������������������ new����������� ������������������ nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png',����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ oSize,����������� ������������������ oOffset);����������� ������������������ //����������� ������������������ 마커용����������� ������������������ 아이콘����������� ������������������ ����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ oMarker����������� ������������������ =����������� ������������������ new����������� ������������������ nhn.api.map.Marker(oIcon,����������� ������������������ {����������� ������������������ title����������� ������������������ :����������� ������������������ pos_name����������� ������������������ });����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ oMarker.setPoint(newPoint);����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ oMap.addOverlay(oMarker);����������� ������������������ //����������� ������������������ 해당����������� ������������������ 좌표에����������� ������������������ 마커����������� ������������������ 추가����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ });����������� ������������������
����������� ������������������ ����������� ������������������ }����������� ������������������
[3-2단계]����������� ������������������ 주소좌표변환����������� ������������������ API����������� ������������������ 호출����������� ������������������ 및����������� ������������������ 지도����������� ������������������ 마커����������� ������������������ 추가����������� ������������������
Thank����������� ������������������ you����������� ������������������