피그마 활용 3주차 분기점과 그리드, 8포인트 3-3 ~ 3-4

분기점과 그리드

 

해상도에 따라 동작하는 웹사이트를 위해서는 분기점과 그리드를 알아야 해요!

 

분기점(Breakpoint)

 

분기점의 개념

• 디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점을 분기점이라고 해요.

사전적인 뜻으로는 ‘나뉘어 갈라지다’라는 뜻을 가지고 있어요.

앞으로 분기라는 표현을 보면 ‘아, 경우의 수가 나누어지는구나!’라고 생각해 주세요.

 

분기점이 중요한 이유

왼쪽부터 모바일, 태블릿, 데스크탑 버전의 스파르타코딩클럽 화면이에요.

 

웹사이트를 방문할 때 주로 스마트폰의 웹브라우저를 사용하지만,

태블릿도 있고, 데스크톱이나 노트북으로도 웹사이트를 방문해요.

 

이때, 웹사이트는 우리가 쓰는 디바이스 화면 크기에 따라 다른 디자인을 보여줘요.

 

만약 노트북으로 접속했는데 모바일 화면이 나온다든가,

모바일로 접속했는데 데스크탑 화면이 나온다면 매우 불편하겠죠?

 

• 즉, 우리는 사용자의 디바이스 화면 크기를 고려해서 디자인을 나눌 수 있어야 해요.
• 그 나누는 기준점이 바로 분기점이에요.

분기점은 영어로 Breakpoint라고 해요. 즉, Break(쪼개지는) Point(지점)이에요.

 

일반적인 분기점 정하기

• 일반적으로 데스크탑, 태블릿, 모바일의 3가지 기준점을 세워요.
• 분기점은 이렇게 읽을 수 있어요!

분기점은 가로 길이를 기준으로 합니다.

• 가로가 1024px 이상이라면 데스크탑 화면입니다.
• 가로가 768px 이상, 1024px 미만이라면 태블릿 화면입니다.
• 가로가 768px 미만이라면 모바일 화면입니다.

👨🏻 모바일 최소 가로 사이즈를 정해주는 것이 좋아요.

아무리 모바일 화면이 작다고 해도, 더 이상 작아지지 않는 지점이 있어야 레이아웃이 깨지는 걸 막을 수 있어요.

최소사이즈 328이다 이런식으로 정해주는게 좋다! 쌤왈~

 

분기점을 정할 때 생각하면 좋은 것

분기점을 정할 때 디자이너가 고민하면 더 좋은 디자인을 할 수 있는 것들이에요!

 

태블릿 해상도 고려해야하는 경우!!!!

 

태블릿 해상도 대응

태블릿은 생략하거나, 태블릿 해상도 전체를 모바일 분기점으로 통합하는 경우도 많아요.

태블릿 사용자가 데스크톱과 모바일에 비하면 매우 적기 때문이에요.

또한 디자인과 개발해야 하는 화면 세트가 1개씩 더 늘어나기 때문이기도 해요.

하지만 반드시 태블릿 분기점을 고려해야 하는 경우도 있어요!

온라인 강의나 교육은 태블릿으로 많이 하기 때문에, 이런 경우에는 태블릿 해상도도 신경 써야 해요!.

 

일반적인 해상도 말고 다른 해상도를 정하고 싶다면?

위에서 알려드린 일반적인 분기점 외에 다른 분기점을 정해도 상관없어요.

다만 데스크톱, 태블릿, 모바일 각각에 해당하는 해상도로 잘 나눠줘야 해요.

그렇지 않으면 태블릿으로 열었는데 데스크톱 디자인이 나온다든가, 데스크톱을 열었는데 태블릿 디자인으로 나오는 경우가 생길 수 있어요.

사람들이 사용하는 기기의 해상도 통계를 참고하면, 어디서부터 데스크톱으로 하면 좋은지 힌트를 얻을 수 있어요.

 

📎 디자인에 유용한 통계자료

디자인할 때 필요한 웹브라우저 점유율, 해상도, SNS 점유율 등의 통계를 제공하는 웹사이트에요.

https://gs.statcounter.com/screen-resolution-stats

Screen Resolution Stats Worldwide | Statcounter Global Stats

전세계 통계기반으로 해상도를 정할 수 있다.

 

 

그리드의 개념

 

 📌 그리드는 원래 **‘격자’**라는 뜻이에요.

가로 선과 세로 선을 직각으로 교차되게 만든 것을 뜻해요.

 

• 그리드(Grid)는 화면에 디자인을 배치하는 가이드라인이에요.
• 일반적으로는 세로 방향의 기둥들을 좌우로 세우는데, 가로 줄을 추가로 사용하는 경우도 있어요.
• 디자인을 배치할 기준선이 되는 가상의 선을 긋고, 그 선에 맞춰서 레이아웃을 짜게 돼요.

