JavaScript navigator · screen 완전 정리

 

 

Web Development · JavaScript

JavaScript navigator · screen

브라우저 정보와 화면 장치 정보를 읽어 화면에 출력하는 예제를 정리합니다.

시작 오늘 분석할 코드

이 예제는 window 객체가 제공하는 브라우저 정보 API를 읽고, 그 값을 화면에 출력하는 흐름을 다룹니다. 값 자체를 외우기보다 어느 객체에 어떤 정보가 들어 있는지를 구분하는 것이 핵심입니다.

<script> function printNavigator() {{ let text = "<span>appCodeName</span>: " + navigator.appCodeName + "<br>"; text += "<span>userAgent</span>: " + navigator.userAgent + "<br>"; text += "<span>language</span>: " + navigator.language + "<br>"; text += "<span>onLine</span>: " + navigator.onLine + "<br>"; text += "<span>cookieEnabled</span>: " + navigator.cookieEnabled + "<br>"; document.getElementById("div").innerHTML = text; }} function printScreen() {{ let text = "availHeight:" + screen.availHeight + "<br>"; text += "availWidth:" + screen.availWidth + "<br>"; text += "colorDepth:" + screen.colorDepth + "<br>"; text += "height:" + screen.height + "<br>"; text += "width:" + screen.width + "<br>"; document.getElementById("div").innerHTML = text; }} </script>

navigator브라우저와 실행 환경 정보를 제공하는 객체입니다.

screen사용자 화면 장치 정보를 제공하는 객체입니다.

userAgent브라우저 식별 문자열입니다.

language브라우저 기본 언어 설정입니다.

availWidth사용 가능한 화면 너비입니다.

innerHTMLHTML 문자열을 요소 안에 삽입합니다.

---

1 navigator 객체

navigator는 브라우저와 실행 환경에 관한 정보를 제공합니다. 원본 코드는 appName, userAgent, platform, language, cookieEnabled 같은 값을 문자열로 이어 붙인 뒤 div에 출력합니다.

navigator 값 읽기

→

문자열 조립

→

innerHTML 출력

---

2 navigator 주요 속성

속성	의미	주의
userAgent	브라우저 식별 문자열	정확한 판별용으로 과신하지 않습니다.
language	브라우저 기본 언어	ko-KR 같은 값이 나올 수 있습니다.
onLine	온라인 상태 여부	실제 서버 연결 성공과 다를 수 있습니다.
cookieEnabled	쿠키 사용 가능 여부	개별 사이트 차단과 별도로 봐야 합니다.
plugins.length	플러그인 개수	최신 브라우저에서는 활용도가 낮습니다.

---

3 screen 객체

screen은 사용자의 화면 장치 정보를 담습니다. 원본 예제는 availHeight, availWidth, colorDepth, pixelDepth, height, width를 읽어 출력합니다.

screen.width / height

전체 화면의 픽셀 크기를 나타냅니다.

availWidth / availHeight

작업 표시줄 같은 영역을 제외한 사용 가능 크기입니다.

---

 

반응형

 

4 화면 크기와 브라우저 크기 구분

screen 값은 모니터 장치 기준이고, 브라우저 내부 콘텐츠 영역은 window.innerWidth, window.innerHeight로 보는 편이 더 직접적입니다.

구분	기준	사용 예
screen.width	디스플레이 전체	장치 정보 표시
screen.availWidth	사용 가능한 화면	팝업 크기 계산
window.innerWidth	브라우저 내용 영역	반응형 UI 판단
document.body.clientWidth	문서 본문 영역	레이아웃 확인

---

5 innerHTML 출력 흐름

원본은 text += ...로 긴 HTML 문자열을 만들고 마지막에 div.innerHTML = text를 실행합니다. 학습 단계에서는 흐름이 잘 보이지만, 사용자 입력이 섞이면 보안 문제가 생길 수 있습니다.

navigator나 screen 값은 브라우저 제공 값이라 예제에서는 괜찮지만, 사용자 입력을 innerHTML에 직접 넣는 습관은 피하는 것이 좋습니다.

1

값 읽기navigator와 screen에서 필요한 속성을 가져옵니다.

2

문자열 조립줄바꿈을 위해 <br>을 붙입니다.

3

화면 출력대상 div의 innerHTML에 결과를 넣습니다.

---

6 브라우저 판별 주의점

과거에는 userAgent로 브라우저를 구분하는 코드가 많았지만, 요즘은 기능 지원 여부를 직접 확인하는 방식이 더 안정적입니다.

방법	특징	권장도
userAgent 문자열 비교	브라우저 이름을 추정합니다.	낮음
기능 존재 여부 확인	필요한 API가 있는지 봅니다.	높음
CSS 미디어쿼리	화면 조건에 따라 스타일을 바꿉니다.	높음
서버 로그 분석	통계 목적에 맞습니다.	상황별

---

7 자주 하는 실수

실수	증상	해결
navigator 값으로 브라우저를 단정	다른 브라우저도 비슷한 문자열을 가질 수 있습니다.	기능 감지를 우선합니다.
screen 크기를 레이아웃 기준으로 사용	브라우저 창 크기와 맞지 않습니다.	innerWidth를 함께 봅니다.
innerHTML에 사용자 입력 포함	XSS 위험이 생깁니다.	textContent를 사용합니다.
onload 함수명 오타	화면에 아무것도 출력되지 않습니다.	함수명과 호출명을 맞춥니다.
플러그인 정보에 의존	최신 브라우저에서 의미가 작습니다.	필요 기능을 직접 확인합니다.

---

8 복습 체크리스트

