호버 반응과 최근 변경
호버·초점으로 관계를 확인하고 변경 적용 내역을 한 패널에서 추적합니다.
flow-connector-interaction어떤 연결을 선택할까요?
| 사용 상황 | 실행 예제 | 판단 기준 |
|---|---|---|
| 단순한 단방향 관계 | 직선 연결 | 교차가 많은 구조는 우회 경로를 비교하세요. |
| 카드·보안 구역을 피하는 경로 | 장애물 회피 직교 라우팅 | 막힌 경로를 관통하는 직선으로 대체하지 않습니다. |
| 병렬 실행 후 동기화 | 병렬 실행과 동기화 | 조건 분기와 모든 작업 완료 조건을 구분합니다. |
| 가드 조건과 상태 전이 | 가드 상태 전이 | 현재 상태와 전이 조건을 함께 설명합니다. |
| 일시 강조·고정 선택·변경 기록 | 호버 반응과 최근 변경 | 호버를 저장된 변경으로 기록하지 않습니다. |
실행 예제 28
재시도와 타임아웃
정상·재시도·타임아웃 경로를 명시적인 라벨로 구별합니다.
flow-connector-retry
가드 상태 전이
대기·실행·완료 상태와 전이 조건을 함께 보여줍니다.
flow-connector-state
병렬 실행과 동기화
분기와 합류 접점을 구분해 병렬 작업의 동기화를 표시합니다.
flow-connector-parallel
조건 분기와 합류
승인·반려 조건을 구분하고 공통 종료점으로 합류합니다.
flow-connector-decision
방향 테이퍼 연결
화살촉으로 좁아지는 면으로 단방향을 강조합니다.
flow-connector-taper
오프셋 관계 라벨
병렬 관계의 라벨을 각 경로와 함께 이동합니다.
flow-connector-labels
중첩 피드백 레인
본류 밖의 독립 레인으로 중첩 회귀를 구분합니다.
flow-connector-feedback
다중 노드 접합
공유 접합 노드를 명시해 여러 입력과 출력을 연결합니다.
flow-connector-hyperedge
포트 분배 라우팅
서로 다른 출발 포트를 고정된 목적 포트에 분배합니다.
flow-connector-ports
라운드 우회 레인
평행 우회 경로의 모서리를 곡선으로 연결합니다.
flow-connector-rounded
양방향 연결
요청과 응답을 개별 방향과 경로로 구분합니다.
flow-connector-bidirectional
점선 연결
예정·비동기 관계를 점선과 텍스트로 구별합니다.
flow-connector-dashed
계단 연결
단계가 다른 노드를 계단형 경로로 이어줍니다.
flow-connector-step
베지어 곡선
양 끝 접선을 유지하는 곡선으로 관계를 표현합니다.
flow-connector-curve
직각 연결
수평·수직 구간으로 두 포트를 연결합니다.
flow-connector-elbow
직선 연결
두 노드를 최단 직선과 단방향 화살표로 연결합니다.
flow-connector-straight
방향성 원형 교환 리본
방향별 교환 행렬에서 노드 호와 리본 구간을 배분하고 도착 쪽 화살촉으로 방향을 표시합니다. 관계별 수량을 제공합니다.
flow-connector-radial
수량 보존 분배 리본
분당 120건의 샘플 입력을 세 출력으로 정수 배분하고, 각 리본의 양 끝 폭을 같은 비율로 계산합니다.
flow-connector-ribbons
교차 검출·홉 브리지
움직이는 두 경로의 실제 교차점을 계산하고 한쪽 경로에만 반원 홉을 삽입합니다. 교차와 접속을 구분합니다.
flow-connector-bridges
브로드캐스트 버스 백본
발행자 하나와 선택한 구독자들을 실제 공유 백본과 분기 접점으로 연결합니다. 구독자가 없는 상태를 구분합니다.
flow-connector-bus
호환 그룹·강도 조절 번들링
이벤트와 명령 두 호환 그룹의 제어점을 강도에 따라 보간합니다. 개별 관계 선택 시 전체 경로를 다시 추적합니다.
flow-connector-bundle
그룹 경계·게이트 통과
두 구역의 경계에서 수직으로 통과하는 정렬된 게이트와 독립된 내부 접근 레인을 제공합니다.
flow-connector-containers
자기 참조·회귀 루프
서로 다른 두 자기 참조 루프와 외부 회귀 레인을 계산해 폴링·재시도·보상 경로를 구별합니다.
flow-connector-loops
다중 관계·왕복 연결
같은 두 서비스 사이 여러 요청·응답을 대칭 곡률과 분리된 라벨로 구별합니다. 방향과 관계 ID를 개별 확인합니다.
flow-connector-multiedge
메트로 평행 연결선
공유 복도의 네 관계를 일정 간격과 고정 순서로 분리하고, 진입·이탈 구간을 45도 사선으로 연결합니다.
flow-connector-metro
장애물 회피 직교 라우팅
장애물 여유 공간을 반영한 직교 가시성 그래프와 방향 상태 최단 경로로 우회합니다. 막힌 끝점은 연결 실패로 표시합니다.
flow-connector-obstacle
서비스 흐름 다이어그램
노드 선택과 연결 강조, 장애 시뮬레이션, 확대·축소를 지원하는 KLIC SVG 다이어그램입니다.
diagram-service-flow공통 디자인 기준 보기
공통 디자인 기준
기준 리비전: 6f9c8f5e4d7c767f79a7db999670fb4d0936e07acb1b472fe162a7a9ade60c97
기준 원문: https://design.klic.co.kr/api/v1/design-system.json
API·CLI·MCP·WebMCP의 designSystem과 동봉된 KLIC-DESIGN-SYSTEM.json에서 이 기준과 리비전을 확인합니다. 항목별 계약은 item.design.system으로 연결합니다.
| 디멘션 | 토큰의 책임 | 구조·행동의 책임 |
|---|---|---|
| 크기와 비율 | 컨트롤 크기·아이콘·콘텐츠 폭 | min-height·패딩·줄바꿈·실제 hit area는 컴포넌트 recipe와 DOM에서 보장 |
| 타이포그래피 | 등록 family·역할별 크기·굵기 | 행간·자간·줄바꿈·반응형 조건은 지원 recipe에서 정의; 등록되지 않은 타입을 가정하지 않음 |
| 색과 대비 | 행동·선택·텍스트·경계·상태의 역할 색 | 레이블·아이콘·상태 속성으로 의미 전달; 합성 표면의 실제 대비는 토큰 밖에서 측정 |
| 배치와 정렬 | 콘텐츠 최대 폭·패널 폭 등 등록된 공간 역할 | DOM 읽기 순서·배치 전환·스크롤 소유권·Portal 구조 |
| 간격과 그룹화 | 내부 gap·padding·그룹 사이 간격과 승인 밀도 매핑 | label·fieldset·legend·describedby 등의 관계; 창 폭만으로 밀도를 변경하지 않음 |
| 표면과 깊이 | 표면색·반경·경계 및 지원 color/dimension 소재 leaf | blur·shadow 합성 recipe·stacking·보조 패널과 모달 구분·불투명 fallback |
| 상호작용과 피드백 | focus·선택·진행·성공·경고·오류의 시각 역할 | 키보드·focus 이동·비동기 전이·실행 차단·입력 보존·복구 경로 |
Primitive만 literal 소유. Brand→Primitive, Semantic→Brand, Component→Semantic 인접 참조 유지.
토큰 정의, DOM/CSS recipe의 구조 조건, 컴파일된 최종 literal 출력을 구분한다.
모션 레시피는 컴포넌트·블록 설치 항목과 별도 읽기 카탈로그로 유지하되, 브라우저 검색·미리보기·상세 UI는 KLIC Interface Library 홈페이지의 기존 #motion 메뉴에서 제공한다. 읽기 API·CLI·MCP·WebMCP도 같은 정본 카탈로그를 사용한다. 적용 범위는 사용자 제공 참조 소스의 884개 패턴·67개 분류이며, 기존 KLIC 카테고리/항목 탐색 동작에 그룹으로 싣는다. 기존 단순화 280개 카탈로그, 그 전용 경로와 별칭은 현 카탈로그에서 제외하고 호환 항목으로 유지하지 않는다. 각 채택 항목에는 원본 source id·pattern·engine을 연결하고, Copyright © 2026 acc0mplish. All rights reserved. 및 원본 라이선스 고지를 보존하며 KLIC 자체 제작으로 표시하지 않는다. 원본 안무·시간·경로·레이어·SVG/inline/WAAPI alpha는 보존한다. 외관은 KLIC 4계층 토큰 경로의 색·폰트·표면·테두리·radius·spacing으로 각색하고 Canvas도 같은 팔레트·폰트 토큰을 사용한다. 데모 CSS는 항목 범위로 격리한다. 같은 source runtime이 미리보기와 JavaScript/React 전달을 구동하며 Canvas 재생을 CSS만으로 제공한다고 주장하지 않는다. KLIC 각색본은 블루·네이비·중립 팔레트와 reduced-motion·replay·cleanup 계약을 따르고 출시 전 light/dark/mobile 및 실제 재생을 검증한다. NPM 패키지는 홈페이지와 별도 산출물이며, 현재 소스 후보의 export를 발행된 버전의 기능으로 소개하지 않는다. NPM export 안내는 확인된 발행 manifest에 근거한다.
프리셋의 허용 범위
Preset은 기존 API의 승인된 설정 조합이며 토큰의 다섯 번째 계층이 아니다.
해당 컴포넌트 API가 실제 지원하는 size·variant·density·layout 등 명시적 allowlist
- label·설명·업무 데이터
- value·selection·validation·request 상태
- 이벤트 핸들러·복구 액션·권한
- 원시 스타일 값·미등록 CSS 변수·임의 토큰 override
컴포넌트 기본값 → 선택한 preset → 허용된 명시적 설정. 업무 데이터·상태·권한은 별도 입력으로 처리한다.
허용 키·enum·조합을 검사하고 모르는 값은 진단한다. 타입 선언과 실제 DOM·동작 검증을 구분한다.
충돌 해결 순서
- 정보·조작·접근성을 먼저 보존: 핵심 정보·상태 의미·입력·focus와 조작 경로를 보존한다. 디멘션 번호로 다른 필수 계약을 무효화하지 않는다.
- 구조와 읽기 순서를 재배치: 줄바꿈·열 전환·행동 묶음·패널 배치를 먼저 조정한다. 의미상 필요한 2차원 영역만 국소 스크롤을 사용한다.
- 승인 범위에서 간격·표면 조정: 사용자가 선택한 밀도와 글자 배율을 존중하며 승인된 recipe 안에서 여백·장식을 조정한다. 공간 부족만으로 자동 compact나 글자 축소를 적용하지 않는다.
- 남는 제약과 검증을 기록: 기본값으로 해결되지 않으면 적용 범위·대안·영향·FR/AT·실제 검증을 기록한다. 토큰 계층을 건너뛰거나 검증 실패를 예외 승인으로 덮지 않는다.
sources/checks는 연결 근거이며 통과 인증이 아니다. 제품별 실제 환경 검증 결과는 기존 FR/AT 기록에서 관리한다.
적용과 검증
공통 기준과 항목별 DESIGN.md·실제 소스를 먼저 읽습니다. 규칙마다 토큰·DOM·CSS recipe·상태 처리의 책임을 나누고 제품에 필요한 조건을 적용합니다.
기준 본문과 항목 계약의 revision을 비교합니다. release는 레지스트리 배포를 식별하므로 서로 다른 배포의 페이지 결과를 섞지 않습니다.
최신 CLI와 로컬 레지스트리를 사용하고 stdio 세션을 재시작합니다. WebMCP는 페이지를 새로 읽어 등록합니다. source는 원시 코드만 출력합니다. 소스 묶음은 DESIGN.md, 테마 키트는 README.md를 KLIC-DESIGN-SYSTEM.json과 함께 읽습니다.
참고 문서의 선택적 채택
외부 문서와 초안은 검토 후보로 취급한다. KLIC의 현재 문제·구현·계약을 확인하고 필요한 규칙만 채택하며, 보류·기각의 이유와 적용 범위를 남긴다.
참고 문서의 제품명·예제 API·출처를 KLIC의 구현 사실로 옮기지 않는다. 채택한 규칙은 실제 토큰·DOM·CSS recipe·상태 처리와 검증 근거에 연결한다.
변경 시 함께 확인할 범위
문제 제기는 관련 사용 경로 전체의 변경 영향을 검토하는 출발점이다. 사용자가 언급한 화면이나 도구만 수정하고 완료로 처리하지 않는다.
- 구현 원본·토큰·컴포넌트·타입·스키마
- DOCS·웹 가이드·개발자 문서·예제
- MCP·CLI·WebMCP·API의 설명·입력·응답
- AI 프롬프트·llms.txt·소스와 테마 내보내기
- 회귀 검사·빌드·운영 배포와 실제 응답
정본을 수정한 뒤 관련 가이드·예제·도구·프롬프트·내보내기를 함께 재생성하고 같은 리비전을 검사한다. 영향을 받지 않는 경로는 이유를 기록하며, 실제 확인한 결과와 남은 미검증 조건을 구분해 보고한다.