가상의 선이 잘 이해가 안 간다면 열어 보세요!

별 다른 규칙 없이 배치된 것 같지만…

가상의 선들을 그어보면 이런 모양이 될 거예요! 배너들이 빨간 기둥에 딱 걸려 있는 게 보이죠?

 

그리드를 사용하는 이유

반응형 웹이 분기점마다 디자인을 바꿀 때, 그리드를 따라 정렬돼요.

• 원래 그리드는 편집 디자인에서 쓰는 용어인데, 종이에 글과 그림을 배치하는 기준점이에요.
• 그리드를 사용하는 이유는 글과 그림들을 균형감 있게 배치하기 위해서입니다!
• 또한 주목해서 읽어야 하는 부분을 강조하고, 적당한 간격을 만들어 더 잘 읽히게 하기도 하는 등 전체적인 완성도를 올리기 위해서예요.

전체적으로 그리드 안에 정렬해둔 일관성이 드러나죠?

 

• 우리가 사용하는 그리드의 개념은 종이 문서가 디지털 문서, 즉 웹페이지로 바뀌었을 뿐이에요!
• 웹에서 그리드를 사용하는 이유 역시 균형감과 완성도, 일관성을 위해서랍니다.

그리드를 만드는 방법

그리드 역시 분기점과 마찬가지로 일반적으로 사용하는 기준들이 있어요.

그리드는 일반적으로 세로 방향의 기둥들을 몇 개를 둘지 정하는 게 우선이에요.

이 기둥을 칼럼(Column)이라고 불러요.

 

👨🏻 신문이나 잡지의 칼럼과 같은 말이에요!

예전에는 글을 하나의 기둥(Column)에 담아 그리드에 배치했거든요 🙂

 

일반적으로 데스크톱 화면을 기준으로 기둥은 12개를 사용합니다.

12개를 사용하는 레이아웃을 12칼럼 그리드(12 Column Grid)라고 해요.

 

16개를 사용하는 경우도 있어요! 하지만 12개 이상은 반응형 디자인을 만들기 어렵고, 개발도 복잡해져요!

 

 📌 왜 하필 12개일까?

12개는 짝수면서 1, 2, 3, 4, 6, 8, 10, 12로 나눠서 유연하게 배치할 수 있다는 장점이 있어서 자주 사용하는 기둥 개수가 됐어요.

또한 모바일 웹디자인에서 기둥 4개를 배치해서 사용하기 시작했는데,

디자인을 반응형으로 확장하기 위해 태블릿에선 2배인 8개, 데스크톱에선 3배인 12개로 사용하면서 12개가 일반적인 기둥 수로 자리 잡았답니다!

 

배치할 수 있는 방법을 굉장히 다양하게 가져갈 수 있다는 장점이 있어요!

 

그리드는 원칙이 아닌 가이드라인이기 때문에 꼭 있어야 하는 건 아니지만,

내 디자인이 어딘가 모르게 어색하고 정렬이 되지 않는 느낌이라면 그리드를 최대한 활용해보세요.

 

그리드의 구조

• 칼럼은 유닛(Unit)과 거터(Gutter)로 이루어져 있어요.
• 유닛은 실제 콘텐츠를 정렬하는 기준선이고, 거터는 유닛과 유닛 사이의 여백이에요.
• 한 개의 칼럼은 유닛 1개와 양쪽에 거터 절반씩을 합친 크기예요.

맨 양끝의 칼럼 끝에는 거터 절반이 남는데, 이건 좌우 여백으로 사용해요.

좌우측 끝에는 초록색 블록이 한 줄씩밖에 없는 걸 보실 수 있어요.

 

자주 사용하는 그리드 예시

그리드는 유닛과 거터 너비만 잘 정하면 자유롭게 사용하셔도 괜찮아요.

 

• 960 12 Column Grid (다합해서 80 * 12)
• 유닛 너비 거터 너비

  60

  20

• 1200 12 Column Grid
• 유닛 너비 거터 너비

  76

  24

• 1440 12 Column Grid(최근 나온 그리드 넓은 컴터쓰니께)
• 유닛 너비 거터 너비

  96

  24

 

8포인트-그리드 디자인

그리드가 전체 레이아웃의 규칙이라면, UI 레이아웃에도 규칙이 있어요!

 

UI를 배치할 때의 가이드라인

 

위에서 그리드를 했는데, 여기 또 그리드가 나와서 당황하셨죠?

앞으로 그리드라는 표현을 보면 놀라지 마시고 ‘가이드라인’ 이라고 읽어주세요

