GIS Developer

소 개

GEOSERVICE-WEB은 지오서비스(지리, 지도, 위치 등과 관련된 서비스)를 웹에서 제공합니다. 지오서비스웹의 목표는 웹에서 누구나 쉽게 지도 기반의 비지니스를 효과적으로 해결하기 위한 서비스를 제공하는데 있습니다. 웹브라우저에서 아래의 URL을 입력하여 이용할 수 있습니다.

https://www.geoservice.co.kr

지오서비스웹은 공간(Spatial)과 위치(Location)에 대한 다양한 서비스를 웹에서 이용할 수 있습니다. 예를 들어 지오코딩 등과 같은 기능을 이용해 공간 데이터를 생성하고 시각화할 수 있습니다. 또한 자신이 가진 데이터를 아카이브에 업로드하여 언제 어디서든 사용할 수 있으며 다른 사용자와 기본적으로 공유할 수 있습니다. 원한다면 내가 올린 데이터는 공유하지 않도록 설정할 수도 있습니다.

업데이트

[2025/08/20] 최신 주소 DB(2025년 7월 구축)로 업데이트 되었습니다.

[2025/07/15] 지오코딩 결과를 SHP 뿐만 아니라 CSV 형식으로 바로 저장되도록 하였습니다.

[2025/03/14] 2025년 1분기 최신 주소 DB로 업데이트 되었습니다.

[2025/03/04] 통계 데이터에 대한 파이차트 맵 분석(시각화) 기능이 추가되었습니다.

[2024/10/22] SHP 데이터를 SVG 데이터로 생성하는 기능이 추가되었습니다.

[2024/10/16] 주소 DB가 2024년 10월 DB로 업데이트되었습니다.

[2024/10/14] 티센 폴리곤 생성 기능 추가, 공간 및 속성으로 필터링 하여 공간 데이터를 추출하는 기능 추가

[2024/10/01] 공간 데이터에 대한 NULL Shape 지원 및 압축 파일 안의 한글 파일명 오류 등이 수정되었습니다.

[2024/08/08] 공간 데이터 편집 기능이 추가되었습니다.

[2024/07/20] 지오코딩 등을 위한 입력 데이터 형식으로 CSV 파일 뿐만 아니라 엑셀 파일을 그대로 사용할 수 있도록 하였습니다.

[2024/07/08] 주소 DB가 2024년 6월 DB로 업데이트되었습니다.

[2024/04/03] 지오코딩과 역지오코딩 수행 속도가 개선되었습니다. (1건 당 평균 0.01초 소요)

[2024/02/25] SVG 형식의 행정구역도를 제공합니다. (아카이브에서 사용자명을 gizmo로 입력해 조회 가능)

[2024/02/16] 주소 DB가 2024년 1월 DB로 업데이트 되었으며 리버스지오코딩의 정확도가 개선되었습니다.

[2024/01/10] 새로운 지오코딩 엔진(gc_v3)으로 업데이트 되었습니다.

[2023/12/15] 주소 DB가 2023년 11월 DB로 업데이트 되었습니다.

[2023/11/30] 지오코딩 정확도 개선 및 UI 편의성 개선

