[{"id":"69644304-6b95-44f3-b66b-53316119c7e0","type":"section-index","number":"01","title":"Overview"},{"id":"4056ecf5-a874-4b03-aaff-e908f3709ae3","type":"paragraph","text":"한국전통문화대학교 디지털 헤리티지 정보연구실의 '문화유산 디지털 표준 선도를 위한 지능형 헤리티지 공유 플랫폼 기술 개발' 과제입니다. 국립중앙박물관 소장품 데이터를 사용했고, 정보 시각화 데모의 디자인과 개발을 담당했습니다."},{"id":"08c1ffc1-7053-421f-b09e-6a09c59a95c8","type":"paragraph","text":"기존 박물관 검색은 유물의 이름이나 시대를 알아야 쓸 수 있습니다. 사전 지식이 없어도 탐색을 시작할 수 있도록, 유물과 메타데이터의 관계를 보여주는 3D 시각화와 형태·재질·시대·용도를 차례로 좁혀가는 탐색 데모를 만들었습니다. 메타데이터 조합에 따른 생성형 유물 이미지는 연구실에서 제작해 전달받았고, 이를 선택 흐름에 맞춰 불러오는 구조를 설계했습니다."},{"id":"39d6a2a6-6569-4560-bb0f-b7f980e49c7e","type":"media","mediaType":"image","url":"https://pcccgvebzkxkjdrcrxtu.supabase.co/storage/v1/object/public/project-media/projects/b920b11d-9024-4635-90ef-e211359e4b50/1789561515124-39blgr.webp","caption":"","urls":["https://pcccgvebzkxkjdrcrxtu.supabase.co/storage/v1/object/public/project-media/projects/b920b11d-9024-4635-90ef-e211359e4b50/1789561515124-39blgr.webp","https://pcccgvebzkxkjdrcrxtu.supabase.co/storage/v1/object/public/project-media/projects/b920b11d-9024-4635-90ef-e211359e4b50/1789561521085-qxxtrd.webp"]},{"id":"60c632bf-9f18-4c89-bf1d-ba8dbc5bcff3","type":"section-index","number":"02","title":"Data Structure"},{"id":"fedd1fc9-6651-4058-b3f3-6acd952bab04","type":"heading","level":2,"text":"데이터 형식부터 설계"},{"id":"bc521dd5-ad69-49e8-9af4-a4a787393d35","type":"paragraph","text":"연구실에서 전달받은 유물 데이터는 표 형식이었고 이미지는 별도로 관리되고 있었습니다. 프로토타입은 5건 기준이었지만 실제 100건으로 옮기려면 전처리가 먼저 필요했습니다."},{"id":"031c7428-2d54-457e-8161-84ef66b94a7b","type":"paragraph","text":"유물 하나에 분류 정보뿐 아니라 추천 유물, 관련 전시, 디지털 자료, 활용 방안까지 물려 있어 관계형으로 쪼개면 조회마다 조인이 늘어납니다. 유물 하나를 하나의 객체로 두는 JSON 형식을 택했습니다."},{"id":"c7a588b1-14df-4b64-a366-a599363349fc","type":"code","code":"{\n id: 'cheongja-girin-jang-sik-hyangno',\n 명칭: '청자기린장식향로',\n 명칭_en: 'Celadon Incense Burner Decorated with Kirin Design',\n 형태: '기하학형',\n 재질: '도자기',\n 시대: '고려',\n 용도: '사회생활',\n image: 'cheongja-girin-jang-sik-hyangno_main.jpg',\n similarity: 94.38,\n recommended_items: [ ... ],\n related_projects: [ ... ],\n related_digital: [ ... ],\n}","language":"javascript"},{"id":"6b10be09-2f80-474e-b2cc-3c15540fff8f","type":"paragraph","text":"컬럼과 헤더를 미리 정한 구글 시트를 만들어 연구원에게 전달했습니다. 유물 추가와 수정은 시트에서 이뤄지고, CSV로 받아 변환했습니다. 이미지 파일명도 유물 id를 기준으로 맞췄습니다."},{"id":"be1fb85f-892d-499a-bc33-bb7037125094","type":"media","mediaType":"image","url":"https://pcccgvebzkxkjdrcrxtu.supabase.co/storage/v1/object/public/project-media/projects/b920b11d-9024-4635-90ef-e211359e4b50/1789543486792-2qo40w.webp","caption":"연구원과 함께 쓴 데이터 시트. 컬럼과 헤더를 먼저 정해두고 유물 추가와 수정을 여기서 진행했습니다"},{"id":"d2ab9f87-d0ee-4a77-9e12-68f727f1fd90","type":"paragraph","text":"이후 Supabase로 옮기면서 화면 코드를 그대로 유지하기 위해 변환 계층을 뒀습니다. DB는 영문 필드로 관리하고, 화면에서 쓰던 한글 속성 형태로 바꿔주는 함수를 거칩니다. 로컬 JSON에서 데이터베이스 기반으로 전환하는 동안 시각화와 탐색 화면은 손대지 않았습니다."},{"id":"a000e0df-3e08-47c3-8e3e-034d1f755904","type":"section-index","number":"03","title":"Path Visualization"},{"id":"1eeec364-9fbc-4841-94c8-b577058a7e12","type":"heading","level":2,"text":"유물별 고유 경로"},{"id":"55514eeb-fad9-47d9-ad0c-394c28492704","type":"paragraph","text":"형태·재질·시대·용도·연관주제를 Z축을 따라 레이어로 배치하고, 레이어 안에서는 분류 값을 원주를 따라 놓았습니다. 각 유물은 자신의 속성에 해당하는 좌표들을 차례로 지납니다."},{"id":"3d8a329a-1d7f-4219-93e5-0f2d5c0a557c","type":"paragraph","text":"청자기린장식향로의 경로는 기하학형 → 도자기 → 고려 → 사회생활 → 불교문화입니다. 이 좌표들을 CatmullRomCurve3로 이어 곡선을 만들고, 유물은 그 위를 순회합니다. 유물마다 시작 오프셋을 다르게 줘 100개가 한 덩어리로 움직이지 않도록 했습니다."},{"id":"0a77a671-1c84-468f-9e3d-32e6955c0869","type":"media","mediaType":"video","url":"1227348449","caption":"","vimeoId":"1227348449"},{"id":"754fd7d7-5b3a-43ac-9ca1-f92ff0f21704","type":"section-index","number":"04","title":"Rendering"},{"id":"4f0cd098-bff3-47a0-9ca0-e30adb005992","type":"heading","level":2,"text":"렌더링 부하 제어"},{"id":"488d5e84-37c0-4007-be18-9c1e2edc65f9","type":"paragraph","text":"유물 100개가 각자의 경로를 따라 동시에 이동하고 이미지 텍스처까지 입고 있어, 처음부터 렌더링 비용이 높은 구조였습니다."},{"id":"c782a0ae-280a-466e-a900-d22f91f8b1ea","type":"paragraph","text":"경로 계산은 재사용했습니다. 곡선 좌표와 정점 배열은 useMemo와 BufferGeometry로 구성해, 분류 데이터가 바뀔 때만 다시 계산합니다."},{"id":"fa2dbca2-083b-4c80-9776-ce6e3bc48528","type":"code","code":"const points = useMemo(() => pathCurve.getPoints(100), [pathCurve])\n\nconst array = useMemo(\n () => new Float32Array(\n points.flatMap((p) => [p.x, p.y, p.z]),\n ),\n [points],\n)\n\nreturn (\n \n \n \n \n \n)","language":"tsx"},{"id":"974020aa-cc40-4b97-aa06-6aa59208b000","type":"paragraph","text":"필요한 것만 렌더링했습니다. 관계선은 전체 경로 보기를 켜거나 유물을 선택한 경우에만 지오메트리를 생성하고, 필터에서 벗어난 유물은 렌더 트리에서 아예 제외했습니다. 고해상도 화면에서는 DPR 상한을 2로 뒀습니다."},{"id":"22c8b5cf-0296-43ce-91d8-74820764fa4a","type":"html","html":"\n

\n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n

\n 3D 시각화에 사용된 유물 이미지 텍스처\n
유물 이미지	파일 형식	평균 해상도	전체 용량	평균 용량
100장	JPEG	약 630 × 588px	7.03MB	약 72KB

\n\n

\n 유물 이미지 텍스처는 최대 640px 폭을 기준으로 정리했으며,\n 원본 비율을 유지하고 작은 이미지는 확대하지 않았다.\n

\n\n\n"},{"id":"e129a841-75d7-4ac7-8a0a-4bfd22d53bdd","type":"paragraph","text":"이미지는 별도 스크립트로 리사이징해 100장 모두 640px 폭, JPEG로 통일했고 전체 용량은 7MB 수준입니다."},{"id":"e995ab98-a1f7-4a5b-807e-264818e944f3","type":"section-index","number":"05","title":"Control Panel"},{"id":"aa8fff49-2ef6-47d3-9d58-b953f3e819fb","type":"heading","level":2,"text":"피드백 도구에서 메인 기능으로"},{"id":"ad69789e-ebda-4205-ba96-2f75491e3673","type":"paragraph","text":"유물의 이동 속도, 필터링 시 레이어 표시 여부, 궤도 필터링 적용 여부는 말로 주고받기 어려운 값입니다. 각 항목을 직접 조절할 수 있는 패널을 만들어 전달하고, 연구원이 맞춘 값을 그대로 받았습니다."},{"id":"83110ed7-6d08-45a8-98d1-a2836b78ccb6","type":"paragraph","text":"이 패널은 사용자에게도 유효하다고 판단해 이후 메인 기능으로 편입했습니다."},{"id":"b15f60f9-ab10-41d0-9fc4-12b81528756d","type":"media","mediaType":"video","url":"1227353507","caption":"속도와 레이어 표시를 직접 조절하는 패널","vimeoId":"1227353507"},{"id":"23010f46-440e-45a5-b720-a693e63a0952","type":"section-index","number":"06","title":"Search"},{"id":"5f81aba7-3bb8-417f-860f-9fb8bb58d1b7","type":"heading","level":2,"text":"조건을 좁혀가는 탐색"},{"id":"d846c10e-e389-4118-897a-3b2864df0fb8","type":"paragraph","text":"형태에서 시작해 재질, 시대, 용도 순으로 조건을 더합니다. 앞 단계에서 고른 값에 따라 다음 단계에서 선택 가능한 값이 달라지고, 결과가 없는 항목은 비활성화됩니다. 단계마다 조합에 해당하는 생성형 이미지가 중앙에 나타나 선택이 어떤 형태로 좁혀지는지 보여줍니다."},{"id":"8724442c-70dc-445e-b162-f2b3d6430dd3","type":"media","mediaType":"video","url":"1227364290","caption":"","vimeoId":"1227364290"},{"id":"846a53da-1f94-4486-b6d4-f1457c8e0cdf","type":"paragraph","text":"네 조건이 모두 정해지면 해당하는 실제 유물과 함께 추천 유물, 관련 전시, 디지털 자료를 보여줍니다."},{"id":"67d19b14-1a22-4f3a-89e9-6e7b4a4c7f40","type":"section-index","number":"07","title":"Admin"},{"id":"eca96455-4cb1-4506-931c-accb29b4275d","type":"heading","level":2,"text":"연구원용 관리자 페이지"},{"id":"a153f2d4-fcae-464d-b80a-4a70ec362a0d","type":"paragraph","text":"데이터가 계속 추가되는 프로젝트라 유물 등록과 수정, 분류 관리, 이미지 업로드를 직접 처리할 수 있는 관리자 페이지를 만들었습니다."},{"id":"5e7294a7-f1cd-4e65-9316-23c6534a668a","type":"gallery","items":[{"url":"https://pcccgvebzkxkjdrcrxtu.supabase.co/storage/v1/object/public/project-media/projects/b920b11d-9024-4635-90ef-e211359e4b50/1789565902508-i7776c.webp"},{"url":"https://pcccgvebzkxkjdrcrxtu.supabase.co/storage/v1/object/public/project-media/projects/b920b11d-9024-4635-90ef-e211359e4b50/1789565906176-eb1zuc.webp"},{"url":"https://pcccgvebzkxkjdrcrxtu.supabase.co/storage/v1/object/public/project-media/projects/b920b11d-9024-4635-90ef-e211359e4b50/1789565909198-1nk0ws.webp"},{"url":"https://pcccgvebzkxkjdrcrxtu.supabase.co/storage/v1/object/public/project-media/projects/b920b11d-9024-4635-90ef-e211359e4b50/1789565911832-0tskdo.webp"}]},{"id":"360641b6-3922-49fa-84a5-4e8a56996bc8","type":"section-index","number":"06","title":"Outcome"},{"id":"fb3e5a45-497d-409f-ab47-0698e1d39fc7","type":"paragraph","text":"데이터를 JSON에서 Supabase로 옮기면서도 화면은 그대로 유지했고, 연구원이 직접 유물을 등록·수정할 수 있는 관리자 페이지까지 갖췄습니다. 3D 시각화와 단계별 탐색을 하나의 데이터 구조 위에서 구현했습니다."},{"id":"99f6ad33-115d-4afc-bb75-f7d39d53cf96","type":"paragraph","text":"한국전통문화대학교 연구실과 국립중앙박물관이 함께 출품해 F@IMP 2024-2025 Website Category의 Interpretation Prize를 수상했습니다."},{"id":"826e4799-d4e6-4e72-803f-b040979c5e04","type":"link","url":"https://faimpavicom.org/#/current-festival","style":"inline","title":"F@IMP 2024-2025 Website Category Interpretation Prize","description":"","image":""},{"id":"eb10dd0d-d78e-40e5-b898-441f5c742932","type":"paragraph","text":"소개 영상은 연구원들이 정리한 기획과 콘텐츠를 바탕으로 제작했습니다."},{"id":"70dfccc4-b43b-46b3-9ef6-6e6162353090","type":"media","mediaType":"video","url":"https://vimeo.com/1227365620","caption":"","vimeoId":"1227365620"},{"id":"93f369f3-38e1-4755-b796-cf51ce5f2f23","type":"link","url":"https://heritage-information-lab.vercel.app/?lang=ko","style":"bookmark","title":"H+LOW","description":"문화유산 디지털 표준 선도를 위한 지능형 헤리티지 공유 플랫폼 기술 개발. Artifact metadata visualization platform for leading the digital standard of cultural heritage.","image":"https://heritage-information-lab.vercel.app/icons/op-image.png"}]

p5.js 한국어 번역 프로젝트