# Obs.js - Context-Aware 웹 성능 도구

> Clean Markdown view of GeekNews topic #22941. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=22941](https://news.hada.io/topic?id=22941)
- GeekNews Markdown: [https://news.hada.io/topic/22941.md](https://news.hada.io/topic/22941.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-09-07T09:31:01+09:00
- Updated: 2025-09-07T09:31:01+09:00
- Original source: [github.com/csswizardry](https://github.com/csswizardry/Obs.js)
- Points: 10
- Comments: 0

## Summary

**웹 성능 최적화**와 **접근성**에 관심 있는 개발자라면, 사용자의 **네트워크 속도, 배터리, 시스템 성능** 등 **브라우저 시그널**을 실시간으로 감지해 상황에 맞는 **경량화 UI/UX**를 구성할 수 있는 새로운 도구가 등장했습니다. 사용자의 환경에 따라 **웹폰트, 이미지 해상도, 비디오 자동재생 등**을 동적으로 제어할 수 있으며, 감지된 정보는 CSS 클래스와 전역 JS 객체로 노출되어 기존 프론트엔드 코드와 쉽게 통합할 수 있습니다. 설치 방식은 **인라인 스크립트**만 지원하므로, 초기 렌더링 시점에 최적의 퍼포먼스를 구현하려는 프로젝트에서 특히 활용도가 높습니다.

## Topic Body

- **브라우저 시그널**(Navigator, Battery API 등)을 읽어 **네트워크 연결 속도, 배터리 상태, RAM·CPU 성능**을 추론하여,  
  이를 CSS 클래스와 JS 객체로 노출해 **컨텍스트의 전달을 어느정도로 해야할지 상황에 맞게 전환**하는 도구  
- 즉, 저속 연결이나 저전력 모드에서는 **웹폰트·이미지 해상도·비디오 자동재생·애니메이션** 등을 제어하여 경량화된 경험 제공이 가능  
- 감지 결과는  
  - `&lt;html&gt;`에 `.has-*` 형태의 CSS 클래스 제공 : `.has-bandwidth-high.has-cpu-medium.has-ram-medium` 같은 클래스가 추가됨  
  - `window.obs` 객체에 세부 데이터 저장 : `"batteryCharging": true`, `"cpuCategory": "high"`  
- 설치는 반드시 `&lt;head&gt;` 최상단에 **인라인 `&lt;script&gt;`** 로 삽입해야 함  
  - 패키지 매니저, 외부 JS 파일 형태로는 실행 불가  
- [데모](https://csswizardry.com/Obs.js/demo/) 참고

## Comments


_No public comments on this page._