내 기기·화면 정보
현재 기기/화면 정보를 봅니다.
설명
현재 사용 중인 기기의 화면 해상도·창 크기·픽셀비율·브라우저 정보를 보여줍니다.
관련 도구
지금 접속 중인 기기의 화면 해상도, 브라우저 종류 및 버전, 운영체제, 기기 유형(PC·모바일·태블릿) 등 환경 정보를 즉시 확인할 수 있는 도구입니다. 웹 개발·디자인 작업 중 기기별 레이아웃 이슈를 재현하거나, 고객 지원 시 상대방의 환경을 파악해야 할 때 유용합니다.
사용 방법
페이지를 열면 별도의 입력 없이 자동으로 현재 기기·브라우저 정보가 표시됩니다. 화면 해상도(예: 1920×1080), 기기 픽셀 비율(DPR, 예: 2.0), 브라우저 이름·버전, 운영체제, 화면 방향(가로·세로) 등이 항목별로 나열됩니다. 스마트폰에서 열면 모바일 기기 정보가, PC에서 열면 데스크톱 정보가 표시되므로 테스트할 기기에서 직접 이 페이지를 열어 확인하는 방식으로 사용합니다.
이럴 때 유용해요
반응형 웹 디자인 작업 시 특정 해상도에서 레이아웃이 깨진다는 신고를 받았을 때, 해당 사용자에게 이 페이지 URL을 공유해 실제 환경 수치를 빠르게 파악할 수 있습니다. 또한 고해상도 디스플레이(DPR 2.0 이상, 예: Retina 디스플레이)에서 이미지가 흐릿하게 보이는 문제를 진단할 때 기기 픽셀 비율을 확인하는 데 유용합니다. 브라우저 호환성 테스트를 수행할 때 어떤 버전의 브라우저를 사용 중인지 정확히 기록해두고 싶을 때도 이 도구로 빠르게 확인할 수 있습니다.
알아두면 좋은 점
화면 해상도와 브라우저 뷰포트(Viewport) 크기는 다릅니다. 해상도는 모니터의 물리적 픽셀 수이고, 뷰포트는 브라우저 창 안에서 실제로 콘텐츠가 표시되는 영역의 크기입니다. CSS 미디어 쿼리는 뷰포트 크기를 기준으로 작동하므로, 반응형 레이아웃을 디버깅할 때는 뷰포트 수치를 참고해야 합니다. 이 도구는 브라우저가 제공하는 정보를 읽어 표시하며, 어떤 데이터도 서버로 전송되지 않으므로 개인정보 걱정 없이 사용할 수 있습니다.
자주 묻는 질문
화면 해상도와 뷰포트 크기 중 어느 것이 웹 디자인에서 더 중요한가요?
DPR(기기 픽셀 비율)이 2.0이면 어떤 의미인가요?
표시된 User-Agent 정보를 어디에 활용할 수 있나요?
같은 PC인데 브라우저마다 해상도가 다르게 나오는 이유가 있나요?
이 정보가 서버에 저장되거나 추적에 사용되나요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
이 도구가 실제로 보여주는 값
"내 기기·화면 정보"는 지금 접속한 브라우저가 스스로 알고 있는 값을 그대로 읽어 화면에 정리해 줍니다. 대표적으로 모니터 전체 해상도(screen.width × screen.height), 브라우저 창이 실제로 콘텐츠를 그리는 뷰포트 크기(window.innerWidth × innerHeight), 픽셀 밀도 배율(devicePixelRatio), 색상 심도, 브라우저 종류와 버전, 운영체제 힌트를 보여줍니다. 별도 설치나 로그인 없이 페이지를 여는 순간 자바스크립트가 이 값을 읽어 표시하므로, 서버로 아무것도 전송하지 않고 내 기기 안에서만 확인됩니다.
해상도·뷰포트·픽셀배율이 다른 이유
많은 분이 "내 모니터는 1920×1080인데 왜 다른 숫자가 뜨지?"라고 묻습니다. 세 가지 값이 서로 다른 것을 재기 때문입니다. 아래 표를 보면 구분이 쉽습니다.
| 항목 | 의미 | 읽는 값 |
|---|---|---|
| 화면 해상도 | 모니터·기기 패널 전체 크기 | screen.width / height |
| 뷰포트 | 브라우저 창에서 실제 그려지는 영역 | innerWidth / innerHeight |
| 픽셀배율(DPR) | CSS 1픽셀이 물리 픽셀 몇 개인지 | devicePixelRatio |
예를 들어 고해상도 노트북이나 스마트폰은 DPR이 2 또는 3입니다. CSS상 390×844로 보이는 아이폰이 실제 패널은 그 2~3배 픽셀을 씁니다. 또 브라우저 배율을 125%로 키우면 뷰포트 숫자가 줄어드는데, 이는 화면이 고장 난 게 아니라 확대 배율만큼 그려지는 영역이 좁아졌기 때문입니다. 이 도구로 세 값을 한눈에 비교하면 원인을 바로 알 수 있습니다.
이럴 때 쓰면 편합니다
웹사이트나 블로그 스킨을 만들 때 반응형 기준점(브레이크포인트)을 잡으려면 실제 방문 기기의 뷰포트 폭이 필요합니다. 원격 지원을 받을 때 상대에게 "제 해상도는 이거예요"라고 정확히 알려줄 수도 있습니다. 중고 노트북·모니터를 살 때 판매 글의 해상도가 맞는지 즉석에서 검증하거나, 게임·영상 설정을 맞출 때 현재 배율과 색상 심도를 확인하는 용도로도 좋습니다. 캡처한 화면이 흐릿할 때 DPR 값을 보면 고밀도 화면이라 캡처 크기가 커지는 이유도 이해됩니다.
정확하게 읽는 팁
브라우저 확대/축소를 100%로 되돌린 뒤 값을 보면 모니터 원래 해상도와 뷰포트 차이를 깔끔하게 비교할 수 있습니다(단축키 Ctrl+0). 스마트폰에서는 세로·가로를 돌리면 뷰포트 폭과 높이가 바뀌므로, 화면을 회전한 뒤 페이지를 새로고침해 다시 읽으면 됩니다. 창을 반만 차지하게 배치하면 뷰포트만 줄고 화면 해상도는 그대로라는 점도 확인해 보세요.
자주 묻는 질문
표시되는 정보가 서버로 전송되나요?
아니요. 값은 브라우저가 자바스크립트로 자기 자신을 읽어 화면에 표시할 뿐이며, 이 페이지는 그 정보를 외부로 보내지 않습니다.
브라우저 종류·버전은 100% 정확한가요?
브라우저가 스스로 밝히는 정보(User-Agent 등)를 기반으로 하기 때문에 대부분 맞지만, 확장 프로그램이나 개인정보 보호 기능이 이 값을 임의로 바꾸거나 뭉뚱그리면 실제와 다르게 나올 수 있습니다.
화면 해상도가 실제 모니터보다 작게 나와요.
브라우저 확대 배율이 100%보다 크거나, 운영체제의 디스플레이 배율(예: 125%, 150%) 설정 때문입니다. 배율을 100%로 맞춘 뒤 다시 확인하면 패널 원래 해상도에 가까운 값이 나옵니다.
같은 폰인데 친구와 뷰포트 숫자가 달라요.
브라우저 종류, 글자 크기 접근성 설정, 주소창·툴바가 차지하는 높이가 기기마다 달라 뷰포트가 조금씩 차이 납니다. 픽셀배율까지 함께 보면 두 기기가 실제로는 비슷한 패널인지 판단할 수 있습니다.