“부안군 흥산윗길인가, 아님 부안군 홍산윗길인가? 제주 중간산동로인가, 아님 제주 중산간동로였던가?”이제 이런 고민은 내려놓으세요. 지오서비스웹은 조금 틀리게 입력한 도로명도 제대로 파악해 지오코딩해 줍니다.
알고 있으면 너무 좋은 프론트엔드 웹 기술
웹은 인류가 만든 최고의 문화 또는 기술 중 하나입니다. 웹을 통해 이룰 수 있는 그 가능성은 무한하며 그 가능성을 현실로 이루기 위해서는 기술이 필요한데, 이러한 기술에 대해 설명합니다.
#Compression Stream API
#Screen Capture API
#Encoding API
#Web Speech API
#Broadcast Channel API
#Drag and Drop Multi Files / Folder
#File System Access API
#Cross Orgin Communication API
#Web Crypto API
#Web Storage API
#WebAssembly
#Web Component API
#Screen Wake Lock API
#Beacon API
#WebRTC
#CSS Custom Highlight API
#Channel Messaging API
#View Transitions API
#WebWorker (Dedicated Worker)
#IndexedDB API
#WebSocket
#Web Audio API
#Notifications API
#Prioritized Task Scheduling API/h2>
위의 영상에 더해 더 많은 영상을 제공하고 지속적으로 내용이 추가되므로 해당 채널에 방문하여 참고하시기 바랍니다.
지오서비스웹(GEOSERVICE-WEB)
소 개
GEOSERVICE-WEB은 지오서비스(지리, 지도, 위치 등과 관련된 서비스)를 웹에서 제공합니다. 지오서비스웹의 목표는 웹에서 누구나 쉽게 지도 기반의 비지니스를 효과적으로 해결하기 위한 서비스를 제공하는데 있습니다. 웹브라우저에서 아래의 URL을 입력하여 이용할 수 있습니다.
https://www.geoservice.co.kr
지오서비스웹은 공간(Spatial)과 위치(Location)에 대한 다양한 서비스를 웹에서 이용할 수 있습니다. 예를 들어 지오코딩 등과 같은 기능을 이용해 공간 데이터를 생성하고 시각화할 수 있습니다. 또한 자신이 가진 데이터를 아카이브에 업로드하여 언제 어디서든 사용할 수 있으며 다른 사용자와 기본적으로 공유할 수 있습니다. 원한다면 내가 올린 데이터는 공유하지 않도록 설정할 수도 있습니다.
업데이트
- [2025/09/02] 지오코딩 결과에 19자리의 PNU 코드가 제공됩니다.
- [2025/09/02] 헤깔려 틀리게 입력한 도로명주소도 지오코딩이 가능해졌습니다.
- [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 서비스 시작
사용자 메뉴얼
FAQ
- 배경지도는 어떻게 변경하나요?
- 로그인 시 “시스템 장애” 메세지가 떠요!! 주소를 www 까지 입력해 https://www.geoservice.co.kr로 접속하세요.
지오코딩(역지오코딩 포함) 변환 건수 무제한 사용(설치형 임대 라이선스) 소개
PWA (Progressive Web APP) 개발 가이드
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('캐시 정리 성공');
});
Push 기능을 위한 Key 생성
npx web-push generate-vapid-keys
아래와 같은 예시로 그 결과가 출력됨.
=======================================
Public Key:
BE1ZFx8L3zod6eVQsp_esYMinG_C5A3CA9w0rKqwwKDyfcMmMHpJpJm0HB4Usp3gnnLi3sQz5exFbGZiNIBBjJk
Private Key:
9KyZMbnDTVhDnabu8xxRt1tSHNvddskvnT3lBwbYEkI
=======================================
Public Key는 클라이언트에, Public Key + Private Key는 서버에 지정된다.
참고로 Push 기능 테스트를 위해 url을 호출해야 하는데 curl을 이용하면 다음과 같다.
curl -X GET http://localhost:3000/send-push