체크	통과 기준
navigator	브라우저 정보 객체임을 설명합니다.
screen	화면 장치 정보 객체임을 설명합니다.
출력	문자열을 조립해 div에 넣는 흐름을 이해합니다.
크기	screen 크기와 window 내부 크기를 구분합니다.
주의	userAgent와 innerHTML의 한계를 알고 있습니다.

이 장의 핵심은 브라우저 정보를 읽는 법 자체보다, 읽은 값이 어떤 기준의 정보인지 구분하는 습관입니다.

---

9 navigator 값 해석하기

navigator 값은 브라우저가 제공하는 환경 정보입니다. 하지만 모든 값이 정확한 판별을 보장하지는 않으므로, 표시용과 판단용을 나누어 생각해야 합니다.

값	표시용	판단용 주의
appName	브라우저 이름처럼 보이는 값	현대 브라우저에서는 큰 의미가 약합니다.
appVersion	버전 문자열	형식이 길고 브라우저마다 다릅니다.
platform	운영체제 계열	기기 판별에 과신하지 않습니다.
vendor	브라우저 공급자	브라우저마다 비어 있거나 다를 수 있습니다.
javaEnabled()	자바 사용 가능 여부	현재 웹 개발에서는 중요도가 낮습니다.
plugins	플러그인 목록	보안 정책상 제한적입니다.

정보 출력 예제에서는 여러 값을 보여주는 것이 목적이고, 기능 분기에는 실제 필요한 API가 있는지 확인하는 방식이 더 적합합니다.

---

10 screen 값 해석하기

screen 값은 CSS 레이아웃보다 장치 정보에 가깝습니다. 반응형 디자인을 결정할 때는 screen 값만 보지 말고 viewport 값을 함께 확인해야 합니다.

속성	설명	확인 포인트
screen.width	전체 화면 너비	브라우저 창 너비와 다를 수 있습니다.
screen.height	전체 화면 높이	작업 표시줄 포함 여부를 구분합니다.
screen.availWidth	사용 가능한 너비	OS UI 영역을 제외할 수 있습니다.
screen.availHeight	사용 가능한 높이	팝업 위치 계산에 참고할 수 있습니다.
screen.colorDepth	색상 표현 깊이	일반 UI 분기에는 거의 쓰지 않습니다.
screen.pixelDepth	픽셀 깊이	colorDepth와 비슷하게 나올 수 있습니다.

---

11 출력 방식 개선

원본은 innerHTML에 HTML 문자열을 누적합니다. 값이 고정된 브라우저 정보라 예제로는 괜찮지만, 안전한 출력 습관을 만들려면 DOM 생성이나 textContent 방식도 알아두는 것이 좋습니다.

innerHTML

HTML 태그를 포함한 문자열을 빠르게 출력합니다. 사용자 입력이 섞이면 위험합니다.

textContent

텍스트 그대로 출력합니다. 태그가 실행되지 않아 더 안전합니다.

const div = document.getElementById("div"); div.textContent = "language: " + navigator.language;

A

단순 표시텍스트만 보여주면 textContent를 사용합니다.

B

표 형태tr, td를 직접 만들거나 템플릿을 통제합니다.

C

사용자 입력 포함innerHTML 직접 삽입을 피합니다.

---

12 테스트 포인트

테스트	확인 내용
onload 실행	페이지 로드 후 div에 정보가 출력되는지 봅니다.
언어 값	navigator.language가 예상 형식인지 확인합니다.
온라인 상태	navigator.onLine 값이 true/false로 표시되는지 봅니다.
화면 크기	screen 값과 브라우저 창 크기가 다른지 비교합니다.
개발자도구	콘솔에서 같은 값을 직접 읽어봅니다.
모바일	모바일 브라우저에서 userAgent와 screen 값이 어떻게 다른지 확인합니다.

---

13 직접 바꿔보기

브라우저 정보 예제는 출력 항목을 바꾸면서 학습하기 좋습니다. 표 형태로 바꾸거나, screen과 window 값을 나란히 비교하면 차이가 더 잘 보입니다.

1

항목 줄이기userAgent, language, onLine처럼 자주 쓰는 값만 남겨봅니다.

2

화면 크기 비교screen.width와 window.innerWidth를 같이 출력합니다.

3

표로 출력속성명과 값을 두 칸으로 나누어 읽기 쉽게 만듭니다.

4

resize 이벤트 연결창 크기를 바꿀 때 innerWidth 값이 변하는지 확인합니다.

5

모바일 모드 확인개발자도구 기기 모드에서 출력값 변화를 확인합니다.

6

새로고침 비교같은 페이지를 새로고침해도 장치 기준 값은 유지되는지 봅니다.

연습	목표
language만 출력	필요한 값만 골라 읽는 연습을 합니다.
온라인 상태 표시	true/false 값을 문장으로 바꿔봅니다.
screen/window 비교	장치 크기와 뷰포트 크기를 구분합니다.
textContent 사용	HTML 문자열 없이 안전하게 출력합니다.
콘솔 확인	개발자도구에서 navigator와 screen 객체를 직접 펼쳐봅니다.
모바일 모드	기기 에뮬레이션에서 값이 어떻게 달라지는지 봅니다.
새로고침	같은 환경에서 값이 안정적으로 유지되는지 확인합니다.

console.log(navigator.language); console.log(navigator.onLine); console.log(screen.width, screen.height); console.log(window.innerWidth, window.innerHeight);

---

핵심 한 줄 요약

navigator브라우저 정보는 navigator에서 읽습니다.

screen화면 장치 정보는 screen에서 읽습니다.

주의브라우저 판별은 userAgent보다 기능 감지가 더 안정적입니다.

Tags

#JavaScript#navigator#screen#userAgent#browser#availWidth#innerHTML#DOM#window#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, navigator, screen, userAgent, browser, availWidth, innerHTML, DOM, window, 티스토리