> For the complete documentation index, see [llms.txt](https://cccr.gitbook.io/2025-doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cccr.gitbook.io/2025-doc/undefined-3.md).

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

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

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

## 1.  서비스 환경 구축

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

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

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

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

<figure><img src="/files/lpqm3bSXac8GBNxtJ9iz" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/ZnyytsWDdnW9qUej4pPi" alt="" width="563"><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="/files/8eSEAvBFg1PZOo4EhtS4" alt="" width="563"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/fmTmituBzJox5JhSlTy6" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/JK1YeFTSDp7dD0QhDclN" alt="" width="563"><figcaption></figcaption></figure>

## 2. 데이터 API 신청

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

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

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

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

<figure><img src="/files/Fda9pNu1g3t4vNHSLKat" alt="" width="563"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/pMVNw7z0vi2dnvQdRFO7" alt="" width="563"><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="/files/6sXXYEpOzD1vr0EguKax" alt=""><figcaption><p>데이터 request 및 처리</p></figcaption></figure>

<figure><img src="/files/hK4Lmxcj8Gtaef2A6vQG" alt=""><figcaption><p>데이터 시각화</p></figcaption></figure>

<figure><img src="/files/uEKJHnW75Y1vMS77PSvI" alt=""><figcaption><p>경보 기능 구현</p></figcaption></figure>

<figure><img src="/files/h9H193rUWFJorNpcknlj" alt=""><figcaption><p>경보 기능 구현</p></figcaption></figure>

<figure><img src="/files/OR9qFrfESFfplW3iYn3t" alt=""><figcaption><p>마커 클러스터링 기능 구현</p></figcaption></figure>

## 5. 서비스 배포

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

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

<figure><img src="/files/u89bdNZcw2kBvnVWKrB1" alt="" width="563"><figcaption></figcaption></figure>