2026.07.24(금) · 강사 안대진, 보조강사 이기영
2일차 한 줄 목표
관계망·지도·타임라인을 하나의 디지털 전시 페이지로 통합하고, 배포·발표해서 부산 인문 데이터의 이야기를 완성한다.오늘의 산출물
관계망(네트워크) 시각화 프로토타입
지도·타임라인 스토리텔링 강화본
셋을 묶은 디지털 전시 페이지 1개 (배포 URL)
팀 발표 (3분) + 심사
타임테이블
교시 | 시간 | 내용 | 방식 |
3차시 | 10:00–11:00 | ① 팀별 온톨로지 설계, 발표 | 토론,발표 |
11:00–12:00 | 기획안 멘토링 | 실습 | |
12:00–13:00 | 팀별 활동 | 강의,실습 | |
4차시 | 15:00–17:00 | 팀별 활동 | 실습 |
17:00–17:40 | ⑥ 팀별 발표 | 발표 | |
17:40–18:00 | ⑦ 심사·피드백·시상 | 토론 |
3차시 · 기획안 멘토링과 지도·타임라인·네트워크 심화
1. 기획안 멘토링 — 프로세스 점검 (09:00–09:40)
시각화에 뛰어들기 전에, 팀별로 전체 파이프라인을 한 번 점검합니다. (강사·보조강사 순회)
1-1. 데이터 파이프라인 체크리스트
단계 | 점검 질문 | 흔한 함정 |
① 수집 | 출처가 분명하고 이용 가능한가? | 저작권·좌표 누락 |
② 정제 | 표기 통일(인명·지명), 날짜 형식(YYYY-MM) | 동명이인, 날짜 뒤죽박죽 |
③ 설계 | 개체·클래스·속성·관계가 시각화와 연결되나? | 좌표·날짜 속성 빠짐 |
④ 데이터화 | 한 행 = 한 개체, 컬럼명 일관 | 병합 셀, 빈칸 |
⑤ 시각화 | 이 데이터에 맞는 유형인가? | "그냥 예뻐서" 고른 차트 |
⑥ 스토리 | 답하고 싶은 질문에 답하나? | 시각화만 있고 해석 없음 |
오늘의 성패는 ②③④에서 갈립니다. 데이터가 깔끔하면 바이브 코딩은 순식간입니다. 정제·설계에 시간을 아끼지 마세요.1-2. 멘토링 30초 브리핑 양식
•
우리 팀 질문: _
•
데이터 개체 수: 인물 __개 / 장소 __개 / 사건 __개
•
오늘 만들 시각화: 네트워크 [ ] 지도 [ ] 타임라인 [ ] 통합 [ ]
•
지금 막힌 지점: _
2. [실습] 관계망(네트워크) 시각화 (09:40–10:50)
2-1. 왜 네트워크인가
어제 만든 관계(트리플) 가 그대로 네트워크가 됩니다. 인물–장소–사건–작품이 어떻게 얽혔는지, 연결 그 자체가 이야기일 때 네트워크가 빛납니다. (예: "피란기 예술가들이 모인 허브 장소는?", "가장 많이 언급된 인물은?")
2-2. 트리플 → 노드/엣지 데이터로 변환
nodes.csv
edges.csv
2-3. 바이브 코딩 실습 프롬프트
네트워크 그래프 (vis-network) 아크 다이어그램 (D3) — 관계를 한 줄로 정렬해 보고 싶을 때 해석 붙이기: 그래프가 나오면 "연결이 가장 많은 노드 상위 3개"를 찾아 왜 그런지 한 문장으로 쓰세요. (선행 사례: 상서고훈·상서고주 온톨로지에서 정현·『사기』·『설문해자』가 허브였던 것처럼) 한 단계 위: 관계에 태도/방향성을 넣으면(예: supports / criticizes, positiveReference / negativeReference) "누가 누구를 지지·비판했나"를 색으로 구분해 훨씬 풍부한 이야기가 됩니다.3. [실습] 지도·타임라인 스토리텔링 심화 (11:00–12:00)
어제의 지도·타임라인을 "이야기" 로 끌어올립니다. 핵심은 데이터 나열에서 서사로 넘어가는 것입니다.
3-1. StoryMapJS·TimelineJS를 "개념"으로 이해하기
•
StoryMapJS: 지도 위를 한 지점씩 이동하며 이야기를 들려주는 도구. → 우리는 Leaflet + Scrollama(스크롤리텔링) 로 같은 효과를 바이브 코딩으로 구현.
•
TimelineJS: 미디어가 붙는 세로/가로 연표. → vis-timeline 이나 커스텀 연표로 구현.
•
배우는 것은 "언제 이 방식이 효과적인가": 장소를 순서대로 따라가는 답사·생애·사건 전개에 강함.
3-2. 바이브 코딩 실습 프롬프트
스크롤 스토리맵 (Leaflet + Scrollama) 지도+타임라인 결합3-3. 스토리텔링 점검 3문항
1.
첫 화면에서 "무엇에 관한 이야기인지" 3초 안에 전달되나?
2.
방문자가 클릭·스크롤할 이유가 있나?
3.
마지막에 "그래서 무엇을 알게 됐나" 가 남나?
4차시 · 결과물 완성 · 발표 · 평가
4. [실습] 디지털 전시 페이지 통합 & 배포 (13:00–14:00)
4-1. 하나의 페이지로 묶기
네트워크·지도·타임라인·워드클라우드를 한 페이지의 섹션으로 통합합니다. 방문자가 위→아래로 읽으며 이야기를 따라오게 만듭니다.
권장 구성
1.
타이틀 + 한 문장 요약 (우리가 답하는 질문)
2.
지도/스토리맵 (공간)
3.
타임라인 (시간)
4.
네트워크 (관계)
5.
해석·결론 (그래서 알게 된 것) + 데이터 출처
통합 프롬프트4-2. 배포(호스팅) — 로컬을 넘어 URL로
바이브 코딩으로 배포까지 시킵니다. Vercel 또는 GitHub Pages 권장(정적 사이트).
배포 프롬프트 (예: Vercel) 벤치마크: 어제 본 수원시의원 아카이브도 Vercel로 배포된 정적 사이트입니다. 우리 결과물도 같은 방식으로 공유 가능한 링크가 됩니다. 시간이 부족하면 로컬 실행 + 화면 녹화/스크린샷으로 발표해도 됩니다. 배포는 보너스.5. 발표 준비 (14:00–14:30)
발표 3분 구성 (권장)
1.
(30초) 우리 팀 질문과 주제 — 왜 이 부산 데이터인가
2.
(60초) 데이터 설계: 개체·클래스·관계를 어떻게 잡았나 (심사 배점 큼)
3.
(60초) 결과물 시연: 지도·타임라인·네트워크에서 발견한 것
4.
(30초) 한계와 다음 단계
발표는 "예쁜 화면 자랑"이 아니라 "데이터로 무엇을 알게 됐는가" 를 말하는 자리입니다.
6. 팀별 발표 (14:30–15:40)
•
팀당 3분 발표 + 2분 질의
•
각 팀 발표 후 강사·동료 피드백 1~2개
7. 심사·피드백·시상 (15:40–16:00)
심사 기준 (총 100점)
기준 | 세부 | 배점 |
디지털인문학 이해도 | 인문 주제·데이터를 노드/엣지/클래스/관계로 올바르게 구조화했는가? 시각화 개념과 분석 목적을 이해했는가? | 30 |
완성도·독창성 | 워드클라우드·네트워크·지도·타임라인을 적절히 활용했는가? 참신하고 인문학적 통찰·해석이 담겼는가? | 40 |
협업·소통 | 역할 분담과 협업이 유기적이었는가? 기획 의도와 분석 결과를 설득력 있게 전달했는가? | 30 |
종합 피드백 관전 포인트
•
설계가 곧 경쟁력: 같은 주제라도 관계 설계의 깊이가 결과물의 깊이를 결정.
•
작게, 완성되게: 화려한 미완성보다 작지만 이야기가 끝까지 있는 결과물.
•
AI는 손, 판단은 사람: 무엇을·왜 시각화할지의 인문학적 판단이 핵심.
부록 A. 2일차 실습 프롬프트 모음
•
네트워크(vis-network) / 아크(D3) → 2-3 참조
•
스크롤 스토리맵(Leaflet+Scrollama) / 지도·타임라인 연동 → 3-2 참조
•
전시 페이지 통합 / 배포(Vercel·GitHub Pages) → 4-1, 4-2 참조
•
공통 접두어: "너는 디지털 인문학 시각화를 돕는 개발자다. 라이브러리는 알아서 설치하고, 결과를 로컬에서 열어 확인시켜라."
부록 B. 막힐 때 (트러블슈팅)
증상 | 이렇게 말하세요 |
에러로 안 열림 | "이 에러 그대로야: (붙여넣기). 원인 찾아서 고쳐줘." |
한글 깨짐 | "utf-8 메타태그 넣고 한글 웹폰트 지정해줘." |
지도에 마커 안 뜸 | "CSV의 lat/lng 값과 컬럼명 확인하고, 콘솔 로그로 디버깅해줘." |
그래프가 너무 복잡 | "노드 수를 줄이거나, 연결 적은 노드는 흐리게 처리해줘." |
배포 실패 | "빌드 로그 그대로 줄게. 설정 고쳐서 다시 배포해줘." |
부록 C. 더 볼 만한 사례 (심화·아이디어)
•
•
Onassis 카바피스 지도/타임라인 https://cavafy-map.onassis.org/ · https://cavafy-timeline.onassis.org/ (같은 데이터, 두 시각화)
•
•
•