시스템 업데이트 시뮬레이터

업그레이드 시뮬레이터는 세 가지 핵심 브라우저 API를 사용하여 OS 업그레이드 화면의 시각적 외관을 재현하는 전체 화면 브라우저 오버레이입니다: Fullscreen API, 진행률 애니메이션을 위한 CSS transition, 단계 스케줄링을 위한 JavaScript 타이머. 사용자가 '시뮬레이션 시작'을 클릭하면 document.documentElement.requestFullscreen()이 호출됩니다. 이 API는 보안 조치로 사용자 제스처(클릭 또는 키 입력)가 필요하며, 페이지 로드 시 자동으로 호출할 수 없고, 사용자에게 전체 화면 종료 방법을 알리는 브라우저 알림을 트리거합니다. 진행률 애니메이션은 선형 증가 대신 비선형 이징 커브를 사용합니다. 시간 t에서의 진행률 값 P(t)(t는 전체 30초 지속 시간에 걸쳐 0에서 1로 진행)는 이차 ease-in-out을 따릅니다: P(t) = 2t² (t < 0.5), P(t) = 1 - 2(1-t)² (t >= 0.5). 이는 빠른 시작(다운로드 단계), 느린 중간(설치 단계), 빠른 마무리(구성 단계)를 만들어 실제 OS 업데이터의 동작을 모방합니다. 진행률 표시줄 너비는 setInterval 틱 속도(100ms)에 맞춘 duration의 width 속성 CSS transition으로 구동되며, 이징된 값은 UI에 표시되는 백분율로 매핑됩니다. 단계 스케줄링은 setTimeout 체인 콜백을 사용하는 유한 상태 머신을 사용합니다. Windows 시뮬레이션의 경우 단계는 전체 지속 시간의 0%, 30%, 60%, 90%에서 전환되며, 각 단계는 텍스트 업데이트를 트리거하고 Windows의 경우 100%에서 재시작 메시지를 표시합니다. macOS와 Android 시뮬레이션은 더 간단한 2단계 모델(준비/설치)을 사용합니다. Linux 시뮬레이션은 현재 진행률 값을 기준으로 조건부로 줄을 추가하여 점진적 터미널 출력을 생성합니다. 각 새 apt 로그 줄은 특정 진행률 임계값에서 나타나 실제 패키지 관리자의 착각을 만듭니다. 사용자가 항상 종료할 수 있는 두 가지 안전 장치가 있습니다: 오버레이의 클릭 이벤트 리스너는 document.exitFullscreen()을 호출하고 모든 타이머를 정리합니다; fullscreenchange 이벤트 리스너는 사용자가 ESC를 누를 때(페이지 개입 없이 전체 화면을 종료)를 감지하고 모든 내부 상태를 초기화합니다. fullscreenchange 이벤트는 전체 화면 상태를 소유하는 요소에서 발생하므로 document.documentElement에서 수신하면 프로그래밍 방식과 사용자 시작 종료를 모두 캡처합니다. 모든 렌더링은 HTML/CSS/JS로 수행됩니다. 페이지는 시스템 호출을 하지 않고, 파일을 쓰지 않으며, 탭을 닫으면 이전 뷰포트 상태가 완전히 복원됩니다.

• Fullscreen API 보안: requestFullscreen()는 WHATWG Fullscreen Standard §1.2에 따라 사용자 제스처(클릭/키 입력)가 필요 — 브라우저는 페이지가 억제할 수 없는 'ESC를 눌러 종료' 오버레이를 표시하여 사용자가 항상 전체 화면 모드임을 알 수 있도록 보장
• 진행률 이징: 이차 ease-in-out 커브 P(t) = 2t² (t < 0.5) / 1-2(1-t)² (t >= 0.5)는 실제 OS 업데이터를 모방하는 빠른-느린-빠른 페이싱을 생성 — 이징은 JavaScript에서 계산되어 CSS 너비 백분율로 적용되므로 애니메이션 로직과 렌더링이 분리
• 단계 상태 머신: setTimeout 체인이 사전 정의된 단계 임계값(Windows: 0% → 30% → 60% → 90% → 100%)을 통과하며 각 단계가 표시 메시지를 업데이트 — 오버레이가 해제된 후 오래된 콜백이 실행되는 것을 방지하기 위해 종료 시 체인이 정리됨
• Linux 터미널 시뮬레이션: 진행률 임계값(10%, 25%, 40%, 55%, 70%, 85%, 100%)에서 조건부로 줄을 렌더링하여 점진적 apt 출력 생성 — 각 임계값에 실제와 같은 패키지 이름과 바이트 수가 추가되며, 'Fetched X MB in Ys' 줄은 총계에 도달했을 때만 표시
• 종료 안전: 오버레이의 클릭 리스너가 exitFullscreen()을 호출하고 모든 타이머를 정리; document.documentElement의 fullscreenchange 이벤트 리스너가 ESC 시작 종료를 감지하고 상태 초기화 — 두 경로 모두 독립적으로 정리를 보장
• 플랫폼별 렌더링: 각 OS 변형은 고유한 CSS 사용 — Windows(#0078D4 파란색, Segoe UI 폰트, 원형 스피너), macOS(검은 배경, San Francisco 폰트, Apple 로고 SVG, 카운트다운 타이머), Linux(단색 폰트와 빨간색/노란색/초록색 창 컨트롤의 어두운 터미널), Android(Material Design 초록색 #4CAF50, 로봇 아이콘 SVG)
• 타이머 정리: 모든 setInterval 및 setTimeout 핸들이 ref에 저장되고 stop 함수와 useEffect 정리 콜백에서 모두 정리 — 활성 시뮬레이션 중 컴포넌트가 언마운트될 때 메모리 누수와 오래된 상태 업데이트를 방지