AI Storytelling Assistant v1.1 편집하기

<html>
<head>
<meta charset="utf-8"/>
<title>AI Storytelling Assistant 2025 User's Manual</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<style>
.figure {
	float: right;
	margin: 0 10 0 40
}
.uniform-button {
  width: 10em;
  height: 1.8em;
  font-size: 1em;
  margin-left: 0.5em;
  margin-right: 0.5em; 
  border-radius: 16px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
</style>
</head>
<body>
<h1 style="text-align:center">AI Storytelling Assistant 2025</h1>
<h3 style="text-align:center">v1.1 2025.07.11</h1>
<div  style="text-align:center"><a href="/storyKorea/login?server=tcp:encyves.aks.ac.kr">🔐 Login</a></div>

<div class="figure">
	<table border="0" style="margin:auto; width:10vw; text-align:center;">
		<tr><td><img class="image" src="/static/icon/tutor.png" style="width: 120px;" /></td></tr>
		<tr><td>김현<br/>Digital Curator </td></tr>
	</table>
	<br/>
</div>

<h2>1. 시스템 소개</h2>
<p>AI Storytelling Assistant는 인문학 및 예술 분야의 지식과 창의적 사고를 바탕으로, 생성형 인공지능(Generative AI)과 협업하여 시맨틱 기반의 이야기 콘텐츠를 제작할 수 있도록 설계된 웹 기반 교육 플랫폼입니다. <br/></p>
<p>이 프로그램은 특히 인문·예술을 공부하는 학생들이 자신이 다루는 전공 지식 속의 인물, 사건, 장소, 개념 등을 구조화하여 이야기로 재구성하고, 이를 시각적 콘텐츠(동영상, 슬라이드)로 확장하는 능력을 기를 수 있도록 돕습니다.<br/></p>
<h3>교육적 기획 의도</h3>
<p>오늘날의 인공지능은 단순한 정보 요약을 넘어서, 서사적 구조를 갖춘 창의적 텍스트를 생성할 수 있는 수준에 도달하고 있습니다. 학생들이 인공지능에 수동적으로 의존하는 것이 아니라, 자기의 호기심과 문제의식으로 지식을 탐구하되 인공지능을 도구로 활용하여 정리와 표현, 확장의 성과를 증진하는 방법을 찾게 하는 것이 이 시스템의 기획 의도입니다.<br/></p>
<p>이 시스템을 통해 수행하려 하는 교육 활동은 다음과 같은 교육 철학에 기반합니다:</p>
<ul>
<li>시맨틱 데이터 기반 학습: 인문·예술 분야의 지식은 단편적 정보의 집합이 아니라 맥락적 의미와 인간적 해석이 결합된 복합 구조를 가지고 있습니다. 학생들은 자신의 지식을 RDF/그래프 기반의 시맨틱 구조로 표현함으로써, 지식 요소 상호간의 관계와 논리적/서사적 흐름을 명확히 파악하게 됩니다.</li>
<li>생성형 AI와의 협업 훈련: 구조화된 데이터를 바탕으로 생성형 인공지능(GPT)과의 대화를 통해 스토리를 생성·확장함으로써, AI를 ‘공저자’로 활용하는 새로운 글쓰기 경험을 제공합니다.</li>
<li>시각적 콘텐츠 제작 능력 향상: 텍스트 중심의 내러티브를 영상 및 프레젠테이션 자료로 자동 변환하여 발표력과 표현력을 강화합니다.</li>
</ul>
<h3>활용 가능성</h3>
<p>이 프로그램은 다음과 같은 교육적 상황에서 유용하게 활용될 수 있습니다:</p>
<ul>
<li>디지털 인문학 수업: 역사, 문학, 철학 데이터를 시각적 스토리 콘텐츠로 가공하여 학습의 몰입도를 높임</li>
<li>창의적 스토리텔링 훈련: AI의 제안을 비판적으로 수용하고 재구성하면서 사고력과 창의성을 함께 훈련</li>
<li>미디어 기반 발표 및 평가: 학습자가 만든 콘텐츠를 수업 발표, 포트폴리오, 공공 교육자료 등으로 활용 가능</li>
</ul>
<h2>2. 시스템 구성</h2>
<p>AI Storytelling Assistant는 시맨틱 데이터 기반의 스토리텔링을 지원하는 웹 기반 콘텐츠 제작 도구입니다. 시스템은 다음의 다섯 개 모듈로 구성되어 있으며, 각 모듈은 생성형 인공지능과 사용자 조작을 통해 스토리를 기획, 생성, 편집, 시각화할 수 있도록 합니다.</p>
<table border="1" style="border-collapse:collapse; text-align:left;" width="90%">
<tr>
<th style="text-align:center;width:25%;">모듈</th>
<th style="text-align:center;width:50%;">주요 기능</th>
<th style="text-align:center;width:25%;">UX 프로그램</th>
</tr>
<tr><td>🔐 로그인 (Login)</td><td>사용자 인증 및 데이터베이스/프로젝트 선택</td><td>login.html</td></tr>
<tr><td>📓 큐레이터 (Curator)</td><td>시맨틱 데이터 기반 스토리 구성요소 선택 및 저장</td><td>curator.html</td></tr>
<tr><td>📖 프리젠터 (Presenter)</td><td>완성된 스토리 콘텐츠 열람 및 다운로드</td><td>viewer.html</td></tr>
<tr><td>🤖 라이터 (Writer)</td><td>GPT를 이용한 이야기 내러티브 생성 및 수정</td><td>chatting.html</td></tr>
<tr><td>🎬 프로듀서 (Producer)</td><td>내러티브 기반 영상 및 PPT 콘텐츠 제작</td><td>editor.html</td></tr>
</table>
<h2>3. 모듈별 프로그램 사용법</h2>
<h3>1) 🔐 로그인 (Login)</h3>
<ul>
<li>화면 파일:login.html</li>
<li>메인 모듈:login.py</li>
</ul>
<h4>주요 기능</h4>
<ul>
<li>시맨틱 데이터가 저장된 데이터베이스(DB)와 프로젝트 이름을 입력합니다.</li>
<li>사용자의 계정 정보(ID, PW)를 입력하여 인증을 수행합니다.</li>
<li>인증에 성공하면 자동으로 "큐레이터" 화면으로 이동합니다.</li>
</ul>
<h4>입력 항목</h4>
<table border="1" style="border-collapse:collapse; text-align:left;" width="90%">
<tr>
<th style="text-align:center;width:25%;">항목</th>
<th style="text-align:center;width:75%;">설명</th>
</tr>
<tr><td>database</td><td>시맨틱 데이터를 조회할 DB 이름</td></tr>
<tr><td>project</td><td>선택한 DB 내의 프로젝트명</td></tr>
<tr><td>account</td><td>사용자 계정 (DB 접속용 ID)</td></tr>
<tr><td>password</td><td>계정 비밀번호 (입력 시 마스킹 처리됨)</td></tr>
</table>
<h4>버튼 기능</h4>
<table border="1" style="border-collapse:collapse; text-align:left;" width="90%">
<tr>
<th style="text-align:center;width:25%;">버튼</th>
<th style="text-align:center;width:75%;">기능</th>
</tr>
<tr><td>🔑 Curator Login</td><td>입력한 정보로 인증 시도. 성공 시 큐레이터 모듈로 진입</td></tr>
</table>
<h3>2) 📓 큐레이터 (Curator)</h3>
<ul>
<li>화면 파일:curator.html</li>
<li>메인 모듈:curator.py</li>
</ul>
<h4>주요 기능</h4>
<ul>
<li>스토리 구성에 필요한 노드를 시맨틱 네트워크로부터 탐색하고 선택</li>
<li>스토리 ID를 기준으로 기존의 스토리 데이터를 불러와 수정 가능</li>
<li>선택된 노드로부터 스토리 그래프를 시각화</li>
<li>선택된 노드 리스트를 데이터베이스에 새 스토리로 저장하거나 기존 스토리를 갱신</li>
<li>Writer, Presenter 모듈로 이동 가능</li>
</ul>
<h4>화면 구성 및 버튼 기능</h4>
<table border="1" style="border-collapse:collapse; text-align:left;" width="90%">
<tr>
<th style="text-align:center;width:5%;">구역</th>
<th style="text-align:center;width:20%;">버튼 / 항목</th>
<th style="text-align:center;width:75%;">기능 설명</th>
</tr>
<tr><td rowspan="4"> 네트워크 그래프</td><td style="text-align:center"><button class="uniform-button">🔍 관계망 탐색</button></td><td>특정 노드 ID를 입력해 해당 노드와 관련된 그래프를 표시</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">🕸 스토리 불러오기</button></td><td>기존에 저장된 스토리 ID를 불러와 구성 요소를 재확인</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">🤖 AI 내러티브</button></td><td>Writer 모듈 (GPT 기반 내러티브 생성)로 이동</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">🕮 스토리 콘텐츠</button></td><td>Presenter 모듈 (콘텐츠 열람 및 다운로드)로 이동</td></tr>
<tr><td rowspan="5"> 노드 리스트</td><td style="text-align:center"><button class="uniform-button" style="background-color: #c66; color: white;width: 6em">🧹 Clear</button></td><td>스토리 네트워크 / 선택된 노드 리스트 초기화</td></tr>
<tr><td style="text-align:center">🗑️<td>해당 노드를 리스트에서 삭제</td></tr>
<tr><td style="text-align:center"><button class="uniform-button" style="background-color: green; color: white;">스토리 그래프 보기</button></td><td>현재 노드 리스트로부터 스토리 네트워크 그래프 생성</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">새 스토리 데이터 저장</button></td><td>새로운 스토리 ID로 DB에 저장 (신규)</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">스토리 데이터 갱신</button></td><td>기존 스토리 ID에 대응되는 DB 레코드 수정 (기존 덮어쓰기)</td></tr>
</table>
<p>※ 저장 및 갱신 버튼은 시스템에서 해당 스토리 ID가 존재하는지 자동으로 검사한 후 활성화됩니다.</p>
<h3>3) 📖 프리젠터 (Presenter)</h3>
<ul>
<li>화면 파일:viewer.html</li>
<li>메인 모듈:viewer.py</li>
</ul>
<h4>주요 기능</h4>
<ul>
<li>현재 선택된 스토리의 시맨틱 네트워크 그래프를 표시합니다.</li>
<li>생성된 2차 콘텐츠(영상, PPT 등)의 존재 여부를 자동 감지하여 관련 버튼을 활성화합니다.</li>
<li>콘텐츠 파일들을 열람하거나 다운로드할 수 있습니다.</li>
<li>콘텐츠 제작 제단계(큐레이터, 라이터, 프로듀서)로 이동 가능합니다.</li>
</ul>
<h4>버튼 기능</h4>
<table border="1" style="border-collapse:collapse; text-align:left;" width="90%">
<tr>
<th style="text-align:center;width:25%;">버튼</th>
<th style="text-align:center;width:75%;">설명</th>
</tr>
<tr><td style="text-align:center"><button class="uniform-button">🕸️ 스토리 네트워크</button></td><td>시맨틱 스토리 네트워크 시각화 (기본 화면 갱신용)</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">🤖️ AI 내러티브</button></td><td>라이터 화면으로 이동</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">🎬 영상 콘텐츠 제작</button></td><td>프로듀서 화면으로 이동 </td></tr>
<tr><td style="text-align:center"><button class="uniform-button">▶ Play Movie</button></td><td>생성된 동영상을 바로 재생 (※ movie.mp4가 존재할 경우만 활성화됨)</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">🏫 PPT 보기</button></td><td>생성된 PPT 파일을 다운로드 (※ slides.pptx가 존재할 경우만 활성화됨)</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">📥 콘텐츠 다운로드</button></td><td>전체 스토리 콘텐츠 (narrative.json, movie, 이미지 등)를 ZIP으로 다운로드</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">📓 스토리 큐레이션</button></td><td>큐레이터 화면으로 이동</td>
</tr>
</table>
<p>※ 각 버튼은 백엔드에서 해당 리소스의 존재 여부를 확인하고 동적으로 활성화됩니다.</p>
<h3>4) 🤖 라이터 (Writer)</h3>
<ul>
<li>화면 파일:chatting.html</li>
<li>메인 모듈:chatting.py</li>
</ul>
<h4>주요 기능</h4>
<ul>
<li>GPT 모델과 대화를 통해 스토리 내러티브를 생성 및 수정할 수 있습니다.</li>
<li>생성된 내러티브는 저장 가능하며, 이후 영상 제작(프로듀서 모듈)으로 이동할 수 있습니다.</li>
<li>다시 큐레이터로 돌아가 스토리 노드를 수정할 수도 있습니다.</li>
</ul>
<h4>버튼 기능</h4>
<table border="1" style="border-collapse:collapse; text-align:left;" width="90%">
<tr>
<th style="text-align:center;width:25%;">버튼</th>
<th style="text-align:center;width:75%;">설명</th>
</tr>
<tr><td style="text-align:center"><button class="uniform-button" style="background-color: #6c6; color: white;width: 8em">💬 Send</button></td><td>입력된 사용자 메시지를 GPT에게 전송, 응답을 출력</td></tr>
<tr><td style="text-align:center"><button class="uniform-button" style="background-color: #66c; color: white;width: 8em">📃 History</button></td><td>GPT와의 대화 이력을 화면에 표시</td></tr>
<tr><td style="text-align:center"><button class="uniform-button" style="background-color: #c66; color: white;width: 8em">🧹 Clear</button></td><td>이전 대화 내용을 모두 삭제</td></tr></tr>
<tr><td style="text-align:center"><button class="uniform-button">📝 내러티브 생성</button></td><td>GPT를 통해 새로운 내러티브 생성 (🌡︎: Temperature, 🌎︎: 언어 선택 )</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">💾 내러티브 저장</button></td><td>현재까지 작성된 내러티브를 narrative.json으로 저장</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">🎬 영상 콘텐츠 제작</button></td><td>프로듀서 화면으로 이동하여 시각 콘텐츠 생성 진행</td></tr></tr>
<tr><td style="text-align:center"><button class="uniform-button">🕮 스토리 콘텐츠</button></td><td>프리젠터 화면으로 이동</td>
<tr><td style="text-align:center"><button class="uniform-button">📓 스토리 큐레이션</button></td><td>큐레이터 화면으로 이동 (노드 수정 시 활용)</td>
</table>
<p>※GPT와의 대화 기록은 채팅 상자에 누적되며, 이후 내러티브 저장 및 영상 제작의 기초 자료로 사용됩니다.</p>
<h3>5) 🎬 프로듀서 (Producer)</h3>
<ul>
<li>화면 파일:editor.html</li>
<li>메인 모듈:editor.py</li>
</ul>
<h4>주요 기능</h4>
<ul>
<li>라이터(Writer) 모듈에서 생성된 내러티브(narrative.json)를 기반으로 영상 제작 스크립트(story_assets.json)를 생성</li>
<li>이미지 생성, 음성 합성, 자막 구성 등을 통해 동영상 파일을 제작</li>
<li>슬라이드 형식의 프레젠테이션(PPTX) 파일도 제작 가능</li>
<li>생성된 콘텐츠는 Presenter 화면에서 재생 및 다운로드 가능</li>
</ul>
<h4>화면 구성 요소</h4>
<table border="1" style="border-collapse:collapse; text-align:left;" width="90%">
<tr>
<th style="text-align:center;width:25%;">항목</th>
<th style="text-align:center;width:75%;">설명</th>
</tr>
<tr><td>🎧 Narration Script</td><td>각 장면의 나레이션 (음성 및 자막용)</td></tr>
<tr><td>🖼 Image Prompts</td><td>각 장면의 배경 이미지 생성용 프롬프트</td></tr>
<tr><td>🌎︎ 언어 선택</td><td>나레이션 언어 선택 (드롭다운): 한국어, 영어, 프랑스어 .... </td></tr>
<tr><td>🎼 배경 음악 선택</td><td>영상에 삽입할 배경 음악 선택 (드롭다운)</td></tr>
</table>
<h4>버튼 기능</h4>
<table border="1" style="border-collapse:collapse; text-align:left;" width="90%">
<tr>
<th style="text-align:center;width:25%;">버튼</th>
<th style="text-align:center;width:75%;">설명</th>
<tr><td style="text-align:center"><button class="uniform-button">📝 스크립트 생성</button></td><td>내러티브로부터 영상 스크립트와 이미지 프롬프트 자동 생성 (OpenAI API 사용)</td></tr></tr>
<tr><td style="text-align:center"><button class="uniform-button">💾 스크립트 저장</button></td><td>작성 또는 수정된 스크립트(텍스트)를 저장</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">🎬 이미지 생성</button></td><td>프롬프트에 따라 각 장면용 이미지 생성 (DALL·E API 사용)</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">🎥 동영상 생성</button></td><td>음성+이미지+자막을 결합하여 동영상(movie.mp4) 제작</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">‍🏫 PPT 생성</button></td><td>각 장면별 이미지와 텍스트로 구성된 프레젠테이션(slides.pptx) 생성</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">🕮 스토리 콘텐츠</button></td><td>프리젠터(Presenter) 화면으로 돌아가기</td></tr>
<tr><td style="text-align:center"><button class="uniform-button">🤖 ️AI 내러티브</button></td><td>라이터(Writer) 화면으로 돌아가기</td></tr>
</table>
<p>※스 크립트 또는 이미지가 존재하지 않으면 해당 버튼이 비활성화되거나 경고 메시지를 표시합니다.</p>
<h2>4. 활용 안내</h2>
<p>AI Storytelling Assistant는 시맨틱 데이터 기반의 스토리텔링 콘텐츠를 생성하고 이를 시각 자료(동영상 및 프레젠테이션)로 변환할 수 있는 AI 지원 플랫폼입니다. 이 시스템은 맥락적·구조적 지식이 중요한 인문·예술 분야의 교육에서 특히 효과적으로 활용될 수 있으며, 데이터 기반 서사 능력과 AI 협업 능력을 동시에 함양할 수 있습니다.</p>
<h3>활용 목적 및 대상</h3>
<table border="1" style="border-collapse:collapse; text-align:left;" width="90%">
<tr>
<th style="text-align:center;width:25%;">목적</th>
<th style="text-align:center;width:75%;">설명</th>
</tr>
<tr>
<td>교육용 콘텐츠 제작</td>
<td>학생들이 직접 시맨틱 데이터를 큐레이션하고, AI와 협업하여 스토리를 작성하고 시각화함으로써 데이터 기반 서사 훈련을 경험</td>
</tr>
<tr>
<td>디지털 인문학 연구</td>
<td>구조화된 역사 데이터(RDF, 시맨틱 네트워크 등)를 이야기로 재구성하여 디지털 아카이빙 또는 문화유산 콘텐츠로 활용</td>
</tr>
<tr>
<td>AI 서사 훈련</td>
<td>GPT의 내러티브 생성 능력을 사용자가 직접 수정, 저장하며 AI의 스토리 생성 기법을 학습</td>
</tr>
<tr>
<td>프레젠테이션 자동화</td>
<td>복잡한 주제나 프로젝트 내용을 PPT 또는 영상으로 자동 전환하여 발표 자료로 활용 가능</td>
</tr>
</table>
<h3>권장 워크플로우</h3>
<p>아래는 시스템 활용의 일반적인 단계입니다. 각 단계는 UI 모듈과 연결되어 직관적으로 진행됩니다.</p>
<table border="1" style="border-collapse:collapse; text-align:left;" width="90%">
<tr>
<th style="text-align:center;width:25%;">단계</th>
<th style="text-align:center;width:50%;">설명</th>
<th style="text-align:center;width:25%;">해당 모듈</th>
</tr>
<tr>
<td>① 로그인 및 프로젝트 선택</td>
<td>사용할 데이터베이스 및 계정 지정</td>
<td>🔐 Login</td>
</tr>
<tr>
<td>② 스토리 노드 큐레이션</td>
<td>시맨틱 네트워크 탐색 및 노드 리스트 구성 → 저장</td>
<td>📓 Curator</td>
</tr>
<tr>
<td>③ 스토리 내러티브 생성</td>
<td>GPT와 대화하며 서사 작성 또는 자동 생성 → 저장</td>
<td>🤖 Writer</td>
</tr>
<tr>
<td>④ 시각 콘텐츠 제작</td>
<td>스크립트/이미지 생성 → 동영상 및 PPT 출력</td>
<td>🎬 Producer</td>
</tr>
<tr>
<td>⑤ 콘텐츠 열람 및 배포</td>
<td>결과물 확인, 다운로드 또는 수업/발표에 활용</td>
<td>📖 Presenter</td>
</tr>
</table>
<h4>활용 시 유의사항</h4>
<ul>
<li>내러티브 및 콘텐츠 생성 시 OpenAI API가 호출되므로, 네트워크 연결과 API 사용량에 유의하십시오.</li>
<li>결과물은 모두 프로젝트 폴더(story_data/{story_id}_data/)에 저장되므로, 관리자가 주기적으로 백업하는 것이 권장됩니다.</li>
<li>GPT의 응답은 컨텍스트에 따라 달라질 수 있으며, 시맨틱 데이터의 정보가 충분하지 않을 경우, 과장 왜곡이 있을 수 있습니다. 학습 목적일 경우 교사의 지도와 피드백을 권장합니다.</li>
</ul>
<div class="container" style="width: 100vw; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;">
	<table border="2" style="margin:auto; width:50vw; border-collapse:collapse; text-align:center;">
	<tr>
	<td><b>AI Storytelling Assistant</b>는 <b>의미 기반 데이터 해석 능력</b>, <b>AI 활용 소통력</b>, <b>시각적 표현력</b>을 통합적으로 키우는 미래형 인문·예술 교육 플랫폼입니다.</td>
	</tr>
	</table>
	<br/>
</div>
<br/>
<div  style="text-align:center">
	<a href="/storyKorea/login?server=tcp:encyves.aks.ac.kr">🔐 Login</a>
</div>
</body>
</html>