[반응형 웹 만들기] #1. 반응형 웹 그리드 잡기 (+태블릿 그리드)

 

회사에서 운영중인 서비스의 데스크탑 최적화 버전을 만들기로 했다.

현재는 웹앱이라 반응형으로 구현되어 있는데, 모바일에 최적화된 상태로 구현해놓고, 데스크탑은 좌우를 늘렸을 때 어색하지 않은 정도로만 땜빵(?)해 놓은 수준이라 어색하기 짝이 없다.

 

데스크탑과 모바일을 동시에 관리할 수 있어서 좋지만 사실 데스크탑쪽 사용률도 무시할 수 없는 수준이라 사용성을 위해 따로 분리해 최적화시키는 편이 낫겠다고 판단했다.

 

데스크탑 버전이 태블릿도 커버 가능했으면 좋겠다는 요구사항에 따라 작업을 해보려는데, 웹을 제대로 그려본 경험은 학부생 때 이후론 거의 없어서 여기저기 강의를 찾아다니며 공부부터 시작했고, 공부한 내용들을 정리해보려고 한다.

 

 

 

 

1. 반응형 웹사이트 해상도 사이즈 결정하기

 

웹, 모바일을 막론하고 화면 작업을 시작할 때 가장 먼저 드는 의문은 '어떤 해상도를 기준으로 시작하지?'가 아닐까...?

웹은 모바일에 비해 아트보드가 훨씬 크다보니 더 심란했는데, 몇 바이 몇 아트보드를 열고 작업하냐고 주변에 물으면 답변도 정말 제각각이었다.

 

그래서 현재 한국에서는 어떤 해상도가 가장 많이 쓰이고 있는지 찾아보기 시작!
우선 전세계 데스크탑 스크린 해상도 점유율 웹사이트를 보면 1920×1080이 압도적인 비율로 1위인 것을 알 수 있다.

 

 

▲ 전세계 데스크탑 스크린 해상도 점유율

 

그러나 저 아래쪽 쫌쫌따리 붙어있는 해상도들도 무시할 수가 없는 게 1920 해상도는 생각보다 엄청나게 크고, 우리 서비스는 쇼핑몰이나 포토그래퍼 포트폴리오 사이트처럼 사진이 대문짝만하게 강조되어야 하는 타입의 웹사이트가 아닐뿐더러 적당히 저해상도의 사용자들까지 커버할 수 있어야 했다.

 

차트를 보면 아래쪽 쫌쫌따리 선 그래프들 중 가로 폭이 가장 작은 게 1280.

즉, 가로 1280 이하로 콘텐츠 영역을 잡아야 저해상도까지 커버가 가능하다는 결론을 내렸다.

 

그래서!
전체 아트보드 폭은 1920으로 잡고,

내부 컨테이너(실제 콘텐츠가 배치되는 영역)은 1200정도로 잡아 저해상도와 고해상도를 모두 커버하기로 했다.

 

 

---

 

2. 반응형 웹사이트에 최적화된 그리드 잡기

 

흔히 웹사이트 그리드하면 아래 이미지처럼 마젠타색 컬럼이 쫙 나열된 가이드를 떠올릴 것이다.

 

 

▲ 구글 머터리얼 디자인 가이드

 

저런식으로 컬럼을 잡는다는 건 알았는데, 컬럼의 개수나 간격 사이즈가 어떤게 최적의 값인지 궁금했다.
한번 기준을 잡고 작업을 해버리면 되돌릴 수 없기에...

이 부분은 온라인 강의에서 도움을 받았는데,

디자인베이스의 #4 반응형 웹디자인을 위한 최적화된 그리드 만들기가 굉장히 유용했다.
(이것 말고도 유용한 강의가 엄청 많다!)

우선 어떤 강의에서나 반응형 웹디자인 그리드를 잡을 때 가장 적합한 컬럼의 개수는 12개라는 데에는 이견이 없었다.

그리드를 잡는 방법에서 디자인 베이스는 컨테이너를 1200px로 가정하고,

Column 72px / Gutter 30px / Offset은 센터로 설정했는데,
스케치 레이아웃 세팅에서 위의 값을 그대로 입력하면 컨테이너 값이 1200이 아닌 1194으로 자동 변환되는 것이다..!
(아아아악!!!!)

 

 

▲ 디자인베이스 그리드 강좌

 

계산은 틀리지 않았고, 이와 같은 질문 댓글에 아래와 같은 답변이 달렸다.

 

 

▲ 디베님 답변

 

아하!
Columns의 너비는 퍼블리싱 과정에서 %로 처리하기 때문에 Gutter 값만 잘 고정해 준다면 된다는 것!
(답변이 너무 자세하고 친절해서 감덩...)

그러나 내 성격 상 작업할 때 수치가 딱 떨어지지 않으면 엄청 거슬릴게 뻔했기에 컨테이너 값을 1194로 잡고 시작하기로 했다.
그래서 결론적으로 그리드는 아래와 같이 잡았다.

 

 

▲ 그리드 최종!

 

 

---

 

 🔥 스케치 TIP 

스케치에서 시안 작업을 할 때 위와 같은 그리드를 직접 그릴 필요는 없다.
레이아웃 설정에서 그리드를 잡아줄 수 있기 때문!
[View - Canvas - Layout Settings...]에서 아래와 같이 세팅값을 입력해주면 된다.

 

 

▲ 스케치에서 그리드 세팅하는 방법

 

Total Width, Offset 등의 세팅값을 모두 입력해주면, 아트보드 상에 자동으로 그리드가 잡힌다.

 

 

 

 

3. 태블릿 화면 그리드 잡기

 

앞서 언급했듯 이번 데스크탑 리뉴얼의 목표 중 하나는 태블릿까지 커버할 수 있어야 한다는 점!

태블릿도 웹과 마찬가지로 반응형을 고려해 그리드를 잡아야했다.
모바일이나 태블릿은 (데스크탑에 비해) 디바이스가 작기 때문에 컨테이너 너비가 아닌 스크린 좌우의 여백을 먼저 잡고 시작했다.

우선 스케치의 태블릿 기본 셋팅대로 768×1024 아트보드를 만들고, 웹과 마찬가지로 

[View - Canvas - Layout Settings...]에 들어가 세팅값을 입력한다.

스크린 좌우 여백을 24씩 주면 컨테이너가 720으로 딱 떨어지는데, 거터는 20정도가 적당해보여 결과적으로 컬럼은 103으로 결정!

 

 

▲ 태블릿 그리드

 

 

---

 

 

이렇게 반응형 웹디자인 그리드 정리 끝!

다음 포스팅에서는 기존에 작업되어 있는 웹사이트를 반응형 그리드에 얹어보는 내용을 다뤄볼 예정이다 😊