[Web] 디스플레이 해상도에 따른 실 사용자 뷰포트 고려

 

 

✅ 디자인 툴 vs 실제 브라우저 화면 차이

항목	디자인 툴 (Figma 등)	실제 브라우저 (PC 기준)
해상도	1440×1024, 1920×1080 등 프레임 기준	대부분 1366×768, 1920×1080 등
사용 가능 높이	전체 해상도 기준	주소창 + 북마크바 + 탭바 등으로 약 150~200px 손실
실제 뷰포트 높이	1080px 기준 약 800~900px 정도	(노트북은 768px 이하도 빈번)

예시: 1920×1080 모니터 기준, 브라우저 크롬(주소창, 탭 등)을 제외하면, 실제 뷰포트는 약 890~920px 수준.

=> 실제 브라우저에서의 뷰포트 높이는 디자인 프레임보다 상당히 작다.

 

✅ 실무 기준: 실제 사용자 높이 기준은?

• UI/UX 디자이너나 퍼블리셔는 보통 세로 기준 800px 또는 900px을 최소 기준 높이로 잡습니다.
• 가장 낮은 해상도 기준:
  → 1366×768 또는 1280×800
  → 실제 사용 가능한 뷰포트 높이는 600~700px 수준
  → 그래서 모바일/PC 공통 대응 시 min-height: 600~700px 정도로 잡는 경우도 많음

스크린 높이(100vh):      |----------------------|  ← 브라우저 화면 전체
디자인 기준선(700px):    |--------------|          ← 로그인 박스 기준
최종 적용:               min-height: min(600px, 100vh)

→ 실제 뷰포트가 600px 이상이면 → 600px이 적용됨
→ 작으면 → 뷰포트에 맞게 줄어듦 (100vh 적용)

 

📊 해상도별 실사용 영역(뷰포트 높이) 예시

실제 콘텐츠 높이, 뷰포트(viewport height) = 해상도 전체 높이 − 브라우저 크롬(탭, 주소창, 북마크 바 등)

해상도	총 높이	실제 콘텐츠 영역(뷰포트 높이) “사용자가 실제로 보는 화면 높이”	설명
1366×768	768px	약 600~650px	노트북 표준 해상도. 화면이 작아 scroll 필수
1920×1080	1080px	약 880~950px	데스크탑 표준 해상도. 로그인 박스 + 푸터 포함 가능
1440×900	900px	약 750~800px	맥북 등 일부 노트북에서 사용
1280×720	720px	약 580~620px	구형 노트북/넷북 해상도

✅ 그러면 Figma에서 어떻게 디자인하나?

① 프레임 선택

• 1366×768 → Frame 사이즈는 1366×768
• 1920×1080 → Frame 사이즈는 1920×1080

② 실제 뷰포트 기준선 설정 (중요!)

• 예를 들어 1366×768에서는 y = 600px까지가 사용자 뷰포트
  → 이 선 위에 로그인 박스, 아래에 푸터 (스크롤 시 보이게) 배치

→ 디자인할 때도 이 기준을 Frame 내부 기준선으로 삼아 레이아웃을 구성

디자인 기준선(Baseline): 디자인 시 레이아웃 요소를 배치할 때 참고하는 높이 기준 값

 

 

✅ 실무에서는 어디에 맞추나?

• 기본 기준은 “최저 해상도 사용자를 기준으로 콘텐츠를 설계”
  • 즉, 1366×768 기준으로 UI가 600px 안에 들어야 함.
  • 푸터는 화면 스크롤 시 보이도록 처리하는 게 일반적 (푸터/부가 정보는 scroll로 넘어가도 무방)
• 높은 해상도(1920+)에서는 여유롭게 보이고, 여백이나 padding으로 정렬 보완