Thread
복잡한 데이터에서 발견한 패턴을 표현합니다.
Design Philosophy
XERKONIX Weave
Weave는 ‘기술은 인간을 위해 존재합니다’라는 제르코닉스의 정체성을 담아, 복잡한 데이터를 엮어 맥락을 전달하는 디자인 시스템입니다.
Weave의 두 축
Knot
패턴이 모여 드러나는 상태를 표현합니다.
Thread와 Knot가 만나 Weave가 됩니다.
01 · Foundation
Weave Colors
브랜드와 UI 전반에 공통으로 사용하는 기본 색상을 정의합니다.
Canvas
#F5F5F5
Page background
Surface
#FFFFFF
Card/Panel
Text Core
#2D2D2D
Heading / Critical
Text Body
#6F6B63
Body text
Identity
#C0A062
Brand gold
Action
#3B434F
Primary CTA
Accent
#C05A2A
Warm secondary emphasis
Support
#8A9E3A
Recommended / assistive
Info
#6E7FA3
Info / stability
Success
#5B8C73
Success state
Warning
#F0A43A
Warning state
Error
#B84040
Error state
Token Table
| Token | Value | Role | Usage |
|---|---|---|---|
--canvas | #F5F5F5 | Background | 74~84% 영역 |
--text | #2D2D2D | Core text | 제목/핵심 수치 |
--color-identity | #C0A062 | Brand gold | 브랜드/핵심 포인트 |
--color-action | #3B434F | Primary CTA | 주요 행동 버튼 배경 |
--color-action-deep | #2F3742 | Action hover | 주요 행동 버튼 hover |
--color-action-text | #FFFFFF | Action text | 주요 행동 버튼 라벨 |
--color-accent | #C05A2A | Secondary emphasis | 보조 유도/에디토리얼 강조 |
--color-support | #8A9E3A | Assistive support | 추천/안정/보조 포인트 |
--color-info | #6E7FA3 | Info / stability | 안내/안정 지표 |
--color-success | #5B8C73 | Success | 완료/정상 상태 |
--color-warning | #F0A43A | Warning | 경고 배경/보더/상태 점 |
--color-warning-deep | #A56700 | Warning text | 경고 수치/라벨 텍스트 |
--color-error | #B84040 | Error | 실패/차단/오류 |
--color-signal | #B84040 | Realtime alert | 실시간 경보 dot / pulse |
--font-sans | IBM Plex Sans KR | Base font | 본문/제목 공통 |
--wave-speed | 2.6s | Thread rhythm | 기본 패턴 리듬 |
--wave-speed-slow | 3.8s | Thread rhythm | 완만한 패턴 리듬 |
--wave-amp | 14px | Thread amplitude | 패턴 진폭 가이드 |
--wave-stroke | 2px | Thread stroke | 패턴 선 굵기 기준 |
Identity 6%는 기본 강조 예산입니다. Action, Accent, Support, 상태색은 필요한 순간에 Identity 일부를 대체해 사용하고, 일반 화면에서 총 강조 면적은 보통 6~8% 수준을 유지합니다.
02 · Theme
Light / Dark
두 모드는 분위기만 달라지고 정보 계층 구조와 시맨틱 컬러 역할은 동일해야 합니다.
Light
Primary Surface#FFFFFF
Support Surface#F2EFE9
Core Text#2D2D2D
Semantic Tokens
Identity#C0A062
Action#3B434F
Accent#C05A2A
Support#8A9E3A
Info#6E7FA3
Success#5B8C73
Warning#F0A43A
Error#B84040
Dark
Primary Surface#262626
Support Surface#2C2A27
Core Text#F5F5F5
Semantic Tokens
Identity#D4BC8A
Action#C2CAD5
Accent#D8794D
Support#A3B857
Info#8CA0C8
Success#7EA48F
Warning#FFC457
Error#D56767
03 · Typography
Type Scale
IBM Plex Sans KR를 기본으로, 메타 정보는 IBM Plex Mono로 분리합니다.
XERKONIX Weave
Hero
Decision-Ready Interface
Section title
상태 · 근거 · 행동
Sub section
AI Signal Summary
Card heading
정보를 많이 보여주는 것보다, 올바른 결정을 빠르게 돕는 구조가 우선입니다.
Lead text
결과 카드에는 수치와 기준선, 권장 행동을 함께 배치합니다. 문장 단독 설명은 보조로만 사용합니다.
Body text
Status · Confidence · Coverage · SLA
UI label
Meta / Code
04 · Iconography
Icon Set
Weave의 최소 단위를 아이콘으로 정리해, 복잡한 화면에서도 의미를 빠르게 읽게 합니다.
Rules
- 기본 크기 18px, 버튼 내부 16px.
- 선 두께 1.6px, round cap/round join.
- 기본 색상은 Text Body, 활성은 Identity.
- 아이콘 셀 내부 레이블은 1줄 기준으로 유지.
- 아이콘 간 기본 간격은 8px.
chev-left
chev-right
chev-up
chev-down
plus
minus
close
check
search
filter
sort
sliders
home
user
users
briefcase
chart-bar
chart-line
pie
trend-up
bell
alert
info
help
settings
lock
unlock
keyhole
calendar
clock
map
pin
mail
message
link
copy
refresh
download
upload
cloud
file
folder
grid
list
play
pause
stop
power
Size System
>12px · Inline
>16px · Small
>20px · Default
>24px · Large
>32px · Display
>48px · Hero
05 · Components
Components
공통 UI 컴포넌트를 동일한 토큰 규칙으로 사용합니다.
Buttons
Chips
default
trusted
recommended
attention
urgent
Cards
Metric Card
Primary Value
핵심 수치, 기준값, 변동값을 같은 위계로 보여주는 기본 카드.
Status Card
State Delta
현재 상태와 직전 상태의 차이를 강조해 변화 방향을 알려주는 카드.
Summary Card
Module Overview
요약 지표와 다음 행동을 함께 배치하는 모듈형 카드.
Forms
법인명 기준 입력
도메인별 패턴 로드
질문 중심 입력 권장
Alerts
●
분석 완료핵심 지표와 권장 액션 2건이 생성되었습니다.
●
모델 업데이트v2.2 모델이 2026-03-01부터 순차 적용됩니다.
●
호출량 주의월간 API 사용량이 82%에 도달했습니다.
●
연결 오류외부 데이터 소스 인증이 만료되었습니다.
Table
| Metric | Current | Baseline | Delta | Action |
|---|---|---|---|---|
| Primary Score | 94.2 | 88.7 | +5.5 | 우선순위 유지 |
| State Risk | 21% | 34% | -13% | 모니터링 간격 확장 |
| Signal Stability | 71 | 76 | -5 | 보조 지표 확인 |
| Data Coverage | 78% | 72% | +6% | 입력 범위 유지 |
06 · Pattern
Pattern
패턴 섹션은 핵심 신호를 일관된 시각 구조로 정리해, 화면 간 해석 기준을 통일합니다.
종합 점수
8.6/10
전월 대비 +0.4
신뢰도
92%
평균 90% 이상 유지
처리 시간
2.3s
SLA 목표 3초
커버리지
78%
추가 입력 필요
Confidence Meter
역할 적합도 신뢰도94%
행동 전환 명확도91%
추천 보조 안정성88%
정보 안정성84%
부정 엣지 감지 민감도67%
Signal Timeline
2026-01-14 09:23이탈 위험 급상승참여율 42% 하락, 3주 내 이탈 확률 78%
2026-01-10 14:07협업 패턴 이상응답 지연 +140%, 피드백 빈도 감소
2026-01-05 11:30역량 업데이트경력 점수 +8.2
2025-12-20 09:00초기 기준선 설정Baseline 8.6 / 신뢰도 92%
Signal Overview Monitor
핵심 지표 흐름과 상태 변화를 한 화면에서 함께 비교합니다.
Engagement
Variation
Stability
Hexagon Radar
Identity
Accent
Support
다중 축 지표 강도를 레이더 형태로 비교해 변화 방향을 빠르게 확인합니다.
Cluster Matrix
데이터 군집 밀도를 매트릭스로 표시해 입력 분포를 직관적으로 보여줍니다.
Flow Compression
Identity only
Accent only
Support only
입력 단계의 복잡도가 점차 압축되어 핵심 신호만 남는 과정을 시각화합니다.
Input PatternCapture
다양한 입력 신호를 동일한 스키마로 정규화해 분석 기준을 안정적으로 맞춥니다.
Input channels12
Schema match98%
NextPattern synthesis
Pattern LayerSynthesis
반복 구간과 변동 구간을 분리해 공통 구조를 만들고 핵심 신호를 정리합니다.
Pattern density72
Noise ratio+18%
NextState mapping
State LayerMapping
상태를 구조화해 변화가 큰 구간과 안정 구간을 동시에 보여줍니다.
State nodes34
Stable range61.7%
NextAction compression
Action PatternOutput
최종 상태를 기준으로 우선순위와 실행 포맷을 압축해 단일 뷰로 제공합니다.
Priority slots3
Action clarity상승
OutputExecution brief
07 · Motion
Motion
Weave의 두 축을 기준으로 패턴과 상태의 변화를 모션으로 표현합니다.
Metaphor: Weave
모션은 데이터 흐름과 상태 변화를 자연스럽게 연결해, 정보 해석 과정을 끊기지 않게 전달합니다.
- Observe: 데이터 흐름을 읽는다140~180ms
- Interpret: 상태 변화를 확인한다200~260ms
- Connect: Weave 맥락을 완성한다280~320ms
Status Breath
2.6s · ease-in-out
실시간 상태 표시점. 시스템이 살아있음을 조용하게 전달.
2.6s · linear
데이터 스트림 이동을 직선 경로로 표현하는 인디케이터.
3.8s · linear
파형 자체가 흐르며 장기 리듬 변화를 읽게 만드는 모션.
Focus Ripple
2.2s · ease-out
선택 대상 주변 집중 범위를 확장해 주목점을 알려줌.
Card Settle
2.8s · ease
새 데이터 카드가 과하지 않게 자리잡는 기본 전환.
Alert Beat
1.9s · ease-in-out
긴급 상태에만 사용하는 이중 박동 경고 신호.