[hello world 오픈세미나]공공정보와 네이버 오픈api

41
공공정보와 네이버 오픈API 매쉬업 서비스 모델과 기술적 고려 사항 NHN 컨텐츠제휴팀 옥상훈 부장

Upload: naver-d2

Post on 28-Nov-2014

8.008 views

Category:

Documents


5 download

DESCRIPTION

 

TRANSCRIPT

Page 1: [Hello world 오픈세미나]공공정보와 네이버 오픈api

공공정보와����������� ������������������  네이버����������� ������������������  오픈API����������� ������������������  매쉬업����������� ������������������  서비스����������� ������������������  모델과����������� ������������������  

기술적����������� ������������������  고려����������� ������������������  사항����������� ������������������  NHN 컨텐츠제휴팀 옥상훈 부장

Page 2: [Hello world 오픈세미나]공공정보와 네이버 오픈api

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)

발표자 소개

Page 3: [Hello world 오픈세미나]공공정보와 네이버 오픈api

목차

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����������� ������������������  매쉬업����������� ������������������  서비스����������� ������������������  개발����������� ������������������  데모����������� ������������������  ����������� ������������������  

����������� ������������������  

����������� ������������������  

����������� ������������������  

Page 4: [Hello world 오픈세미나]공공정보와 네이버 오픈api

1. 네이버����������� ������������������  오픈����������� ������������������  API����������� ������������������  종류와����������� ������������������  활용����������� ������������������  팁

Page 5: [Hello world 오픈세미나]공공정보와 네이버 오픈api

5����������� ������������������  ����������� ������������������  

1.1.����������� ������������������  네이버����������� ������������������  Open����������� ������������������  API����������� ������������������  플랫폼����������� ������������������  구성����������� ������������������  ����������� ������������������  

네이버����������� ������������������  Open����������� ������������������  API����������� ������������������  플랫폼은����������� ������������������  네이버����������� ������������������  서비스들을����������� ������������������  외부에서����������� ������������������  이용할����������� ������������������  수����������� ������������������  있도록����������� ������������������  공개한����������� ������������������  개발자����������� ������������������  인터페이스입니다.����������� ������������������  네이버����������� ������������������  Open����������� ������������������  API����������� ������������������  플랫폼은����������� ������������������  크게����������� ������������������  3가지로����������� ������������������  구성되어����������� ������������������  있습니다.����������� ������������������  

네이버����������� ������������������  지도,����������� ������������������  검색����������� ������������������  API����������� ������������������   미투데이����������� ������������������  API����������� ������������������   소셜게임����������� ������������������  API����������� ������������������  

검색����������� ������������������   지도����������� ������������������   인증����������� ������������������  

카페����������� ������������������   기타����������� ������������������  

인증����������� ������������������   글쓰기����������� ������������������   댓글����������� ������������������  

미투����������� ������������������   친구����������� ������������������   프로필����������� ������������������  

화면����������� ������������������   뷰����������� ������������������   플랫폼����������� ������������������  

통신����������� ������������������   친구����������� ������������������   프로필����������� ������������������  

Page 6: [Hello world 오픈세미나]공공정보와 네이버 오픈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����������� ������������������  에서����������� ������������������  개발

자����������� ������������������  등록을����������� ������������������  한����������� ������������������  다음����������� ������������������  완료된����������� ������������������  애플리케이션을����������� ������������������  등록합니다.����������� ������������������  ����������� ������������������  

Page 7: [Hello world 오픈세미나]공공정보와 네이버 오픈api

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를����������� ������������������  사용하기����������� ������������������  위한����������� ������������������  버전입니다.����������� ������������������  

Page 8: [Hello world 오픈세미나]공공정보와 네이버 오픈api

8����������� ������������������  ����������� ������������������  

1.3.����������� ������������������  네이버����������� ������������������  Open����������� ������������������  API����������� ������������������  이용등록����������� ������������������  (지도)����������� ������������������  

