S2601002:荷居集-力乭里金召史檢題 - 편집 역사

2026년 6월 15일 (월) 06:41에 S2601002님의 편집

2026-06-15T06:41:25Z

← 이전 판		2026년 6월 15일 (월) 06:41 판
231번째 줄:		231번째 줄:
	{ id: 10, label: '주범 고상길\n(高尙吉)', shape: 'box', color: '#aed6f1', font: {size: 16, color: '#2c3e50', bold: true} },		{ id: 10, label: '주범 고상길\n(高尙吉)', shape: 'box', color: '#aed6f1', font: {size: 16, color: '#2c3e50', bold: true} },
	{ id: 11, label: '이경철\n(李京哲)', shape: 'box', color: '#d6eaf8', font: {size: 15, color: '#2c3e50'} },		{ id: 11, label: '이경철\n(李京哲)', shape: 'box', color: '#d6eaf8', font: {size: 15, color: '#2c3e50'} },
	{ id: 20, label: '고상길 처 ~~이소사~~\n(李召史)', color: '#e8daef', font: {color: '#2c3e50'} },		{ id: 20, label: '고상길 처 이조이\n(李召史)', color: '#e8daef', font: {color: '#2c3e50'} },
	{ id: 30, label: '자매 ~~김소사~~\n(金召史)', color: '#e8daef', font: {size: 15, color: '#2c3e50', bold: true} },		{ id: 30, label: '자매 김조이\n(金召史)', color: '#e8daef', font: {size: 15, color: '#2c3e50', bold: true} },
	{ id: 31, label: '~~김소사의~~ 남편', color: '#ffeaa7', font: {color: '#2c3e50'} },		{ id: 31, label: '김조이의 남편', color: '#ffeaa7', font: {color: '#2c3e50'} },
	{ id: 40, label: '김녀의 오라비\n(兄)', color: '#ffeaa7', font: {color: '#2c3e50'} },		{ id: 40, label: '김녀의 오라비\n(兄)', color: '#ffeaa7', font: {color: '#2c3e50'} },
	{ id: 50, label: '마을 공동체\n(洞)', color: '#ffeaa7', font: {color: '#2c3e50'} },		{ id: 50, label: '마을 공동체\n(洞)', color: '#ffeaa7', font: {color: '#2c3e50'} },

2026년 6월 15일 (월) 05:41에 S2601002님의 편집

2026-06-15T05:41:29Z

← 이전 판		2026년 6월 15일 (월) 05:41 판
221번째 줄:		221번째 줄:
	{		{
	id: 1,		id: 1,
	label: '피해자 김녀\n(金女)', ~~// 내부 탑재를 위해 가독성 중심 요약~~		label: '피해자 김녀\n(金女)',
	shape: 'hexagon',		shape: 'hexagon',
	color: '#ff7675',		color: '#ff7675',
	font: { size: 16, color: '#ffffff', bold: true },		font: { size: 16, color: '#ffffff', bold: true },
	shapeProperties: { inside: true } ~~// 글자를 육각형 안으로 밀어 넣는 옵션~~		shapeProperties: { inside: true }
	},		},
	{ id: 2, label: '수 두(數斗)의 곡식\n(생명줄)', color: '#b2bec3', font: {color: '#2c3e50'} },		{ id: 2, label: '수 두(數斗)의 곡식\n(생명줄)', color: '#b2bec3', font: {color: '#2c3e50'} },
