👤 이화여자대학교 4-1 도전학기 외주 개발 프로젝트

동기

내가 재작년에 활동했던 EFUB 오픈 카카오톡 방에서 우연히 다음과 같은 공고를 보게 되었다.

 

 

나는 생계를 유지해야하는 대학생이므로.. 돈이 급한 것도 있었지만 나의 전공과 관련한 지식(능력)을 발휘하면서 돈을 벌 수 있다면 이보다 더 좋은 기회는 없을 것이라고 생각했다! 사실 외주 개발은 처음이고 아직 요구사항도 불분명하고 정해진 짧은 기한 내에 결과를 내야했기에 '제 시간 안에 완성하지 못하면 어떡하지', '잘 해낼 수 있을까'에 대한 걱정도 약간 있었지만, 프론트엔드 웹개발은 내가 상당히 익숙한 분야이고 나는 나를 '소통을 잘하는 개발자' , '같이 작업하고 싶은 개발자' 정도로 ㅋㅋㅋㅋㅋ 인식하고 있었기 때문에 큰 걱정이 되지는 않았다! 😊

 

주제는 '농어촌 정신건강 의료불균형' 에 관련된 것이다. 항상 컴퓨터 공학 전공생들과만 소통을 해왔기에 아예 다른 전공을 가진 사람들과 함께 프로젝트를 진행해보고 싶다는 욕구도 있었다. 급여는 60만원 정도이고, 조건 및 요구사항 등의 난이도가 그렇게 높아보이지 않아서 흔쾌히 개발을 Accept 했다!

 

레퍼런스

레퍼런스로 보내주신 웹 사이트는 다음과 같았다. 유저와 상호작용 가능한 인터랙티브한 요소들이 눈에 띄었다. 

 

https://news.kbs.co.kr/special/somyeol/index.html#/chp3 

소멸의 땅, 지방은 어떻게 사라지나

 

QGIS지리 데이터를 기반 인터랙티브 지도 구축

특히 그중에서 QGIS의 지리 데이터를 기반으로 인터랙티브한 지도를 구축하는 것을 메인 기능으로 요구 받았다.

 

총 3개의 지도를 만들어야 했는데 

 

1. 주제가 무엇이고 어떤 데이터를 제공받는지

2. 이를 어떤식으로 보여주어야하는지

 

에 초점을 맞추어서 다음과 같은 기획서를 전달 받았다.

 

 

 

https://www.qgistutorials.com/ko/docs/leaflet_maps_with_qgis2leaf.html

qgis2leaf로 웹 지도 만들기 — QGIS Tutorials and Tips

 

QGIS 에 내장된 지도를 Web 상으로 import 할 필요가 있었는데,

 

첫번째 떠올린 바로는 해당 SW 내에 qgis2leaf 또는 qgis2web이라는 플러그인이 있다고 들어서 위 튜토리얼을 따르면 아래처럼 Leaflet Map HTML 로 변환할 수 있을 것이라고 생각했다.

 

하지만 QGIS 가 설치되어 있는 기획자 분께서 시행착오를 많이 겪으시고 무엇이 문제였는지 변환이 잘 안되시는 어려움을 느끼셔서 다른 방법을 떠올려보기로 했다. 

 

두번째로는 QGIS 자체에서 제공하는 .jeojson 데이터와 leaflet API 를 결합하여 자체적으로 지도를 개발하는 것이다.

leaflet 자체에서 GeoJSON 데이터를 활용해서 지도로 보여주는 컴포넌트를 제공하고 있어서
React 에서 해당 라이브러리 사용해서 맵을 커스터마이징할 수 있을 것이라고 생각했다.

 

이를 위해서 기획자 분께 QGIS 어플리케이션을 활용하여 자체적으로 가공해주신 .geojson 데이터를 받았다.

 

features 라는 객체 배열에 담긴 객체 하나하나가 지역 단위 하나하나를 의미했다.

1. 각 데이터 포인트의 경계, 자료 정보를 담고 있는 .geojson