지도키는����������� ������������������  id당����������� ������������������  여러����������� ������������������  개����������� ������������������  발급����������� ������������������  가능하며,����������� ������������������  웹사이트용,����������� ������������������  안드로이드용,����������� ������������������  iOS용으로����������� ������������������  따로����������� ������������������  발급����������� ������������������  받아야����������� ������������������  합니다.����������� ������������������  웹사이트용일����������� ������������������  경우는����������� ������������������  지도를����������� ������������������  구동할����������� ������������������  웹사이트����������� ������������������  URL,����������� ������������������  안드로이드는����������� ������������������  패키지명,����������� ������������������  iOS는����������� ������������������  번들아이디를����������� ������������������  명시합니다.����������� ������������������  PC에서����������� ������������������  웹사이트로����������� ������������������  구동����������� ������������������  테스트할����������� ������������������  경우는����������� ������������������  URL을����������� ������������������  http://localhost로����������� ������������������  입력합니다.����������� ������������������  

Page 9: [Hello world 오픈세미나]공공정보와 네이버 오픈api

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방식으로����������� ������������������  설명함)����������� ������������������  

Page 10: [Hello world 오픈세미나]공공정보와 네이버 오픈api

10����������� ������������������  ����������� ������������������  

1.4.����������� ������������������  네이버����������� ������������������  검색����������� ������������������  Open����������� ������������������  API의����������� ������������������  호출����������� ������������������  

다음����������� ������������������  링크를����������� ������������������  웹브라우저에서����������� ������������������  열어본����������� ������������������  다음����������� ������������������  XML����������� ������������������  소스를����������� ������������������  파악합니다.����������� ������������������  ����������� ������������������  ����������� ������������������  결과는����������� ������������������  RSS����������� ������������������  포맷����������� ������������������  http://openapi.naver.com/search?key=25536aa0b400d0ec5e01f9453e0bf07a&query=nhn&target=book&display=3����������� ������������������  

인터넷����������� ������������������  익스플로러����������� ������������������  브라우저����������� ������������������  화면����������� ������������������   크롬����������� ������������������  브라우저����������� ������������������  화면����������� ������������������  

Page 11: [Hello world 오픈세미나]공공정보와 네이버 오픈api

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

Page 12: [Hello world 오픈세미나]공공정보와 네이버 오픈api

2. 오픈API����������� ������������������  매쉬업����������� ������������������  서비스시����������� ������������������  기술적����������� ������������������  고려����������� ������������������  사항����������� ������������������  

Page 13: [Hello world 오픈세미나]공공정보와 네이버 오픈api

13����������� ������������������  ����������� ������������������  

2.1.����������� ������������������  API����������� ������������������  핵심����������� ������������������  기술의����������� ������������������  이해����������� ������������������  

•  오픈����������� ������������������  API를����������� ������������������  이용한����������� ������������������  개발����������� ������������������  

–  API����������� ������������������  키����������� ������������������  발급����������� ������������������  

–  API����������� ������������������  호출����������� ������������������  URL과����������� ������������������  파라미터����������� ������������������  이해����������� ������������������  

•  데이터����������� ������������������  포맷:����������� ������������������  XML,����������� ������������������  JSON����������� ������������������  

–  2011년����������� ������������������  기준����������� ������������������  API의����������� ������������������  55%가����������� ������������������  JSON����������� ������������������  지원����������� ������������������  

•  프로토콜:����������� ������������������  REST,����������� ������������������  XML-RPC,����������� ������������������  SOAP����������� ������������������  

–  http를����������� ������������������  기반으로����������� ������������������  작동����������� ������������������  

•  인증:����������� ������������������  Oauth����������� ������������������  

Page 14: [Hello world 오픈세미나]공공정보와 네이버 오픈api

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)����������� ������������������  

Page 15: [Hello world 오픈세미나]공공정보와 네이버 오픈api

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����������� ������������������  

Page 16: [Hello world 오픈세미나]공공정보와 네이버 오픈api

