반응형 웹디자인을 위한 최적화된 그리드 시스템 – 스케치 강좌

스케치 강좌 네 번째입니다. 이번에는 반응형 웹디자인을 위한 최적화된 그리드 만들기를 해보겠습니다.
레이아웃을 만들 때는 크게 4가지가 있습니다. 최대폭(max-width), 컨테이너(container), 단의 개수(columns), 거터와 칼럼 넓이 이렇게입니다. 영상을 통해 가장 효과적인 레이아웃을 만들려면 몇 단이 좋은지, 거터와 칼럼 값은 어떻게 하는 게 좋은지 확인해보세요.

단순히 그리드 만들어주는 기능 설명으로 끝내는 것보다 어떤 수치를 입력하는 게 반응형 웹 디자인할 때 가장 효과적인지 알려드리는 것이 100배 유익할 것을 생각해서 만들었습니다.
UI 디자인 쪽으로 입문하시는 분이라면 꼭 봐야 할 강좌 영상입니다.

*스케치 툴은 Mac OS에서만 사용이 가능합니다.

핵심 요약

반응형 웹이란 브라우저 넓이에 따라 최적화된 사이트를 말합니다. 출력물과는 달리 웹 퍼블리싱 작업이 들어가며, 코드로 구현되기 때문에 고정 값인 디자인을 잡아줄 때 PC / Tablet / Mobile 이런 식으로 최적화된 시안으로 잡아줘야 됩니다.

디자인을 하다 보면 폭이 고민될 때가 있죠? 어떻게 하는 게 좋을까요… 정답은 없습니다. 이 순간에도 수많은 사이트가 만들어지고 있고, 트렌드는 변하니까요! 하지만 어느 정도로 잡는 것이 좋을지 본인의 사이트의 성향을 파악하는 것이 중요합니다.

네이버나 다음 포털 사이트처럼 수많은 연령층이 사용하는 사이트라면 가장 최소화된 사이즈로 작업하는 것이 좋습니다. 시골에서 작은 모니터로 보는 분들도 있으니까요!

네이버는 1080px / 다음은 990px이네요.

디자이너 분들이 작업할 때 1920px로 잡는 경우도 있는데 최대 폭에는 맞춰지지만, 그 이하의 해상도를 가진 모니터에서는 최적화가 안될 경우도 있습니다.

​

본인이 당장 디자인할 사이트가 멋을 위한 회사소개 홈페이지인지, 아니면 쇼핑몰인지, 공공기관 사이트인지 혹은 에어비앤비처럼 서비스를 하는 사이트인지에 따라 규격을 달리하는 것이 좋습니다.

​

웹 디자인을 하면서 알아두면 좋은 지식 2가지가 있습니다.

하나는 전체 폭입니다. 가로폭으로 최대 몇까지 지원할 것인지에 대한 내용입니다. 둘째는 컨테이너입니다. Container 말 그대로 담고 있는 영역이라고 하는데, 전체 폭과는 다르게 좌우 마진을 두고 콘텐츠를 담고 있는 공통된 폭을 말합니다.

디자이너 분들이라면 알만한 참고 사이트들이죠. Awwward. Behance, Dribbble 사이트에도 공통적으로 담고 있는 컨테이너가 보이죠.

디자이너가 웹 디자인을 하면서 실수하기 쉬운 경우가 두 가지 있습니다. 본인의 모니터로 보는 것이 남에게도 동일하게 보일 것이라는 착각.. 신입들이 많이 하는 실수죠. iMac으로 작업한 결과물을 작은 노트북으로 보는 것은 전혀 다르겠죠?!

그리고 모바일 부분은 레티나 디스플레이를 위해 2배율로 작업을 해주는데, 실제 360px로 봐야 되는데 720px로 작업하다 보니 본인의 눈에 잘 보이는 사이즈로 작업했다가… 기본 가이드라인을 지키지 못해 낭패보는 경우도 있습니다.ㅠㅠ 잘하는 분들은 실제 모바일로 옮겨서 체크하는 습관이 있어요!

서론이 너무 길었네요… 그리드를 추천해드립니다. 절대 정답은 아니에요. 정답은 없습니다. 그냥 이런 식으로 해도 되는구나, 그리드를 잡고 하면 좋구나 정도만 알고 가시면 될 것 같아요.

컨테이너를 1200px로 하고, 단(Columns)을 12로 하고 거터(단과 단 사이 간격)를 24px로 하는 것을 추천드립니다. 실제 컨테이너는 사이트 성향에 따라 유동적으로 변하는 부분이고, 단과 커터는 12단 / 24px을 유지해주는 것이 좋습니다. 영상에서는 30px을 추천드렸지만, 정확히 딱 떨어지는 수치를 원하시는 분들을 위해 24px을 추천드립니다.
자세한 내용은 http://designbase.dothome.co.kr/webdesign-4/ 이 강좌를 확인 부탁드립니다.

12단을 하는 이유는 반응형에 최적화되어 있기 때문이죠. (부가적인 설명은 영상을 통해…)

오히려 디자이너가 욕심내서 16단, 20단 이런 식으로 작업하는 경우도 봤는데… 그렇게 단이 많아져봤자 실제 퍼블리셔가 구현하기 어려울 뿐 아니라 반응형에 취약합니다. ㅠㅠ

반응형 웹이란 CSS에서 미디어 쿼리라는 코드를 사용해서 특정 분기를 통해서 사이즈에 맞게 디자인도 최적화시키는 거죠. 예를 들면 768 ~ 481px 해상도에서는 이렇게, 480px 이하의 해상도에서는 모바일에 맞도록! 이런 식이죠.

모바일에서 360px로 작업하는 것을 추천드립니다. 아이폰 기준 375px으로 봤을 때 좌우 7~8px 때문에 화질이 깨져 보이거나 그렇지 않기 때문이죠. 가끔 320px까지 하는 경우도 있는데 이런 부분은 광고주(작업 의뢰자)와 합의를 하면 되는 부분입니다.ㅎㅎ

​여러분이 웹디자이너라면 1920, 1600, 1440, 1280, 1200, 1080, 1024px 등등 다양한 해상도로 작업하게 될 텐데… 가장 넓은 사이즈로 작업을 하게 되더라도 항상 가장 작은 사이즈의 상황도 고려하며 작업하셔야 실력 있는 디자이너가 됩니다~! 도움이 되셨다면, 좋아요 와 공유 부탁드립니다. 유튜브를 구독하시면, 최신 강좌를 가장 먼저 볼 수 있어요~! : )