웹 화면 디자인 크기는

어떻게 결정 하나요?

2024.04.09(화) 

웹 화면 구성을 하는 데에 정답은 없지만 기본적인 구조를 이해하면 훨씬 작업하기 편하실 것 같아 관련 정보를 공유드립니다. 우선 아래 사진과 같이 대부분의 웹사이트는 전체 폭과 컨테이너로 이루어지며 컨테이너 안에 카드 형식의 콘텐츠, 버튼, 그래픽 요소들이 들어간다고 이해하시면 좋을 것 같아요. 

*사진출처: ddoing.co.kr

아래 통계 데이터를 보면 2024년 3월 기준,  1920*1080 화면의 사용자가 23.07%로 가장 많지만 1366*768 화면을 이용하는 사용자도 13.71%가 되기 때문에 고려해야 할 필요가 있습니다. 1920 또는 1440사이즈 기준으로 디자인을 많이 하게 됩니다.

*사진출처: statcounter.com

레이아웃 설정하기


본격적으로 디자인 작업을 진행하기 전 레이아웃 가이드를 설정합니다. 피그마(Figma)기준으로 레이아웃 설정 시 
컨테이너(Container) 값과 마진(Margin)값에 따라 거터(Gutter, 칼럼들 간의 간격), 칼럼(Column)들을 설정합니다. 

12칼럼을 자주 사용하는 이유는 3과 4의 최소 공배수로 작업하기에 편리함이 있다는 이유로 자주 활용하지만 목적에 따라 칼럼 개수, 여백 등을 조정하셔도 됩니다. 

브레이크 포인트(Break Point)


데스크탑, 노트북, 모바일, 테블릿 등과 같은 다양한 디바이스를 사용하는 유저를 고려하여 화면 크기에 맞춰 적절한 레이아웃을 노출시킬 수 있는 반응형 웹 디자인을 하고 계시는 분도 많이 계시죠? 레이아웃이 변경되는 기준값을 정하는 것을 '브레이크 포인트(Break Point)' 라고 하는데요, 반응형 웹디자인을 진행할 경우 브레이크 포인트를 잡아주는 것도 중요합니다.  


아래 사진과 같이 데스크탑에서 보는 화면과  모바일로 보는 화면 레이아웃이 달라지는 것을 볼 수 있습니다. 

특정 화면에서 보이는 레이아웃을 다르게 하기 위해서는 브레이크 포인트 설정이 필요한데 기준점을 정하는 것에 

정답이 없기에 이 부분은 내부적으로 이야기 후 지정하시면 됩니다. 

피그마(Figma) 사용하시면 'Breakpoints'라는 플러그인을 활용해 보셔도 좋을 것 같습니다.

웹 사이트 작업시 알아두면 좋은 레이아웃 시스템에 대해  알아보았습니다. 위 내용 중 수정사항 혹은 궁금한 부분이 
있으시면 아래 '궁금해요'링크로 공유 주세요. 확인 후 관련 콘텐츠로 공유 드릴 수 있도록 하겠습니다.