🎯 나의 첫 오픈소스 프로젝트

IT 썸네일 이미지

🎯 나의 첫 오픈소스 프로젝트: geo-select 제작기

드디어 내 첫 오픈소스 프로젝트를 만들었다. 이름은 geo-select.
전 세계 국가나 지역을 선택할 때, 단순한 셀렉트 박스 대신 직관적인 지도 선택 UI를 제공하는 라이브러리다.

---

💡 아이디어의 시작

사이트를 만들다 보면 ‘국가 선택’이나 ‘지역 선택’이 필요한 순간이 자주 있다. 하지만 대부분은 셀렉트 박스로 수십 개의 국가를 스크롤해야 한다. “그냥 지도를 클릭해서 고를 수 있으면 얼마나 편할까?” 이 단순한 생각이 geo-select의 시작이었다.

셀렉트를 누르면 세계 지도가 나오고,
사용자가 클릭한 지역의 코드와 정보를 자동으로 입력해주는 라이브러리.

---

🧱 구조 설계

처음엔 React나 Vue로 만들까 고민했지만, 기본적인 core 기능은 프레임워크에 의존하지 않아야 한다는 판단으로 Vanilla JS + TypeScript로 핵심 로직을 작성했다.

geo-select/
 └─ packages/
     └─ core/
         ├─ src/
         │   ├─ index.ts
         │   └─ data/world.geo.json
         ├─ dist/
         ├─ rollup.config.js
         ├─ tsconfig.json
         └─ package.json

빌드는 Rollup으로 설정했고, 결과물은 dist/geo-select-core.umd.js 와 geo-select-core.esm.js 두 가지 포맷으로 만들어졌다.

---

🗺️ 데모 제작

처음엔 콘솔에서만 확인했지만, 실제 클릭으로 선택하는 인터랙션을 보고 싶었다. 그래서 demo.html을 만들어 바로 테스트 가능한 형태로 구성했다.

데모 페이지는 GitHub Pages로 배포해서 누구나 직접 실행해볼 수 있다.

👉 데모 바로가기

---

⚙️ GitHub & npm 배포

1. GitHub에 새 레포지토리 생성 2. npm init -y 3. npm login 4. npm publish --access public

현재는 0.1.0 버전으로 기본 구조만 공개했지만, 추후에는 React, Vue, Svelte 전용 래퍼도 추가할 계획이다.

---

📦 앞으로의 계획

• 국가별 GeoJSON 확대 (현재는 샘플 4개국)
• 선택 시 자동 줌인, 하이라이트 효과 추가
• React / Vue 호환 버전 패키지로 분리
• npm 정식 배포 후 문서 사이트 제작

---

🌍 오픈소스의 첫걸음

지금까지는 다른 사람의 오픈소스를 사용하기만 했지만, 이번엔 내가 만든 코드가 세상에 공개되었다는 점이 정말 짜릿했다. 누군가 이 라이브러리를 발견하고 “이거 유용하다”라고 말해준다면, 그게 바로 내가 개발을 계속하는 이유가 될 것 같다.

👋 geo-select GitHub: https://github.com/muganghskim/geo-select

📦 npm (예정): npm install geo-select

---