init: company-haness 설계

2026-07-23 17:49:00 +09:00
parent 57d1bab894
commit f668d6a158
962 changed files with 98989 additions and 1 deletions
@@ -0,0 +1,191 @@
+artifact-kind: visual-direction-concept
+artifact-version: 1
+identity:
+  concept-id: hyeonworks-vnext-v1-signal-trace
+  direction-id: signal-trace
+  representative-screen-id: dual-entry-shared-lab
+  producer-run-id: hyeonworks-vnext-v1-direction-divergence-signal-20260718T1135Z
+
+basis:
+  context-package: hyeonworks/state/context-packages/hyeonworks-vnext-v1-direction/DES-VISUAL-20260718T113223Z.pkg.yaml
+  context-package-sha256: f2a89ef290b57ed34610b08e30b2a23d07e7244fec0991de81d61ca157d8ccf6
+  assigned-question: >-
+    두 세션의 신호와 값 흐름을 계측 rail처럼 추적하면 Lost Update의 시간적 인과를
+    더 빨리 이해하는가?
+
+visual-thesis: >-
+  서로 다른 두 입력 단서를 밝은 계측 band로 분리해 시작하고, 명시적인 merge bus에서
+  하나의 Lab으로 수렴시킨 뒤, 같은 초기값을 읽고 150과 70을 순서대로 쓰는 과정을 단일
+  transaction trace로 읽게 한다. 화면의 개성은 terminal 표면이나 장식적 dashboard가 아니라
+  선로의 합류, 시간축 정렬, 숫자 probe, 충돌 hatch가 만드는 판독성에서 나온다. 두 진입의
+  차이는 orientation 메타데이터에만 남고, 합류 뒤에는 tx-lost-update-01과 공통 학습 루프를
+  오직 한 번만 렌더링한다.
+
+reference-clusters:
+  - id: railway-junction-schematic
+    source-family: "railway signal diagram / interlocking schematic"
+    useful-signal: "독립된 입력선이 이름 붙은 junction에서 하나의 선로로 합류하는 구조"
+    translation:
+      - "CONCEPT와 SYMPTOM을 좌우 entry band로 분리한다."
+      - "band 아래 두 선은 SAME LAB 스탬프에서 합쳐지고 이후에는 한 선만 유지한다."
+      - "합류 전에는 두 band, 합류 후에는 하나의 trace table이라는 수량 규칙을 지킨다."
+    boundary: "실제 철도 관제 UI, 신호등 색 체계, 사실적인 선로 일러스트를 모사하지 않는다."
+
+  - id: logic-analyzer-timing-sheet
+    source-family: "logic analyzer trace / timing diagram"
+    useful-signal: "공통 시간축에 채널별 상태와 read/compute/write 선후관계를 정렬하는 방식"
+    translation:
+      - "01~04 행을 고정된 실행 순서로 두고 Session A와 B를 같은 행에서 비교한다."
+      - "현재 행동과 대기 상태를 같은 셀 문법으로 기록하며 장황한 서술 대신 동사+값을 쓴다."
+      - "마지막 overwrite 행 전체에 hatch를 적용해 충돌 구간의 범위를 드러낸다."
+    boundary: "파형, 네온 glow, 검은 console, 실행 중인 모니터링 제품처럼 보이는 chrome은 쓰지 않는다."
+
+  - id: calibration-instrument-panel
+    source-family: "industrial calibration panel / labeled value probe"
+    useful-signal: "숫자와 단위를 장식 없이 비교하고 각 값의 역할을 짧은 태그로 고정하는 방식"
+    translation:
+      - "Initial 100, Expected 120, Observed 70을 동일 크기의 value probe로 나란히 둔다."
+      - "Observed의 위험 신호는 red뿐 아니라 ALERT 문맥과 별도 probe 상태로 중복 부호화한다."
+      - "숫자는 tabular 형태의 monospace로 정렬하고 본문보다 강한 크기 대비를 준다."
+    boundary: "probe를 성과 지표 카드나 실시간 KPI로 늘리지 않고 이 시나리오의 세 값으로 제한한다."
+
+  - id: engineering-hatch-legend
+    source-family: "engineering drawing hatch / printed channel legend"
+    useful-signal: "색을 볼 수 없어도 패턴, 기호, 라벨로 채널과 예외 영역을 구분하는 방식"
+    translation:
+      - "Session A는 circle, Session B는 diamond와 반복 라벨로 구분한다."
+      - "Session B entry edge와 overwrite 구간에는 서로 다른 밀도의 diagonal hatch를 쓴다."
+      - "legend는 trace 바로 위에 놓아 기호를 기억해야 하는 거리를 줄인다."
+    boundary: "경찰 테이프나 incident severity 장식으로 읽힐 정도의 과한 경고 패턴은 피한다."
+
+layout-grammar:
+  topology: "dual input bands → centered merge bus → single shared Lab → common learning loop → boundary"
+  desktop:
+    viewport-reference: "1280px 이상"
+    grid: "intro는 1.15fr/0.85fr, entry bands는 1fr/1fr, Lab은 0.65fr/1.35fr"
+    reading-order:
+      - "Atlas breadcrumb와 visual thesis"
+      - "GUIDED SCENARIO 경계"
+      - "두 entry band"
+      - "SAME LAB merge bus"
+      - "Lab metadata와 value probes"
+      - "transaction trace"
+      - "Predict → Observe → Compare → Explain → Transfer"
+      - "learning boundary"
+    density-rule: "trace는 중간~높은 밀도를 허용하되 entry 영역은 선택지 두 개 외의 카드를 만들지 않는다."
+  compact:
+    breakpoint-contract: "800px 이하에서 intro, bands, Lab을 한 열로 재배치하고 420px 이하에서 probe를 한 열로 쌓는다."
+    trace-reflow: "각 시간 행은 step 번호 다음 A 셀, B 셀 순으로 선형화하며 DOM 읽기 순서는 바꾸지 않는다."
+    merge-rule: "공간이 부족하면 장식용 두 번째 branch를 줄여도 SAME LAB 스탬프와 단일 도착점은 유지한다."
+    minimum-width: "360px에서 가로 스크롤 없이 boundary와 Transfer까지 도달한다."
+  spacing-rule: "rail 사이 수직 간격보다 섹션 전환 간격을 크게 해 입력·합류·실험의 위계를 보존한다."
+
+interaction-grammar:
+  entry-selection:
+    control: "두 entry band 전체를 native link 또는 button으로 제공한다."
+    behavior: "어느 band를 선택해도 동일한 #shared Lab으로 이동하고 entryMode만 orientation 메타데이터로 기록한다."
+    state-boundary: "합류 후 scenarioId, reducer state, 단계 목록, 정답·설명 콘텐츠를 entry별로 복제하거나 분기하지 않는다."
+    keyboard: "Tab으로 각 band에 도달하고 Enter로 선택하며 focus-visible outline을 항상 표시한다."
+  trace-progression:
+    controls: "production 단계 제어는 native previous/next button을 사용하며 drag를 필수 입력으로 만들지 않는다."
+    announcement: "단계가 바뀌면 aria-live에 step 번호, session, action, value를 한 번 알리고 사용자의 focus는 이동시키지 않는다."
+    active-state: "현재 segment는 굵기+기호+짧은 pulse로 강조하며 완료·대기·충돌을 색만으로 구분하지 않는다."
+  learning-loop: "Predict를 완료한 뒤 Observe를 열고 Compare, Explain, Transfer 순서를 하나의 progress 구조로 유지한다."
+  prototype-scope: >-
+    현재 coded slice는 두 native anchor가 동일한 #shared DOM target을 참조해 shared-core 구조를
+    증명한다. runtime reducer 실행이나 실제 DB 연결을 시뮬레이션한다고 주장하지 않는다.
+
+type-grammar:
+  display:
+    family: "precise grotesk sans; coded slice fallback은 Arial, Helvetica, sans-serif"
+    role: "한 화면의 질문과 Lab 목적만 크게 표시"
+    treatment: "큰 x-height, 단단한 800 weight, 음수 letter-spacing; 장식적 italic 금지"
+  body:
+    family: "same sans family"
+    role: "학습 의도, 경계, 짧은 인과 설명"
+    measure: "한 문단 최대 약 58ch"
+  signal-label:
+    family: "ui-monospace, monospace"
+    role: "scenario id, channel code, execution step, compact uppercase label"
+    treatment: "0.68~0.82rem, 700~800 weight, 제한된 letter-spacing"
+  numeric:
+    family: "ui-monospace, monospace"
+    treatment: "font-variant-numeric: tabular-nums; Initial/Expected/Observed의 baseline을 맞춘다."
+  language-rule: "한국어를 기본 설명 언어로 두고 SQL·transaction 동작과 compact signal label만 원어를 병기한다."
+
+primitive-grammar:
+  entry-band:
+    anatomy: "channel code + 한국어 진입 라벨 + orientation 단서 + 방향 표시"
+    rule: "합류 전에 정확히 두 개만 존재하고 각 band의 edge treatment로 채널을 중복 부호화한다."
+  merge-bus:
+    anatomy: "두 branch line + centered SAME LAB stamp + scenario id"
+    rule: "두 진입이 별도 결과로 이어진다는 인상을 주는 분기선을 Lab 아래로 연장하지 않는다."
+  trace-rail:
+    anatomy: "step number + Session A cell + Session B cell"
+    rule: "행은 실제 실행 순서를 보존하고 read/compute/write 동사와 값을 함께 기록한다."
+  signal-stamp:
+    anatomy: "짧은 uppercase 상태 + 필요 시 scenario id"
+    rule: "merge와 경계처럼 의미가 고정된 지점에만 쓰며 badge cloud로 늘리지 않는다."
+  conflict-hatch:
+    anatomy: "diagonal pattern + overwrite text + Session B diamond"
+    rule: "충돌이 일어난 04행에만 적용하고 red 단독 의미 전달을 금지한다."
+  value-probe:
+    anatomy: "role label + tabular numeric value"
+    rule: "Initial/Expected/Observed 세 값의 동일 비교에만 사용한다."
+
+semantic-encoding:
+  tokens:
+    background: { value: "#eef2f2", role: "밝은 계측 바탕" }
+    panel: { value: "#f9fbfa", role: "entry와 Lab 표면" }
+    ink: { value: "#102b31", role: "본문과 구조선" }
+    trace-blue: { value: "#176c8a", role: "Session A와 concept input", non-color-cue: "circle + CONCEPT/A label" }
+    trace-red: { value: "#a24a3f", role: "Session B와 overwrite", non-color-cue: "diamond + hatch + SYMPTOM/B label" }
+    merge-green: { value: "#165f54", role: "공통 Lab junction", restriction: "일반 CTA에는 사용하지 않음" }
+    focus: { value: "#7b2e95", role: "키보드 focus outline 전용" }
+  contrast-rule: "본문, signal label, control 상태는 panel/background 위 WCAG AA 대비를 유지한다."
+  status-rule: "모든 의미 상태는 text, symbol, shape, pattern 중 최소 하나를 color와 함께 제공한다."
+
+motion-grammar:
+  allowed: "사용자가 실행한 현재 rail segment의 짧고 국소적인 pulse"
+  timing: "한 번의 180~240ms emphasis; 자동 반복과 배경 이동 금지"
+  reduced-motion: "prefers-reduced-motion에서는 pulse를 제거하고 3px line, pattern, CURRENT text로 대체"
+  prohibited: "glow, scanline, terminal cursor, 자동 재생 trace, parallax"
+
+content-contract:
+  required-copy:
+    entries: ["개념을 알고 있어요", "증상만 알고 있어요"]
+    scenario-id: tx-lost-update-01
+    guided-label: GUIDED SCENARIO
+    values: { initial: 100, expected: 120, observed: 70, a-write: 150, b-write: 70 }
+    learning-loop: [Predict, Observe, Compare, Explain, Transfer]
+  atlas-path: [Concurrency, Transaction Isolation, Lost Update]
+  trust-boundary: >-
+    운영 로그를 분석하거나 실제 장애 원인을 확정하지 않으며, 고정된 조건에서 검증할 후보
+    메커니즘을 학습한다는 설명을 symptom 진입과 Lab 주변에 유지한다.
+
+coded-slice-map:
+  entry-bands: "index.html #entry .bands; 두 href가 모두 #shared"
+  merge-junction: "index.html .bus .merge; same lab · tx-lost-update-01"
+  shared-lab: "index.html section#shared.lab; 문서에 단 한 번 존재"
+  transaction-trace: "index.html .trace [role=table]; 100 read → 150/70 write의 4단계"
+  common-loop: "index.html .loop; shared Lab 뒤에 단 한 번 존재"
+  guided-boundary: "index.html .readout과 .boundary"
+
+accessibility-contract:
+  - "skip link는 두 entry band가 시작되는 #entry로 이동한다."
+  - "entry control과 향후 step control은 native semantics를 유지한다."
+  - "focus-visible은 배경과 분명히 구별되는 3px outline과 offset을 사용한다."
+  - "trace는 table/row/cell 의미를 제공하고 모바일에서도 step→A→B 읽기 순서를 유지한다."
+  - "360/768/1280px에서 가로 스크롤 없이 공통 학습 루프를 끝까지 읽고 조작할 수 있어야 한다."
+  - "색 외에 circle/diamond, label, hatch, text로 session과 충돌을 구분한다."
+  - "prefers-reduced-motion에서는 모든 비필수 transition과 animation을 제거한다."
+
+do-not-use:
+  - neon terminal 또는 검은 hacker console
+  - glow, scanline, 실제 monitoring chrome
+  - dashboard KPI grid
+  - 색만으로 구분한 session과 충돌
+  - drag 전용 timeline
+  - 실제 장애 진단 또는 원격 DB 분석을 암시하는 카피
+  - 과장된 atlas map이나 준비 중 콘텐츠의 가짜 catalog
+  - 합류 후 entry별 Lab, reducer, progress, 설명 콘텐츠 복제