웹디자인 권장 해상도 총정리: PC·태블릿·모바일

홈페이지를 디자인할 때, 어떤 화면 크기를 기준으로 작업해야 하는지는 가장 먼저 정해야 할 사항입니다. 이 가이드에서는 2025년 기준 기기별 디자인 작업 사이즈, 브레이크포인트, 콘텐츠 영역 설정 방법을 정리합니다.

웹디자인 작업 사이즈란?

웹디자인 작업 사이즈는 디자인 툴(Figma 등)에서 캔버스(아트보드)의 가로·세로 크기를 말합니다. PC, 태블릿, 모바일 각각에 맞는 작업 사이즈를 설정한 후, 그 안에서 레이아웃을 구성합니다.

기기마다 화면 해상도가 다르기 때문에, 가장 많이 사용되는 해상도를 기준으로 작업하는 것이 일반적입니다. 2025년 현재 한국에서 가장 높은 점유율을 차지하는 PC 해상도는 1920×1080px입니다.

기기별 디자인 작업 사이즈 기준

콘텐츠 영역(컨테이너) 설정

캔버스 가로 사이즈와 콘텐츠 영역(컨테이너)은 다릅니다. 캔버스가 전체 화면이라면, 컨테이너는 그 안에서 텍스트와 이미지가 실제로 배치되는 가운데 영역입니다.

브레이크포인트 설정 기준

브레이크포인트(Breakpoint)는 반응형 웹에서 화면 크기에 따라 레이아웃이 변경되는 기준점입니다. 2025년 현재 가장 보편적으로 사용되는 브레이크포인트는 다음과 같습니다.

기업 홈페이지의 경우, PC와 모바일 2단계로 나누어 대응하는 경우가 많습니다. 기준점을 768px 또는 1024px로 설정하고, 이 이하에서는 모바일 레이아웃으로 전환되도록 구성합니다.

작업 시 주의할 점

• 실제 뷰포트와 해상도는 다릅니다: 1920×1080 모니터라도 브라우저 상단바, 운영체제 작업표시줄을 제외하면 실제 뷰포트 높이는 약 900~960px 정도입니다. 스크롤 없이 보이는 영역(Above the Fold)에 핵심 정보를 배치하세요.
• 이미지는 2배수로 준비하세요: 레티나(고해상도) 디스플레이에서 이미지가 선명하게 표시되려면, 표시 크기의 2배 해상도로 이미지를 제작해야 합니다.
• 요소 크기는 8의 배수를 권장합니다: 아이콘, 여백, 버튼 크기 등을 8의 배수(8px, 16px, 24px, 32px…)로 설정하면 다양한 해상도에서 깔끔하게 렌더링됩니다.
• 최소 지원 해상도를 먼저 정하세요: 2025년 기준 PC는 1280px, 모바일은 360px을 최소 지원 기준으로 설정하면 대부분의 사용자 환경을 커버할 수 있습니다.

정리