H+LOW: 생성형 인공지능 기반 문화유산 정보 시각화·탐색 방안

유물 메타데이터의 관계를 3D로 시각화하고, 조건을 좁혀가며 유물을 찾는 데모 웹사이트

Typewebsite

RoleWeb Designer · Web Developer

Client국립중앙박물관 · 한국전자통신연구원 · 한국전통문화대학교

Contextclient

StatusReleased

Period2025.08 — 2026.01

TechnologyNext.js · TypeScript · R3F · three.js · Supabase

Keywords

3D, WEBGL, 문화유산, Data Visualization

Linkheritage-information-lab.vercel.app

Overview

한국전통문화대학교 디지털 헤리티지 정보연구실의 '문화유산 디지털 표준 선도를 위한 지능형 헤리티지 공유 플랫폼 기술 개발' 과제입니다. 국립중앙박물관 소장품 데이터를 사용했고, 정보 시각화 데모의 디자인과 개발을 담당했습니다.

기존 박물관 검색은 유물의 이름이나 시대를 알아야 쓸 수 있습니다. 사전 지식이 없어도 탐색을 시작할 수 있도록, 유물과 메타데이터의 관계를 보여주는 3D 시각화와 형태·재질·시대·용도를 차례로 좁혀가는 탐색 데모를 만들었습니다. 메타데이터 조합에 따른 생성형 유물 이미지는 연구실에서 제작해 전달받았고, 이를 선택 흐름에 맞춰 불러오는 구조를 설계했습니다.

Data Structure

데이터 형식부터 설계

연구실에서 전달받은 유물 데이터는 표 형식이었고 이미지는 별도로 관리되고 있었습니다. 프로토타입은 5건 기준이었지만 실제 100건으로 옮기려면 전처리가 먼저 필요했습니다.

유물 하나에 분류 정보뿐 아니라 추천 유물, 관련 전시, 디지털 자료, 활용 방안까지 물려 있어 관계형으로 쪼개면 조회마다 조인이 늘어납니다. 유물 하나를 하나의 객체로 두는 JSON 형식을 택했습니다.

javascript

{
  id: 'cheongja-girin-jang-sik-hyangno',
  명칭: '청자기린장식향로',
  명칭_en: 'Celadon Incense Burner Decorated with Kirin Design',
  형태: '기하학형',
  재질: '도자기',
  시대: '고려',
  용도: '사회생활',
  image: 'cheongja-girin-jang-sik-hyangno_main.jpg',
  similarity: 94.38,
  recommended_items: [ ... ],
  related_projects: [ ... ],
  related_digital: [ ... ],
}

컬럼과 헤더를 미리 정한 구글 시트를 만들어 연구원에게 전달했습니다. 유물 추가와 수정은 시트에서 이뤄지고, CSV로 받아 변환했습니다. 이미지 파일명도 유물 id를 기준으로 맞췄습니다.

연구원과 함께 쓴 데이터 시트. 컬럼과 헤더를 먼저 정해두고 유물 추가와 수정을 여기서 진행했습니다

이후 Supabase로 옮기면서 화면 코드를 그대로 유지하기 위해 변환 계층을 뒀습니다. DB는 영문 필드로 관리하고, 화면에서 쓰던 한글 속성 형태로 바꿔주는 함수를 거칩니다. 로컬 JSON에서 데이터베이스 기반으로 전환하는 동안 시각화와 탐색 화면은 손대지 않았습니다.

Path Visualization

유물별 고유 경로

형태·재질·시대·용도·연관주제를 Z축을 따라 레이어로 배치하고, 레이어 안에서는 분류 값을 원주를 따라 놓았습니다. 각 유물은 자신의 속성에 해당하는 좌표들을 차례로 지납니다.

청자기린장식향로의 경로는 기하학형 → 도자기 → 고려 → 사회생활 → 불교문화입니다. 이 좌표들을 CatmullRomCurve3로 이어 곡선을 만들고, 유물은 그 위를 순회합니다. 유물마다 시작 오프셋을 다르게 줘 100개가 한 덩어리로 움직이지 않도록 했습니다.

Rendering

렌더링 부하 제어

유물 100개가 각자의 경로를 따라 동시에 이동하고 이미지 텍스처까지 입고 있어, 처음부터 렌더링 비용이 높은 구조였습니다.

경로 계산은 재사용했습니다. 곡선 좌표와 정점 배열은 useMemo와 BufferGeometry로 구성해, 분류 데이터가 바뀔 때만 다시 계산합니다.

tsx

const points = useMemo(() => pathCurve.getPoints(100), [pathCurve])

const array = useMemo(
  () => new Float32Array(
    points.flatMap((p) => [p.x, p.y, p.z]),
  ),
  [points],
)

return (
  <line>
    <bufferGeometry>
      <bufferAttribute
        attach="attributes-position"
        count={points.length}
        array={array}
        itemSize={3}
      />
    </bufferGeometry>
  </line>
)

필요한 것만 렌더링했습니다. 관계선은 전체 경로 보기를 켜거나 유물을 선택한 경우에만 지오메트리를 생성하고, 필터에서 벗어난 유물은 렌더 트리에서 아예 제외했습니다. 고해상도 화면에서는 DPR 상한을 2로 뒀습니다.