2nd/10_Wiki/Topics/Frontend/전력 시스템(Power Systems).md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-전력-시스템-power-systems	전력 시스템 (Power Systems) — 프론트엔드 관점	10_Wiki/Topics	verified	self	Battery API Power-aware UI Energy efficiency	none	A	0.85	applied	frontend performance battery mobile energy		2026-05-10	pending	language framework JavaScript Web APIs

전력 시스템 (Power Systems) — 프론트엔드 관점

매 한 줄

"매 mobile / laptop 의 battery 와 thermal budget 을 의식하는 frontend". 2026 매 user 의 80%+ 가 mobile 매 access — 매 60fps 의 X, 매 power-aware design 이 differentiator. Battery API deprecation 후 매 alternative signal (visibility, network, thermal) 활용.

매 핵심

매 power consumer (frontend)

• CPU/JS: 매 long task, 매 layout thrash, 매 polling.
• GPU: 매 unnecessary compositing, 매 large canvas, 매 video decode.
• Network/radio: 매 frequent fetch, 매 large payload, 매 keep-alive.
• Display: 매 bright pixels, 매 high refresh rate.
• Sensors: GPS, accelerometer, camera 매 always-on.

매 power-aware signals

• Page Visibility API: 매 hidden 시 매 work 중단.
• prefers-reduced-motion: 매 animation 축소.
• Network Information API: 매 'slow-2g' / 'saveData' 감지.
• deprecated Battery API: Chrome 84+ removed — 매 indirect signal 의존.

매 응용

1. Background tab 매 timer/animation 정지.
2. Save-data mode 매 image/video 축소.
3. requestIdleCallback 매 non-critical work 의 deferral.

💻 패턴

Page Visibility — 매 hidden 시 정지

let rafId = null;

function tick() {
  // 매 expensive animation
  draw();
  rafId = requestAnimationFrame(tick);
}

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    cancelAnimationFrame(rafId);
    rafId = null;
  } else if (!rafId) {
    rafId = requestAnimationFrame(tick);
  }
});

Save-Data — 매 light mode

function getDataSaverMode() {
  const conn = navigator.connection || navigator.mozConnection;
  if (!conn) return false;
  return conn.saveData === true ||
    ['slow-2g', '2g'].includes(conn.effectiveType);
}

if (getDataSaverMode()) {
  document.body.classList.add('lite-mode');
  // 매 disable autoplay video, large hero image, prefetch
}

prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) {
  // 매 expensive parallax, particle 매 비활성화
  disableParallax();
}

requestIdleCallback — 매 non-urgent work

function scheduleAnalytics(payload) {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => sendBeacon(payload), { timeout: 2000 });
  } else {
    setTimeout(() => sendBeacon(payload), 0);
  }
}

function sendBeacon(payload) {
  navigator.sendBeacon('/analytics', JSON.stringify(payload));
}

Intersection Observer — 매 viewport 외 lazy

const io = new IntersectionObserver((entries) => {
  for (const e of entries) {
    if (e.isIntersecting) {
      const img = e.target;
      img.src = img.dataset.src;
      io.unobserve(img);
    }
  }
}, { rootMargin: '200px' });

document.querySelectorAll('img[data-src]').forEach((img) => io.observe(img));

매 throttle WebSocket on hidden

class PowerAwareSocket {
  constructor(url) {
    this.url = url;
    this.connect();
    document.addEventListener('visibilitychange', () => this.adjust());
  }
  connect() {
    this.ws = new WebSocket(this.url);
  }
  adjust() {
    if (document.hidden) {
      // 매 hidden — close to save radio
      this.ws.close();
    } else if (this.ws.readyState !== WebSocket.OPEN) {
      this.connect();
    }
  }
}

CSS — 매 dark mode 매 OLED 절전

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000; /* 매 true black 매 OLED 의 pixel off */
    --fg: #e8e8e8;
  }
}

매 결정 기준

상황	Approach
매 background tab	requestAnimationFrame 정지
매 save-data	image quality 축소, prefetch X
매 reduced-motion	animation 비활성화
매 idle	requestIdleCallback
매 OLED + dark mode	true black bg

기본값: visibility + saveData + reduced-motion 의 3개 매 mandatory.

🔗 Graph

• 부모: Web Performance
• 변형: Dark Mode
• 응용: PWA

🤖 LLM 활용

언제: 매 power profile audit, 매 power-aware UX 추천. 언제 X: 매 actual battery measurement (impossible from JS).

❌ 안티패턴

• 항상 60fps animation: 매 background tab 도 — 매 battery drain.
• polling 5s: 매 mobile radio 매 always-on — push 또는 long-poll.
• autoplay video 4K: 매 cellular 매 data + battery.

🧪 검증 / 중복

• Verified (MDN Page Visibility, Network Information, Web.dev power).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — power-aware frontend, visibility/saveData/reduced-motion 패턴