# 민관협력지원플랫폼 활용 서비스 개발 사례

 **2023년**도에 민관협력 지원플랫폼의 공공데이터 API와 앱 배포 서비스를 활용하여 침수경로 경보 서비스를 개발하신 김일국님의 사례를  바탕으로  실제 서비스 개발 흐름에 따라 환경구축부터 배포까지 단계별로 작성된 안내자료입니다. 같은 내용의 동영상 안내자료도 있으니 확인해보시길 바랍니다.

※ 2026년도 버전으로 업데이트 예정

## 1.  서비스 환경 구축

서비스를 개발하기 전 기획에 따라 필요한 환경을 구축하고 테스트합니다. 침수경로 경보 서비스의 경우 플랫폼의 무료 서비스 배포와 NAVER 클라우드의 지도 관련 API가 필요하여 이 2가지를 설정하였습니다. 

먼저, 민관협력 지원플랫폼에서 샘플 앱을 구동하여 서비스 배포가 정상적으로 되는지 테스트 합니다. 테스트 절차는 다음과 같습니다.

  1\. 민관협력 지원플랫폼에 로그인하고 홈페이지 상단의 플랫폼 서비스 메뉴로 진입합니다. 

  2\. [앱 배포환경 중 사용을 원하는 환경을 선택합니다.](https://cccr.gitbook.io/2025-doc/undefined-4#id-3)

<figure><img src="https://3069609901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffir65Z2DlWF3euMQuFL1%2Fuploads%2FgKpY5ZSmcXypBkyrFCml%2F%EB%B0%B0%ED%8F%AC%ED%99%98%EA%B2%BD.gif?alt=media&#x26;token=e4637e11-91f0-471e-ad7b-5472afb6697f" alt="" width="563"><figcaption></figcaption></figure>

&#x20; 3\. [앱 샘플을 다운로드 하고 초급자용 가이드와 영문 다큐먼트를 참고하여 샘플 앱을 테스트합니다.](https://cccr.gitbook.io/2025-doc/undefined-4#id-4)

<figure><img src="https://3069609901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffir65Z2DlWF3euMQuFL1%2Fuploads%2FkoV57Vmo0dawyC9K8eDt%2F%EB%8B%A4%ED%81%90%EB%A8%BC%ED%8A%B8%20%EC%83%98%ED%94%8C%20%ED%8C%A8%ED%82%A4%EC%A7%80.gif?alt=media&#x26;token=077f43df-e8d0-457a-a2b1-19ac2d170d4d" alt="" width="563"><figcaption></figcaption></figure>

&#x20; 4\. [콘솔 메뉴에 진입하여 구동한 샘플앱의 상태를 확인합니다.](https://cccr.gitbook.io/2025-doc/undefined-4#id-5)

다음으로, 네이버 클라우드에서 제공하는 서비스 API를 신청합니다. 이때 플랫폼을 통해 민간클라우드에 접속해야 무료로 서비스를 이용할 수 있습니다. 반드시 플랫폼을 통해 로그인 해주시길 바랍니다.

&#x20; 1\. 플랫폼에 로그인후 상단의 클라우드메뉴로 진입하고 사용하고자하는 클라우드를 선택합니다.

&#x20; 2.[ SSO 페이지로 이동하면 콘솔 접근 버튼을 클릭하여 클라우드 콘솔로 진입합니다.](https://cccr.gitbook.io/2025-doc/undefined-1#id-2.2)

<figure><img src="https://3069609901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffir65Z2DlWF3euMQuFL1%2Fuploads%2FhaaJH2gzYbwR6FWjSREb%2F%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C%20%EC%A0%91%EC%86%8D.gif?alt=media&#x26;token=d17db27e-10f8-49e1-8137-2c00f2730a37" alt="" width="563"><figcaption></figcaption></figure>

&#x20; 3\. 네이버 클라우드 콘솔에서 필요한 서비스를 확인하고 신청합니다.

&#x20; 4\. Application 등록 버튼 클릭하고 이름과 신청할 서비스, 그리고 web 서비스 URL을 입력합니다.

<figure><img src="https://3069609901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffir65Z2DlWF3euMQuFL1%2Fuploads%2F9swQymSXYO4O4WW5cFio%2F%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C%20%EC%84%9C%EB%B9%84%EC%8A%A4%20%EC%8B%A0%EC%B2%AD.gif?alt=media&#x26;token=a2e573c1-bf83-4561-89f8-e604eb573562" alt="" width="563"><figcaption></figcaption></figure>

&#x20; 5\. Client ID와 Secret KEY를 확인하고 복사하여 사용합니다.

<figure><img src="https://3069609901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffir65Z2DlWF3euMQuFL1%2Fuploads%2FGOPyqY0RHZwTqCKrf7Tn%2Fapi%20%ED%82%A4%20.gif?alt=media&#x26;token=61ed6e93-27fa-4c8d-b5a1-84fd180e0db5" alt="" width="563"><figcaption></figcaption></figure>

## 2. 데이터 API 신청

서비스 개발에 필요한 데이터를 확보하기 위해 플랫폼에서 제공하는 공공 데이터 중 필요한 데이터를 검색하고 신청합니다.&#x20;

&#x20; 1\. 홈페이지의 상단의 데이터 메뉴로 진입합니다.

&#x20; 2\. [검색하고자 하는 데이터의 조건에 맞추어 카테고리와 키워드를 선택하고 검색합니다.](https://cccr.gitbook.io/2025-doc/api#id-2.1)

&#x20; 3\. [데이터의 구조를 확인하고 신청합니다.](https://cccr.gitbook.io/2025-doc/api#id-2.2)

<figure><img src="https://3069609901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffir65Z2DlWF3euMQuFL1%2Fuploads%2Fg49R3zfAYU9XDiAt2bYC%2F%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EC%8B%A0%EC%B2%AD.gif?alt=media&#x26;token=698e948d-4e30-4a7c-bf56-c74674c1cebb" alt="" width="563"><figcaption></figcaption></figure>

&#x20; 4\. [콘솔로 이동하여 신청한 데이터를 확인합니다.](https://cccr.gitbook.io/2025-doc/api#id-2.3)

&#x20; 5\. [접속 URL을 클릭하여 데이터가 정상적으로 출력되는지 확인합니다.](https://cccr.gitbook.io/2025-doc/api#id-2.3)

<figure><img src="https://3069609901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffir65Z2DlWF3euMQuFL1%2Fuploads%2FuTiYzAnwzJxfnKGZlwuo%2F%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%99%95%EC%9D%B8%20.gif?alt=media&#x26;token=e50ad837-5ad9-4866-bed4-2b14315f480b" alt="" width="563"><figcaption></figcaption></figure>

## 3&4. 데이터 처리와 시각화

데이터 API를 통해 데이터를 성공적으로 가져온 후 데이터를 가공합니다. 그리고 가공한 데이터를 서비스의 목적에 맞게 시각화합니다.&#x20;

이 과정은 여러분이 사용하는 언어와 환경에 따라 방법이 상이 하기에 여러분의 서비스와 환경에 맞추어 구현하시면 되겠습니다.

아래는 javascript기반으로  개발된 침수경로 경보 서비스에서 구현한 데이터 처리 및 시각화 코드의 예시 이니 참고 해주시길 바랍니다.

<figure><img src="https://3069609901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffir65Z2DlWF3euMQuFL1%2Fuploads%2FIX8zcyOqINSXCkCR9hEe%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C14.JPG?alt=media&#x26;token=a7d87b3d-03dd-4b84-ac25-aad55f0a980c" alt=""><figcaption><p>데이터 request 및 처리</p></figcaption></figure>

<figure><img src="https://3069609901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffir65Z2DlWF3euMQuFL1%2Fuploads%2Fq4uOlVg6huO4l3IMUeSn%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C15.JPG?alt=media&#x26;token=bf719c60-8117-410c-9bf6-e0d61f3fd0a5" alt=""><figcaption><p>데이터 시각화</p></figcaption></figure>

<figure><img src="https://3069609901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffir65Z2DlWF3euMQuFL1%2Fuploads%2Fhzmqhw3Pd6hN8lyfTeCy%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C16.JPG?alt=media&#x26;token=0e7e1811-0fae-4fe0-a72c-aae9c9c412a0" alt=""><figcaption><p>경보 기능 구현</p></figcaption></figure>

<figure><img src="https://3069609901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffir65Z2DlWF3euMQuFL1%2Fuploads%2FTR6FXH6h4hzVBm6LgW4i%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C17.JPG?alt=media&#x26;token=b9918724-9fdd-4c53-b90e-6adab0871cff" alt=""><figcaption><p>경보 기능 구현</p></figcaption></figure>

<figure><img src="https://3069609901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffir65Z2DlWF3euMQuFL1%2Fuploads%2FVKZzaCBkbdvNpIuFOzhL%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C18.JPG?alt=media&#x26;token=12f41c1d-d713-40af-973d-68c64ed41ee5" alt=""><figcaption><p>마커 클러스터링 기능 구현</p></figcaption></figure>

## 5. 서비스 배포

최종적으로 개발한 서비스 패키지를 플랫폼을 통해 배포합니다.&#x20;

1. 홈페이지 상단의 플랫폼 서비스 메뉴로 진입합니다.
2. [자신이 개발한 서비스 패키지에 맞는 환경을 선택합니다.](https://cccr.gitbook.io/2025-doc/undefined-4#id-3)
3. [우측 상단의 앱생성하기를 클릭하고 아래의 설정값을 모두 입력합니다.](https://cccr.gitbook.io/2025-doc/undefined-4#id-4)
4. 사용자 앱 생성을 클릭하면 앱이 배포됩니다.
5. [콘솔로 이동하여 서비스가 오류없이 정상적으로 작동하는지 확인합니다.](https://cccr.gitbook.io/2025-doc/undefined-4#id-5)

<figure><img src="https://3069609901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffir65Z2DlWF3euMQuFL1%2Fuploads%2FoYsEeitwsLYWP98fSc6k%2F%EB%B0%B0%ED%8F%AC%ED%95%9C%20%EC%84%9C%EB%B9%84%EC%8A%A4%20%20%ED%99%95%EC%9D%B8.gif?alt=media&#x26;token=9de18c6c-f3de-4cae-bca8-6105e3e3d92c" alt="" width="563"><figcaption></figcaption></figure>