[제로베이스 UI/UX 파트타임 스쿨] 7주차 - (토) 컬러 & 그리드

제로베이스 48일차 학습노트이다.

오늘은 컬러 규칙과 그리드 규칙에 대해 배웠다. 앞서서 디자인 요소의 표현 측면에서 정제에 대해 배웠던 것처럼 컬러를 정제해서 몇가지만 정해서 디자인 하는 것이 중요하다. 그리드는 규격화된 해상도 안에서 화면을 분할하는 시스템이다. 정보를 효과적으로 나누고 이를 정리해서 보여주기 위해 그리드를 나눈다. 이렇게 먼저 시스템을 만들고 디자인을 하면 사용자가 보기 편안해한다.

---

오늘의 강의 내용

 

1. 컬러

정제된 컬러를 사용하기 위해서는 포인트 컬러는 최소화해서 사용하고 다른 부분에서는 그레이 컬러로 사용하는 것이 중요하다. 거의 대부분의 텍스트는 그레이스케일로 사용하는데, 타이틀, 바디, 라인, 배경 등을 그레이스케일로 사용하고 포인트 컬러는 그 요소의 특성이 서비스에서 중요할 때 사용한다. 예를 들어 주식 투자 서비스에서는 상승을 빨간색, 하강을 파란색 그리고 경고나 오류를 알려줄 때는 주황색을 사용한다. 

 

2. 그리드

보통 디스플레이의 해상도는 어느정도 정해져있다. 우리가 많이 보는 720 1080 1440 1920 숫자들이 그 해상도를 나타내는 것이며, 이 안에서 요소들의 레이아웃을 정하는 것이 그리드이다. 또한 하나의 디자인이 더 많은 해상도 안에서 잘 보여질 수 있도록 그리드 시스템을 설정한다. 실습에서는 1024x768px 디스플레이 안에  960px의 화면을 디자인 하는 것이었다. 우선 8px의 세로 컬럼으로 화면을 세세하게 분할한 뒤 큰 컬럼으로 다시 나눠주었다. 또한 큰 컬럼은 12단으로 나누었는데, 12단은 6개, 4개, 3개, 2개로 모두 나눠지는 숫자라 많이 사용한다고 한다. 이 세로 컬럼들의 디자인 시스템에 맞춰서 디자인 요소들을 디자인한다.

---

컬러는 저번에 표현에서 배운 내용과 매우 비슷하였고, 이번에 배운 그리드가 내가 알던 것과 조금은 달랐다. 그리드의 경우 디자인할 때마다  항상 다르게 컬럼 수를 세우고 적당한 마진과 거터를 설정했었는데, 이번 실습에서는 8px의 기본 그리드 시스템을 미리 만들어 놓고 다양한 해상도에서 8의 배수로 큰 컬럼을 새로 만드는 것이 인상깊었다. 또한 가로 그리드를 실습에서는 그리지 않았는데, 이것은 아마 실제 실무에서는 그리지만 실습이라 진행하지 않은 것으로 보였다. 다양한 규칙이 원래 내가 디자인하던 인쇄되는 디자인(포스터, 책자, ppt 등)과 비슷하면서도 인터렉션하는 화면을 고려한 것이다 보니 조금씩 다른 특징이 있는 것 같다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.