[WEB] 디스플레이 해상도

디스플레이 해상도가 높을 수록

브라우저는 더 많은 내용을 한 번에 보여줄 수 있다.

 

## 개발 진행할 때 고려할 점

 

✅ 다양한 해상도에 지원되어야 한다

: 사용자마다 해상도와 배율 설정이 다를 수 있다.

EX) 고해상도 유저(2560x1440, 4K 해상도), 노트북 사용자(1366x768, 낮은 해상도)

 

✅ 반응형 웹 디자인 필요하다.

: 다양한 화면 크기(모바일, 태블릿, 데스크톱)와 해상도에서 사용자에게 최적의 경험을 제공해야 한다. 화면 크기에 맞게 UI가 자동으로 조정되도록 해야 한다.

 

🤔🤔🤔

그렇다면 적응형 웹 디자인은 안 쓰이는가???

: 아주 가끔 쓰인다. 로딩 속도 빠름, 특정 해상도에서 최적화된 정밀한 제어 가능.

But, 320px, 768px, 1024px에 대한 고정 레이아웃을 개발해둔 상태에서

사용자 디스플레이가 500px이라면 320px이나 768px의 고정 레이아웃이 보여진다.

1) 320px인 경우

320px에 맞춰진 레이아웃이 확대되어 보일 수 있다. 텍스트, 이미지, 버튼 등의 요소가 320px에 맞춰져 있어, 사용자 디스플레이에서 빈 공간이 생기거나 디자인 요소가 부자연스럽게 커진다.

2) 768px인 경우

화면에 비해 너무 많은 콘텐츠가 표시된다. 요소가 작아 보일 수 있고, 스크롤이 많이 발생할 수 있다.

=> 고정 레이아웃의 한계: UI가 부자연스럽게 표시되거나, 화면 요소들이 잘려서 보이거나 크기 비율이 맞지 않는 등의 문제가 발생할 수 있다.

@media screen and (max-width: 320px) {
  /* 320px 이하 해상도에서 적용될 스타일 */
}

@media screen and (max-width: 768px) {
  /* 768px 이하 해상도에서 적용될 스타일 */
}

@media screen and (max-width: 1024px) {
  /* 1024px 이하 해상도에서 적용될 스타일 */
}

적응형 웹 디자인 예시. 고정된 레이아웃의 스타일에 맞춘다.

 

 

 

✅ 디자인, 개발 시작 시

타겟 사용자의 디스플레이 지정.

해상도 1920x1080. 1x 디자인 시작.

 

내 디스플레이 125%, 해상도 1920x1080.

화면 크기는 1366x768?

배율 125% 적용? -> 해상도 1800x600

미세 조정(업스케일링) -> 해상도 1920x1080.

 

=> 어찌됐든 1x로 피그마 디자인 해야 하고, 해당 디자인이 압축되어 화면에 렌더링 됨.

결론: 디자인과 개발 시에 해상도는 딱히 고려할 필요 없다.

 

https://chatgpt.com/share/66f267ca-4ffc-800a-abac-37db2b1ea3a7

ChatGPT - 디자인 프레임 크기 결정

 

 

=> 피그마 협업 시 1배수 디자인 고려할 점(해상도, 배율, 뷰포트)

 

 

✅ 대표적인 데스크탑 해상도 및 뷰포트 기준

### 주요 데스크탑 해상도:

• 1920x1080 (FHD): 현재 가장 많이 사용되는 해상도 중 하나입니다. 대부분의 모니터에서 표준 해상도로 사용되며, 일반적인 콘텐츠와 UI가 잘 표현될 수 있습니다.
• 1440x900: 다소 작은 화면을 가진 모니터에서 사용하는 해상도입니다. 특히 일부 구형 모니터나 노트북에서 많이 사용됩니다.
• 2560x1440 (QHD): FHD보다 더 높은 해상도를 제공하며, 고해상도 모니터에서 사용됩니다.
• 3840x2160 (4K UHD): 고해상도 환경으로, 콘텐츠가 많을 때도 선명하게 표시될 수 있는 해상도입니다.

 

### 대표적인 뷰포트 크기:
해상도와 다르게 뷰포트는 실제로 브라우저 창이 차지하는 크기를 의미합니다. 화면 해상도가 높더라도 브라우저가 전체 화면을 차지하지 않을 수 있기 때문에, 브라우저에서 보이는 실제 콘텐츠 영역을 고려해야 합니다.

• 1920x1080 해상도에서의 뷰포트: 일반적으로 브라우저 툴바 등을 제외하고 남는 실제 뷰포트 영역은 약 1366x768 ~ 1440x900 사이일 수 있습니다.
• 1440x900 해상도에서의 뷰포트: 브라우저가 풀스크린으로 사용된다면 약 1280x800 정도의 뷰포트가 나올 수 있습니다.

 

✅ 데스크탑 기준의 최적화 전략

: 특정 해상도에 맞게 뷰포트를 고정하거나, 레이아웃을 조정하는 방법을 선택할 수 있습니다.

 

1) 1440px 기준으로 디자인
대부분의 데스크탑 사용자에게 적합한 기준입니다. 1440px 폭을 기준으로 레이아웃을 설계하면 콘텐츠가 균형 있게 배치되며, 화면이 더 커지면 여백이 더 늘어날 수 있습니다.

2) 최대 폭을 설정
너무 큰 화면에서는 콘텐츠가 지나치게 넓게 퍼지는 것을 방지하기 위해, max-width: 1440px 또는 1200px 정도로 최대 너비를 제한하는 것이 좋습니다. 이렇게 하면 화면이 더 커지더라도 레이아웃이 지나치게 확장되지 않고, 가운데 정렬되어 보기 좋게 유지됩니다.

 

결론:

1920x1080(FHD) 해상도를 기준으로 디자인하되, 뷰포트 최대 폭을 1440px 또는 그 이하로 설정하고, 너무 큰 화면에서는 중앙 정렬을 통해 콘텐츠가 넓게 퍼지지 않도록 합니다.