244번째 줄:		244번째 줄:
	var relationNodes = new vis.DataSet(baseNodes.filter(n => [1, 10, 11, 20, 30, 31, 40, 50].includes(n.id)));		var relationNodes = new vis.DataSet(baseNodes.filter(n => [1, 10, 11, 20, 30, 31, 40, 50].includes(n.id)));
	var relationEdges = new vis.DataSet([		var relationEdges = new vis.DataSet([
			// [수정사항 1] 주범 고상길과 피해자 김녀의 직접적인 적대적 관계 추가
			{ from: 10, to: 1, label: '적대적 가해 관계', color: '#c0392b', width: 2, dashes: true },

	{ from: 30, to: 1, label: '한핏줄 자매 (同氣)', color: '#f1c40f', width: 2, arrows: 'to;from' },		{ from: 30, to: 1, label: '한핏줄 자매 (同氣)', color: '#f1c40f', width: 2, arrows: 'to;from' },
	{ from: 30, to: 31, label: '부부 관계', color: '#bdc3c7', dashes: true },		{ from: 30, to: 31, label: '부부 관계', color: '#bdc3c7', dashes: true },
270번째 줄:		273번째 줄:
	]);		]);

	// ~~공통 뷰 옵션 (자연스러운 배치를~~ 위한 물리엔진 ~~세팅)~~		// ==========================================
			// [수정사항 2] 선의 길이를 늘리고 글자 겹침을 방지하기 위한 물리엔진 옵션 대폭 조정
			// ==========================================
	var options = {		var options = {
	physics: {		physics: {
	barnesHut: { gravitationalConstant: -3500, centralGravity: 0.15, springLength: 160 },		barnesHut: {
	stabilization: { iterations: ~~120~~ }		gravitationalConstant: -6000, // 노드들이 서로 밀어내는 힘 강화 (기존 -3500)
			centralGravity: 0.1, // 중심부로 모이는 힘을 낮춰 바깥으로 퍼지게 조절
			springLength: 300, // 간선(선)의 기본 길이를 대폭 확장하여 늘려줌 (기존 160)
			springConstant: 0.04
			},
			stabilization: { iterations: 150 }
			},
			edges: {
			font: {
			size: 13, // 글자 크기를 키워 시인성 확보
			align: 'middle',
			background: '#ffffff' // 글자 배경을 하얗게 처리해 선과 글자 겹침 방지
			},
			smooth: { type: 'continuous' }
	},		},
	~~edges~~: { ~~font~~: ~~{ size: 11~~, ~~align~~: ~~'middle', background: '#ffffff' }, smooth: { type: 'continuous' } },~~		interaction: {
	~~interaction: { hover: true~~ }		hover: true,
			dragNodes: true // 사용자가 노드를 마우스로 끌어서 더 넓힐 수 있도록 활성화
			}
	};		};

2026년 6월 15일 (월) 05:34에 S2601002님의 편집

2026-06-15T05:34:04Z

← 이전 판		2026년 6월 15일 (월) 05:34 판
228번째 줄:		228번째 줄:
	},		},
	{ id: 2, label: '수 두(數斗)의 곡식\n(생명줄)', color: '#b2bec3', font: {color: '#2c3e50'} },		{ id: 2, label: '수 두(數斗)의 곡식\n(생명줄)', color: '#b2bec3', font: {color: '#2c3e50'} },
	{ id: 3, label: '도둑이라는 누명\n(添冒惡名)', shape: '~~database~~', color: '#fce4d6', font: {color: '#c0392b', bold: true} },		{ id: 3, label: '도둑이라는 누명\n(添冒惡名)', shape: 'box', color: '#fce4d6', font: {color: '#c0392b', bold: true} },
	{ id: 10, label: '주범 고상길\n(高尙吉)', shape: 'box', color: '#aed6f1', font: {size: 16, color: '#2c3e50', bold: true} },		{ id: 10, label: '주범 고상길\n(高尙吉)', shape: 'box', color: '#aed6f1', font: {size: 16, color: '#2c3e50', bold: true} },
	{ id: 11, label: '이경철\n(李京哲)', shape: 'box', color: '#d6eaf8', font: {size: 15, color: '#2c3e50'} },		{ id: 11, label: '이경철\n(李京哲)', shape: 'box', color: '#d6eaf8', font: {size: 15, color: '#2c3e50'} },

2026년 6월 15일 (월) 05:26에 S2601002님의 편집

2026-06-15T05:26:28Z

