Components

Node Chain

IT 도구 설계의 세로 노드 체인입니다. 입력→단계→Resolve로 끝나며, 노드 클릭 시 NDV(3-panel)에서 편집합니다.

⇥

입력

order_no · 고객 발화에서 추출

INPUT

⇄

주문 조회

GET /orders/{{order_no}}

HTTP

✓

Resolve

AI에게 넘길 내용

RESOLVE

코드 보기

<div class="snode sel">
  <button class="node-del">✕</button>
  <div class="sn-head">
    <div class="sn-ic">⇄</div>
    <div class="sn-meta"><div class="sn-label">주문 조회</div>
      <div class="sn-sub">GET /orders/{{order_no}}</div></div>
    <span class="sn-type">HTTP</span><button class="sn-run">▶</button>
  </div>
</div>
<div class="sconn"><button class="conn-add">+</button></div>

Variants

이름	설명	미리보기
입력 노드	점선 테두리 — 삭제 불가, 체인의 시작	⇥ 입력
일반 단계	아이콘+라벨+mono 서브+타입 필+▶단독실행	⇄ 주문 조회 HTTP
선택(sel)	파랑 테두리 + 3px 링 → NDV 열림	⇄ 주문 조회
Resolve	검정 반전 — 항상 마지막, "AI에게 넘길 내용"	✓ Resolve
커넥터 ＋	hover 시 중간 삽입 버튼

Guidelines

✓ Do

노드 클릭 → NDV 3-panel(INPUT / PARAMETERS / OUTPUT)에서 편집
앞 단계 출력은 {{변수}}로 뒤 단계에 꽂는다 (클릭/드래그 삽입)
노드 min-height 고정 — 선택/비선택 동일 높이
삭제는 hover ✕ (입력 노드 제외)

✕ Don't

캔버스에 변수칩을 노출하지 않는다 (캔버스는 순서만)
체인 안 분기 노드의 갈래는 mini 노드로만
Resolve 없이 체인을 끝내지 않는다

Specification

속성	토큰/값	비고
`노드`	`radius 11px / min-height 68px / 아이콘 36px`
`선택 링`	`0 0 0 3px var(--primary-muted)`
`Resolve`	`--foreground 반전`
`커넥터`	`30px / 1.5px + hover ＋`

비교

디자인 SoT = 화면하네스 tool_designer_v6.html — 이 페이지는 요약이며, 실물과 다르면 실물이 정답. Flow Node(가로)는 기획자 뷰의 대화 분기용.