• 우리는 그리드를 사용해서 레이아웃을 배치해요.
• 즉, 그리드는 레이아웃을 배치하는 규칙이라고 할 수 있어요.
• 레이아웃 뿐만 아니라 UI를 디자인할 때도 규칙이 필요해요.

8포인트-그리드 디자인의 개념

8포인트 그리드는 간격이나 크기 등을

8, 16, 24, 32, …로 맞추는 방법이에요 8배수당!

구체적인 적용 방법은 실제 UI를 그려보면서 적용해 보기로 해요!

 

• UI를 디자인하고 배치하는 규칙이 바로 8포인트 그리드 디자인이에요.
• UI 사이의 간격, UI의 여백, 크기 등을 8의 배수 단위로 조정해서 사용해요.

8포인트 그리드를 사용하는 이유

8포인트 그리드는 UI 디자이너에게 필수 역량이라고 해도 과언이 아닐 만큼 팀 효율성에 매우 큰 영향을 끼쳐요. 왜 중요한지 같이 알아봐요.

각 버튼의 폰트 사이즈와 여백에 규칙을 발견하셨나요? 2씩 4씩

UI 디자인에 일정한 규칙이 있다면 다른 디자이너와 함께 일할 때도,

개발자가 디자인을 보고 개발할 때도 서로 물어보는 번거로움과 비효율성이 사라져요.

위의 버튼을 보면서 폰트 사이즈는 2씩, 여백은 4씩 변경하면 된다는 걸 모두 이해할 수 있어요.

규칙이 있기 때문에 다른 디자이너나 개발자는 처음 보는 디자인을 보더라도 그 규칙을 적용하기만 하면 돼요.

XLarge 버튼의 폰트 사이즈와 여백은 어떻게 될까요?

폰트 사이즈는 2를 더해 20, 여백은 4를 더한 20일 거예요!

그런데 만약, 이런 규칙이 존재하지 않다면 어떻게 될까요?

 

🔥 폰트 사이즈가 18, 15, 14로 규칙 없이 변하고, 여백도 20, 14, 12에요.

규칙을 찾아내기 힘들고, 그만큼 새로운 디자인을 만날 때마다 업무의 효율성은 떨어져요.

이런 경우, 만약 Xlarge 버튼을 만들어야 한다면 폰트 사이즈와 여백을 몇으로 설정해야 하는지 예측하기 어려울 거예요.

 

• 따라서 사전에 서로 약속을 맺는답니다!
• 💡 여백이나 간격, 높이나 너비 등 UI 수치를 키우거나 줄일 땐 최대한 8의 배수 단위로 한다는 약속을 하는 셈이에요!

그 약속을 8포인트-디자인 규칙, 8포인트-그리드 디자인이라고 한답니다.

어떤 디자인을 보더라도 8의 배수만 머릿속에 기억하고 보면 되기 때문에

커뮤니케이션을 더 빠르게 할 수 있고, 결과적으론 개발도 디자인도 더 빨리 할 수 있어요!

 

8포인트 그리드가 8인 이유

8은 1.5배, 2배, 3배, 4배 하더라도 깔끔하게 떨어져요! (심지어 0.75배를 해도 정수, 1.25배를 해도 정수에요….!)

 

• 8은 1, 2, 4, 8로 나눌 수 있어요. 즉, 2로 3번이나 쪼갤 수 있고 나눈 숫자도 다시 짝수에요. 그만큼 디자인을 축소할 때 디자인을 망가뜨리지 않고 축소할 수 있어요.
• 반대로 커질 때도 다른 수에 비해 딱 떨어지게 만들기 쉬워요. 따라서 해상도가 변하면서 업스케일, 다운스케일될 때 유연하게 대처할 수 있어요.
• 최근에는 디바이스의 해상도가 워낙 선명하고 좋아졌기 때문에, 디자인도 더 세밀하고 복잡하게 만들기 위해 8 대신 4배수로 많이 사용하는 편입니다!

10을 기준으로 하면 안 되나요?

📌 10도 짝수긴 하지만, 한번 나누면 바로 홀수가 된다는 문제가 있어요.

홀수는 확대 또는 축소할 때 소수점이 생기는데, 만약 소수점이 생기면 픽셀 한칸을 미처 못 채운 불완전한 디자인이 생기고, 결국 디자인이 깨져 보이는 현상이 발생해요.

 

• 8배수와 5배수인 디자인을 각각 1.5배로 확대하면, 8은 12가 되서 픽셀이 깔끔하게 떨어지지만 5는 7.5가 되면서 불완전한 픽셀이 생겨요.
• 10배수인 경우에도, 1.25배를 하게 되면 12.5가 되면서 불완전 픽셀이 발생하는데, 8은 1.25배를 하더라도 10이 되면서 딱 떨어진답니다.