← 이전 판		2026년 6월 15일 (월) 05:26 판
110번째 줄:		110번째 줄:
	\| {{Ccti_xml \| project=S2601002 \| id=荷居集-力乭里金召史檢題 }}		\| {{Ccti_xml \| project=S2601002 \| id=荷居集-力乭里金召史檢題 }}
	\|}		\|}
	원문의 핵심 내용(도둑 누명, 마을과 오라비의 외면, 이경철의 정확한 인적 관계, 김소사의 피고인 신분 등)을 완벽히 반영하여 HTML 코드를 전면 수정했습니다.

	앞서 말씀드린 '스타일 3개 압축'을 적용하여 코드를 더 깔끔하게 다듬었고, 원문의 비극적인 서사(사회적 고립과 누명)가 시각적으로 잘 드러나도록 노드와 간선을 재설계했습니다.

	~~HTML~~
	==피해자와의 관계도 및 행위 그래프==		==피해자와의 관계도 및 행위 그래프==
	제공해주신 스크린샷을 보니, 중심 피해자인 '피해자 김녀' 노드 주변으로 너무 많은 선(Edge)과 텍스트가 겹치면서 정작 중요한 정보들이 서로를 가려버리는 문제가 발생했네요.

	~~이 문제를 해결하는 가장 좋은 방법은 하나의 화면 안에서 탭(Tab) 메뉴를 이용해 '인물 관계도'와 '사건 행위도'를 깔끔하게 분리하는 것입니다.~~

	~~HTML 구조를 크게 복잡하게 만들지 않으면서, 상단 탭을 클릭할 때마다 각각 독립된 그래프가 보이도록 코드를 전면 개편했습니다.~~

	~~🛠️ 탭 분리형 HTML/CSS/JS 수정본~~
	~~이 코드를 복사해서 실행하시면 상단에 [1. 인물 관계도], [2. 사건 행위도] 버튼이 생기며, 클릭 시 겹침 없이 쾌적하게 그래프를 확인하실 수 있습니다.~~

	~~HTML~~
	~~==피해자와의 관계도 및 행위 그래프 (탭 분리 버전)==~~
	<html>		<html>
	<head>		<head>
132번째 줄:		117번째 줄:
	<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>		<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
	<style>		<style>
	/* 전체 바깥 틀 */		/* 1. 전체 바깥 틀 */
	.network-wrapper {		.network-wrapper {
	border: 1px solid #dcdde1;		border: 1px solid #dcdde1;
142번째 줄:		127번째 줄:
	}		}

	/* 탭 내비게이션 스타일 */		/* 2. 탭 내비게이션 스타일 */
	.tab-menu {		.tab-menu {
	display: flex;		display: flex;
165번째 줄:		150번째 줄:
	}		}

	/* 그래프 화면 공간 ~~(두 그래프가 같은 자리에 겹쳐서 토글됨)~~ */		/* 3. 그래프 화면 공간 */
	.graph-container {		.graph-container {
	position: relative;		position: relative;
179번째 줄:		164번째 줄:
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	visibility: hidden; ~~/* 기본적으로 숨김 */~~		visibility: hidden;
	}		}
	.network-div.active {		.network-div.active {
	visibility: visible; ~~/* 활성화된 탭만 노출 */~~		visibility: visible;
	}		}

	/* 하단 범례 관리 */		/* 4. 하단 범례 관리 */
	.legend {		.legend {
	margin-top: 15px;		margin-top: 15px;
232번째 줄:		217번째 줄:

	<script type="text/javascript">		<script type="text/javascript">
	// 공통 노드 풀 (~~두 그래프에서 필요한 노드들을 공유하되, 각자 다르게~~ 배치 가능)		// 공통 노드 풀 (피해자 노드 내부 글자 배치 적용)
	var baseNodes = [		var baseNodes = [
	{ id: 1, label: '피해자 김녀\n(~~盲女 · 丐乞~~)', shape: 'hexagon', color: '#ff7675', font: {size: 20, color: '#ffffff', bold: true} },		{
			id: 1,
			label: '피해자 김녀\n(金女)', // 내부 탑재를 위해 가독성 중심 요약
			shape: 'hexagon',
			color: '#ff7675',
			font: { size: 16, color: '#ffffff', bold: true },
			shapeProperties: { inside: true } // 글자를 육각형 안으로 밀어 넣는 옵션
			},
	{ id: 2, label: '수 두(數斗)의 곡식\n(생명줄)', color: '#b2bec3', font: {color: '#2c3e50'} },		{ id: 2, label: '수 두(數斗)의 곡식\n(생명줄)', color: '#b2bec3', font: {color: '#2c3e50'} },
	{ id: 3, label: '도둑이라는 누명\n(添冒惡名)', shape: 'database', color: '#fce4d6', font: {color: '#c0392b', bold: true} },		{ id: 3, label: '도둑이라는 누명\n(添冒惡名)', shape: 'database', color: '#fce4d6', font: {color: '#c0392b', bold: true} },
278번째 줄:		270번째 줄:
	]);		]);

	// 공통 뷰 옵션		// 공통 뷰 옵션 (자연스러운 배치를 위한 물리엔진 세팅)
	var options = {		var options = {
	physics: {		physics: {
	barnesHut: { gravitationalConstant: -~~3000~~, centralGravity: 0.2, springLength: ~~150~~ },		barnesHut: { gravitationalConstant: -3500, centralGravity: 0.15, springLength: 160 },
	stabilization: { iterations: ~~100~~ }		stabilization: { iterations: 120 }
	},		},
	edges: { font: { size: 11, align: 'middle', background: '#ffffff' }, smooth: { type: 'continuous' } },		edges: { font: { size: 11, align: 'middle', background: '#ffffff' }, smooth: { type: 'continuous' } },
297번째 줄:		289번째 줄:
	// 탭 전환 자바스크립트 함수		// 탭 전환 자바스크립트 함수
	function switchTab(tabName) {		function switchTab(tabName) {
	~~// 버튼 활성화 클래스 토글~~
	document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));		document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
	~~// 그래프 div 가시성 토글~~
	document.querySelectorAll('.network-div').forEach(div => div.classList.remove('active'));		document.querySelectorAll('.network-div').forEach(div => div.classList.remove('active'));

305번째 줄:		295번째 줄:
	document.querySelectorAll('.tab-btn')[0].classList.add('active');		document.querySelectorAll('.tab-btn')[0].classList.add('active');
	document.getElementById('relationNetwork').classList.add('active');		document.getElementById('relationNetwork').classList.add('active');
	networkRel.fit(); // 화면 ~~크기 재조정~~		networkRel.fit(); // 화면 뷰 최적화
	} else {		} else {
	document.querySelectorAll('.tab-btn')[1].classList.add('active');		document.querySelectorAll('.tab-btn')[1].classList.add('active');
	document.getElementById('actionNetwork').classList.add('active');		document.getElementById('actionNetwork').classList.add('active');
	networkAct.fit(); // 화면 ~~크기 재조정~~		networkAct.fit(); // 화면 뷰 최적화
	}		}
	}		}

