176 lines
11 KiB
YAML
176 lines
11 KiB
YAML
artifact-kind: design-direction-concept
|
||
artifact-version: 1
|
||
|
||
identity:
|
||
direction-id: ledger-studio
|
||
representative-screen-id: dual-entry-shared-lab
|
||
producer-run-id: hyeonworks-vnext-v1-direction-divergence-ledger-20260718T1135Z
|
||
context-package-sha256: 52ef4f1c5e433157bc23eb801d3fb122923d7f50d667af41019be3b4b1489c83
|
||
|
||
visual-thesis: >-
|
||
Lost Update를 홍보용 카드 모음이나 장애 콘솔이 아니라, 독자가 가설과 관찰값을 직접 대조하는
|
||
편집형 기술 저널의 한 페이지로 보인다. 서로 다른 두 entry는 대칭인 orientation 칼럼으로만
|
||
분리되고, 굵은 merge rule 아래에서 동일한 tx-lost-update-01 causal ledger로 합류한다.
|
||
깊이는 콘텐츠 수가 아니라 100을 함께 읽은 두 세션이 150과 70을 차례로 쓰며 기대값 120을
|
||
잃는 한 사례의 인과를 감사 가능하게 드러내는 데서 나온다.
|
||
|
||
reference-clusters:
|
||
- id: scientific-lab-notebook
|
||
role: "학습을 수동 독서가 아닌 검증 기록으로 보이게 하는 구조"
|
||
signals:
|
||
- "가설, 관찰, 결과가 규칙선과 여백 주석으로 이어진다."
|
||
- "관찰 사실과 해석을 서로 다른 라벨로 분리한다."
|
||
translation:
|
||
- "Predict → Observe → Compare → Explain → Transfer를 순서가 있는 기록 행으로 사용한다."
|
||
- "coral은 Observed 값과 증상 단서처럼 증거가 있는 지점에만 쓴다."
|
||
guardrail: "낡은 종이 질감, 손글씨 장식, 과학실 소품을 문자 그대로 모사하지 않는다."
|
||
|
||
- id: long-form-technical-journal
|
||
role: "활성 주제 하나의 깊이를 카탈로그 규모보다 먼저 전달하는 편집 위계"
|
||
signals:
|
||
- "큰 serif 논제, 짧은 dek, 넓은 여백이 읽기 시작점을 만든다."
|
||
- "masthead와 folio 표기가 한 호의 기술 논문처럼 현재 범위를 명시한다."
|
||
translation:
|
||
- "왼쪽 hero는 질문을, 오른쪽 folio는 검증할 값과 실행 순서를 맡는다."
|
||
- "Atlas는 Concurrency → Transaction Isolation → Lost Update 한 줄만 보여준다."
|
||
guardrail: "완성되지 않은 주제를 거대한 지도나 콘텐츠 카탈로그로 부풀리지 않는다."
|
||
|
||
- id: double-entry-ledger
|
||
role: "초기값, 기대값, 관찰값과 두 세션의 쓰기를 같은 기준선에서 감사"
|
||
signals:
|
||
- "숫자가 고정 폭 열과 수평 rule 위에 정렬된다."
|
||
- "Initial / Expected / Observed 명칭이 값의 의미를 색과 무관하게 설명한다."
|
||
translation:
|
||
- "100 / 120 / 70을 한 ledger folio에 놓고 70만 evidence-coral로 강조한다."
|
||
- "A reads 100, B reads 100, A writes 150, B writes 70을 번호 행으로 기록한다."
|
||
guardrail: "금융 대시보드, KPI 카드, 장식용 표처럼 보이게 만들지 않는다."
|
||
|
||
- id: scholarly-margin-annotation
|
||
role: "본문 흐름을 방해하지 않고 범위와 증거 상태를 명시하는 주석 체계"
|
||
signals:
|
||
- "작은 mono label과 folio 번호가 본문 serif와 분명히 구별된다."
|
||
- "guided scenario 한계가 결과 근처에 붙어 과잉 해석을 막는다."
|
||
translation:
|
||
- "tx-lost-update-01, Shared scenario, Guided scenario를 evidence annotation으로 둔다."
|
||
- "실제 로그나 운영 DB를 분석하지 않고 원인을 확정하지 않는다는 경계를 평문으로 쓴다."
|
||
guardrail: "사건 파일, 경고 테이프, 확정 진단 어휘를 사용하지 않는다."
|
||
|
||
- id: causal-process-plate
|
||
role: "두 세션의 시간 순서를 장식적 다이어그램 없이 읽히게 하는 인쇄 도식"
|
||
signals:
|
||
- "번호, 동사, 값, 짧은 rule로 사건의 선후 관계를 고정한다."
|
||
- "DOM 읽기 순서와 시각 순서가 같아 선형으로도 이해된다."
|
||
translation:
|
||
- "read / write를 네 개의 trace row로 표시하고 세션 이름을 텍스트로 유지한다."
|
||
- "모바일에서도 같은 행 순서를 바꾸지 않고 열만 압축한다."
|
||
guardrail: "node canvas, 드래그 타임라인, neon terminal 창으로 바꾸지 않는다."
|
||
|
||
layout-grammar:
|
||
desktop:
|
||
viewport: "1280px 기준, 최대 1440px editorial spread"
|
||
rules:
|
||
- "상단은 짧은 Atlas breadcrumb, 그 아래 hero를 약 1.05:0.95 비대칭 2열로 구성한다."
|
||
- "왼쪽은 thesis/dek/promise, 오른쪽은 tx-lost-update-01 ledger folio를 배치한다."
|
||
- "orientation 영역만 동일 폭 2열 entry로 나누고 이후 학습 구조는 단일 열로 합친다."
|
||
- "merge-rule은 두 entry 바로 아래에서 Same Lost Update Lab을 한 번만 선언한다."
|
||
- "공통 학습 루프는 다섯 열, guided-scenario 경계는 그 아래 한 개의 주석 띠로 둔다."
|
||
compact:
|
||
viewport: "360–780px"
|
||
rules:
|
||
- "hero, entry, loop, boundary를 DOM 순서 그대로 한 열로 적층한다."
|
||
- "420px 이하에서 masthead를 두 줄로 쌓고 ledger value를 세 행으로 바꿔 가로 넘침을 막는다."
|
||
- "merge label, trace row, footer는 줄바꿈을 허용하되 의미 순서는 유지한다."
|
||
spacing:
|
||
base: "8px 계열의 여백을 쓰되 hero와 section 사이에는 32–80px의 editorial pause를 둔다."
|
||
density: "증거 folio 내부는 조밀하게, orientation 설명 주변은 넓게 두어 읽기 속도를 분리한다."
|
||
|
||
interaction-grammar:
|
||
entry-selection:
|
||
- "개념을 알고 있어요와 증상만 알고 있어요는 native anchor이며 둘 다 #shared-lab으로 이동한다."
|
||
- "두 선택은 orientation 카피만 다르고 tx-lost-update-01, 진행 상태, 학습 콘텐츠를 분기하지 않는다."
|
||
- "hover와 focus-visible에서 동일한 mint 바탕을 주고 3px focus outline을 별도로 유지한다."
|
||
reading-flow:
|
||
- "skip link는 키보드 사용자를 entry heading으로 바로 보낸다."
|
||
- "이후 순서는 Predict → Observe → Compare → Explain → Transfer로 고정한다."
|
||
- "실험 실행 화면으로 확장할 때 상태 변화는 aria-live로 알리되 focus를 강제로 이동하지 않는다."
|
||
motion:
|
||
default: "합류선을 그리거나 evidence row를 강조한다면 짧은 1회 전환만 허용한다."
|
||
reduced: "prefers-reduced-motion에서는 smooth scroll과 모든 전환을 제거하고 최종 상태를 즉시 표시한다."
|
||
input:
|
||
- "필수 동작은 Tab, Enter, Space로 가능해야 하며 drag-only 조작을 두지 않는다."
|
||
- "색은 보조 신호이고 상태명, 숫자, 순번, 동사를 항상 함께 제공한다."
|
||
|
||
type-grammar:
|
||
display:
|
||
family: "Georgia 계열 humanist serif"
|
||
use: "논제, entry 질문, scenario 제목, 단계 설명"
|
||
behavior: "큰 크기와 촘촘한 자간으로 편집적 긴장을 만들되 장문 본문에는 쓰지 않는다."
|
||
body:
|
||
family: "Inter 또는 system neutral grotesk"
|
||
use: "dek, 안내, 경계 설명, 링크 동작"
|
||
behavior: "한국어 본문은 최소 16px에 가까운 크기와 1.5 line-height를 유지한다."
|
||
evidence:
|
||
family: "ui-monospace 또는 system monospace"
|
||
use: "scenario id, 값, 순번, atlas path, evidence label"
|
||
behavior: "영문 uppercase label은 짧게 쓰고 한국어 핵심 설명을 mono로 대체하지 않는다."
|
||
hierarchy-rule: "serif는 논제와 설명, mono는 id·값·증거 주석이라는 역할 경계를 넘지 않는다."
|
||
|
||
primitive-grammar:
|
||
dominant:
|
||
- name: entry-column
|
||
anatomy: "entry tag + serif question + orientation copy + text arrow"
|
||
rule: "두 개만 나란히 두며 선택 이후에는 반복하지 않는다."
|
||
- name: causal-ledger
|
||
anatomy: "Initial / Expected / Observed values + ordered read/write rows"
|
||
rule: "값과 순서를 같은 folio 안에서 비교해 덮어쓰기를 감사 가능하게 한다."
|
||
- name: evidence-margin
|
||
anatomy: "mono label + 범위 설명"
|
||
rule: "Guided scenario와 증거 상태를 본문 가까이에 둔다."
|
||
exclusive:
|
||
- name: merge-rule
|
||
rule: "두 수평선이 하나의 Same Lost Update Lab seal로 합류한다."
|
||
- name: ledger-folio
|
||
rule: "흰 종이 면, 검은 상단 rule, 한 방향의 offset shadow만 사용한다."
|
||
- name: annotated-value
|
||
rule: "label과 숫자를 함께 표시하며 관찰값만 coral로 제한한다."
|
||
prohibited:
|
||
- "node canvas 또는 거대한 Atlas map"
|
||
- "terminal window 또는 neon hacker styling"
|
||
- "glass card grid 또는 보라 SaaS gradient"
|
||
- "incident 확정 진단을 암시하는 경고 primitive"
|
||
|
||
color-and-rule-grammar:
|
||
paper: {value: "#f5f1e8", role: "집중 읽기용 페이지 바탕"}
|
||
ink: {value: "#17201f", role: "본문과 인과 경계"}
|
||
evidence-coral: {value: "#bb4d3b", role: "관찰 결과와 증상 단서에만 사용"}
|
||
orientation-violet: {value: "#4b4f96", role: "비진단 entry와 step index의 작은 보조 신호"}
|
||
focus: {value: "#075d58", role: "명시적 keyboard focus outline"}
|
||
ledger-rule: {value: "1px solid #17201f", role: "합류와 비교 경계, 카드 테두리 남용 금지"}
|
||
|
||
content-contract:
|
||
shared-scenario-id: tx-lost-update-01
|
||
entry-labels: ["개념을 알고 있어요", "증상만 알고 있어요"]
|
||
atlas-path: [Concurrency, Transaction Isolation, Lost Update]
|
||
values: {initial: 100, expected: 120, observed: 70, session-a-write: 150, session-b-write: 70}
|
||
learning-loop: [Predict, Observe, Compare, Explain, Transfer]
|
||
trust-boundary: >-
|
||
교육용 고정 guided scenario이며 실제 로그나 운영 데이터베이스를 분석하지 않고 장애 원인을
|
||
확정하지 않는다. 증상 entry는 검증할 후보 메커니즘만 좁힌다.
|
||
roadmap-honesty: "현재 활성 depth는 Transaction Isolation / Lost Update 하나이며 다음 주제는 비활성으로 표시한다."
|
||
|
||
accessibility-contract:
|
||
- "360/768/1280px에서 가로 스크롤 없이 읽기 순서와 합류 의미를 보존한다."
|
||
- "native anchor, skip link, 명시적 focus-visible을 사용한다."
|
||
- "세션, 단계, 값, 경계는 텍스트와 숫자로 명명해 색에만 의존하지 않는다."
|
||
- "reduced-motion에서 smooth scroll과 전환을 제거한다."
|
||
- "확장되는 실험 상태는 aria-live로 알리고 예측 가능한 focus 순서를 유지한다."
|
||
|
||
coded-slice-evidence:
|
||
file: index.html
|
||
verified-structure:
|
||
- "두 한국어 entry가 동일 #shared-lab anchor를 참조한다."
|
||
- "tx-lost-update-01 folio에 100 / 120 / 70과 네 개의 read/write 행이 있다."
|
||
- "공통 Predict / Observe / Compare / Explain / Transfer 루프가 있다."
|
||
- "Guided scenario 한계 문구가 있다."
|
||
- "max-width 780px와 420px 재배치, focus-visible, prefers-reduced-motion 대안이 있다."
|