init: company-haness 설계
This commit is contained in:
DongHyeonka
@@ -0,0 +1,171 @@
|
||||
identity:
|
||||
producer-run-id: hyeonworks-vnext-v1-direction-divergence-manual-20260718T1145Z
|
||||
context-package-sha256: eedcf6c839f69f3df7a30e7ea18b52ed5be3136c2699a2f7fe183eb27e877b30
|
||||
|
||||
artifact-kind: visual-direction-concept
|
||||
artifact-version: 1
|
||||
direction-id: field-manual
|
||||
representative-screen-id: dual-entry-shared-lab
|
||||
|
||||
visual-thesis: >-
|
||||
서로 다른 두 단서를 독립 콘텐츠처럼 꾸미지 않고, 한 장의 현장 매뉴얼에서 선택 가능한
|
||||
Entry 01A·01B와 하나의 Protocol 01로 편성한다. 굵은 번호는 읽을 순서가 아니라 지금
|
||||
실행할 행동을 지시하고, 모든 큰 선언 바로 뒤에는 선택·예측·실행할 control이나 검증 가능한
|
||||
값 변화가 따라온다. 제한된 yellow·green·orange 표식은 상태를 장식하지 않고 활성 모듈,
|
||||
절차 header, 증상 증거만 구분한다. 결과적으로 화면은 marketing poster가 아니라
|
||||
TX-LOST-UPDATE-01을 Predict → Observe → Compare → Explain → Transfer로 수행하는
|
||||
교육용 quick-reference manual처럼 작동한다.
|
||||
|
||||
concept-invariants:
|
||||
- "Entry 01A와 Entry 01B는 모두 동일한 TX-LOST-UPDATE-01 및 Protocol 01을 가리킨다."
|
||||
- "entry mode는 orientation metadata일 뿐, 합류 후 학습 단계·상태·콘텐츠를 분기하지 않는다."
|
||||
- "활성 딥다이브는 Module 01 하나로 정직하게 표시하고 roadmap은 준비 중으로 구분한다."
|
||||
- "증상 경로는 실제 장애 진단이 아니라 guided scenario에서 후보 메커니즘을 검증하는 교육 범위다."
|
||||
- "큰 번호 뒤에는 즉시 실행 가능한 control, 절차, 또는 판독 가능한 evidence가 온다."
|
||||
|
||||
reference-clusters:
|
||||
- id: quick-reference-procedure
|
||||
reference: aircraft quick reference handbook
|
||||
useful-signals:
|
||||
- "행동 순서를 굵은 단계 번호와 짧은 imperative로 분리한다."
|
||||
- "경계 조건과 주의 사항을 본문이 아닌 별도 rule block으로 둔다."
|
||||
- "필요한 순간에 빠르게 재진입할 수 있는 선형 scan path를 만든다."
|
||||
translation:
|
||||
layout: "두 entry 선택 다음에 01–05 공통 protocol을 끊김 없는 procedure strip으로 배치한다."
|
||||
interaction: "각 단계는 동사 label과 한 개의 주 행동을 가지며 완료 전후에도 순서가 유지된다."
|
||||
boundary: "실제 운항·안전 매뉴얼의 권위, 위험 등급, emergency 표식은 차용하지 않는다."
|
||||
|
||||
- id: controlled-module-system
|
||||
reference: industrial field service manual
|
||||
useful-signals:
|
||||
- "module 번호, revision, 적용 범위를 좁은 metadata rail에 모은다."
|
||||
- "한정된 spot color와 두꺼운 divider로 section ownership을 드러낸다."
|
||||
- "rule, checkpoint, result를 서로 다른 블록 형태로 구분한다."
|
||||
translation:
|
||||
layout: "MODULE 01 / TX-LOST-UPDATE-01 / GUIDED SCENARIO를 상단 identification band에 묶는다."
|
||||
interaction: "선택 결과는 가짜 승인 stamp가 아니라 현재 entry와 공통 합류점을 텍스트로 재확인한다."
|
||||
boundary: "실제 incident 대응, 원격 DB 점검, 현장 인증 완료를 암시하는 표현은 사용하지 않는다."
|
||||
|
||||
- id: instructional-hierarchy
|
||||
reference: Swiss instructional poster
|
||||
useful-signals:
|
||||
- "비대칭 대형 숫자와 고정 grid로 주행 방향을 한눈에 만든다."
|
||||
- "짧은 문장, 넓은 여백, 강한 alignment로 정보 밀도를 통제한다."
|
||||
- "색보다 크기·위치·선으로 위계와 합류 관계를 설명한다."
|
||||
translation:
|
||||
layout: "01A·01B는 동등한 2-up panel, 합류 Protocol 01은 두 panel 전체 폭을 점유한다."
|
||||
interaction: "focus ring, 선택 marker, 라벨을 함께 사용해 색 없이도 현재 진입을 판독하게 한다."
|
||||
boundary: "큰 headline만 남는 전시 poster나 제품 가치 선언형 hero로 축약하지 않는다."
|
||||
|
||||
layout-grammar:
|
||||
topology: modular-poster-stack
|
||||
desktop:
|
||||
grid: "12-column fixed alignment grid; outer margin 48–72px; 24px gutter"
|
||||
sequence:
|
||||
- "identification band: MODULE 01, scenario id, guided-scenario boundary"
|
||||
- "statement band: 두 입구가 하나의 Lab으로 합류한다는 한 문장"
|
||||
- "entry field: Entry 01A와 01B를 6-column씩 동등하게 배치"
|
||||
- "merge rule: 두 entry 아래를 가로지르는 명시적 ONE SHARED LAB divider"
|
||||
- "protocol field: Predict–Transfer 다섯 checkpoint를 전체 폭 procedure strip으로 배치"
|
||||
- "evidence field: 100에서 두 session read/compute/write를 거쳐 70이 되는 compact preview"
|
||||
- "scope and roadmap: 교육 범위 rule block과 Module 02+ 준비 중 표기"
|
||||
tablet:
|
||||
rule: "768px에서 entry는 2-up을 유지하되 protocol은 3+2 row로 감싸고 DOM 순서는 01–05를 유지한다."
|
||||
mobile:
|
||||
rule: "360–390px에서 identification → 01A → 01B → merge → protocol 01–05 → evidence → scope 순으로 1-column 재배치한다."
|
||||
guardrails:
|
||||
- "가로 timeline이나 드래그를 요구하지 않는다."
|
||||
- "숫자는 장식 배경이 아닌 section 시작점으로 축소한다."
|
||||
- "read/compute/write 비교는 같은 필드명을 반복하는 선형 목록으로 제공한다."
|
||||
alignment-rule: "번호, 제목, control의 왼쪽 시작선을 공유하고 설명 문단은 그 선을 침범하지 않는다."
|
||||
spacing-rule: "8px base; 한 절차 내부 8/16px, checkpoint 사이 24px, module 사이 48/72px."
|
||||
|
||||
interaction-grammar:
|
||||
entry-selection:
|
||||
control: "native button 두 개: ‘개념을 알고 있어요’와 ‘증상만 알고 있어요’"
|
||||
feedback: "선택 marker + ENTRY SELECTED 텍스트 + Protocol 01 합류 안내를 동시에 갱신한다."
|
||||
shared-core-rule: "어느 버튼을 선택해도 동일 scenario id와 동일 다섯 단계 control을 사용한다."
|
||||
checkpoint-loop:
|
||||
- {step: "01 Predict", action: "실행 전 최종값 또는 상태 변화를 선택", evidence: "예측값을 고정해 이후 비교 기준으로 보존"}
|
||||
- {step: "02 Observe", action: "read/compute/write를 순서대로 실행", evidence: "현재 session·operation·value를 텍스트로 공지"}
|
||||
- {step: "03 Compare", action: "예측과 실제 70을 나란히 확인", evidence: "일치 여부와 차이를 숫자·문장으로 병기"}
|
||||
- {step: "04 Explain", action: "동일 초기값 read와 overwrite 인과를 설명", evidence: "필수 인과 checkpoint를 명시"}
|
||||
- {step: "05 Transfer", action: "새 사례에서 같은 메커니즘 후보를 판별", evidence: "전이 판단과 근거를 함께 제출"}
|
||||
focus:
|
||||
rule: "Tab 순서는 시각 순서와 같고, focus-visible은 3px 이중 outline과 offset으로 배경색과 독립시킨다."
|
||||
keyboard: "Tab, Enter, Space만으로 entry 선택·단서 공개·예측·실행·설명 제출이 가능하다."
|
||||
state-announcement: "실험 단계 변화와 값 갱신은 aria-live로 짧게 알리되 focus를 자동 이동하지 않는다."
|
||||
motion: "checkpoint 전환은 160ms 이하의 opacity/position 변화만 허용하고 prefers-reduced-motion에서는 즉시 교체한다."
|
||||
prohibited:
|
||||
- "완료를 증명하지 않는 장식 stamp"
|
||||
- "hover 전용 설명"
|
||||
- "drag 전용 timeline"
|
||||
- "entry별 progress 또는 protocol 분기"
|
||||
|
||||
type-grammar:
|
||||
display:
|
||||
role: "module 번호, entry 번호, protocol 단계"
|
||||
voice: "condensed sans, uppercase 영문 label, tabular numeral"
|
||||
scale: "desktop 48–88px; mobile 36–52px; line-height 0.9–1.0"
|
||||
constraint: "설명 문장, 교육 범위, roadmap에는 대형 condensed display를 사용하지 않는다."
|
||||
instruction:
|
||||
role: "한국어 제목, 행동 지시, 설명, boundary copy"
|
||||
voice: "warm humanist sans"
|
||||
scale: "body 16–18px / 1.55–1.7; action label 18–24px / 1.25"
|
||||
constraint: "한 checkpoint의 핵심 지시는 한 문장, 보조 설명은 두 문장을 넘기지 않는다."
|
||||
command:
|
||||
role: "TX-LOST-UPDATE-01, session, read/compute/write, 100→150/70 값"
|
||||
voice: "monospace with tabular numerals"
|
||||
scale: "13–16px / 1.45"
|
||||
constraint: "코드·식별자·상태값에만 사용하며 terminal 미학의 전체 화면 mono는 금지한다."
|
||||
labeling:
|
||||
rule: "한국어 행동이 먼저 오고 필요한 경우 원어를 병기한다: ‘예측 Predict’."
|
||||
case: "영문 metadata만 uppercase; 한국어 본문과 control label에는 강제 대문자 효과를 쓰지 않는다."
|
||||
|
||||
primitive-grammar:
|
||||
protocol-panel:
|
||||
anatomy: "step number + imperative + one primary control + evidence line"
|
||||
rule: "각 panel은 하나의 행동만 소유하고 다음 panel과 2px divider로 연결한다."
|
||||
numbered-checkpoint:
|
||||
anatomy: "two-digit index + verb label + state marker"
|
||||
rule: "번호는 module과 protocol 단계에만 사용하며 설명 카드에는 붙이지 않는다."
|
||||
rule-block:
|
||||
anatomy: "RULE label + 범위 문장 + 허용/비허용 경계"
|
||||
rule: "guided scenario와 실제 장애 진단의 경계를 반드시 한 번 이상 명시한다."
|
||||
field-stamp:
|
||||
anatomy: "outlined lozenge + factual state text"
|
||||
rule: "GUIDED SCENARIO, ACTIVE MODULE처럼 사실인 범주만 표시하며 승인·완료를 가장하지 않는다."
|
||||
procedure-strip:
|
||||
anatomy: "01–05 ordered cells + persistent connector + current-step marker"
|
||||
rule: "색을 제거해도 번호, label, marker 형태로 현재 단계와 순서를 읽을 수 있어야 한다."
|
||||
transfer-ticket:
|
||||
anatomy: "new-case prompt + mechanism choice + rationale field"
|
||||
rule: "Protocol 05에서만 사용하고 결과가 진단 확정이 아니라 학습 전이임을 명시한다."
|
||||
value-token:
|
||||
anatomy: "semantic label + numeric value + operation text"
|
||||
rule: "100, 150, 70을 단독 badge로 쓰지 않고 session과 read/write 맥락을 병기한다."
|
||||
|
||||
color-grammar:
|
||||
canvas: {value: "#f2eedf", use: "따뜻한 종이색 바탕", boundary: "질감 효과나 낡은 문서 연출 금지"}
|
||||
ink: {value: "#18211d", use: "본문·선·기본 control", boundary: "최소 AA 대비 유지"}
|
||||
manual-yellow: {value: "#e7bd45", use: "활성 Module 01과 shared checkpoint", boundary: "경고색 또는 전체 배경으로 쓰지 않음"}
|
||||
instruction-green: {value: "#356c5d", use: "protocol header와 현재 절차 marker", boundary: "성공의 유일한 신호로 쓰지 않음"}
|
||||
evidence-orange: {value: "#d75b32", use: "증상 entry와 overwrite 결과 70", boundary: "장식 stamp와 일반 강조에 남용하지 않음"}
|
||||
|
||||
accessibility-grammar:
|
||||
- "텍스트·control은 WCAG AA 이상 대비를 유지한다."
|
||||
- "세션·충돌·정답·현재 단계는 색과 함께 텍스트·아이콘·형태로 구분한다."
|
||||
- "360/768/1280px에서 가로 스크롤 없이 Transfer까지 도달한다."
|
||||
- "DOM 읽기 순서는 identification에서 교육 범위까지 시각 순서와 일치한다."
|
||||
- "reduced-motion에서도 정보·순서·상태 표식이 완전히 동일하다."
|
||||
|
||||
anti-patterns:
|
||||
- marketing hero만 있는 poster
|
||||
- dashboard metric grid
|
||||
- serif editorial folio
|
||||
- neon signal trace 또는 terminal theater
|
||||
- 가짜 완료·승인 stamp
|
||||
- 실제 incident 대응 매뉴얼을 암시하는 위험 표식
|
||||
- 두 entry별 별도 protocol·progress·content
|
||||
- 색만으로 구분한 단계·session·결과
|
||||
- 활성 콘텐츠 하나를 큰 atlas나 catalogue로 과장하는 표현
|
||||
@@ -0,0 +1,43 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user