React 19와 Tailwind CSS 4로 구현한 Retro CRT 터미널 UI 및 데이터 시각화

Context

Claude Code Buddy의 상태 확인을 위한 전용 인터페이스 부재. 터미널 환경 외에 ASCII 아트와 성장 통계를 직관적으로 확인할 수 있는 웹 기반 도구의 필요성.

Technical Solution

• React 19와 Tailwind CSS 4 기반의 최신 프론트엔드 스택 채택
• Custom CSS 애니메이션을 활용한 Scanlines, Phosphor glow, Screen flicker 효과의 CRT 모니터 재현
• Wouter 라이브러리를 통한 경량 클라이언트 사이드 라우팅 구조 설계
• 12차원 가중 유클리드 거리(Weighted Euclidean Distance) 기반의 친밀도 계산 알고리즘 적용
• 기하 분포(Geometric Distribution) 및 기댓값 계산을 통한 희귀 버디 획득 확률 수학적 모델링
• 서버 사이드 OG 이미지 생성 기능을 통한 소셜 공유 최적화

Key Takeaway

단순한 데이터 조회 도구에 수학적 모델링과 세밀한 CSS 시각 효과를 결합하여 사용자 경험을 극대화한 인터랙티브 설계 방식.