16����������� ������������������  ����������� ������������������  

2.4.����������� ������������������  OAuth����������� ������������������  인증����������� ������������������  방식의����������� ������������������  이해

1. 기술적 관점에서는 애플리케이션이 사용자 정보에 접근해 실행 권한 획득 2. 서비스 관점에서는 회원 가입 절차를 단순화 하는데도 사용 가능

Page 17: [Hello world 오픈세미나]공공정보와 네이버 오픈api

17����������� ������������������  ����������� ������������������  

2.4.����������� ������������������  OAuth����������� ������������������  인증����������� ������������������  방식의����������� ������������������  이해����������� ������������������  

•  목적����������� ������������������  –  특정����������� ������������������  서비스(앱)에서����������� ������������������  다른����������� ������������������  서비스에����������� ������������������  가입된����������� ������������������  사용자����������� ������������������  정보에����������� ������������������  접근할����������� ������������������  수����������� ������������������  있는����������� ������������������  방법����������� ������������������  

–  예)����������� ������������������  미투데이API로����������� ������������������  개발한����������� ������������������  앱에서����������� ������������������  네이버����������� ������������������  유저����������� ������������������  정보����������� ������������������  가져오기����������� ������������������  

•  용어����������� ������������������  정리����������� ������������������  –  컨슈머:����������� ������������������  API로����������� ������������������  만든����������� ������������������  서비스����������� ������������������  (예:����������� ������������������  미투데이����������� ������������������  API로����������� ������������������  개발한����������� ������������������  앱),����������� ������������������  OAuth를����������� ������������������  이용하여����������� ������������������  유저����������� ������������������  정보에����������� ������������������  접근가능����������� ������������������  ����������� ������������������  

–  서비스����������� ������������������  프로바이더:����������� ������������������  API를����������� ������������������  제공하는����������� ������������������  서비스����������� ������������������  (예:����������� ������������������  네이버����������� ������������������  Open����������� ������������������  API����������� ������������������  서비스),����������� ������������������  OAuth����������� ������������������  접근을����������� ������������������  지원����������� ������������������  

–  유저:����������� ������������������  서비스����������� ������������������  프로바이더와����������� ������������������  컨슈머를����������� ������������������  사용하는����������� ������������������  개인����������� ������������������  (예:����������� ������������������  네이버����������� ������������������  회원)����������� ������������������  

Page 18: [Hello world 오픈세미나]공공정보와 네이버 오픈api

18����������� ������������������  ����������� ������������������  

앱 vs 웹

 앱개발 비용 측면에서 플랫폼별 개발외에 멀티플랫폼 개발 기술이나 하이브리드 개발 기술도 고려 가능  게임은 앱으로 작성함. 단, 웹으로 할 경우는 지극히 단순한 게임에 한함  모바일 웹은 새로운 기존 웹페이지에 대한 모바일 버전 대응용

구분 앱 웹

멀티플랫폼 플랫폼별 개발 지원가능

개발언어 플랫폼별로 다름 html5

디바이스 제어 가능 부분가능

업데이트 앱스토어를 통함 즉시가능

그래픽 처리 직접 제어 브라우저 성능에 의존

사용자 알림 푸쉬 가능 웹페이지 접속시에만 확인가능

데이터 저장 로컬 저장 가능 부분 가능

네트웍 사용 네트웍 없이 구동 가능 불가능

실행 방법 폰 화면에서 바로 구동 브라우저 또는 바로가기 추가시

Page 19: [Hello world 오픈세미나]공공정보와 네이버 오픈api

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를����������� ������������������  통해����������� ������������������  결과값을����������� ������������������  받아야����������� ������������������  함����������� ������������������  

Page 20: [Hello world 오픈세미나]공공정보와 네이버 오픈api

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����������� ������������������  작성����������� ������������������  예����������� ������������������  

Page 21: [Hello world 오픈세미나]공공정보와 네이버 오픈api

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����������� ������������������  작성����������� ������������������  예����������� ������������������  

