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

<h1> [Part 19/50] Building MZ Radar: 3,000+ Char Tech & Behavioral Architecture Breakdown </h1> <blockquote> <p>🌐 <strong>Dual-Language Article</strong>: This post contains full sections in both <strong>English</strong> and <strong>Korean (3,000+ chars)</strong> for global developers and readers.</p> </blockquote> <h2> 🇺🇸 [ENGLISH VERSION] </h2> <h3> 1. Introduction & Project Motivation </h3> <p>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.</p> <p>To solve this, we created <strong>MZ Radar</strong> — a lightweight, zero-dependency micro web app built on the KISS principle, delivering 0.3s instant in-browser diagnostic evaluations.</p> <ul> <li> <strong>Live Application</strong>: <a href="https://mz-radar.pomyjo.com" rel="noopener noreferrer">https://mz-radar.pomyjo.com</a> </li> <li> <strong>Central Hub</strong>: <a href="https://pomyjo.com" rel="noopener noreferrer">https://pomyjo.com</a> </li> </ul> <h3> 2. Architectural Framework & Diagnostic Metrics </h3> <p><strong>MZ Radar</strong> evaluates 5 core dimensions:</p> <ol> <li> <strong>Proactivity & Engagement</strong>: Measures intrinsic drive vs. reactive friction.</li> <li> <strong>Stress Resilience</strong>: Evaluates emotional recovery elasticity.</li> <li> <strong>Decision-Making Bias</strong>: Highlights cognitive biases (loss aversion, overconfidence).</li> <li> <strong>Interpersonal Dynamics</strong>: Maps communication patterns across work and personal relationships.</li> <li> <strong>Growth Roadmap</strong>: Delivers tailored, actionable behavioral guidance.</li> </ol> <h3> 3. Pure Web Standards & Client-Side Execution </h3> <p>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.</p> <h2> 🇰🇷 [한국어 심층 해설 (Korean Version — 3,000자 이상)] </h2> <h3> 1. 🎯 프로젝트 개발 배경 및 문제 의식 (Introduction & Background) </h3> <p>현대 디지털 사회에서 지식 노동자, 직장인, 프리랜서, 개발자들은 매일같이 수많은 정보와 업무 스트레스, 정서적 고갈 속에서 살아가고 있습니다. 단순한 기능성 웹 서비스나 거대한 단일(Monolithic) SaaS 시스템은 유저에게 복잡한 회원가입과 과도한 개인정보 입력, 무거운 스크립트 로딩 시간을 요구하곤 합니다.</p> <p>이러한 문제의식 속에서 <strong>MZ Radar</strong> 프로젝트가 탄생했습니다. 이 프로젝트는 <strong>"단순함(KISS 원칙)과 개인정보 보호, 0.3초 초고속 브라우저 연산"</strong>을 지향하며, 사용자가 로그인이나 설치 없이 즉시 자신의 성향과 상태를 다각도로 진단할 수 있도록 설계된 마이크로 웹 애플리케이션입니다.</p> <p>라이브 서비스 바로가기: <a href="https://mz-radar.pomyjo.com" rel="noopener noreferrer">https://mz-radar.pomyjo.com</a></p> <h3> 2. 🧠 핵심 심리학 / 행동재무학 / 기술 이론 프레임워크 (Core Theoretical Framework) </h3> <p><strong>MZ Radar</strong>은 단순한 일회성 퀴즈나 가벼운 심리 테스트에 머무르지 않고, 검증된 학술 모델과 현대 행동과학 및 임상 심리학 데이터를 유기적으로 조합하여 설계되었습니다.</p> <h4> 📊 주요 진단 5대 축 및 정밀 스코어링 모델 </h4> <ol> <li> <strong>정서적 주도성 및 몰입도 지수 (Proactivity & Engagement)</strong>: 업무나 일상 과제에 임할 때 자신이 스스로 주도권을 쥐는지, 외부 자극에 반응하는지 측정합니다.</li> <li> <strong>스트레스 대처 및 회복 탄력성 (Stress Resilience)</strong>: 과도한 업무 및 대인관계 갈등 상황에서 정서적 고갈을 최소화하고 본래 상태로 복원되는 능력을 평가합니다.</li> <li> <strong>의사결정 및 감정 편향 조율 (Decision-Making Bias)</strong>: 과도한 확신, 손실 회피, 충동적 판단 등 무의식적 행동 오류를 시각화합니다.</li> <li> <strong>대인관계 소통 및 감정 상호작용 (Interpersonal Dynamics)</strong>: 상사, 동료, 연인, 자녀 등 타인과의 대화 패턴 및 애착 유형을 다차원으로 투영합니다.</li> <li> <strong>장기적 성장 및 라이프 루틴 최적화 (Long-Term Growth Roadmap)</strong>: 강점을 극대화하고 약점을 보완할 수 있는 실용적 행동 지침을 제시합니다.</li> </ol> <h3> 3. 💻 프론트엔드 알고리즘 & 코드 아키텍처 심층 해설 (Technical Implementation) </h3> <p>본 프로젝트는 무거운 3rd-party 프레임워크(React/Vue/Angular 등)의 50MB 번들 파일 대신, <strong>순수 웹 표준(Vanilla HTML5, CSS3, ES6+ JavaScript)</strong>만을 사용하여 구축되었습니다.</p> <h4> ⚡ 순수 자바스크립트 다차원 스코어링 및 노멀라이제이션 알고리즘 </h4> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span