2.5d-ui
GitHub
Interactive 3D Showcase & Live Laboratory

2.5D 인터랙티브 3D 쇼케이스 및 활용 사례

도표와 그래프의 X축, Y축, Z(높이)축의 항목 의미를 직관적으로 확인하고, 실시간 슬라이더로 수치를 직접 조작해 보세요. 클라우드 인프라, 스마트 팩토리, 에너지 빌딩, 마이크로서비스 등 다양한 실무 현장에서 2.5D UI가 어떻게 활용되는지 실제 동작하는 라이브 데모로 만나보실 수 있습니다.

3D 축(X · Y · Z) 및 실시간 수치 조절 실험실

슬라이더를 움직이면 2.5D 차트의 높이와 수치가 실시간으로 부드럽게 변합니다.

현재 컴포넌트의 3차원 축(Axis) 매핑 정보

2.5D 등각 투영(Isometric Projection) 기준
X축 (우하향 너비)
서비스 항목 (Category)
아이소메트릭 X축 (우하향 배치, 라벨 비가림)
Y축 (좌하향 깊이)
배치 순서 (Sequence)
Y축 방향 1열 선형 정렬
Z축 (수직 높이)
메모리 점유량 (Value, MB)
수직 높이 (블록 높이 --iso-h 에 반영)
실시간 수치 변동 컨트롤러 (Live Dimension Controls) CSS Matrix 트랜지션 실시간 반영
Real-World Use Cases

2.5D UI를 활용할 수 있는 다양한 실무 사례

WebGL이나 무거운 차트 라이브러리 없이도, 가볍고 직관적인 2.5D 등각 투영을 통해 물리적 공간과 다차원 지표를 표현할 수 있습니다.

인프라 · 클라우드 엔지니어링

데이터센터 서버 랙 3D 열화 및 부하 모니터링

X축: 서버 랙 번호 (Rack A~F) Y축: 랙 슬롯 위치 (1U~6U) Z축: 코어 온도(℃) 및 발열량

<iso-heatmap>의 3D 높이와 OKLCH 컬러 스케일을 결합하여, 수십 대의 서버 랙 중 특정 슬롯의 과열이나 냉각팬 장애를 한눈에 식별할 수 있습니다.

시뮬레이션 모드:
물류 · 풀필먼트 SCM

스마트 물류창고 3D 파레트 입체 적재 현황

X축: 창고 통로 (Aisle) Y축: 랙 베이 (Bay) Z축: 파레트 적재 단수 (1~5단)

<iso-map>을 활용하여 물류창고 출고도크, 통로, 파레트 랙의 물리적 위치를 정확한 그리드로 배치하고, 수직 적재 단수를 입체적으로 관리합니다.

실시간 입출고 제어:
스마트 빌딩 · ESG 환경

친환경 오피스 빌딩 층별 온습도 & 에너지 소비 매핑

X축: 층내 구획 (동·서 구역) Y축: 창가·복도 구획 Z축: 층수(Layer) & 전력량(kW)

<iso-layers>의 층 펼치기(open) 속성을 조작하면 층간 거리가 수직으로 확장되어, 빌딩 내부의 실별 공조 및 전력 소모량을 한눈에 분석할 수 있습니다.

소프트웨어 아키텍처 · SRE

마이크로서비스(MSA) 트래픽 & 레이턴시 3D 시티

X/Y축: 서비스 도메인 구역 밑면(w×d): 트래픽 (RPS) Z축: P99 지연 시간(ms)

<iso-city>를 활용해 복잡한 마이크로서비스 아키텍처를 가상의 도시 형태로 조망합니다. 서비스의 처리량(RPS)은 건물의 밑면 넓이로, 응답 지연시간(Latency)은 건물의 높이로 직관화됩니다.

트래픽 시나리오: