행위

"DigitalSinology(2026) NetworkGraph 02.lst"의 두 판 사이의 차이

CNUDH
1번째 줄: 1번째 줄:
−
<div style="text-align:justify">
+
<html>
 +
<head>
 +
<meta charset="UTF-8">
 +
<style>
 +
body{
 +
    font-family:Arial,sans-serif;
 +
    background:#fdfdf9;
 +
    text-align:center;
 +
    padding:30px;
 +
}
 +
 
 +
#visualization{
 +
    width:100%;
 +
    max-width:1400px;
 +
    margin:auto;
 +
}
 +
 
 +
.row{
 +
    display:flex;
 +
    align-items:center;
 +
    margin:18px 0;
 +
}
 +
 
 +
.chapter{
 +
    width:60px;
 +
    text-align:right;
 +
    padding-right:15px;
 +
    font-weight:bold;
 +
}
 +
 
 +
.timeline{
 +
    flex:1;
 +
    position:relative;
 +
    height:25px;
 +
    border-top:2px solid #b5b5b5;
 +
}
 +
 
 +
.tick-gray{
 +
    position:absolute;
 +
    width:1px;
 +
    height:7px;
 +
    top:0;
 +
    background:#999;
 +
    cursor:pointer;
 +
}
  
−
<font face="나눔바른고딕">
+
.tick-gray:hover {
−
<br/><br/><br/><br/>
+
    background: #555;
 +
    width: 2px;
 +
    z-index: 5;
 +
}
  
−
<html>
+
.tick-color{
 +
    position:absolute;
 +
    width:2px;
 +
    height:14px;
 +
    top:-12px;
 +
    cursor:pointer;
 +
    z-index: 10;
 +
}
 +
 
 +
.tick-color:hover {
 +
    width: 4px;
 +
    z-index: 15;
 +
}
 +
 
 +
.count{
 +
    width:80px;
 +
    color:#555;
 +
    font-weight:bold;
 +
    padding-left:10px;
 +
    text-align:right;
 +
}
 +
 
 +
.count .match{
 +
    color:#e74c3c;
 +
}
  
