시각화 표준v4.3
USG(Universal Semantic Graph)를 직관적으로 표현하는 표준화된 시각화 규약과 원자 모티프 카탈로그
리나 코드 NodeGraph v3.0 기반 텍스트/HTML 뷰
생성 절차
Distiller/HTML 렌더러 기반 산출 요약
텍스트 USG
CHEF_FORCE_EXPLICIT=1 CHEF_IN=javascript CHEF_STAGE=distill \
+USG_SAMPLES=12 USG_FACETS=api,entities,flows,callgraph,state,dataflow,metrics \
+PIPE_WRITE_USG=1 npm run -s verify:pipeline:ts
HTML
npx tsx scripts/usg-html.ts <..._inter.lena>
# → ..._usg.graph.html, ...night.html, ...light.html, ...solarized.html, ...mono.html
상호작용 및 쿼리
- • 클릭: 하위 레벨 접기/펼치기
- • 키보드: 좌/우 방향키로 collapse 토글
- • 테마: ?theme=night|solarized|mono|light
- • 포커스: ?focus=α
- • 트레이스: ?trace=β,δ,ζ
핵심 원칙
CSKernel™ 시각화 표준의 기본 설계 원칙과 사용 목적
일관성
그리스 문자 ID와 구조 기호를 통한 일관된 표기 규약으로 사상과 역사상을 직관적으로 추적
범용성
에디터 패널, 리포트, 터미널 모드, 임베디드 위젯 등 다양한 환경에서 동일한 표준 적용
확장성
테마 가능한 색상 토큰과 모듈화된 구조로 다양한 사용자 환경과 접근성 요구사항 지원
NodeGraph 텍스트/HTML
LENA code의 NodeGraph v3.0 사양을 요약합니다.
HTML 구조
<div class="nodegraph THEME">
<div class="nodegraph-line" data-id="α" data-kind="branch" data-level="0">⊸ cond ...</div>
<div class="nodegraph-line" data-id="β" data-kind="action" data-level="1">⊲ print "ok"</div>
</div>
- • 컨테이너: .nodegraph THEME
- • 라인: .nodegraph-line + data-id/kind/level
테마
- • night · light · solarized · mono
- • 공통 폰트/라인높이: 모노스페이스, 12px, 1.4
- • kind 별 색상 팔레트 정의(렌더러 내 CSS)
노드 ID 및 라벨 규칙
USG 노드의 고유 식별과 표현을 위한 체계적 규약
ID 체계
- 기본 ID: 그리스 소문자 (α, β, γ, ..., ω)
- 확장 ID: 아래첨자 사용 (α₁, β₁, γ₁, ...)
- 중첩 ID: 파생 표기 (α.β.γ)
- 안정성: 해시 기반 안정 ID 권장
라벨 구조
구조:
glyph · canonical label · ports: in|out
예시:
⊸ · branch · ports: cond|t|f
λ · apply · ports: func|args
≔ · let · ports: var|value
심볼 → Kind 매핑
NodeGraph v3.0의 대표 매핑 요약
λ → fn
⊕ → seq
⊸ → branch
⟦⟧ → read
⊲ → action
⟳ → loop
⌁ → io
◔ → async
≡ → copy
↵ → ret
≔ → declare
≝ → assign
⊙₊ → arith_add
⊙× → arith_mul
⋈> → cmp
⇢ → send
⇠ → recv
⛁ → resource
※ → generator
≋ → pattern
【 → meta
… → text
접근성·국제화
- • ASCII 폴백: 모든 글리프에 ASCII 라벨 동반
- • 스크린리더: aria-label에 node/role/ports 기술
- • 키보드: 방향키 이동, Enter 확장/축소, ? 도움말
- • 색약 친화 팔레트 권장(명도 대비 4.5:1)
엣지 역할 및 스타일
USG 노드 간 연결을 표현하는 엣지의 의미와 시각적 표현 방식
| 역할 | 의미 | 스타일 | 비고 |
|---|---|---|---|
| control | 제어 전이 | 실선 2px | 분기선 색 강조 |
| data | 데이터 종속 | 실선 1px | 포트 이름 표시 |
| dep | 선언/정의 의존 | 점선 1px | 타입·바인딩 참조 |
| effect | I/O·상태·시간 | 물결선 1px | 리전 경계 통과 강조 |
| exception | 예외 전파 | 점선 2px(빨강) | try/catch/finally 연결 |
| lifetime | 수명·소유권 | 점선 1px(보라) | 핀/언핀, 빌림 경로 |
심볼 → Kind 매핑
대표 매핑 발췌(전체 목록은 내부 렌더러 참조)
λ → fn
⊕ → seq
⊸ → branch
⟦⟧ → read
⊲ → action
⟳ → loop
⌁ → io
◔ → async
≡ → copy
↵ → ret
⊕ → seq
⊸ → branch
⟦⟧ → read
⊲ → action
⟳ → loop
⌁ → io
◔ → async
≡ → copy
↵ → ret
≔ → declare
≝ → assign
⊙₊/⊙× → arith_add/arith_mul
⋈> → cmp
⇢/⇠ → send/recv
⛁ → resource
※ → generator
≋ → pattern
【 → meta
≝ → assign
⊙₊/⊙× → arith_add/arith_mul
⋈> → cmp
⇢/⇠ → send/recv
⛁ → resource
※ → generator
≋ → pattern
【 → meta
시각 인코딩 토큰
테마 가능한 색상과 형상 토큰을 통한 일관된 시각적 표현
색상 토큰
--c-control
--c-data
--c-func
--c-type
--c-exc
--c-conc
--c-mem
--c-io
--c-overlay-A
--c-overlay-B
--c-overlay-C
형상 토큰
- • 분기: 다이아몬드
- • 루프: 헥사곤
- • 함수: 정원형 사각
- • 리전: 둥근 박스
- • I/O: 실린더
- • 타입: 팔각형
원자 모티프 카탈로그
시각적 원자 모티프의 대표군 미리보기(버전드, 고정 아님)
제어 및 흐름
⊕SEQ - 순차 실행
⊸BRANCH - 조건 분기
⟳LOOP - 루프
∀ITER - 순회
↵RET - 반환
⇄YIELD - 양보
⏸AWAIT - 대기
⊡WITH - 자원 경계
데이터 및 상태 (12개)
≔LET - 선언
≝SET - 할당
→GET - 접근
⊞NEW - 구성
⟿CAST - 변환
⊕cAGG - 집계
≈COPY - 복사
↭MOVE - 이동
함수 및 추상화 (11개)
λDEF - 정의
⊗APPLY - 적용
∘COMPOSE - 합성
℘RECUR - 재귀
※GEN - 제너레이터
⩚CLOSE - 클로저
대표 모티프 목록(발쳐).
레이아웃 모드
다양한 사용 목적과 환경에 최적화된 시각화 레이아웃
계층 DAG (Sugiyama)
위→아래 계층 구조로 배치하여 제어 흐름을 명확하게 표현. 교차 최소화 알고리즘 적용.
컴팩트 트리
좌→우 트리 구조로 텍스트 기반 출력에 최적화. ASCII 아트 스타일 지원.
방사형
중심 함수에서 원형으로 전개하는 구조. 개요 및 요약 보기에 적합.
컴팩트 라인 뷰 예시
TEXT
1α: λmain() → ⊤
2├─ β: x ≔ ℤ
3├─ γ: x ≝ 42
4├─ δ: ⊸ branch(x>0, t, f)
5│ ├─ ε: ⊲ "positive"
6│ └─ ζ: ⊲ "negative"
7└─ η: ↵ ⊤터미널 환경과 로그 출력에 최적화된 텍스트 표현
데이터 스켈레톤(요지)
필드의 의미를 제시합니다.
JSON
1{
2 "version": "usg-viz-v1",
3 "nodes": [
4 {
5 "id": "α",
6 "kind": "control.branch",
7 "glyph": "⊸",
8 "label": "branch",
9 "ports": { "in": ["cond"], "out": ["t", "f"] },
10 "meta": {
11 "origin": {"id": "src:…", "span": [12, 28]},
12 "typeHints": {"cond": "bool"},
13 "effectClass": null,
14 "regionId": null,
15 "notes": []
16 }
17 }
18 ],
19 "edges": [
20 {"from": "α", "out": "t", "to": "ε", "role": "control"},
21 {"from": "α", "out": "f", "to": "ζ", "role": "control"}
22 ],
23 "regions": [
24 {"id": "R1", "kind": "region.with", "label": "with(resource)", "nodes": ["..."]}
25 ],
26 "overlays": [
27 {"target": "β", "class": "B", "style": "translucent"},
28 {"target": "ζ", "class": "A", "style": "outline"}
29 ]
30}정책: 본 데이터 스켈레톤은 요지이며, 상세 제약·엔진·레이아웃 규칙은 내부 문서에서 관리됩니다.