{
"type": "FeatureCollection",
"name": "sgg_mhc_4326_fin",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "sgg_cd": "11010", "sgg_nm": "종로구", "sd_nm": "서울특별시", "pro_num": 12, "gen_num": 5, "etc_num": 0, "pop_rate": 8.6, "pop_rate2": 12.2, "pro_rate": 70.59, "sum": 17 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 126.974965506626646, 37.629025846322392 ], [ 126.979932541642896, 37.628551385741844 ], [ 126.986578589226838, 37.613972040206576 ], [ 126.98666961211083, 37.60402408418873 ], [ 126.976720448663031, 37.597900773419852 ], [ 126.989222005235973, 37.591257335444396 ], [ 127.000983830349256, 37.592321896606414 ], [ 127.008637970768916, 37.580459930712074 ], [ 127.014833342262051, 37.58233145639781 ], [ 127.018090672138015, 37.577566726827079 ], [ 127.023138495286972, 37.578020879003603 ], [ 127.02335824789148, 37.571907275493935 ], [ 126.990150966911386, 37.568136140900691 ], [ 126.97320520035349, 37.569318939391493 ], [ 126.966697705086418, 37.565819760343544 ], [ 126.953558194879776, 37.578748855890005 ], [ 126.958173167115675, 37.580984573579705 ], [ 126.95903333886244, 37.595059021840669 ], [ 126.95771415697908, 37.598367077095006 ], [ 126.953061091977574, 37.598758628935428 ], [ 126.94900026132089, 37.624335133915118 ], [ 126.95864765352961, 37.629500235655868 ], [ 126.960723745696427, 37.629776396868195 ], [ 126.975084766
...
}

 

하나의 지역은 멀티 폴리곤 타입 데이터로 표현이 되는데, 여러개의 폴리곤(도형)이 모인 공간 데이터 타입이라고 이해해주면 쉽다!

 

 

하나의 지역이 왜 여러개의 폴리곤을 포함하고 있는지 묻는다면, 다음과 같이 하나의 구분되는 지역에 대해서 여러개의 섬을 포함할 수 있기 때문이다. 

 

 

2. 각 데이터 포인트의 중심점을 담은 .geojson

{
"type": "FeatureCollection",
"name": "sgg_mhc_4326_point",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "sgg_cd": "11010", "sgg_nm": "종로구", "sd_nm": "서울특별시", "pro_num": 12, "gen_num": 5, "etc_num": 0, "pop_rate": 8.6, "pop_rate2": 12.2, "pro_rate": 70.59, "sum": 17 }, "geometry": { "type": "Point", "coordinates": [ 126.977172562038376, 37.59499549178458 ] } },
...
}

 

레퍼런스로 주신 웹에는 지도 영역을 마우스로 클릭하면, 초점이 해당 지도의 중심으로 맞춰지는 기능이 있다.

이를 구현하기 위해서는 중심점 좌표가 필요했다.

 

문제 상황

그러나 두가지 문제 상황이 발생했다.

 

첫번째는 처음에 보내주셨던 .geojson 의 지역 다각형(폴리곤)이 너무 복잡한 상태여서 렌더링 하려고 하면, 자바스크립트 렌더링 엔진이 못버티고 heap limit Allocation failed 를 내는 문제가 있었다.

 

보내주신 데이터에 한 지역당 꼭짓점 좌표가 몇개인지조차 셀 수 없을 정도로 많아서 초기에 지도 로드하는데에도 시간이 너무 오래걸리고 부하가 생기는 것 같다고 판단하였고, geojson 데이터가 지금보다 더 가벼워 진다면 렌더링이 가능할 것 같다고 생각이 들어 기획자분께 QGIS 를 활용하여 데이터를 조금 더 간소화해주실 수 있을지 부탁드렸다. 

 

알고보니 상상을 초월하게 자잘자잘했던 지역들.. ㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

기획자분께서 열심히 라인 단순화를 해주신 덕에 데이터 크기가 많이 줄어들었고 그 결과 렌더링에 성공하는 감격스러운 결과를 낼 수 있었다! ㅎㅎ 

 

 

 

그러나 또 다른 문제가 있었다.

 

두번째는 이 두개의 데이터가 따로 분리되어 제공된 상황이라  두개의 데이터를 모두 불러오기에는 불필요하게 데이터가 겹

치는 부분이 많고 개발도 두개의 데이터를 활용해야해서 조금 더 복잡할 것이었다.

 

그래서 하나의 지역 객체 안에 들어갈 수 있도록 데이터를 병합하는 코드를 작성했다. 

 

data_combiner.py

import json

def merge_geojson(point_filepath, multipolygon_filepath, output_filepath):
    # 첫 번째 GeoJSON 파일 읽기 (Point 데이터)
    with open(point_filepath, 'r', encoding='utf-8') as file:
        point_data = json.load(file)

    # 두 번째 GeoJSON 파일 읽기 (MultiPolygon 데이터)
    with open(multipolygon_filepath, 'r', encoding='utf-8') as file:
        multipolygon_data = json.load(file)

    # MultiPolygon 데이터의 features 가져오기
    multipolygon_features = multipolygon_data['features']

    # Point 데이터를 sgg_cd를 key로 하는 딕셔너리로 변환
    point_features = {feature['properties']['sgg_cd']: feature for feature in point_data['features']}

    # MultiPolygon 데이터의 각 feature에 대해 lat, lng 추가
    for feature in multipolygon_features:
        sgg_cd = feature['properties']['sgg_cd']
        if sgg_cd in point_features:  # 동일한 sgg_cd를 가진 Point 데이터가 있으면
            point_feature = point_features[sgg_cd]
            # MultiPolygon feature의 properties에 lat, lng 추가
            feature['properties']['lat'] = point_feature['geometry']['coordinates'][1]
            feature['properties']['lng'] = point_feature['geometry']['coordinates'][0]

    # 병합된 데이터 생성
    merged_data = {
        "type": "FeatureCollection",
        "name": multipolygon_data['name'],
        "crs": multipolygon_data['crs'],
        "features": multipolygon_features
    }

    # JSON 파일로 저장
    with open(output_filepath, 'w', encoding='utf-8') as file:
        json.dump(merged_data, file, ensure_ascii=False, indent=4)

    print("Combined data saved to", output_filepath)

