.. 제목: BGP 결정 프로세스 단계별 디버거
.. 슬러그: bgp-결정-디버거
.. 날짜: 2026-03-27 12:00:00 UTC
.. 태그: 네트워킹, bgp, 라우팅, 계산기, 도구
.. 카테고리: 계산기
.. 링크:
.. 설명: 9가지 BGP 최적 경로 선택 기준을 모두 단계별로 살펴보세요. 두 개의 경쟁 RIB 항목을 입력하고 속성별 결과를 통해 어떤 기준이 승자를 선택하는지 확인하세요.
.. 유형: 텍스트
<style>
/* ── CANONICAL DESIGN SYSTEM ──────────────────────────────────────────────── */
.calc-container { max-width: 900px; margin: 20px auto; padding: 20px; }
.calc-header { margin-bottom: 30px; padding: 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); color: white; }
.calc-header h2 { margin-top: 0; color: white; font-size: 28px; margin-bottom: 10px; }
.calc-header p  { margin: 10px 0; opacity: 0.95; font-size: 15px; }
.input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 20px; }
.input-group { display: flex; flex-direction: column; }
.input-group label { margin-bottom: 8px; font-weight: 600; color: rgba(255,255,255,0.95); font-size: 14px; }
.input-group input, .input-group select, .input-group textarea { padding: 14px; font-size: 14px; border: 2px solid rgba(255,255,255,0.3); border-radius: 6px; background: rgba(255,255,255,0.95); transition: all 0.3s ease; box-sizing: border-box; font-family: inherit; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { outline: none; border-color: #4CAF50; background: white; box-shadow: 0 0 0 3px rgba(76,175,80,0.1); }
.button-container { margin-top: 20px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.calc-button { padding: 14px 35px; font-size: 16px; background: #4CAF50; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.calc-button:hover  { background: #45a049; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.calc-button:active { background: #3d8b40; transform: translateY(0); }
.result-section { background: white; border: 1px solid #e0e0e0; border-radius: 8px; margin-top: 20px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.result-section:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.section-header { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; padding: 15px 20px; font-size: 18px; font-weight: bold; }
.section-content { padding: 20px; background: #fafafa; }
@media (max-width: 768px) { .input-grid, .peer-grid { grid-template-columns: 1fr; } .calc-header h2 { font-size: 22px; } .calc-container { padding: 10px; } }
/* Page-specific: BGP debugger two-path input panels */
.peer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.peer-box { border-radius: 8px; padding: 14px; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.4); }
.peer-box h4 { margin: 0 0 10px 0; color: white; font-size: 15px; }
.peer-box.b { border-color: rgba(231,76,60,0.7); }
.peer-box.b h4 { color: #ffb3b3; }
/* Step list */
.step-list { list-style: none; padding: 0; margin: 0; }
.step { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-bottom: 1px solid #eee; font-size: 13px; }
.step:last-child { border-bottom: none; }
.step-num { background: #4CAF50; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; flex-shrink: 0; margin-top: 2px; }
.step.tie .step-num  { background: #95a5a6; }
.step-body { flex: 1; }
.step-name { font-weight: bold; color: #2c3e50; }
.step-vals { color: #666; margin: 2px 0; }
.verdict { font-weight: bold; margin-top: 4px; }
.verdict.a   { color: #3498db; }
.verdict.b   { color: #e74c3c; }
.verdict.tie { color: #95a5a6; }
.winner-box { background: #d4edda; border: 2px solid #28a745; border-radius: 8px; padding: 14px; text-align: center; font-size: 1.2em; margin-top: 8px; }
.winner-box.b { background: #fde8e8; border-color: #e74c3c; }
code { background: #f0f0f0; padding: 1px 4px; border-radius: 3px; font-size: 12px; }
@media (max-width: 600px) { .peer-grid { grid-template-columns: 1fr; } }
</style>
<div class="calc-container">
<div class="calc-header">
<h2>BGP 결정 프로세스 단계별 디버거</h2>
<p>두 개의 경쟁 RIB 항목을 입력하고 9개의 BGP 최적 경로 기준을 단계별로 살펴보세요.</p>
<div class="peer-grid">
<div class="peer-box">
<h4>경로 A</h4>
<div class="input-group"><label>무게(Cisco만 해당, 로컬)</label>
<input id="aWeight" max="65535" min="0" type="number" value="100"/></div>
<div class="input-group"><label>지역 특혜</label>
<input id="aLp" max="4294967295" min="0" type="number" value="100"/></div>
<div class="input-group"><label>국내산?</label>
<select id="aLocal"><option value="0">아니요</option><option value="1">예(네트워크/집계)</option></select></div>
<div class="input-group"><label>AS 경로 길이</label>
<input id="aAsp" max="255" min="0" type="number" value="2"/></div>
<div class="input-group"><label>기원</label>
<select id="aOrigin"><option value="0">IGP(i)</option><option value="1">EGP (e)</option><option value="2">불완전한(?)</option></select></div>
<div class="input-group"><label>메드</label>
<input id="aMed" max="4294967295" min="0" type="number" value="0"/></div>
<div class="input-group"><label>세션 유형</label>
<select id="aType"><option value="e">eBGP</option><option value="i">iBGP</option></select></div>
<div class="input-group"><label>IGP 측정항목(다음 홉으로)</label>
<input id="aIgp" max="4294967295" min="0" type="number" value="10"/></div>
<div class="input-group"><label>BGP 라우터-ID</label>
<input id="aRid" placeholder="10.0.0.1" type="text" value="10.0.0.1"/></div>
</div>
<div class="peer-box b">
<h4>경로 B</h4>
<div class="input-group"><label>무게(Cisco만 해당, 로컬)</label>
<input id="bWeight" max="65535" min="0" type="number" value="100"/></div>
<div class="input-group"><label>지역 특혜</label>
<input id="bLp" max="4294967295" min="0" type="number" value="100"/></div>
<div class="input-group"><label>국내산?</label>
<select id="bLocal"><option value="0">아니요</option><option value="1">예(네트워크/집계)</option></select></div>
<div class="input-group"><label>AS 경로 길이</label>
<input id="bAsp" max="255" min="0" type="number" value="3"/></div>
<div class="input-group"><label>기원</label>
<select id="bOrigin"><option value="0">IGP(i)</option><option value="1">EGP (e)</option><option value="2">불완전한(?)</option></select></div>
<div class="input-group"><label>메드</label>
<input id="bMed" max="4294967295" min="0" type="number" value="0"/></div>
<div class="input-group"><label>세션 유형</label>
<select id="bType"><option value="e">eBGP</option><option value="i">iBGP</option></select></div>
<div class="input-group"><label>IGP 측정항목(다음 홉으로)</label>
<input id="bIgp" max="4294967295" min="0" type="number" value="20"/></div>
<div class="input-group"><label>BGP 라우터-ID</label>
<input id="bRid" placeholder="10.0.0.2" type="text" value="10.0.0.2"/></div>
</div>
</div>
<div class="button-container">
<button class="calc-button" onclick="runDebugger()">의사결정 과정을 단계별로 진행</button>
</div>
</div>
<div class="result-section" id="resultsSection" style="display:none">
<div class="section-header">최적 경로 선택 단계</div>
<div class="section-content">
<ul class="step-list" id="stepList"></ul>
<div id="winnerBox"></div>
</div>
</div>
<div class="result-section">
<div class="section-header">BGP 최적 경로 기준 참조(RFC 4271)</div>
<div class="section-content">
<table style="width:100%;border-collapse:collapse;font-size:13px">
<tr style="background:#4CAF50;color:white"><th style="padding:7px">단계</th><th style="padding:7px">표준</th><th style="padding:7px">우승자</th><th style="padding:7px">메모</th></tr>
<tr><td style="padding:7px;border-bottom:1px solid #eee">1</td><td style="padding:7px;border-bottom:1px solid #eee">무게</td><td style="padding:7px;border-bottom:1px solid #eee">더 높은</td><td style="padding:7px;border-bottom:1px solid #eee">Cisco 독점, 로컬에서 라우터로</td></tr>
<tr><td style="padding:7px;border-bottom:1px solid #eee">2</td><td style="padding:7px;border-bottom:1px solid #eee">지역 특혜</td><td style="padding:7px;border-bottom:1px solid #eee">더 높은</td><td style="padding:7px;border-bottom:1px solid #eee">iBGP 속성, AS 차원 정책</td></tr>
<tr><td style="padding:7px;border-bottom:1px solid #eee">3</td><td style="padding:7px;border-bottom:1px solid #eee">현지에서 유래</td><td style="padding:7px;border-bottom:1px solid #eee">지역 승리</td><td style="padding:7px;border-bottom:1px solid #eee">네트워크/집계 명령</td></tr>
<tr><td style="padding:7px;border-bottom:1px solid #eee">4</td><td style="padding:7px;border-bottom:1px solid #eee">AS 경로 길이</td><td style="padding:7px;border-bottom:1px solid #eee">더 짧게</td><td style="padding:7px;border-bottom:1px solid #eee">bgp bestpath as-pathignore로 비활성화할 수 있습니다.</td></tr>
<tr><td style="padding:7px;border-bottom:1px solid #eee">5</td><td style="padding:7px;border-bottom:1px solid #eee">기원</td><td style="padding:7px;border-bottom:1px solid #eee">IGP &gt; EGP &gt; ?</td><td style="padding:7px;border-bottom:1px solid #eee">RFC 4271 §9.1.2.2</td></tr>
<tr><td style="padding:7px;border-bottom:1px solid #eee">6</td><td style="padding:7px;border-bottom:1px solid #eee">메드</td><td style="padding:7px;border-bottom:1px solid #eee">낮추다</td><td style="padding:7px;border-bottom:1px solid #eee">동일한 이웃 AS인 경우에만 비교됩니다(RFC 4271).</td></tr>
<tr><td style="padding:7px;border-bottom:1px solid #eee">7</td><td style="padding:7px;border-bottom:1px solid #eee">iBGP를 통한 eBGP</td><td style="padding:7px;border-bottom:1px solid #eee">eBGP 승리</td><td style="padding:7px;border-bottom:1px solid #eee">내부 경로보다 외부 경로가 선호됨</td></tr>
<tr><td style="padding:7px;border-bottom:1px solid #eee">8</td><td style="padding:7px;border-bottom:1px solid #eee">IGP 측정항목</td><td style="padding:7px;border-bottom:1px solid #eee">낮추다</td><td style="padding:7px;border-bottom:1px solid #eee">IGP를 통한 BGP 다음 홉 비용</td></tr>
<tr><td style="padding:7px">9</td><td style="padding:7px">라우터 ID</td><td style="padding:7px">낮추다</td><td style="padding:7px">타이 브레이커, 결정론적 선택</td></tr>
</table>
</div>
</div>
</div>
<script>
function ipToNum(ip) {
    const parts = ip.trim().split('.').map(Number);
    if (parts.length !== 4 || parts.some(p => isNaN(p) || p < 0 || p > 255)) return null;
    return ((parts[0]<<24)|(parts[1]<<16)|(parts[2]<<8)|parts[3])>>>0;
}

function runDebugger() {
    const get = id => document.getElementById(id);
    const a = {
        weight: parseInt(get('aWeight').value), lp: parseInt(get('aLp').value),
        local: parseInt(get('aLocal').value), asp: parseInt(get('aAsp').value),
        origin: parseInt(get('aOrigin').value), med: parseInt(get('aMed').value),
        type: get('aType').value, igp: parseInt(get('aIgp').value),
        rid: get('aRid').value,
    };
    const b = {
        weight: parseInt(get('bWeight').value), lp: parseInt(get('bLp').value),
        local: parseInt(get('bLocal').value), asp: parseInt(get('bAsp').value),
        origin: parseInt(get('bOrigin').value), med: parseInt(get('bMed').value),
        type: get('bType').value, igp: parseInt(get('bIgp').value),
        rid: get('bRid').value,
    };

    const aRidNum = ipToNum(a.rid);
    const bRidNum = ipToNum(b.rid);
    const resultsSection = document.getElementById('resultsSection');
    resultsSection.style.display = 'block';

    const originName = v => ['IGP (i)','EGP (e)','Incomplete (?)'][v];

    const criteria = [
        {
            name: 'Weight (Cisco)', higher: true, aVal: a.weight, bVal: b.weight,
            aLabel: a.weight, bLabel: b.weight,
            note: 'Higher weight wins. Cisco proprietary, not sent to peers.',
        },
        {
            name: 'Local Preference', higher: true, aVal: a.lp, bVal: b.lp,
            aLabel: a.lp, bLabel: b.lp,
            note: 'Higher local-pref wins. iBGP-propagated, AS-wide policy knob.',
        },
        {
            name: 'Locally Originated', higher: true, aVal: a.local, bVal: b.local,
            aLabel: a.local ? 'Yes' : 'No', bLabel: b.local ? 'Yes' : 'No',
            note: 'Locally originated (network/aggregate) preferred over learned routes.',
        },
        {
            name: 'AS-Path Length', higher: false, aVal: a.asp, bVal: b.asp,
            aLabel: `${a.asp} hops`, bLabel: `${b.asp} hops`,
            note: 'Shorter AS-Path wins.',
        },
        {
            name: 'Origin Code', higher: false, aVal: a.origin, bVal: b.origin,
            aLabel: originName(a.origin), bLabel: originName(b.origin),
            note: 'IGP (i) < EGP (e) < Incomplete (?). Lower numeric value wins.',
        },
        {
            name: 'MED', higher: false, aVal: a.med, bVal: b.med,
            aLabel: a.med, bLabel: b.med,
            note: 'Lower MED wins. Only compared between paths from same neighboring AS (RFC 4271).',
        },
        {
            name: 'eBGP over iBGP',
            aVal: a.type === 'e' ? 0 : 1, bVal: b.type === 'e' ? 0 : 1,
            higher: false,
            aLabel: a.type === 'e' ? 'eBGP' : 'iBGP',
            bLabel: b.type === 'e' ? 'eBGP' : 'iBGP',
            note: 'eBGP paths preferred over iBGP paths.',
        },
        {
            name: 'IGP Metric to Next-Hop', higher: false, aVal: a.igp, bVal: b.igp,
            aLabel: a.igp, bLabel: b.igp,
            note: 'Lower IGP cost to BGP next-hop wins.',
        },
        {
            name: 'BGP Router-ID', higher: false,
            aVal: aRidNum !== null ? aRidNum : 0,
            bVal: bRidNum !== null ? bRidNum : 0,
            aLabel: a.rid, bLabel: b.rid,
            note: 'Lower router-ID wins (final deterministic tie-breaker).',
        },
    ];

    let winner = null;
    const steps = criteria.map((c, i) => {
        let verdict, cls;
        if (winner) {
            // Already decided
            return `<li class="step tie">
                <div class="step-num">${i+1}</div>
                <div class="step-body">
                    <div class="step-name">${c.name}</div>
                    <div class="step-vals">A: ${c.aLabel} | B: ${c.bLabel}</div>
                    <div class="verdict tie">— Skipped (winner already determined) —</div>
                </div>
            </li>`;
        }
        if (c.higher) {
            if (c.aVal > c.bVal) { verdict = 'Path A wins'; cls = 'a'; winner = 'A'; }
            else if (c.bVal > c.aVal) { verdict = 'Path B wins'; cls = 'b'; winner = 'B'; }
            else { verdict = 'Tie — proceed to next criterion'; cls = 'tie'; }
        } else {
            if (c.aVal < c.bVal) { verdict = 'Path A wins'; cls = 'a'; winner = 'A'; }
            else if (c.bVal < c.aVal) { verdict = 'Path B wins'; cls = 'b'; winner = 'B'; }
            else { verdict = 'Tie — proceed to next criterion'; cls = 'tie'; }
        }
        return `<li class="step${winner ? ' decided' : ''}">
            <div class="step-num">${i+1}</div>
            <div class="step-body">
                <div class="step-name">${c.name}</div>
                <div class="step-vals">A: ${c.aLabel} | B: ${c.bLabel}</div>
                <div class="step-vals" style="color:#999;font-size:12px">${c.note}</div>
                <div class="verdict ${cls}">${verdict}</div>
            </div>
        </li>`;
    });

    const winnerBox = winner
        ? `<div class="winner-box${winner === 'B' ? ' b' : ''}">
            <strong>Best Path: Path ${winner}</strong>
           </div>`
        : `<div class="winner-box" style="background:#fff8e0;border-color:#f0a500">
            <strong>Complete tie after all 9 criteria — implementation-specific tiebreaker</strong>
           </div>`;

    document.getElementById('stepList').innerHTML = steps.join('');
    document.getElementById('winnerBox').innerHTML = winnerBox;
}
</script>