[UI/UX] 해상도에서 꼭 알아야 할 개념
웹사이트나 앱을 디자인할 때 해상도는 빼놓을 수 없는 중요한 요소입니다.
사용자의 화면 크기와 디바이스 성능에 따라 디자인의 품질과 사용 경험(UX)이 달라지기 때문인데요.
오늘은 이와 관련된 꼭 알아야 할 개념을 쉽게 설명드리겠습니다!
우리 눈으로 보는 이미지 같지만 자세히 들여다보면 네모난 색의 집합입니다. Pixel은 웹사이트 제작을 위해서 꼭 알아야 하는 개념입니다.
우리는 아래와 같이 강아지 코를 확대 하였을 때 색으로 칠해진 네모난 박스 크기 하나를
1 Pixel이라고 부르는 단위를 씁니다.
출처 : Design Base그 다음으로 알아야 할 개념은 해상도입니다.
1. 해상도란 무엇인가요?
해상도는 화면에 표시되는 픽셀(Pixel)의 수를 뜻합니다.
픽셀: 디지털 화면을 구성하는 가장 작은 단위.
표기 방식: 가로 픽셀 × 세로 픽셀.
예) 1920×1080 (Full HD), 3840×2160 (4K).
✔ 왜 중요할까요?
해상도가 높을수록 화면이 더 선명하고 디테일하게 보입니다.
하지만 해상도가 높으면 이미지 용량이 커지기 때문에 디바이스 성능과 로딩 속도를 고려해야 합니다.
2. PPI와 DPI: 뭐가 다를까요?
PPI (Pixels Per Inch): 화면에서 1인치당 몇 개의 픽셀이 있는지 나타냅니다.
DPI (Dots Per Inch): 인쇄물 해상도를 나타내는 단위입니다.
PPI가 높을수록 화면이 더 부드럽고 깨끗하게 보입니다.
예) 스마트폰의 Retina 디스플레이는 PPI가 높아 픽셀이 눈에 띄지 않음.
DPI (Dots Per Inch): 인쇄물 해상도를 나타내는 단위.
'점(Dot)' 단위로 잉크를 뿌리기 때문에 Dot 단위로 해상도를 구성 DPI라는 용어가 사용됩니다. 디지털보다는 프린트 작업에서 중요합니다.
✔ 요약
PPI는 디지털 화면, DPI는 인쇄물에서 사용됩니다.
3. 반응형 디자인(Responsive Design)이란?
요즘은 사람들이 모바일, 태블릿, 데스크톱 등 다양한 기기에서 웹사이트를 방문합니다.
반응형 디자인은 이런 다양한 화면 크기에 맞춰 레이아웃을 자동으로 조정하는 기술입니다.
아래처럼 화면에 따라 컨텐츠들이 변하게 됩니다.
출처 : 넥스트리반응형 디자인은
아래와 같이 창을 늘리고 줄임에 따라 안에 들어간 컨턴츠가 자동으로 넓이 조절이 됩니다.
✔ 중요한 이유
데스크톱에서 잘 보이던 디자인이 모바일에서 깨지면, 사용자가 쉽게 이탈합니다.
미디어 쿼리 같은 CSS 기술을 활용해 기기별로 최적화된 화면을 제공합니다.
4. Retina 디스플레이와 고해상도
애플의 Retina 디스플레이는 해상도가 매우 높아 픽셀이 눈에 보이지 않을 정도입니다.
아래와 같이 레티나 디스플레이는 눈에 픽셀로 보이지 않게끔 만든 애플의 디스플레이 기술입니다.
예) 아이폰, 맥북 화면.
✔ 디자이너가 알아야 할 팁
이미지를 2배(2x), 3배(3x) 크기로 준비하세요.
예: 100px 버튼 → Retina용으로는 200px 버튼 준비.
5. 화면 비율(Aspect Ratio)과 픽셀 밀도
화면 비율: 가로와 세로 크기의 비율.
예) 16:9(와이드), 4:3(옛날 TV 화면).
픽셀 밀도(PPI): 같은 화면 크기에서 얼마나 많은 픽셀이 있는지 나타냄.
밀도가 높을수록 화면이 더 선명해집니다.
✔ 실제 사례
4K TV는 픽셀 밀도가 높아 가까이 봐도 화면이 깨지지 않습니다.
스마트폰에서는 화면이 작아도 밀도가 높아 선명하게 보이는 이유가 여기에 있습니다.
6. CSS 픽셀과 디바이스 픽셀의 차이
웹사이트에서 디자인할 때는 CSS 픽셀과 디바이스 픽셀의 차이를 알아야 합니다.
디자인을 하지만 실제로 화면에 나타나는 픽셀과 차이가 있을 수 있습니다.
CSS 픽셀: 디자이너가 사용하는 논리적 단위.
디바이스 픽셀: 실제 화면에 표시되는 물리적 픽셀.
DPR (Device Pixel Ratio): 디바이스 픽셀과 CSS 픽셀의 비율.
예) DPR = 2 → 1 CSS 픽셀 = 2×2 디바이스 픽셀.
✔ Retina 디스플레이에서 꼭 알아야 할 점
고해상도 화면에서는 더 큰 이미지를 준비해야 선명하게 보입니다.
한눈에 보는 요약
해상도: 픽셀 수가 높을수록 화면이 선명.
PPI와 DPI: 디지털(PPI) vs 인쇄물(DPI).
반응형 디자인: 모든 기기에 맞게 화면 최적화.
고해상도 준비: 2x, 3x 이미지 제작 필수.
이미지 최적화: 빠른 로딩을 위해 최적화된 포맷과 기술 사용.
디자인 작업에서 해상도를 고려하면, 고객에게 더 나은 경험을 제공할 수 있습니다.
특히 요즘처럼 다양한 기기와 고해상도 화면이 늘어나는 시대에는 꼭 알아야 할 기본 개념입니다.
궁금한 점이 있다면 댓글로 남겨주세요!
[CodeBerry 1대1 상담]
https://open.kakao.com/o/sBzFy4qg
* 웹사이트 UI/UX 디자인 전문업체
* 앱/웹사이트 제작 전문업체
코드베리 웹 에이전시님의 오픈프로필
안녕하세요. Creative WEB 개발 에이전시 입니다. 대기업 출신의 8년차 기획자와 디자이너 그리고 개발자가 모여 만든 에이전시 입니다.
#UI #UX #해상도 #웹사이트제작 #웹사이트개발 #홈페이지제작 #홈페이지제작업체