−
<center><font color="#006400" size="11"><b>샹즈와 인력거</b></font>
+
.che{background:#e74c3c;}
−
<br/><br/>
+
.cheRen{background:#3498db;}
−
<font color="#3CB371" size="5"></font></center><br/>
+
.chePlace{background:#2ecc71;}
 +
.cheMoney{background:#f39c12;}
  
−
</html>
+
#legend{
 +
    margin:25px 0;
 +
}
  
−
<font face="나눔바른고딕 UltraLight"><p style="text-align:right;"><font color="black" size="4">중어중문학과  <b>정선한</b></font></p>
+
.legend-item{
 +
    margin:0 15px;
 +
}
  
−
</font>
+
.box{
−
__NOTOC__
+
    width:14px;
 +
    height:14px;
 +
    display:inline-block;
 +
    margin-right:5px;
 +
    vertical-align:middle;
 +
}
  
−
<div style="float:center; background:#3CB371; width:100%; height:3px; text-align:right; padding:2px 2px 2px;"></div>
+
/* 툴팁 Z-index 극대화 */
 +
#tooltip {
 +
    position: absolute;
 +
    display: none;
 +
    background: rgba(0, 0, 0, 0.85);
 +
    color: #fff;
 +
    padding: 15px;
 +
    border-radius: 6px;
 +
    font-size: 13px;
 +
    text-align: left;
 +
    width: max-content;
 +
    max-width: 500px;
 +
    line-height: 1.5;
 +
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
 +
    z-index: 999999 !important;
 +
    pointer-events: none;
 +
    word-break: keep-all;
 +
    box-sizing: border-box;
 +
}
  
−
==='''<span style="color:#006400">문제의식</span>'''===
+
#tooltip strong {
 +
    color: #ffd700;
 +
}
  
−
*『낙타상자』에서 '인력거'라는 중심 사물이 차지하는 비중은 어느 정도인가?<br/>
+
.tooltip-sentence-info {
−
* 샹즈가 인력거를 '실제'로 가지고 있는 정도가 많을 것인가, '희망'하는 정도가 많을 것인가?
+
    color: #a8d8ea;
−
<br/>
+
    font-weight: bold;
 +
    margin-bottom: 8px;
 +
    display: inline-block;
 +
}
 +
</style>
 +
</head>
 +
<body>
  
−
==='''<span style="color:#006400">연구 목적</span>'''===
+
<h2>駱駝祥子 인력거(車) 관련 어휘 공간적 분포</h2>
−
01. 전체 문장에서 '車(인력거)'가 언급된 분포 시각화
 
−
<br/>
 
−
02. 샹즈의 현실과 비현실 속 인력거의 등장 양상 확인
 
−
<br/>
 
−
<br/>
 
  
−
==='''<span style="color:#006400">연구 방법</span>'''===
+
<div id="legend">
−
<span style="background-color: #ACE1AF;">01. 전체 문장에서 '車, 인력거'가 언급된 양상과 분포는 어떻게 나타나는가?</span>
+
    <span class="legend-item">
−
<br/>
+
        <span class="box che"></span> che
−
<br/>
+
    </span>
−
<Sentence> 단위에서 '車'와 '인력거' 전체 마크업
+
    <span class="legend-item">
−
다시 4가지 태그로 분류한다.
+
        <span class="box cheRen"></span> cheRen
−
<br/>
+
    </span>
−
<div style="border:1px solid #000;">
+
    <span class="legend-item">
−
# che: 인력거
+
        <span class="box chePlace"></span> chePlace
−
# cheRen: 인력거와 관련된 사람
+
    </span>
−
# chePlace: 인력거와 관련된 장소
+
    <span class="legend-item">
−
# cheMoney: 인력거와 관련된 돈
+
        <span class="box cheMoney"></span> cheMoney
 +
    </span>
 
</div>
 
</div>
−
<br/>
 
−
<br>
 
−
<br>
 
  
−
<span style="background-color: #ACE1AF;">02. 샹즈는 '인력거'를 현실에서 접하는가, 희망으로 접하는가?</span>
+
<div id="visualization"></div>
−
<br/>
+
 
−
<br/>
+
<div id="tooltip"></div>
−
<che>태그 내에서 속성으로 현실과 희망을 구분한다.
+
 
 +
<textarea id="xmlDataBlock" style="display:none;">
 +
 
 +
</textarea>
 +
 
 +
<script>
 +
window.addEventListener("DOMContentLoaded", function() {
 +
    // 1. 미디어위키 레이아웃 제약을 벗어나기 위해 툴팁을 body 최상단으로 강제 이동
 +
    var tooltip = document.getElementById("tooltip");
 +
    if (tooltip && tooltip.parentNode !== document.body) {
 +
        document.body.appendChild(tooltip);
 +
    }
 +
 
 +
    // 2. textarea에서 XML 문자열을 안전하게 추출
 +
    var xmlString = document.getElementById("xmlDataBlock").value.trim();
 +
 
 +
    if(xmlString === "") {
 +
        alert("HTML 코드 내의 <textarea id='xmlDataBlock'> 영역에 XML 데이터를 붙여넣어 주세요.");
 +
        return;
 +
    }
 +
 
 +
    var parser = new DOMParser();
 +
    var xmlDoc = parser.parseFromString(xmlString, "text/xml");
 +
 
 +
    if(xmlDoc.getElementsByTagName("parsererror").length > 0){
 +
        alert("XML 데이터 구조에 오류가 있습니다. 원본 XML 파일의 내용을 다시 확인해 주세요.");
 +
        return;
 +
    }
 +
 
 +
    draw(xmlDoc, tooltip);
 +
});
 +
 
 +
function draw(xmlDoc, tooltip){
 +
    var container = document.getElementById("visualization");
 +
    container.innerHTML = "";
 +
   
 +
    var chapters = xmlDoc.getElementsByTagName("Chapter");
 +
 
 +
    var globalTotalSentences = 0;
 +
    var globalTotalMatches = 0;
 +
 
 +
    for(var i=0; i<chapters.length; i++){
 +
        var chapter = chapters[i];
 +
        var sentences = chapter.getElementsByTagName("Sentence");
 +
 
 +
        if(sentences.length === 0) continue;
 +
 
 +
        globalTotalSentences += sentences.length;
  
−
{| class="wikitable"
+
        var row = document.createElement("div");
−
|-
+
        row.className = "row";
−
! colspan="2"| <div style="text-align:center;"><b><che 상태="발생/희망/기타" 주체="샹즈/타인/사물"></b></div>
 
−
|-
 
−
| <div style="text-align:center;">상태</div> || <div style="text-align:center;">주체</div>
 
−
|-
 
−
| style="width:50%;" |
 
−
발생: 현재 발생한 사건, 샹즈에게 이미 일어난 일, 실제로 일어난 것<br/>
 
−
희망: 실제로 일어나지는 않았지만 실현되길 바라는 사건, 할 것임을 다짐하는 문장<br/>
 
−
기타: 발생/희망에 해당하지 않음<br/>
 
−
||
 
−
샹즈: 발생/희망/기타 사건의 동작을 하는 주체가 샹즈<br/>
 
−
타인: 발생/희망/기타 사건의 동작을 하는 주체가 타인<br/>
 
−
사물: 발생/희망/기타 사건의 동작을 하는 주체가 사람이 아님<br/>
 
−
|-
 
−
|}
 
−
<br>
 
−
<br>
 
−
<br>
 
  
−
<span style="background-color: #ACE1AF;">03. <che> 속성의 상태와 주체의 교차 흐름은 어떻게 되는가?</span>
+
        var label = document.createElement("div");
−
<br/>
+
        label.className = "chapter";
−
<br/>
+
        label.innerHTML = (i+1) + "장";
−
이는 인력거가 존재하는 방식과 그 시점에서의 인력거 소유 주체를 보기 위함이다.<br/>
 
−
각 속성값을 생키 다이어그램으로 비율과 흐름을 확인한다.
 
−
<br/>
 
−
<br/>
 
  
−
==='''<span style="color:#006400">연구 결과</span>'''===
+
        var timeline = document.createElement("div");
−
-----
+
        timeline.className = "timeline";
−
===='''<span style="color:#006400">연구 결과 01</span>'''====
+
 
−
<div style="border:1px solid #000;">
+
        var count = 0;
−
* 전체 문장 1807개 중, 346개만이 '인력거'와 관련이 있다. 비율은 19.15% 이다. <br/>
+
 
−
:『낙타상자』에서 '인력거'는 가장 주된 사물이지만, 라오서가 서술한 비율은 크지 않다. <br/>
+
        var moveHandler = function(e) {
−
:또한 '인력거'가 출현하지 않은 문장은 각각 '낙타', '돈', '결혼' 등의 요소로 내용을 이끌고 있다. <br/>
+
            var tooltipWidth = tooltip.offsetWidth;
−
</div>
+
            var windowWidth = window.innerWidth;
 +
            var x = e.pageX;
 +
            var y = e.pageY;
 +
           
 +
            if (x > windowWidth / 2) {
 +
                tooltip.style.left = (x - tooltipWidth - 20) + "px";
 +
            } else {
 +
                tooltip.style.left = (x + 20) + "px";
 +
            }
 +
            tooltip.style.top = (y + 15) + "px";
 +
        };
 +
 
 +
        for(var s=0; s<sentences.length; s++){
 +
            var sentence = sentences[s];
 +
            var left = (s/(sentences.length-1))*100;
 +
            if(sentences.length === 1) left = 0;
 +
           
 +
            var paragraph = sentence.parentNode;
 +
            var pId = paragraph && paragraph.tagName === "Paragraph" ? paragraph.getAttribute("id") : "정보 없음";
 +
            var pTitle = paragraph && paragraph.tagName === "Paragraph" ? paragraph.getAttribute("title") : "단락 정보 없음";
 +
            var sTitle = sentence.getAttribute("title") || "문장 정보 없음";
 +
           
 +
            var textOrElem = sentence.getElementsByTagName("TextOr")[0];
 +
            var textTrElem = sentence.getElementsByTagName("TextTr")[0];
 +
           
 +
            var textOr = textOrElem ? textOrElem.textContent : "원문 데이터가 없습니다.";
 +
            var textTr = textTrElem ? textTrElem.textContent : "번역 데이터가 없습니다.";
 +
 
 +
            var tooltipHtml = "<strong>[" + pTitle + "]</strong> (" + pId + ")<br>" +
 +
                              "<span class='tooltip-sentence-info'>문장: " + sTitle + "</span><br><br>" +
 +
                              "<strong>원문:</strong> " + textOr + "<br><br>" +
 +
                              "<strong>번역:</strong> " + textTr;
 +
 
 +
            var gray = document.createElement("div");
 +
            gray.className = "tick-gray";
 +
            gray.style.left = left + "%";
 +
           
 +
            gray.addEventListener("mouseover", (function(html) {
 +
                return function(e) {
 +
                    tooltip.style.display = "block";
 +
                    tooltip.innerHTML = html;
 +
                };
 +
            })(tooltipHtml));
 +
           
 +
            gray.addEventListener("mousemove", moveHandler);
 +
           
 +
            gray.addEventListener("mouseout", function() {
 +
                tooltip.style.display = "none";
 +
            });
 +
           
 +
            timeline.appendChild(gray);
 +
 
 +
            var tagType = null;
 +
 
 +
            if(sentence.getElementsByTagName("che").length > 0) tagType = "che";
 +
            if(sentence.getElementsByTagName("cheRen").length > 0) tagType = "cheRen";
 +
            if(sentence.getElementsByTagName("chePlace").length > 0) tagType = "chePlace";
 +
            if(sentence.getElementsByTagName("cheMoney").length > 0) tagType = "cheMoney";
 +
 
 +
            if(tagType){
 +
                count++;
 +
               
 +
                var tick = document.createElement("div");
 +
                tick.className = "tick-color " + tagType;
 +
                tick.style.left = left + "%";
 +
               
 +
                var colorTooltipHtml = "<strong>[" + pTitle + "]</strong> (" + pId + ") - <span style='color:#ff7f0e;'>발견태그: &lt;" + tagType + "&gt;</span><br>" +
 +
                                      "<span class='tooltip-sentence-info'>문장: " + sTitle + "</span><br><br>" +
 +
                                      "<strong>원문:</strong> " + textOr + "<br><br>" +
 +
                                      "<strong>번역:</strong> " + textTr;
 +
               
 +
                tick.addEventListener("mouseover", (function(html) {
 +
                    return function(e) {
 +
                        tooltip.style.display = "block";
 +
                        tooltip.innerHTML = html;
 +
                    };
 +
                })(colorTooltipHtml));
 +
               
 +
                tick.addEventListener("mousemove", moveHandler);
 +
               
 +
                tick.addEventListener("mouseout", function() {
 +
                    tooltip.style.display = "none";
 +
                });
 +
               
 +
                timeline.appendChild(tick);
 +
            }
 +
        }
 +
 
 +
        globalTotalMatches += count;
  
−
-----
+
        var countDiv = document.createElement("div");
−
===='''<span style="color:#006400">연구 결과 02</span>'''====
+
        countDiv.className = "count";
−
<div style="border:1px solid #000;">
+
        countDiv.innerHTML = "<span class='match'>" + count + "</span> / " + sentences.length;
−
* <small>1장 1단락부터 5장 7단락까지의 데이터다.</small><br/>
 
−
:샹즈는 인력거를 얻기 위해, 그리고 인력거를 찾기 위해 고군분터하는 인물이다.<br/>
 
−
:따라서 인력거를 희망하며 노력하는 시간이 많을 것으로<small>(<che 상태="희망">이 많을 것으로)</small> 예상했는데 그렇지 않았다.<br/>
 
−
:다만, 아직 초반 부분이며 전체 장을 마크업하면 흥미로운 결과가 나올 듯 하다..<br/>
 
−
</div>
 
  
−
-----
+
        row.appendChild(label);
−
===='''<span style="color:#006400">연구 결과 03</span>'''====
+
        row.appendChild(timeline);
−
<div style="border:1px solid #000;">
+
        row.appendChild(countDiv);
−
* <che> 속성의 상태와 주체의 교차 흐름의 결과, 주체는 샹즈가 단연 제일 큰 비중이었다.<br/>
 
−
:샹즈 중심의 서술이므로 샹즈의 발생-희망 비율(53.5%)이 타인의 발생-희망(17.0%)보다 높은 수치를 보였다.<br/>
 
−
:이때, '타인'을 각 인물명으로 세분화하면 여전히 발생-희망 비율이 유사하게 나타날 것인가? 인물별로 달라지리라 예상한다. <br/>
 
−
:연구결과02에서 언급했듯, 작품의 후반부까지 마크업하면 샹즈와 연결된 '발생-희망'의 비율이 어떻게 달라질 것인가? 역전할 것인가?
 
−
</div>
 
  
 +
        container.appendChild(row);
 +
    }
  
−
<br/>
+
    if (globalTotalSentences > 0) {
−
<br/>
+
        var ratio = ((globalTotalMatches / globalTotalSentences) * 100).toFixed(2);
−
<br/>
+
       
−
==='''<span style="color:#006400">나가며</span>'''===
+
        var ratioDiv = document.createElement("div");
−
<br/>
+
        ratioDiv.style.marginTop = "40px";
−
추후 진행되어야 할 작업과 남아 있는 질문은 다음과 같다.<br/>
+
        ratioDiv.style.fontSize = "28px";
−
<br/>
+
        ratioDiv.style.fontWeight = "bold";
−
전체 데이터의 마크업이 완료되면, <br/>
+
        ratioDiv.style.color = "#e74c3c";
−
<small><code><che 상태="발생/희망/기타"> 마크업</code></small> 샹즈는 '인력거를 끄는' 인물이 될 것인가, '인력거를 갈하는' 인물이 될 것인가?<br/>
+
        ratioDiv.innerHTML = ratio + "%";
−
<small><code><che 상태="발생/희망/기타"> 마크업</code></small> 서사의 진행에 따라 '인력거'가 샹즈의 현실과 비현실에 존재하는 모습은 어떤 변화를 보일 것인가?<br/>
+
       
−
<small><code><che 주체="타인"> 구체화</code></small> 각 인물별로 인력거를 소유하고, 바라는 비율은 어떻게 될 것인가?<br/>
+
        container.appendChild(ratioDiv);
−
<small><code><che 주체="타인"> 구체화</code></small>  직업(신분)별로 어떠한 양상을 보일 것인가? 인력거꾼들과, 샹즈의 비율을 유사한 수치를 보일 것인가?<br/>
+
    }
−
<small><code>'인력거' 외 주요 사물 마크업</code></small> 서사를 진행하는 중심 사물은 무엇으로 이동하는가? 라오서가 사용한 주요 매개체가 '인력거'가 정말 맞을 것인가?<br/>
+
}
−
<br/>
+
</script>
−
이 작품의 첫 문장이다.<br>
+
</body>
−
<blockquote>
+
</html>
−
我們所要介紹的是祥子，不是駱駝，
 
−
내가 소개하고자 하는 이는 샹즈祥子이지 낙타駱駝가 아니다. <br/>
 
−
<span style="background-color: #F08080;"><span style="color:white;">
 
−
'샹즈'에 관한 소개인 『낙타상자』에서 각각의 사물은 언제 등장하며, '낙타'는 무엇의 시발점이 되는가? 
 
−
</span>
 
−
</blockquote>
 

2026년 6월 18일 (목) 15:19 판

駱駝祥子 인력거(車) 관련 어휘 공간적 분포

che cheRen chePlace cheMoney

원본 주소 "https://dh.aks.ac.kr/~cnudh/wiki/index.php?title=DigitalSinology(2026)_NetworkGraph_02.lst&oldid=31631"