2026년 6월 15일 (월) 05:22에 S2601002님의 편집

2026-06-15T05:22:01Z

차이 보기

2026년 6월 15일 (월) 05:17에 S2601002님의 편집

2026-06-15T05:17:11Z

차이 보기

2026년 6월 15일 (월) 05:11에 S2601002님의 편집

2026-06-15T05:11:23Z

@@ 110번째 줄: / 110번째 줄: @@
 | {{Ccti_xml | project=S2601002 | id=荷居集-力乭里金召史檢題  }}
 |}
 ==주석==

2026년 6월 15일 (월) 04:36에 S2601002님의 편집

2026-06-15T04:36:51Z

← 이전 판		2026년 6월 15일 (월) 04:36 판
110번째 줄:		110번째 줄:
	\| {{Ccti_xml \| project=S2601002 \| id=荷居集-力乭里金召史檢題 }}		\| {{Ccti_xml \| project=S2601002 \| id=荷居集-力乭里金召史檢題 }}
	\|}		\|}

			==주석==
			<references/>

	[[분류:2601A]] [[분류:나의 AI 번역]]		[[분류:2601A]] [[분류:나의 AI 번역]]

2026년 6월 15일 (월) 03:29에 S2601002님의 편집

2026-06-15T03:29:24Z

차이 보기

2026년 6월 15일 (월) 03:28에 S2601002님의 편집

2026-06-15T03:28:10Z

← 이전 판		2026년 6월 15일 (월) 03:28 판
115번째 줄:		115번째 줄:
	<meta charset="UTF-8">		<meta charset="UTF-8">
	<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>		<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>

	<style>		<style>
	.network-wrapper {		.network-wrapper {
152번째 줄:		151번째 줄:
	</head>		</head>
	<body>		<body>

	<div class="network-wrapper">		<div class="network-wrapper">
	<div id="mynetwork"></div>		<div id="mynetwork"></div>
234번째 줄:		232번째 줄:
	interaction: { hover: true }		interaction: { hover: true }
	};		};

	// 4. 네트워크 생성		// 4. 네트워크 생성
	var network = new vis.Network(container, data, options);		var network = new vis.Network(container, data, options);
	</script>		</script>

	</body>		</body>
	</html>		</html>


	[[분류:2601A]] [[분류:나의 AI 번역]]		[[분류:2601A]] [[분류:나의 AI 번역]]