# 파일 경로 설정
#point_filepath = 'sgg_menhos_point_4326.geojson'
#multipolygon_filepath = 'sgg_menhos_4326.geojson'
#output_filepath = 'sgg_menhos_combined_4326.geojson'


point_filepath = './mhc/sgg_mhc_4326_point.geojson'
multipolygon_filepath = './mhc/sgg_mhc_4326.geojson'
output_filepath = './mhc/sgg_mhc_combined_4326.geojson'


# 병합 함수 호출
merge_geojson(point_filepath, multipolygon_filepath, output_filepath)

 

 

그 결과 properties 안에 중심점(lat,lng)과 지역 정보를 한번에 담은 다음과 같은 데이터를 만들어낼 수 있었다.

{
    "type": "FeatureCollection",
    "name": "sgg_mhc_4326_fin",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "features": [
        {
            "type": "Feature",
            "properties": {
                "sgg_cd": "11010",
                "sgg_nm": "종로구",
                "sd_nm": "서울특별시",
                "pro_num": 12,
                "gen_num": 5,
                "etc_num": 0,
                "pop_rate": 8.6,
                "pop_rate2": 12.2,
                "pro_rate": 70.59,
                "sum": 17,
                "lat": 37.59499549178458,
                "lng": 126.97717256203838
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                126.97496550662665,
                                37.62902584632239
                            ],
                            [
                                126.9799325416429,
                                37.628551385741844
                            ],
                            [
                                126.98657858922684,
                                37.613972040206576
                            ],
                            [
                                126.98666961211083,
                                37.60402408418873
                            ],
                            [
                                126.97672044866303,
                                37.59790077341985
                            ],
                            [
                                126.98922200523597,
                                37.591257335444396
                            ],
                            [
                                127.00098383034926,
                                37.592321896606414
                            ],
                            [
                                127.00863797076892,
                                37.580459930712074
                            ],
                            [
                                127.01483334226205,
                                37.58233145639781
                            ],
                            [
                                127.01809067213802,
                                37.57756672682708
                            ],
                            [
                                127.02313849528697,
                                37.5780208790036
                            ],
                            [
                                127.02335824789148,
                                37.571907275493935
                            ],
                            [
                                126.99015096691139,
                                37.56813614090069
                            ],
                            [
                                126.97320520035349,
                                37.56931893939149
                            ],
                            [
                                126.96669770508642,
                                37.565819760343544
                            ],
                            [
                                126.95355819487978,
                                37.578748855890005
                            ],
                            [
                                126.95817316711567,
                                37.580984573579705
                            ],
                            [
                                126.95903333886244,
                                37.59505902184067
                            ],
                            [
                                126.95771415697908,
                                37.598367077095006
                            ],
                            [
                                126.95306109197757,
                                37.59875862893543
                            ],
                            [
                                126.94900026132089,
                                37.62433513391512
                            ],
                            [
                                126.95864765352961,
                                37.62950023565587
                            ],
                            [
                                126.96072374569643,
                                37.629776396868195
                            ],
                            [
                                126.97508476644904,
                                37.63118349820025
                            ],
                            [
                                126.97496550662665,
                                37.62902584632239
                            ]
                        ]
                    ]
                ]
            }
        },
        
      ...
      }

 

 

지도 개발

이러한 데이터를 바탕으로 지도를 개발하는 것은 크게 어렵지 않았다!

리플렛 측에서 도움이 되는 친절한 API 들을 많이 제공해주고 있었기 때문이다.

.geojson 형태의 데이터 자료를 리플렛 Map API 에 전달하면 이를 알아서 해석해서 지도상에 지역 경계를 그려준다. 

 

 <GeoJSON
                  style={mapStyle}
                  data={geoJsonData}
                  onEachFeature={onEachDistrict}
                />

 

const SelectBox = () => {
    const [selectedSiDo, setSelectedSiDo] = useState('');
    const [selectedSiGunGu, setSelectedSiGunGu] = useState('');

    const SiDoOptions = [
      ...new Set(geoJsonData.map((district) => district.properties.sd_nm)),
    ].sort();

    // index 추가한 객체 배열
    const SiDoOption = SiDoOptions.map((district, index) => ({
      value: index,
      label: district,
    }));

    // 선택한 시도와 일치하는 시군구 목록 추출
    const SiGunGuOptions = geoJsonData.filter(
      (district) => district.properties.sd_nm === selectedSiDo
    );

    // unique 한 시군구 목록 추출
    let SiGunGuOption = [
      ...new Set(SiGunGuOptions.map((district) => district.properties.sgg_nm)),
    ].sort();

    SiGunGuOption = SiGunGuOption.map((district, index) => ({
      value: index,
      label: district,
    }));

    useEffect(() => {
      const searchResults = geoJsonData.filter(
        (district) =>
          district.properties.sd_nm === selectedSiDo &&
          district.properties.sgg_nm === selectedSiGunGu
      );

      if (searchResults.length) {
        // 검색 결과가 존재한다면
        setSiDoName(searchResults[0].properties.sd_nm);
        setSiGunGuName(searchResults[0].properties.sgg_nm);

        setPercentage(searchResults[0].properties.pro_rate);
        setProCnt(searchResults[0].properties.pro_num);
        setGenCnt(searchResults[0].properties.gen_num);
        setEtcCnt(searchResults[0].properties.etc_num);

        setSearchPosition({
          lat: searchResults[0].properties.lat,
          lng: searchResults[0].properties.lng,
        });
      }
    }, [selectedSiGunGu]);

 

 // 각 지역 또는 레이어에 대한 특성 설정
  const onEachDistrict = (district, layer) => {
    layer.options.fillColor = getColor(district.properties.pro_rate); // 정신 건강 전문 요원 비율(0과 100 사이의 값)에 따른 레이어 색 설정

    const sido = district.properties.sd_nm;
    const sigungu = district.properties.sgg_nm;
    const percentage = district.properties.pro_rate; // 정신 건강 전문 요원 비율

    const pro_num = district.properties.sum; // 레이어의 전문 요원 수
    const gen_num = district.properties.gen_num;
    const etc_num = district.properties.etc_num;
    const clickedLat = district.properties.lat; // 레이어의 lat 설정
    const clickedLng = district.properties.lng; // 레이어의 lng 설정

    layer.on({
      mouseover: highlightFeature,
      mouseout: resetHighlight,
      click: (e) => {
        L.DomEvent.stopPropagation(e); // 다른 이벤트와 충돌 방지
        setSiGunGuName(sigungu);
        setSiDoName(sido);
        setPercentage(percentage);
        setProCnt(pro_num);
        setGenCnt(gen_num);
        setEtcCnt(etc_num);
        setSearchPosition({ lat: clickedLat, lng: clickedLng }); // 검색위치 설정
      },
    });
  }

  // 검색한 지역 위치로 지도 이동, 마커로 표시
  const SearchMarker = () => {
    const map = useMap();

    // 화면상에 클릭한 좌표로 중심점 이동

    console.log(searchPosition.lat, searchPosition.lng);
    map.setView([searchPosition.lat, searchPosition.lng], 10);

    // position이 null값이면 마커를 표시하지 않고, null값이 아니면 마커를 보여준다
    return <Marker position={searchPosition} icon={icon} />;
  };

 

0

 

과정

기획대로 개발한 이후, 기획자님께 오탈자, CSS, 내용 변경 등 지속적으로 피드백을 받아 수정을 거치는 작업을 반복하였다.

 

총 결과물

다음은 외주 개발 총 결과물이다!

 

https://interactive-web-gules.vercel.app/#/

시골 늙은이 마음은 누가 풀어주나?

 

기타 요구 사항

 

- openGraph 태그를 이용한 썸네일 설정

- 모바일 적응형 

 

 

후기

어쩌면 지리와 개발을 융합하는, 평소에 자주하지 않는 익숙하지 않은 분야의 웹 개발이었다고 생각한다.

그러나 중간중간 생기는 문제 상황들의 원인을 잘 찾아서 해결했고, 과거보다 많이 성장한 내 자신을 확인할 수 있던 것 같다! 

무엇보다 기획자 분과의 케미가 정말 좋았던 것 같다! ㅎㅎ 덕분에 외주 작업이지만 부담 느끼지 않고 편하게 작업할 수 있었다!

 

 

 

개발을 마치고 한달 정도가 지났을까? 기획자 분께 연락이 왔는데 정말 기쁘게도 수상을 하셨다고 한다!  예상치 못하게 기쁜일이 생겼고 굉장히 뿌듯한 경험이었다. 밥을 사주신다고 하셔서 이후에 연남동에서 맛있는 연어집에 가서 먹었다. ㅎㅎ 😊

 

카메라가 고장나서 사진은 잘 못찍은 것 같지만 아무튼 진짜 맛있었다.