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

🌐 Dual-Language Article: This post contains full sections in both English and Korean (3,000+ chars) for global developers and readers.

---

🇺🇸 [ENGLISH VERSION]

1. Introduction & Project Motivation

In today's fast-paced digital world, developers, knowledge workers, and freelancers face burnout, information overload, and workplace friction. Heavy monolithic SaaS platforms demand complex logins and harvest sensitive data.

To solve this, we created MZ Radar — a lightweight, zero-dependency micro web app built on the KISS principle, delivering 0.3s instant in-browser diagnostic evaluations.

• Live Application: https://mz-radar.pomyjo.com
• Central Hub: https://pomyjo.com

2. Architectural Framework & Diagnostic Metrics

MZ Radar evaluates 5 core dimensions:

1. Proactivity & Engagement: Measures intrinsic drive vs. reactive friction.
2. Stress Resilience: Evaluates emotional recovery elasticity.
3. Decision-Making Bias: Highlights cognitive biases (loss aversion, overconfidence).
4. Interpersonal Dynamics: Maps communication patterns across work and personal relationships.
5. Growth Roadmap: Delivers tailored, actionable behavioral guidance.

3. Pure Web Standards & Client-Side Execution

Instead of shipping a 50MB framework bundle, this app uses pure Vanilla HTML5, CSS3, and ES6+ JS. 100% of calculations execute locally inside the user's browser, guaranteeing total data privacy and zero latency.

---

🇰🇷 [한국어 심층 해설 (Korean Version — 3,000자 이상)]

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

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

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

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

---

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

MZ 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)