44 lines
13 KiB
HTML
44 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Hyeonworks — Field Manual direction</title>
|
||
<style>
|
||
:root{--paper:#f2ead8;--sheet:#fffaf0;--ink:#1d2a35;--muted:#657078;--rule:#2d3942;--orange:#d75b32;--yellow:#e7bd45;--green:#356c5d;--focus:#1456a0}
|
||
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Arial Narrow",Arial,sans-serif;line-height:1.45}a{color:inherit}
|
||
.skip{position:absolute;left:1rem;top:-6rem;background:var(--ink);color:white;padding:.75rem 1rem;z-index:20}.skip:focus{top:1rem}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
|
||
.mast{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1rem clamp(1rem,4vw,4rem);background:var(--ink);color:var(--sheet);text-transform:uppercase;letter-spacing:.09em}.mark{font-weight:900}.mast-line{border-top:1px solid #82909a}.issue{font:700 .68rem ui-monospace,monospace}
|
||
main{max-width:1460px;margin:auto;padding:clamp(1rem,3vw,2.8rem)}.atlas{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font:700 .7rem ui-monospace,monospace;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.atlas span{padding:.35rem .5rem;border:1px solid #9ca098}.atlas b{background:var(--yellow);color:var(--ink);padding:.4rem .55rem}
|
||
.cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.62fr);gap:0;margin-top:1rem;border:2px solid var(--rule);background:var(--sheet)}.cover-copy{padding:clamp(1.5rem,5vw,5rem);position:relative}.kicker{font:900 .72rem ui-monospace,monospace;color:var(--orange);text-transform:uppercase;letter-spacing:.12em}.cover h1{font-size:clamp(3.4rem,8vw,8rem);line-height:.82;letter-spacing:-.075em;text-transform:uppercase;margin:1rem 0 1.6rem;max-width:8ch}.cover-copy p{font-size:clamp(1rem,1.5vw,1.2rem);max-width:54ch}.stamp{display:inline-block;margin-top:1.4rem;padding:.6rem .8rem;border:3px double var(--orange);color:var(--orange);font:900 .72rem ui-monospace,monospace;text-transform:uppercase;transform:rotate(-1deg)}
|
||
.cover-index{display:grid;grid-template-rows:auto 1fr auto;border-left:2px solid var(--rule);background:var(--yellow)}.index-head{display:flex;justify-content:space-between;padding:1rem;border-bottom:2px solid var(--rule);font:900 .7rem ui-monospace,monospace;text-transform:uppercase}.big-number{align-self:center;text-align:center;font-size:clamp(8rem,18vw,16rem);font-weight:900;line-height:.75;letter-spacing:-.1em}.index-foot{padding:1rem;border-top:2px solid var(--rule);font:700 .8rem ui-monospace,monospace}
|
||
.instruction{display:grid;grid-template-columns:10rem 1fr;margin-top:1.3rem;border:2px solid var(--rule);background:var(--sheet)}.side-title{padding:1rem;background:var(--green);color:white;font:900 .72rem ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);text-align:right}.instruction-body{padding:clamp(1.2rem,3vw,2.5rem)}.instruction-body>header{display:flex;justify-content:space-between;gap:2rem;align-items:start;padding-bottom:1rem;border-bottom:2px solid var(--rule)}.instruction h2{font-size:clamp(2rem,4vw,4.4rem);line-height:.9;text-transform:uppercase;letter-spacing:-.05em;margin:0}.instruction-body>header p{max-width:42ch;margin:0;color:var(--muted)}
|
||
.starts{display:grid;grid-template-columns:1fr 1fr;margin-top:1.2rem;border:1px solid var(--rule)}.start{display:grid;grid-template-columns:4.5rem 1fr;min-height:250px;text-decoration:none;background:var(--sheet)}.start+.start{border-left:1px solid var(--rule)}.start:hover{background:#f7e9c2}.start-no{display:flex;justify-content:center;align-items:center;background:var(--ink);color:white;font:900 2rem ui-monospace,monospace}.start.symptom .start-no{background:var(--orange)}.start-copy{padding:1.3rem;display:flex;flex-direction:column}.start small{font:900 .68rem ui-monospace,monospace;text-transform:uppercase;color:var(--green)}.start h3{font-size:clamp(1.8rem,3.5vw,3.4rem);line-height:.92;letter-spacing:-.05em;margin:.8rem 0}.start p{max-width:34ch;color:var(--muted)}.start strong{margin-top:auto;font:900 .74rem ui-monospace,monospace;text-transform:uppercase}.start strong:after{content:" →"}
|
||
.join{display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:center;margin:1rem 0}.join:before,.join:after{content:"";border-top:2px solid var(--rule)}.join b{background:var(--yellow);border:2px solid var(--rule);padding:.65rem .85rem;font:900 .68rem ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em}
|
||
.procedure{display:grid;grid-template-columns:repeat(5,1fr);border:2px solid var(--rule);background:var(--sheet)}.phase{min-height:205px;padding:1rem;display:flex;flex-direction:column}.phase+.phase{border-left:2px solid var(--rule)}.phase b{font:900 2.4rem/1 ui-monospace,monospace;color:var(--orange)}.phase h3{font-size:1.15rem;text-transform:uppercase;margin:1.2rem 0 .45rem}.phase p{margin:0;color:var(--muted);font-size:.88rem}.phase:nth-child(2n){background:#e9e5d6}
|
||
.scenario{display:grid;grid-template-columns:minmax(270px,.62fr) 1.38fr;margin-top:1.3rem;border:2px solid var(--rule);background:var(--sheet)}.scenario-title{padding:1.4rem;background:var(--ink);color:white}.scenario-title small{font:700 .68rem ui-monospace,monospace;color:#e7bd45}.scenario-title h2{font-size:clamp(2rem,4vw,4rem);line-height:.9;margin:1rem 0}.scenario-title p{color:#cbd2d4}.values{display:flex;gap:.5rem;margin-top:1.2rem}.values span{flex:1;border-top:1px solid #86939a;padding-top:.5rem;font:700 .65rem ui-monospace,monospace;text-transform:uppercase}.values b{display:block;font-size:1.6rem;color:white}.values .alert b{color:#ff8b65}
|
||
.schedule{padding:1.4rem}.schedule-head{display:flex;justify-content:space-between;gap:1rem;border-bottom:3px solid var(--rule);padding-bottom:.7rem;font:900 .7rem ui-monospace,monospace;text-transform:uppercase}.event{display:grid;grid-template-columns:3rem 1fr 1fr;min-height:58px;align-items:center;border-bottom:1px solid #a6a69d;font:700 .8rem ui-monospace,monospace}.event>span{padding:.75rem}.event .n{color:var(--muted)}.event .session-b{border-left:1px dashed #96978f}.event.conflict{background:#f5d6c8}.event.conflict .session-b{color:#a6321f;font-weight:900}
|
||
.notice{display:grid;grid-template-columns:auto 1fr;gap:1rem;margin-top:1.3rem;padding:1rem;border:2px dashed var(--orange);background:#fff3dd}.notice b{font:900 .7rem ui-monospace,monospace;text-transform:uppercase;color:var(--orange)}.notice p{margin:0;font-size:.87rem}
|
||
footer{display:flex;justify-content:space-between;gap:1rem;padding:1.5rem clamp(1rem,3vw,2.8rem);font:700 .7rem ui-monospace,monospace;text-transform:uppercase;color:var(--muted)}
|
||
@media(max-width:850px){.cover{grid-template-columns:1fr}.cover-index{grid-template-columns:auto 1fr auto;grid-template-rows:1fr;border-left:0;border-top:2px solid var(--rule)}.index-head{border-bottom:0;border-right:2px solid var(--rule);flex-direction:column}.big-number{font-size:8rem}.index-foot{border-top:0;border-left:2px solid var(--rule)}.instruction{grid-template-columns:3rem 1fr}.instruction-body>header{display:block}.instruction-body>header p{margin-top:1rem}.starts{grid-template-columns:1fr}.start+.start{border-left:0;border-top:1px solid var(--rule)}.procedure{grid-template-columns:1fr}.phase{min-height:auto;display:grid;grid-template-columns:3.5rem 7rem 1fr;gap:.7rem;align-items:start}.phase+.phase{border-left:0;border-top:2px solid var(--rule)}.phase h3{margin:.25rem 0}.scenario{grid-template-columns:1fr}}
|
||
@media(max-width:480px){.mast{grid-template-columns:1fr auto}.mast-line{display:none}.cover h1{font-size:2.8rem}.cover-index{grid-template-columns:1fr auto}.index-head{display:none}.big-number{font-size:6.4rem;text-align:left;padding:1rem}.instruction{grid-template-columns:1fr}.side-title{writing-mode:horizontal-tb;transform:none}.start{grid-template-columns:3.5rem 1fr}.phase{grid-template-columns:3rem 1fr}.phase p{grid-column:2}.event{grid-template-columns:2.3rem 1fr}.event .session-b{grid-column:2;border-left:0;padding-top:0}.notice{grid-template-columns:1fr}footer{display:block}}
|
||
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a class="skip" href="#start">시작 절차로 건너뛰기</a>
|
||
<header class="mast"><div class="mark">Hyeonworks / Field Manual</div><div class="mast-line"></div><div class="issue">FM–001 · Rev A</div></header>
|
||
<main>
|
||
<nav class="atlas" aria-label="Technology Atlas 현재 위치"><span>Concurrency</span><span>Transaction Isolation</span><b>Lost Update</b></nav>
|
||
<section class="cover" aria-labelledby="title"><div class="cover-copy"><div class="kicker">Technical learning protocol · shared core</div><h1 id="title">Trace<br/>the<br/>overwrite.</h1><p>두 요청이 모두 성공했는데 결과는 틀렸습니다. 아는 개념이나 관찰한 증상 중 하나를 들고 들어와, 같은 실험 절차로 덮어쓰기의 인과를 확인하세요.</p><span class="stamp">두 입구 · 하나의 Lost Update Lab</span></div><aside class="cover-index" aria-label="매뉴얼 번호"><div class="index-head"><span>Module</span><span>Active</span></div><div class="big-number">01</div><div class="index-foot">Transaction Isolation<br/>Lost Update</div></aside></section>
|
||
<section id="start" class="instruction" aria-labelledby="start-title"><div class="side-title">Instruction A · choose your evidence</div><div class="instruction-body"><header><h2 id="start-title">가지고 있는 단서를 선택하세요.</h2><p>준비 절차만 달라집니다. 선택 직후 두 경로는 동일한 <strong>tx-lost-update-01</strong> 시나리오와 학습 상태에서 합류합니다.</p></header>
|
||
<div class="starts"><a class="start" href="#protocol"><span class="start-no">A</span><span class="start-copy"><small>Mechanism entry</small><h3>개념을 알고 있어요</h3><p>격리 수준과 read/write 충돌의 관계를 짧게 정렬한 뒤 실험합니다.</p><strong>개념에서 시작</strong></span></a><a class="start symptom" href="#protocol"><span class="start-no">B</span><span class="start-copy"><small>Symptom entry</small><h3>증상만 알고 있어요</h3><p>기대값 120과 실제값 70을 단서로 검증할 후보 메커니즘을 좁힙니다.</p><strong>증상에서 시작</strong></span></a></div><div class="join"><b>Merge · same reducer / same content / same progress</b></div>
|
||
</div></section>
|
||
<section id="protocol" class="procedure" aria-label="공통 학습 프로토콜"><article class="phase"><b>01</b><h3>Predict</h3><p>실행 전에 최종값을 선택합니다.</p></article><article class="phase"><b>02</b><h3>Observe</h3><p>두 세션의 순서를 한 단계씩 봅니다.</p></article><article class="phase"><b>03</b><h3>Compare</h3><p>기대값 120과 결과 70을 대조합니다.</p></article><article class="phase"><b>04</b><h3>Explain</h3><p>150이 사라진 인과를 직접 정리합니다.</p></article><article class="phase"><b>05</b><h3>Transfer</h3><p>같은 원리를 새 재고 사례에 적용합니다.</p></article></section>
|
||
<section class="scenario" aria-labelledby="scenario-title"><div class="scenario-title"><small>SHARED SCENARIO · TX-LOST-UPDATE-01</small><h2 id="scenario-title">Expected 120.<br/>Observed 70.</h2><p>A는 +50, B는 −30을 계산합니다. 둘 다 같은 초기값을 읽었기 때문에 마지막 쓰기가 앞선 결과를 덮습니다.</p><div class="values"><span>Initial<b>100</b></span><span>Expected<b>120</b></span><span class="alert">Observed<b>70</b></span></div></div><div class="schedule" role="table" aria-label="Lost Update 실행 순서"><div class="schedule-head"><span>Execution schedule</span><span>A / B</span></div><div class="event" role="row"><span class="n" role="cell">01</span><span role="cell">A reads 100</span><span class="session-b" role="cell">B waiting</span></div><div class="event" role="row"><span class="n" role="cell">02</span><span role="cell">A holds 100</span><span class="session-b" role="cell">B reads 100</span></div><div class="event" role="row"><span class="n" role="cell">03</span><span role="cell">A writes 150</span><span class="session-b" role="cell">B computes 70</span></div><div class="event conflict" role="row"><span class="n" role="cell">04</span><span role="cell">150 is overwritten</span><span class="session-b" role="cell">B writes 70</span></div></div></section>
|
||
<aside class="notice"><b>교육 범위 / Guided scenario</b><p>이 매뉴얼은 결정론적 교육 시나리오입니다. 실제 운영 로그나 데이터베이스에 연결하지 않고, 장애 원인을 진단하거나 확정하지 않습니다.</p></aside>
|
||
</main>
|
||
<footer><span>Active depth · Transaction Isolation / Lost Update</span><span>다음 주제는 이 모듈 완성 후 활성화</span></footer>
|
||
</body>
|
||
</html>
|