화면 크기 확인이란?
화면 크기 확인(koreaeu.kr)은 현재 브라우저 창 크기와 모니터 해상도를 실시간으로 측정하는 무료 온라인 도구입니다.
페이지에 접속하면 브라우저 창 너비와 높이, 모니터 해상도, 뷰포트 크기, 디바이스 픽셀 비율(DPR), 색상 깊이, 기기 방향, 터치 지원 여부 등을 한눈에 확인할 수 있습니다. 창 크기를 변경하면 모든 값이 실시간으로 업데이트됩니다.
반응형 웹을 개발하거나 디자인할 때, 내 화면이 정확히 몇 픽셀인지 바로 확인하세요.
주요 기능
| 기능 | 설명 |
|---|---|
| 브라우저 창 크기 | 현재 브라우저 창의 너비x높이를 픽셀 단위로 표시 |
| 모니터 해상도 | 모니터의 실제 화면 해상도를 자동 감지 |
| 뷰포트 크기 | 웹 콘텐츠가 표시되는 영역의 정확한 크기 |
| 디바이스 픽셀 비율(DPR) | 물리적 픽셀과 CSS 픽셀의 비율 표시 |
| 색상 깊이 | 모니터의 색상 표현 비트 수 확인 |
| 기기 방향 | 가로(Landscape) / 세로(Portrait) 모드 감지 |
| 터치 지원 | 터치스크린 지원 여부 자동 판별 |
| 실시간 업데이트 | 창 크기 변경 시 모든 값이 즉시 반영 |
| 기기 비교 | 현재 창 크기와 일반 기기(iPhone, iPad 등) 해상도 비교 |
이용 방법
- 접속: koreaeu.kr에 접속하면 자동으로 화면 정보가 표시됩니다
- 실시간 확인: 브라우저 창 크기를 드래그하면 값이 실시간으로 변경됩니다
- 상세 정보: 뷰포트, DPR, 색상 깊이 등 심화 정보를 확인합니다
- 기기 비교: 일반 기기 해상도 테이블에서 현재 기기와 비교합니다
팁: 브라우저 창 크기를 드래그하면서 CSS 미디어쿼리 브레이크포인트(768px, 1024px 등)를 정확히 테스트할 수 있습니다. 반응형 레이아웃이 언제 전환되는지 실시간으로 확인해보세요.
해상도와 뷰포트의 차이
웹 개발에서 자주 혼동되는 두 개념의 차이를 정리합니다.
| 구분 | 화면 해상도 | 뷰포트 |
|---|---|---|
| 의미 | 모니터의 실제 물리적 픽셀 수 | 브라우저에서 웹 콘텐츠가 표시되는 영역 |
| 예시 | 1920x1080 | 1536x754 (브라우저 도구모음 제외) |
| 변경 | 모니터 설정에서 변경 | 브라우저 창 크기에 따라 변경 |
| CSS 기준 | screen.width / screen.height | window.innerWidth / window.innerHeight |
참고: 레티나 디스플레이(DPR 2x)에서는 CSS 1px이 물리적 2px에 해당합니다. 예를 들어 MacBook Pro의 CSS 해상도는 1440x900이지만, 실제 물리적 해상도는 2880x1800입니다. 이미지가 흐릿하게 보이지 않으려면 DPR을 고려해 2x 크기의 이미지를 사용해야 합니다.
기기별 해상도 비교
| 기기 | 뷰포트(CSS) | DPR |
|---|---|---|
| iPhone SE | 375x667 | 2x |
| iPhone 14 | 390x844 | 3x |
| iPhone 14 Pro Max | 430x932 | 3x |
| iPad Air | 820x1180 | 2x |
| iPad Pro 12.9인치 | 1024x1366 | 2x |
| MacBook Air 13인치 | 1440x900 | 2x |
| Full HD 모니터 | 1920x1080 | 1x |
| 4K 모니터 | 3840x2160 | 1x~2x |
반응형 미디어쿼리 기준점
반응형 웹 디자인에서 주로 사용하는 브레이크포인트입니다.
| 기준 | 너비 | 대상 기기 |
|---|---|---|
| 모바일 | ~767px | 스마트폰 |
| 태블릿 | 768px~1023px | iPad, 태블릿 |
| 소형 데스크톱 | 1024px~1439px | 노트북, 소형 모니터 |
| 대형 데스크톱 | 1440px~ | 대형 모니터, 4K |
이 기준점은 Tailwind CSS, Bootstrap 등 주요 CSS 프레임워크에서도 유사하게 사용됩니다. 화면 크기 확인에서 창 크기를 조절하면서 브레이크포인트를 정확히 테스트하세요.
이런 분들이 사용합니다
| 대상 | 활용 사례 |
|---|---|
| 웹 개발자 | 반응형 레이아웃 개발 시 정확한 브레이크포인트 확인 |
| UI/UX 디자이너 | 디자인 시안의 기준 해상도 확인, 기기별 대응 계획 |
| QA 엔지니어 | 크로스 브라우저 테스트 시 화면 크기 기록 |
| 퍼블리셔 | CSS 미디어쿼리 작성 시 실시간 크기 확인 |
| 학생 | 웹 개발 수업에서 반응형 디자인 개념 학습 |
사용자 후기
- 김정민 (프론트엔드 개발자): "반응형 개발할 때 브라우저 창 크기를 실시간으로 보면서 미디어쿼리를 조정해요. 필수 도구입니다."
- 이수현 (UI 디자이너): "디자인 시안 만들 때 타겟 기기의 해상도를 빠르게 비교할 수 있어서 좋아요."
- 박건호 (QA): "테스트 리포트에 화면 크기를 기록할 때 사용해요. DPR까지 확인되니까 레티나 이슈도 파악 가능해요."
- 정예린 (퍼블리셔): "CSS 작업하면서 브레이크포인트가 정확히 몇 px인지 바로 확인합니다."
- 최동훈 (학생): "웹 디자인 수업에서 반응형 개념을 이해하는 데 도움이 됐어요."
- 한서윤 (풀스택 개발자): "기기 비교 테이블이 유용해요. 현재 기기가 자동으로 하이라이트돼서 편합니다."
자주 묻는 질문
- 화면 해상도와 뷰포트의 차이는? 해상도는 모니터의 실제 픽셀 수이고, 뷰포트는 브라우저에서 웹 콘텐츠가 표시되는 영역의 크기입니다. 브라우저 도구 모음, 탭, 주소창 등을 제외한 순수 콘텐츠 영역이 뷰포트입니다.
- DPR(디바이스 픽셀 비율)이란? 물리적 픽셀과 CSS 픽셀의 비율입니다. DPR 2는 CSS 1px이 물리적 2px에 해당한다는 의미입니다. 레티나 디스플레이는 DPR이 2 이상입니다.
- 반응형 디자인에서 왜 화면 크기가 중요한가요? 사용자의 기기에 따라 레이아웃을 최적화하려면 정확한 화면 크기를 알아야 합니다. 모바일과 데스크톱의 레이아웃이 다르듯, 브레이크포인트를 정확히 설정해야 좋은 사용자 경험을 제공할 수 있습니다.
- 미디어쿼리 기준점은 어떻게 정하나요? 일반적으로 768px(태블릿), 1024px(소형 데스크톱), 1440px(대형 데스크톱)을 기준으로 합니다. Tailwind CSS, Bootstrap 등 프레임워크의 기본값을 참고하면 됩니다.
- 색상 깊이는 무엇인가요? 모니터가 표현할 수 있는 색상의 비트 수입니다. 24비트는 약 1,670만 색, 30비트 이상은 HDR을 지원합니다.
- 개인정보가 수집되나요? 아닙니다. 모든 측정은 브라우저의 JavaScript Web API로 처리되며, 서버로 데이터가 전송되지 않습니다.
- 모바일에서도 사용 가능한가요? 네, 모바일 브라우저에서도 화면 크기, DPR, 터치 지원 여부 등을 확인할 수 있습니다.
함께 사용하면 좋은 도구
| 도구 | 설명 | 링크 |
|---|---|---|
| 정규식 테스터 | 정규표현식 실시간 테스트 | gimo.kr |
| URL 인코더 | URL 인코딩/디코딩 | clickfor.kr |
| 타임스탬프 변환기 | Unix 타임스탬프와 날짜 변환 | eastr.kr |
| Base64 인코더 | 텍스트와 이미지 Base64 변환 | companys.kr |
| 단위 변환기 | 각종 단위 변환 | cacaoio.kr |
사이트 정보
| 항목 | 내용 |
|---|---|
| 서비스명 | 화면 크기 확인 |
| 사이트 | koreaeu.kr |
| 가격 | 100% 무료 |
| 회원가입 | 불필요 |
| 측정 항목 | 브라우저 크기, 해상도, 뷰포트, DPR, 색상 깊이, 방향, 터치 |
| 업데이트 | 창 크기 변경 시 실시간 반영 |
| 기기 비교 | iPhone, iPad, MacBook 등 8종 해상도 비교 |
| 보안 | 클라이언트 사이드 처리 (서버 전송 없음) |
| 지원 환경 | PC, 모바일, 태블릿 (모든 브라우저) |
현재 화면 크기가 궁금할 때 화면 크기 확인(koreaeu.kr)에서 실시간으로 측정하세요. 반응형 웹 개발과 디자인에 필요한 모든 화면 정보를 한 번에 확인할 수 있습니다.