[2023/10/31] HTTPS 적용 및 접속 URL 변경(https://www.geoservice.co.kr)

[2023/09/12] 통계분석 기능으로 색상단계구분도 분석이 추가되었습니다.

[2023/08/14] 속성 데이터 조인 기능과 지점 간 거리 분석 기능이 추가되었습니다.

[2023/07/30] 주요 기능 2가지 추가(헥사곤 데이터 생성, 밀도분석) 및 최신 주소DB(2023년 7월)로 업데이트 되었습니다.

[2023/02/21] 지번주소(2023년 2월), 도로명주소(2023년 1월) DB가 업데이트 되었습니다.

[2022/10/29] 기능 추가 및 사용자 편의성이 개선되었습니다.

[2022/09/25] 기능 추가 및 사용자 편의성이 개선되었습니다.

[2022/09/06] 사용자가 제공한 피드백을 통해 확인된 버그 제거 및 기능 개선

[2022/08/01] GEOSERVICE-WEB v1.0 서비스 시작

vite로 구성된 바닐라 프로젝트가 기준이다. 먼저 index.html 파일에 manifest.json에 대한 연결이 필요하다.

<head>
  <link rel="manifest" href="/manifest.json" />
  <link rel="icon" href="/icon_192x192.png" />
</head>

위의 코드를 보면 선택사항이지만 아이콘도 지정했다. 이 아이콘 역시 manifest 내부에서 언급되는데, index.html은 url을 통해 접속했을때 웹브라우저에 표시될 아이콘이고 manifest에서는 바탕화면 등에 App으로 등록될때 표시되는 아이콘이다. mainfest.json 파일은 다음과 같으며 위치는 public 폴더이다.

{
  "name": "Vite PWA 예제",
  "short_name": "VitePWA",
  "description": "간단한 Vite 기반 PWA 예제",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ff0000",
  "background_color": "#ff0000",
  "icons": [
    {
      "src": "/icon_192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon_512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

여기까지만 해도 PWA로써 내가 원하는 아이콘과 제목 등으로 설정된 앱으로 설치할 수 있게 된다. 여기에 더해…. main.js 파일에 대한 내용이다. 크게 3가지 내용이다. DOM 구성, 서비스워커 구성, 앱 설치 UI이다. 먼저 DOM 구성은 다음처럼 했다.

import './style.css'

document.querySelector('#app').innerHTML = /*html*/ `
  Vite PWA 예제
  
  이것은 사용자 정의 Service Worker를 사용한 PWA입니다.
  오프라인에서도 동작하며, 설치 가능합니다!
  
  
`;

서비스 워크 구성은 다음처럼 했다.

window.addEventListener('load', () => {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Service Worker 등록 성공:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker 등록 실패:', error);
    });
});

앱 설치 UI에 대한 코드는 다음처럼 했다.

let deferredPrompt;
//const installButton = document.getElementById('installButton');
//const installMessage = document.getElementById('installMessage');

window.addEventListener('beforeinstallprompt', (e) => {
  // e.preventDefault();
  deferredPrompt = e;
  installButton.style.display = 'block';
  installMessage.textContent = '앱을 바탕화면에 설치할 수 있습니다!';
});

installButton.addEventListener('click', async () => {
  if (deferredPrompt) {
    deferredPrompt.prompt();
    const { outcome } = await deferredPrompt.userChoice;
    installMessage.textContent = outcome === 'accepted'
      ? '앱 설치가 시작되었습니다!'
      : '앱 설치가 취소되었습니다.';
    deferredPrompt = null;
    installButton.style.display = 'none';
  }
});

window.addEventListener('appinstalled', () => {
  installMessage.textContent = '앱이 성공적으로 설치되었습니다!';
  installButton.style.display = 'none';
});

서비스워커에 대한 sw.js 파일의 코드는 다음과 같으며 파일 위치는 public이다. 이 서비스워커는 캐쉬에 대한 기능이다.

const CACHE_NAME = 'vite-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/icon_192x192.png',
  '/icon_512x512.png'
];

// 설치 시 캐싱
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('캐시 열기 성공');
        return cache.addAll(urlsToCache);
      })
  );
});

// 요청 처리 (CacheFirst 전략)
self.addEventListener('fetch', event => {
  const dest = event.request.destination;
  // if (event.request.destination === 'document') {
    event.respondWith(
      caches.match(event.request)
        .then(cachedResponse => {
          // 캐시에 있으면 캐시된 응답 반환
          if (cachedResponse) {
            console.log(dest + ' (' + event.request.url + ') from cache');
            return cachedResponse;
          }
          // 캐시에 없으면 네트워크 요청
          return fetch(event.request)
            .then(networkResponse => {
              // 네트워크 응답을 캐시에 저장
              console.log(dest + ' (' + event.request.url + ') from fetch');
              return caches.open(CACHE_NAME).then(cache => {
                cache.put(event.request, networkResponse.clone());
                return networkResponse;
              });
            })
            .catch(() => {
              onsole.log(dest + ' (' + event.request.url + ') failed');
              // 네트워크 요청 실패 시 (오프라인 등)
              return new Response('오프라인 상태입니다. 캐시도 없습니다.', {
                status: 503,
                statusText: 'Service Unavailable'
              });
            });
        })
    );
  // }
});

// 요청 처리 (NetworkFirst 전략)
self.addEventListener('_____fetch', event => {
  console.log(event.request.destination);
  // if (event.request.destination === 'document') {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          // 네트워크 응답을 캐시에 저장
          return caches.open(CACHE_NAME).then(cache => {
            console.log(event.request.url + ' from fetch');
            cache.put(event.request, response.clone());
            return response;
          });
        })
        .catch(() => {
          // 네트워크 실패 시 캐시에서 가져오기
          console.log(event.request.url + ' from cache');
          return caches.match(event.request);
        })
    );
  // }
});

// 캐시 정리
self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
  console.log('캐시 정리 성공');
});

글

지오서비스웹(GEOSERVICE-WEB)

소 개

업데이트

사용자 메뉴얼

FAQ

지오코딩(역지오코딩 포함) 변환 건수 무제한 사용(설치형 임대 라이선스) 소개

PWA (Progressive Web APP) 개발 가이드

Vite PWA 예제