SBOM은 소프트웨어를 이루는 구성요소와 관계를 기계가 읽을 수 있게 기록한 목록입니다. 취약한 라이브러리가 발표되면 어떤 제품에 들어갔는지 역추적하는 데 쓰입니다.
데모는 구성요소 하나에 문제가 생겼을 때 그 부품을 포함한 제품을 강조합니다. 목록을 한 번 만드는 데 그치지 말고 빌드마다 최신 정보를 생성하고 공유 범위와 진위를 관리해야 합니다.
언제 쓰나
제품 의존성 관리, 취약점 대응, 공급망 감사에 사용합니다.
소프트웨어 자재 명세서
Software bill of materials
제품에 포함된 구성요소를 기록해 영향받는 의존성을 빠르게 찾습니다.
···
<div class="sd"><div class="sd-head"><strong>SBOM</strong><span id="state">live check</span></div><div class="sd-stage"><div class="products"><div class="tile" id="app1">app A</div><div class="tile" id="app2">app B</div></div><div class="stem"></div><div class="parts"><div class="tile mono">lib-x</div><div class="tile mono" id="part">lib-y</div><div class="tile mono">lib-z</div></div></div><div class="sd-foot"><span id="caption">checking boundary</span><span>tap to step</span></div></div>.sd{box-sizing:border-box;width:min(94vw,700px);height:min(86vh,318px);padding:clamp(9px,2.3vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);display:flex;flex-direction:column;gap:clamp(6px,1.8vmin,12px);font:600 clamp(12px,2.6vmin,16px)/1.25 var(--font-sans, sans-serif)}.sd *{box-sizing:border-box}.sd-head,.sd-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:1.25em}.sd-head strong{color:var(--accent);letter-spacing:.06em}.sd-head span,.sd-foot{color:var(--muted)}.sd-foot{font-size:clamp(12px,2.4vmin,14px)}.sd-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vmin,18px);overflow:hidden}.sd .mono{font-family:ui-monospace,monospace}.sd .tile{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.5vmin,10px);text-align:center}.sd .good{color:var(--accent);border-color:var(--accent)}.sd .bad{color:var(--accent-3);border-color:var(--accent-3)}.sd .arrow{color:var(--muted);font-size:clamp(15px,4vmin,28px)}.sd .active{background:color-mix(in srgb,var(--accent) 16%,var(--surface));border-color:var(--accent)}.sd .blocked{background:color-mix(in srgb,var(--accent-3) 13%,var(--surface));border-color:var(--accent-3)}.sd-stage{flex-direction:column;gap:clamp(4px,1.5vmin,10px)}.products,.parts{display:flex;gap:clamp(5px,2vmin,12px);justify-content:center;width:100%}.products .tile{width:34%}.parts .tile{min-width:22%}.stem{height:clamp(8px,3vmin,22px);border-left:2px solid var(--line)}.products .affected,.parts .affected{border-color:var(--accent-3);background:color-mix(in srgb,var(--accent-3) 18%,var(--surface));color:var(--accent-3)}let n=0;function advance(){n=1-n;['app1','part'].forEach(id=>document.getElementById(id).classList.toggle('affected',!!n));document.getElementById('state').textContent=n?'lib-y flagged':'inventory normal';document.getElementById('caption').textContent=n?'app A contains affected lib-y':'component relationships recorded'}advance();setInterval(advance,950);
document.querySelector('.sd').addEventListener('pointerdown',advance);