2026.07.23(목) · 강사 안대진, 보조강사 이기영
1일차 한 줄 목표
"정보를 데이터로 바꾸는 눈(온톨로지 설계)"을 익히고, 바이브 코딩으로 부산 인문자료를 처음으로 화면에 시각화해 본다.
오늘의 산출물
팀 주제 확정 (부산 / 부산대 관련 인문 데이터)
팀별 온톨로지 설계 시트 1장 (개체 · 클래스 · 속성 · 관계)
데이터 표(CSV/JSON) 초안
지도 · 타임라인 · 워드클라우드 중 최소 1개의 시각화 프로토타입
준비물 점검
•
개인 노트북, 전원, 인터넷
•
LLM 구독 및 바이브 코딩 도구: Claude Code 권장 (Codex, Google AI Studio도 가능)
•
브라우저(Chrome/Edge 최신), 코드 에디터(VS Code 권장)
타임테이블
교시 | 시간 | 내용 | 방식 |
1차시 | 10:00–10:10 | 오리엔테이션 | 강의 |
10:10–11:00 | ① 왜 지금 '데이터 설계'인가 — AI 시대의 시맨틱 데이터
② 온톨로지 설계 4단계 이론 | 강의 | |
11:10–12:30 | ③ [워크숍] 부산 데이터로 온톨로지 설계하기 | 실습 | |
12:30–13:00 | 팀 구성, 주제 논의 | ||
2차시 | 15:00–16:00 | ④ 시각화 유형·도구 지형 + 사례 갤러리 | 강의·토론 |
16:00–17:00 | ⑤ 바이브 코딩 기초 (Claude Code / Codex) | 강의·시연 | |
17:00–18:00 | ⑦ [실습] 지도·타임라인·워드클라우드, 배포 등 | 실습 |
1차시 · 시각화 도구 개론과 데이터 설계 기초
0. 오리엔테이션 (09:00–09:20)
•
강사·보조강사·수강생 소개, 팀 편성(3~4인 권장)
•
2일간의 여정 안내: 설계 → 데이터 → 시각화 → 스토리텔링 → 배포·발표
•
이 수업이 다른 '디지털 인문학 시각화' 수업과 다른 점 두 가지
1.
뻔한 툴 사용법을 배우지 않는다. 대신 ⓐ 데이터를 어떻게 설계할지(온톨로지)와 ⓑ 도구를 어떻게 고를지의 감각을 기른다.
2.
구현은 바이브 코딩으로 한다. "라이브러리 깔아서 지도 그려줘"라고 말하면 AI가 코드를 만든다. 우리는 무엇을·왜 만들지에 집중한다.
오늘 하루 머릿속에 남겨야 할 문장 하나
"무엇을 하나의 정보 단위로 떼어내고, 떼어낸 것들을 어떻게 다시 연결할 것인가?"1. 왜 지금 '데이터 설계'인가 — AI 시대의 시맨틱 데이터 (09:20–09:50)
1-1. 디지털화(Digitization) vs 디지털 전환(Digital Transformation)
옛 사진첩을 스캔해서 PDF로 올리는 것은 디지털화입니다. 화면으로 옮겼을 뿐, 그 안의 인물·장소·사건은 여전히 "이미지 속"에 묻혀 있어 컴퓨터가 의미를 모릅니다.
반면 "이 사진은 누가, 어디서, 언제, 무슨 일과 관련되는가"를 명시적으로 정의해 서로 연결하면, 그때부터 데이터는 질문에 답할 수 있는 지식이 됩니다. 이것이 디지털 전환입니다.
디지털화 (Digitization) | 디지털 전환 (Digital Transformation) | |
하는 일 | 자료를 화면으로 옮김 | 지식을 구조로 재구성 |
결과물 | 스캔본, PDF, 텍스트 | 개체·관계·맥락이 정의된 데이터 |
검색 | 단순 키워드 | 관계 기반 시맨틱 질의 |
확장 | 개별 파일로 고립 | 전 세계 데이터와 연결(LOD) |
1-2. AI 시대에 온톨로지가 오히려 더 중요해진 이유
"LLM이 다 해주는데 왜 굳이 데이터를 설계하나?"라는 질문이 자연스럽습니다. 답은 세 가지입니다.
1.
환각(hallucination)을 줄인다. 온톨로지는 AI에게 "쓸 수 있는 어휘와 관계의 지도"를 쥐여 줍니다. 정의된 개념·관계만 쓰게 하면 AI가 지어내는 여지가 줄어듭니다.
2.
"관계"를 물을 수 있다. 단순 검색(벡터 검색 포함)은 "비슷한 문서"는 찾아도 "A가 비판적으로 인용한 B의 견해만 모아라" 같은 관계 질문에는 약합니다. 개체를 노드로, 관계를 엣지로 만들어 두면 이런 고차원 질의가 가능해집니다. (개념: Graph RAG → 여기에 온톨로지로 검증까지 하면 OG-RAG)
3.
재사용·연결이 된다. 잘 설계된 데이터는 지도·타임라인·네트워크 등 여러 시각화로 동시에 뻗어나가고, 외부 데이터(LOD)와도 이어집니다.
핵심: 온톨로지 설계는 "AI가 잘 다룰 수 있는 형태로 인문 지식을 번역"하는 일입니다. AI 시대에 사라지는 역량이 아니라, AI를 제대로 부리기 위한 전제 역량입니다.1-3. 온톨로지 설계가 주는 세 가지 이점 (인문학 관점)
•
시맨틱 질의: 수백·수천 페이지를 다 읽지 않고도 "정약용이 비판적으로 인용한 송대 학자 견해"처럼 방향성·태도까지 담은 질문에 답을 얻습니다.
•
계보 추적: 엑셀 표로는 안 보이던 인물·해석·인용의 위계와 계보가 그래프로 드러납니다.
•
진짜 디지털 전환: 뭉뚱그려진 맥락을 명확한 단위로 분절하고 새로 연결하는, 고도의 학술 행위입니다.
2. 온톨로지 설계 4단계 이론 (09:50–10:30)
2-1. 아날로그의 '연속성'과 디지털의 '분절'
현실의 이야기는 하나로 이어져 있습니다. 그러나 컴퓨터는 모든 것을 잘게 나눈(분절된) 정보로만 다룹니다. 그래서 우리는 이어진 텍스트·사진·자료에서 의미 있는 조각을 식별하고, 그 조각들 사이의 관계를 정의해야 합니다. 이 "분절과 재연결의 설계도"가 온톨로지입니다.
2-2. 세 가지 요소로 자료 뜯어보기
인문 자료를 데이터로 옮길 때, 담긴 정보는 대개 세 층위로 나뉩니다.
•
형식 요소(Textual): 자료 자체의 구조 — 예) 사진, 일기, 편(篇)·장(章), 발간물 등
•
내용 요소(Contextual): 본문에 직접 등장하는 실체 — 예) 인물, 장소, 물품, 문헌
•
의미 요소(Reconstructed): 직접 드러나진 않지만 연구자가 재구성한 가치 — 예) 사건, 주제, 생활유형, 해석 태도
팁: 일기·사진·발간물처럼 인물·장소·물품이 풍부한 장르는 '분절의 감각'을 익히기에 가장 좋습니다. 부산 인문자료(피란 사진, 향토지, 구술 기록 등)가 딱 이 성격입니다.2-3. 설계 4단계 — 오늘 우리가 따라갈 순서
단계 | 질문 | 결과물 |
① 개체(엔티티) 탐색 | 이 자료에 "실제로 존재하는 것"은 무엇인가? | 개체 목록 (이중섭, 영도, 은지화 …) |
② 클래스 설계 | 그 개체들을 어떤 범주로 묶을까? | 클래스 목록 (Person, Place, Work …) |
③ 속성 설계 | 각 개체가 가진 값(정보)은 무엇인가? | 속성 표 (생몰년, 좌표, 제작연도 …) |
④ 관계 설계 | 개체들은 서로 어떻게 이어지는가? | 관계(트리플) 목록 |
클래스는 정답이 없습니다. 무엇을 클래스로 볼지는 "연구자가 대상을 어떤 시각으로 보느냐"에 따라 달라집니다. 같은 자료라도 미술사 관점과 도시사 관점의 설계가 다릅니다. → 이것이 인문학적 '해석'이 개입하는 지점입니다.2-4. 관계를 적는 문법: RDF 트리플
관계는 주어(Subject) – 서술어(Predicate) – 목적어(Object) 세 칸으로 적습니다. 이걸 트리플(Triple) 이라 부르고, 점(개체) 두 개를 선(관계)으로 잇는 구조입니다.
트리플을 여러 개 쌓으면 그것이 곧 지식 그래프(네트워크) 가 됩니다. 즉, 관계를 잘 설계하면 네트워크 시각화는 저절로 나옵니다.
관계에 방향성과 태도를 넣으면 질의가 강력해집니다. 예) 단순히 references(참조)가 아니라 positiveReference(지지) / negativeReference(비판)로 나누면 "누가 누구를 비판했나"를 바로 뽑아낼 수 있습니다. (선행 연구: 변은미·이동학 2025 상서고훈·상서고주 온톨로지)3. [워크숍] 부산 데이터로 온톨로지 설계하기 (10:40–11:40)
강사와 함께 하나의 예제로 4단계를 끝까지 걸어본 뒤, 팀별 주제에 그대로 적용합니다.
공통 예제 — "피란수도 부산 (1950–1953)"
아래 한 단락을 원자료라고 가정합니다.
"1950년 8월, 대한민국 정부는 부산을 임시수도로 정했다. 화가 이중섭은 원산에서 피란해 영도에 머물며 담뱃갑 은지(銀紙)에 그림을 그렸다. 국제시장과 40계단 일대에는 피란민이 모여들었고, 1953년 1월 국제시장에 큰불이 났다."
① 개체(엔티티) 탐색 — "실제로 존재하는 것"에 밑줄 긋기
유형 힌트 | 뽑아낸 개체 |
사람 | 이중섭, 피란민 |
장소 | 부산, 영도, 국제시장, 40계단, 원산 |
사건 | 정부 임시수도 이전(1950.8), 국제시장 화재(1953.1) |
물건/작품 | 은지화(담뱃갑 그림) |
② 클래스 설계 — 범주로 묶기
같은 성격끼리 묶어 영어 태그(클래스)를 붙입니다. (영어는 나중에 코드로 옮기기 위한 '꼬리표'일 뿐입니다.)
클래스 | 뜻 | 이 예제의 개체 |
Person | 인물 | 이중섭 |
Place | 장소 | 부산, 영도, 국제시장, 40계단, 원산 |
Event | 사건 | 임시수도 이전, 국제시장 화재 |
Work | 작품·물품 | 은지화 |
③ 속성 설계 — 각 개체가 가진 '값'
클래스마다 어떤 값(속성)을 기록할지 정합니다. 시각화가 요구하는 값을 미리 챙기는 것이 요령입니다. (지도 → 좌표, 타임라인 → 날짜)
클래스 | 필수 속성 | 예 |
Person | 이름, 생몰년, 출신지 | 이중섭 / 1916–1956 / 원산 |
Place | 이름, 위도·경도, 유형 | 영도 / 35.09, 129.07 / 섬 |
Event | 명칭, 시작일, 장소 | 국제시장 화재 / 1953-01 / 국제시장 |
Work | 제목, 재료, 제작시기 | 은지화 / 담뱃갑 은지 / 1950s |
④ 관계 설계 — 트리플로 잇기
주어 | 서술어 | 목적어 |
이중섭 | originFrom(출신) | 원산 |
이중섭 | evacuatedTo(피란함) | 영도 |
이중섭 | created(창작함) | 은지화 |
은지화 | createdAt(제작장소) | 영도 |
임시수도 이전 | occurredAt(발생장소) | 부산 |
국제시장 화재 | occurredAt(발생장소) | 국제시장 |
이 설계가 곧바로 세 가지 시각화가 되는 이유
•
지도: Place의 위도·경도 → 피란수도 주요 장소 지도
•
타임라인: Event의 날짜 → 1950–1953 사건 흐름
•
네트워크: 위 트리플 → 인물–장소–작품–사건 관계망
하나를 잘 설계하면 세 개가 따라온다 — 이것이 "시각화 방법론"보다 "데이터 설계"를 먼저 배우는 이유입니다.
이제 여러분 차례 (팀별, 오후에 이어서 완성)
각 팀은 아래 설계 시트를 채웁니다. (부록의 템플릿 복제)
1.
우리 팀 주제의 원자료 한 단락(또는 사진 1~2장)을 고른다
2.
개체에 밑줄 → 클래스로 묶기 → 속성 표 → 관계(트리플) 목록
3.
"이 데이터로 어떤 질문에 답하고 싶은가?" 한 문장 적기 (예: "피란기 예술가들은 어디에 모였나?")
4. 시각화 유형·도구 지형 + 사례 갤러리 (11:40–12:00)
4-1. 어떤 데이터에 어떤 시각화? — "도구 사용법 말고 선택 감각"
이 수업에서는 TimelineJS·StoryMapJS 같은 도구의 버튼 위치를 외우지 않습니다. 대신 "내 데이터에는 어떤 시각화가 맞는가" 를 판단하는 감각을 기릅니다. 실제 구현은 바이브 코딩으로 라이브러리를 깔아서 합니다.
내 데이터의 성격 | 맞는 시각화 | 개념 이해용 도구 | 바이브 코딩 구현 라이브러리 |
장소·좌표·공간 분포·이동 경로 | 지도 | StoryMapJS, Leaflet 서비스 | Leaflet, MapLibre GL, Folium |
연도·순서·시대 흐름 | 타임라인 | TimelineJS | vis-timeline, D3 |
인물·영향·인용·계보 등 '관계' | 네트워크 | Gephi, Palladio | vis-network, Cytoscape.js, D3-force |
관계를 한 줄로 정렬해 보기 | 아크 다이어그램 | — | D3 |
단어 빈도·키워드 인상 | 워드클라우드 | Voyant | wordcloud2.js, D3-cloud |
스크롤에 따라 이야기 전개 | 스토리맵/스크롤리텔링 | StoryMapJS | Scrollama + Leaflet |
판단 기준 세 가지1. 내 데이터에 좌표가 있나? → 지도
2. 내 데이터에 날짜/순서가 핵심인가? → 타임라인
3. 내 데이터의 매력이 연결 그 자체인가? → 네트워크
(둘 이상이면 결합하거나 스토리텔링으로 엮습니다.)
4-2. 사례 갤러리 — "최근의, 재미있는" 결과물들
각 사례는 "무엇을 봐야 하는가 / 왜 잘했는가" 관점으로 함께 뜯어봅니다.
•
지방의회 인물·회기 데이터를 검색·필터·관계로 엮은 아카이브. 인물 데이터를 어떻게 구조화하면 탐색이 즐거워지는지의 모범.
•
Omeka S 기반. 패싯 브라우즈(유형·시기·주제로 좁혀가며 탐색)의 감각. 묘비라는 소박한 자료가 속성 설계로 탐색 가능한 데이터가 됨.
•
세계의 깃발을 색·형태 등으로 분해해 보여주는 경쾌한 데이터 시각화. "작은 주제 + 명확한 속성 = 재미"의 좋은 예.
•
문화유산 아카이빙 프로젝트의 밈 벽. 아카이브도 유쾌할 수 있다는 것과, 이미지 컬렉션을 매력적으로 배치하는 법.
•
DH Awards 2025 시각화 부문 우승작. 대중문화(영화·음악 등) 장소를 지도로 엮은 스토리텔링. 우리 부산 주제(영화·음악·문학의 장소)와 결이 매우 비슷 → 벤치마크 1순위.
4-3. 추가 추천 사례 (타임라인·지도·네트워크·바이브코딩)
•
Onassis — 카바피스의 알렉산드리아 (지도) https://cavafy-map.onassis.org/ · 카바피스 타임라인 https://cavafy-timeline.onassis.org/
→ 한 인물의 삶을 지도와 타임라인 두 방식으로 풀어낸 세련된 사례. "같은 데이터, 다른 시각화"의 교과서.
•
•
•
Walking with Hall (StoryMapJS) https://uploads.knightlab.com/storymapjs/9ce75a46676e87d25a174e399afb31e8/test-nino/index.html → StoryMapJS로 만든 걷기-스토리맵. 도구의 결과물 감각 확인용.
•
DH Vibe Coding Advent Calendar https://advent-calendar.humanities.tools/ → 바이브 코딩으로 만든 DH 소품 모음. 우리 수업의 방식(작게, 빠르게, AI로) 그 자체. 아이디어 창고로 강력 추천.
토론(2~3분): "우리 팀 주제는 위 사례 중 무엇과 가장 닮았나? 왜?"2차시 · 팀 프로젝트 기획과 데이터 시각화 실습
5. 바이브 코딩 기초 (13:00–13:40)
5-1. 바이브 코딩이란?
코드를 한 줄 한 줄 직접 타이핑하는 대신, 자연어로 의도를 말하면 AI 에이전트가 코드를 작성·수정·실행하는 방식입니다. 우리는 문법이 아니라 "무엇을 만들지, 왜 만들지" 에 집중합니다.
핵심 원칙: 도구(TimelineJS/StoryMapJS)의 사용법을 배우는 대신, 그 도구가 하는 일을 AI에게 "만들어 달라"고 시킵니다. 예) "TimelineJS 같은 연표를 vis-timeline으로 만들어줘."
5-2. 도구 선택지와 설치
도구 | 성격 | 비고 |
Claude Code (권장) | 터미널/에디터 기반 에이전트, 파일·명령 실행 | 라이브러리 설치·서버 실행까지 자율 수행 |
Codex | 코드 특화 에이전트 | 대안으로 사용 가능 |
Google AI Studio | 웹 기반, 빠른 프로토타입 | 가벼운 실습에 적합 |
•
설치·로그인은 강사 안내에 따라 진행 (보조강사가 개별 지원)
•
작업 폴더 하나를 만들어 팀 프로젝트를 그 안에서 관리
5-3. 하네스·스킬 개념 (가볍게)
에이전트에게 작업 방식·전문 지식을 미리 주입해 두는 장치를 하네스/스킬이라 합니다. (예: 카파시(karpathy) 계열 스킬셋, superpowers 등) 오늘은 개념만 이해하고, 강사가 준비한 스킬을 얹어 실습 품질을 높입니다.
좋은 바이브 코딩 5원칙1. 작게 시작한다 (마커 3개부터).
2. 한 번에 하나씩 시킨다.
3. 데이터를 먼저 깔끔한 표(CSV/JSON) 로 준비한다 → 시각화가 쉬워진다.
4. 결과를 눈으로 확인하고 다음 지시를 준다(반복).
5. 막히면 "에러 메시지 그대로" 붙여넣고 고쳐 달라고 한다.
6. [팀 워크숍] 주제 확정 & 온톨로지 설계 시트 (13:40–14:30)
6-1. 부산 / 부산대 인문 주제 후보 (브레인스토밍용)
•
피란수도 부산(1950–53): 예술가·피란민·임시수도 장소 → 지도+타임라인+네트워크
•
부산 원도심 근대건축: 개항~근대 건물·인물·용도 변천 → 지도+타임라인
•
산복도로/이바구길: 마을·계단·구술 기억 → 스토리맵
•
부산 배경 영화·부산국제영화제: 촬영지·감독·작품 → 지도+네트워크 (홍콩 문화지도 벤치마크)
•
부산의 문학: 요산 김정한 등 작가–작품–장소 → 네트워크+지도
•
부산 화교와 초량: 인물·상점·건물 → 지도+네트워크
•
부산대학교 역사·캠퍼스: 건물·사건·인물 연표 → 타임라인+지도
•
자갈치·국제시장 생활사: 물품·상인·사건 → 워드클라우드+지도
각 팀은 "우리가 답하고 싶은 질문 한 문장" 을 먼저 정하세요. 좋은 질문이 좋은 데이터 설계를 부릅니다.
6-2. 설계 시트 작성 (오전 워크숍 이어서 완성)
부록의 온톨로지 설계 시트 템플릿을 팀별로 복제해 채웁니다.
개체 목록 [ ] 클래스 [ ] 속성 표 [ ] 관계(트리플) [ ] 핵심 질문 1문장
•
완성한 팀은 강사·보조강사에게 30초 브리핑 → 즉석 피드백
7. [실습] 첫 시각화 만들기 (14:40–16:00)
목표: 팀 데이터로 지도 · 타임라인 · 워드클라우드 중 최소 1개의 작동하는 프로토타입을 만든다.
7-1. 1단계 — 데이터를 표로 정리 (15분)
시각화의 90%는 깔끔한 데이터에서 결정됩니다. 설계 시트의 개체·속성을 CSV/JSON으로 옮깁니다.
지도용 places.csv 예시
타임라인용 events.csv 예시
7-2. 2단계 — 바이브 코딩으로 구현 (50분)
아래 실습 프롬프트를 그대로 복사해 시작한 뒤, 눈으로 확인하며 다듬습니다.
지도 (Leaflet) 타임라인 (vis-timeline) 워드클라우드 (wordcloud2.js) 자주 만나는 상황- 한글 깨짐 → "meta charset utf-8 넣고 폰트 지정해줘"
- 좌표가 엉뚱 → CSV의 lat/lng 순서·값 확인 요청
- 안 열림 → "에러 메시지 그대로" 붙여넣기
7-3. 3단계 — 확인 & 기록 (15분)
•
팀 폴더에 결과 파일 저장, 스크린샷 1장 남기기
•
"무엇이 보이는가 / 무엇을 더 하고 싶은가" 한 줄 메모 → 2일차 심화의 출발점
마무리 · 2일차 예고 (16:00)
•
오늘: 설계(온톨로지) → 데이터 → 첫 시각화까지 왔습니다.
•
내일: 네트워크(관계망) 시각화와 지도·타임라인 스토리텔링을 심화하고, 하나의 디지털 전시 페이지로 통합해 배포·발표합니다.
•
숙제(선택): 팀 데이터 표를 조금 더 채워오기, 참고할 사례 1개 더 찾아오기
부록 A. 온톨로지 설계 시트 템플릿 (팀별 복제)
팀명 / 주제:
답하고 싶은 질문(1문장):
① 개체 목록
# | 개체 이름 | 유형 힌트(사람/장소/사건/물건…) |
1 | ||
2 |
② 클래스
클래스(영문 태그) | 뜻 | 소속 개체 예 |
Person | 인물 | |
Place | 장소 | |
Event | 사건 | |
Work | 작품·물품 |
③ 속성
클래스 | 속성들 | 예시 값 |
Place | 이름, 위도, 경도, 유형 | |
Event | 명칭, 날짜, 장소 |
④ 관계(트리플)
주어 | 서술어(관계) | 목적어 |
부록 B. 부산 인문 데이터 출처 (실습용)
•
부산광역시립박물관·부산근현대역사관 소장자료 및 발간물
•
부산광역시 향토문화전자대전(부산향토문화백과)
•
국가유산청/국가기록원 부산 관련 사진·기록
•
부산대학교 도서관·기록관 자료
•
지역 신문 아카이브(부산일보 등)의 근현대 기사
•
공공데이터포털의 부산 문화·관광 데이터(좌표 포함)
저작권·이용조건을 확인하고, 출처를 데이터에 함께 기록하세요(속성 source). 부록 C. 오늘의 실습 프롬프트 모음
•
지도/타임라인/워드클라우드 프롬프트는 위 7-2 참조 (복사해 사용)
•
공통 접두어 추천: "너는 디지털 인문학 시각화를 돕는 개발자다. 데이터를 존중하고, 라이브러리는 알아서 설치하고, 결과를 로컬에서 열어 확인시켜라."