[Part 2/50] Building Burnout Radar: 3,000+ Char Tech & Behavioral Architecture Breakdown

1. 🎯 프로젝트 개발 배경 및 문제 의식 (Introduction & Background)

현대 디지털 사회에서 지식 노동자, 직장인, 프리랜서, 개발자들은 매일같이 수많은 정보와 업무 스트레스, 정서적 고갈 속에서 살아가고 있습니다. 단순한 기능성 웹 서비스나 거대한 단일(Monolithic) SaaS 시스템은 유저에게 복잡한 회원가입과 과도한 개인정보 입력, 무거운 스크립트 로딩 시간을 요구하곤 합니다.

이러한 문제의식 속에서 Burnout Radar 프로젝트가 탄생했습니다. 이 프로젝트는 "단순함(KISS 원칙)과 개인정보 보호, 0.3초 초고속 브라우저 연산"을 지향하며, 사용자가 로그인이나 설치 없이 즉시 자신의 성향과 상태를 다각도로 진단할 수 있도록 설계된 마이크로 웹 애플리케이션입니다.

라이브 서비스 바로가기: https://burnout-radar.pomyjo.com

---

2. 🧠 핵심 심리학 / 행동재무학 / 기술 이론 프레임워크 (Core Theoretical Framework)

Burnout Radar은 단순한 일회성 퀴즈나 가벼운 심리 테스트에 머무르지 않고, 검증된 학술 모델과 현대 행동과학 및 임상 심리학 데이터를 유기적으로 조합하여 설계되었습니다.

📊 주요 진단 5대 축 및 정밀 스코어링 모델

1. 정서적 주도성 및 몰입도 지수 (Proactivity & Engagement): 업무나 일상 과제에 임할 때 자신이 스스로 주도권을 쥐는지, 외부 자극에 반응하는지 측정합니다.
2. 스트레스 대처 및 회복 탄력성 (Stress Resilience): 과도한 업무 및 대인관계 갈등 상황에서 정서적 고갈을 최소화하고 본래 상태로 복원되는 능력을 평가합니다.
3. 의사결정 및 감정 편향 조율 (Decision-Making Bias): 과도한 확신, 손실 회피, 충동적 판단 등 무의식적 행동 오류를 시각화합니다.
4. 대인관계 소통 및 감정 상호작용 (Interpersonal Dynamics): 상사, 동료, 연인, 자녀 등 타인과의 대화 패턴 및 애착 유형을 다차원으로 투영합니다.
5. 장기적 성장 및 라이프 루틴 최적화 (Long-Term Growth Roadmap): 강점을 극대화하고 약점을 보완할 수 있는 실용적 행동 지침을 제시합니다.

---

3. 💻 프론트엔드 알고리즘 & 코드 아키텍처 심층 해설 (Technical Implementation)

본 프로젝트는 무거운 3rd-party 프레임워크(React/Vue/Angular 등)의 50MB 번들 파일 대신, 순수 웹 표준(Vanilla HTML5, CSS3, ES6+ JavaScript)만을 사용하여 구축되었습니다.

⚡ 순수 자바스크립트 다차원 스코어링 및 노멀라이제이션 알고리즘

function calculateNormalizedScores(userAnswers, weightMatrix) {
  const dimensions = { dimensionA: 0, dimensionB: 0, dimensionC: 0, dimensionD: 0, dimensionE: 0 };
  userAnswers.forEach((answerValue, index) => {
    const weights = weightMatrix[index];
    if (weights) {
      Object.keys(weights).forEach(dimKey => {
        dimensions[dimKey] += answerValue * weights[dimKey];
      });
    }
  });
  const normalizedResults = {};
  Object.keys(dimensions).forEach(key => {
    const rawVal = dimensions[key];
    normalizedResults[key] = Math.min(100, Math.max(0, Math.round(rawVal)));
  });
  return normalizedResults;
}

이 알고리즘은 서버로 사용자의 응답 데이터를 단 1바이트도 송신하지 않고, 100% 사용자의 웹 브라우저 메모리상에서 실시간 계산됩니다. 따라서 개인정보 유출 위험이 원천 차단되며, 네트워크 지연(Latency)이 전혀 없는 초고속 반응성을 보장합니다.

---

4. 🎨 글래스모피즘(Glassmorphism) UI 시스템 & HTML5 Canvas 시각화 (Design & UX)

사용자의 시각적 몰입감을 극대화하기 위해 modern 웹 디자인 프레임워크인 Glassmorphism 디자인 시스템을 CSS 변수 기반으로 직접 구현하였습니다.

🌈 주요 UI/UX 설계 기술 지표

• Ambient Mesh Glow Orbs: CSS radial-gradient와 filter: blur(140px)를 결합하여 은은하게 일렁이는 가상 배경 광원 구현
• Backdrop Filter & Frosted Glass: backdrop-filter: blur(24px) 및 반투명 테두리를 결합하여 몽환적이고 세련된 유리 질감 연출
• HTML5 Canvas Pure Geometry Radar: Chart.js 같은 외산 라이브러리 없이 삼각함수(Math.sin, Math.cos)를 활용하여 다각형 레이더 차트를 순수 캔버스 좌표계에 다이내믹 렌더링

---

5. 📈 1인 개발 라이프사이클 회고 및 배포 운영 성과 (Lessons & Conclusion)

13개 이상의 마이크로 진단 앱을 Vercel Edge Network 상에 멀티 서브도메인(.pomyjo.com) 구조로 구축하고 운영하면서 얻은 가장 큰 성과는 *"과도한 툴의 배제(YAGNI 정신)가 코드의 수명을 극대화한다"**는 사실이었습니다.

• 초고속 웹 성능: Lighthouse 성능 점수 99~100점 달성
• 유지보수 제로(Zero Debt): 프레임워크 버전 업그레이드로 인한 코드 파손 위험 제로
• 통합 관제탑 시너지: 메인 허브인 pomyjo.com과의 유기적 연결로 상호 도메인 파워 증가

라이브 관제탑에 접속하셔서 17개 전 가동 서비스를 직접 경험해 보세요:

👉 POMYJO 통합 관제탑 바로가기 (https://pomyjo.com)