운영 중 · 오픈 소스

Home Server 3D

제 AWS Lightsail 서버를 작은 3D 방으로 보여 줍니다. 랙의 LED가 서버의 실제 상태에 따라 켜집니다.

서버실 열어 보기 GitHub

데스크톱 화면의 3D 서버실. 검은 서버 랙이 있는 아이소메트릭 방과, 서비스 여섯 개의 상태등이 있는 오른쪽 패널

종류: 3D 웹 페이지 · Blender 장면 + three.js
기간: 2026년 10월
데이터: Grafana Cloud의 서버 지표, 1분마다
운영 환경: Cloudflare Pages · Pages Functions

소개

Home Server 3D는 제 AWS Lightsail 서버를 작은 3D 서버실로 보여 줍니다. 랙의 장비 하나가 서비스 하나, LED 하나가 컨테이너 하나입니다.

장면은 Blender로 만들어 three.js로 띄웁니다. 작은 상태 API가 Grafana Cloud에서 상태만 읽어 오므로 토큰은 브라우저로 나가지 않습니다.

주요 기능

실제 상태로 켜지는 LED: LED 하나가 컨테이너 하나이고, 색은 실시간 지표로 정해집니다. 오른쪽 패널에서 CPU·메모리·디스크 사용률과 서비스별 상태를 볼 수 있고, 서비스를 누르면 카메라가 랙으로 다가갑니다.
실제 데이터가 뜨는 모니터: 벽 모니터는 최근 1시간의 CPU·메모리·네트워크·디스크를 1분마다 그립니다. 책상 모니터는 최근 커밋을 터미널처럼 보여 주고, 각 커밋은 GitHub로 연결됩니다.
낮과 밤: 보는 사람의 현지 시각에 맞춰 오전 6시부터 오후 6시까지는 낮이고, 해·달 스위치로 직접 바꿀 수도 있습니다.
카메라: 드래그로 돌리고 스크롤로 확대합니다. 키보드로는 방향키나 WASD로 옮기고, Q·E로 돌리고, +·-로 확대합니다.
공개해도 안전하게: API가 컨테이너를 정상·주의·오류로만 줄여서 1분 동안 캐시합니다. 방문자가 Grafana Cloud에 직접 닿지 않고, 실제 서버·컨테이너 이름도 브라우저로 나가지 않습니다.

구성도

A visitor opens the 3D page on Cloudflare Pages, and a status API reads the Lightsail server's metrics from Grafana Cloud and returns a public summary. The scene is built in Blender on my PC and deployed with git push.

기술 구성

3D: Blender 5.2 · Python 장면 스크립트 · Cycles · glTF(GLB) + Draco
웹: three.js 0.170 · HTML · CSS · JavaScript (ES 모듈, 빌드 도구 없음)
API: Cloudflare Pages Functions · Cache API · GitHub REST API
모니터링: Grafana Cloud(Prometheus, PromQL) · Grafana Alloy · cAdvisor
배포: Cloudflare Pages · git push로 배포

라이브 페이지는 제 실제 서버를 보여 줍니다. 주소 뒤에 ?demo=1을 붙이면 예시 데이터로 볼 수 있습니다. 스크린샷은 예시 데이터이고, 나머지 이미지는 Blender 장면을 렌더한 것입니다.