자연유산 디지털 아카이브 NHIV

지도에서 발견지와 소장처를 탐색하고, 실물 스캔 기반 3D 모델로 표본을 살펴보는 웹 아카이브

Typewebsite

Rolefrontend_developer

ContextClient Work

StatusReleased

Period2025.11 — 2025.12

TechnologyReact · Typescript · Next.js · three.js · Supabase · React Three Fiber · Google Maps API

Keywords

자연유산, 한국콘텐츠진흥원, Google Maps, 3D

Linknhiv.vercel.app

Map Views

발견지와 소장처, 두 가지 기준으로 탐색하기

표본이 발견된 장소와 현재 소장된 기관은 서로 다른 위치 정보입니다. 같은 표본 데이터를 두 기준으로 살펴볼 수 있도록 지도 모드를 나눴습니다.

발견지 모드에서는 개별 표본의 위치를 표시합니다. 소장처 모드에서는 기관별로 표본을 묶어 하나의 핀과 보유 개수로 보여줍니다. 기관을 선택하면 주소와 표본 목록, 분류별 도넛 차트를 확인하고 개별 표본으로 탐색을 이어갈 수 있습니다.

Marker Clustering

같은 좌표에 있는 표본도 선택할 수 있도록

발견지가 밀집한 영역은 Supercluster로 묶어 표시했습니다. 클러스터를 누르면 포함된 표본을 더 자세히 볼 수 있는 확대 수준으로 이동합니다.

다만 좌표가 완전히 같은 표본은 지도를 확대해도 마커가 겹칩니다. 이를 개별적으로 선택할 수 있도록 줌 16 이상에서는 같은 좌표의 마커를 원형으로 펼쳐 표시했습니다. 넓은 범위에서는 분포를 보고, 가까이에서는 표본 하나를 선택하는 흐름으로 구성했습니다.

Filters

데이터에서 필터 선택지를 만들기

보호 유형, 생물 분류, 소장처, 제작자, 제작 연도와 수집·폐사 연도로 표본을 필터링할 수 있습니다. 선택지와 연도 범위는 조회한 표본 데이터에서 추출해 구성했습니다. 데이터를 추가하거나 수정한 뒤 다시 조회하면 필터 옵션에도 반영됩니다.

같은 카테고리에서 선택한 값은 OR, 서로 다른 카테고리의 조건은 AND로 적용했습니다. 예를 들어 생물 분류를 두 가지 선택하면 두 분류를 모두 포함하고, 소장처를 추가하면 해당 기관이 보유한 표본으로 결과를 좁힙니다. 필터 결과는 지도 마커와 소장처별 표본 목록에 함께 반영됩니다.

3D Viewer

지도에서 찾은 표본을 3D로 확인하기

발견지 마커나 소장처의 표본 목록에서 대상을 선택하면 상세 모달이 열립니다. 지도 페이지를 벗어나지 않고 표본 정보와 연구진이 제공한 스캔 기반 3D 모델을 함께 확인할 수 있습니다.

React Three Fiber와 Drei로 GLB 모델 뷰어를 구성했습니다. 모델 크기에 맞춰 카메라를 조정하고, 회전·확대·이동 기능을 제공했습니다. 모델을 불러오는 동안에는 로딩 진행률을 표시하고, 등록된 모델이 없는 경우에는 안내 문구를 보여줍니다. 같은 종의 다른 표본도 모달 안에서 전환할 수 있습니다.