Page 22: [Hello world 오픈세미나]공공정보와 네이버 오픈api

3.����������� ������������������  공공정보와����������� ������������������  네이버����������� ������������������  오픈API����������� ������������������  매쉬업����������� ������������������  비즈니스����������� ������������������  모델����������� ������������������  ����������� ������������������  

Page 23: [Hello world 오픈세미나]공공정보와 네이버 오픈api

23����������� ������������������  ����������� ������������������  

3.1. 공공정보 목록

 제공 정보 별 ⁻  행정/복지 : 기상정보, 우편번호, 국가기록물, 법령정보, 오픈플랫폼 3D지도

⁻  교통/지리: 버스 도착정보, 서울시GIS

⁻  문화/관광: 관광정보, 유물/문화재 정보, 공연전시 정보

⁻  생활/도서: 국립중앙도서관, 국회도서관, 국가지식자료 등

 제공처 별 ⁻  지자체: 서울시 열린 데이터 광장, 전주시 공공정보 Open API 등

⁻  정부기관: 국가공유자원포털, 우체국, 통계청, 국가법령정보센터, 기상청, 관광공사 등

Page 24: [Hello world 오픈세미나]공공정보와 네이버 오픈api

24����������� ������������������  ����������� ������������������  

3.2. 국가공유자원포털   국가공유자원포털(http://www.data.go.kr)

- 행전안전부 주도로 185건 API 보유, 계속 추가 예정

⁻  인기 프로그램 Top 10 중 6개는 버스 운행 정보 관련 API

⁻  오픈API의 62%는 아직 SOAP 방식으로 제공되며, 31%만 REST 방식

Page 25: [Hello world 오픈세미나]공공정보와 네이버 오픈api

25����������� ������������������  ����������� ������������������  

3.3. 서울 열린 데이터 광장   서울 열린 데이터 광장(http://data.seoul.go.kr)

⁻  2012년 10월 현재 오픈API 130 공개, 현재 830종 데이터 공개 중

⁻  개발자 모임 및 개발자 테스트 사이트 운영����������� ������������������  

Page 26: [Hello world 오픈세미나]공공정보와 네이버 오픈api

26����������� ������������������  ����������� ������������������  

3.4. 스마트 모바일 앱개발지원센터   스마트 모바일 앱개발지원센터 (http://www.smac.or.kr)

⁻  40여 국내 공공기관에 제공하는 오픈 API를 비롯해 포털/이통사API에 대해

일목요연하게 정리

Page 27: [Hello world 오픈세미나]공공정보와 네이버 오픈api

27����������� ������������������  ����������� ������������������  

3.5. 공공정보활용지원센터   공공정보활용지원센터 (https://www.pisc.or.kr)

⁻  공공정보 개방 요청 및 활용에 관한 에로사항과 서비스 지원 신청

Page 28: [Hello world 오픈세미나]공공정보와 네이버 오픈api

28����������� ������������������  ����������� ������������������  

3.6. 공공정보 활용 비즈니스

 공공정보 API 선택시 고려사항 ⁻  제도: 대부분 비상업용에 한해 제공함

⁻  쿼리량: 사용량에 대한 제한이 있음

⁻  용도: 버스, 날씨, 우편번호 정보 중심

 비즈니스 모델 ⁻  생활 정보 중심으로 개발, 즉 매일 변화하는 정보들 (버스, 날씨 등)

⁻  상업적 사용에 관한 제도 마련 중 (공공정보활용지원센터)

⁻  재능 기부

⁻  공공정보 활용 공모전

Page 29: [Hello world 오픈세미나]공공정보와 네이버 오픈api

[데모]����������� ������������������  ����������� ������������������  

공공정보와����������� ������������������  네이버����������� ������������������  오픈API����������� ������������������  매쉬업����������� ������������������  서비스����������� ������������������  개발����������� ������������������  예����������� ������������������  ����������� ������������������  

:����������� ������������������  네이버����������� ������������������  지도����������� ������������������  +����������� ������������������  서울시����������� ������������������  안심먹거리����������� ������������������  POI����������� ������������������  

Page 30: [Hello world 오픈세미나]공공정보와 네이버 오픈api

30����������� ������������������  ����������� ������������������  

개발 목표

 네이버 지도에서 서울시 안심먹거리 POI 정보 표시

 적용 API ⁻  네이버 지도

⁻  서울시 안심먹거리 POI 정보

⁻  네이버 주소-좌표 변환 API

Page 31: [Hello world 오픈세미나]공공정보와 네이버 오픈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����������� ������������������  템플릿����������� ������������������  및����������� ������������������  지도����������� ������������������  자바스크립트����������� ������������������  설정����������� ������������������  ����������� ������������������  

Page 32: [Hello world 오픈세미나]공공정보와 네이버 오픈api

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����������� ������������������  

Page 33: [Hello world 오픈세미나]공공정보와 네이버 오픈api

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����������� ������������������  원����������� ������������������  그리기����������� ������������������  

Page 34: [Hello world 오픈세미나]공공정보와 네이버 오픈api

34����������� ������������������  ����������� ������������������  

[지도����������� ������������������  중심점����������� ������������������  /����������� ������������������  확대레벨����������� ������������������  지정하기]����������� ������������������  

var����������� ������������������  newPoint����������� ������������������  =����������� ������������������  new����������� ������������������  nhn.api.map.LatLng(37.241965,1

31.865000);����������� ������������������  //����������� ������������������  독도����������� ������������������  ����������� ������������������  

oMap.setCenter(newPoint);����������� ������������������  //����������� ������������������  -����������� ������������������  지도����������� ������������������  생성시����������� ������������������  지정한����������� ������������������  중심

점으로����������� ������������������  중심점을����������� ������������������  설정한다����������� ������������������  

oMap.setLevel(11);����������� ������������������  //����������� ������������������  -����������� ������������������  지도의����������� ������������������  레벨을����������� ������������������  특정����������� ������������������  값으로����������� ������������������  설정합

니다.����������� ������������������  (숫자가����������� ������������������  커질수록����������� ������������������  확대)����������� ������������������  

[1-3단계]����������� ������������������  화면����������� ������������������  컨트롤����������� ������������������  

Page 35: [Hello world 오픈세미나]공공정보와 네이버 오픈api

35����������� ������������������  ����������� ������������������  

요청URL:����������� ������������������  http://openapi.seoul.go.kr:8088/sample/xml/SearchGoodFoodInfoService/1/5/1/1/����������� ������������������  

내용:����������� ������������������  강남구에����������� ������������������  위치한����������� ������������������  원산지표시����������� ������������������  우수����������� ������������������  음식점에����������� ������������������  속해있는����������� ������������������  업체명����������� ������������������  ����������� ������������������  

서울시����������� ������������������  안심먹거리����������� ������������������  API����������� ������������������  

Page 36: [Hello world 오픈세미나]공공정보와 네이버 오픈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����������� ������������������  호출����������� ������������������  

Page 37: [Hello world 오픈세미나]공공정보와 네이버 오픈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����������� ������������������  호출����������� ������������������  결과����������� ������������������  처리����������� ������������������  

Page 38: [Hello world 오픈세미나]공공정보와 네이버 오픈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����������� ������������������  

Page 39: [Hello world 오픈세미나]공공정보와 네이버 오픈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����������� ������������������  호출����������� ������������������  및����������� ������������������  지도����������� ������������������  마커����������� ������������������  추가����������� ������������������  

Page 40: [Hello world 오픈세미나]공공정보와 네이버 오픈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����������� ������������������  호출����������� ������������������  및����������� ������������������  지도����������� ������������������  마커����������� ������������������  추가����������� ������������������  

Page 41: [Hello world 오픈세미나]공공정보와 네이버 오픈api

Thank����������� ������������������  you����������� ������������������