[UI/UX] 4px 그리드

Hyuk·2023년 2월 3일
0

프론트엔드 개발을 처음 알려주시던 분이 내 CSS 코드를 보더니 지나가는 말로 이런 말씀을 하셨다.

px은 4의 배수로 해주시는게 좋아요.

그때부터 4의 배수를 원칙으로 삼아 CSS코드를 작성했다. 다만 꼭 4의 배수말고 2px 정도만 수정하고 싶다던가 font-size에도 적용을 해야하는 건가 등 많은 의문이 있었다.

그때부터 4px 그리드에 대해 찾아보았다.

8px 그리드

UI, 즉 디자인에서 요소의 일관성 있고 유연한 위치 지정을 위한 명확한 규칙을 설정하기 위해 그리드를 사용한다. 그리고 이러한 그리드를 설정하는 시스템이 여러 가지 있지만 요소의 간격을 모두 8의 배수로 설정하는 것이 8px 그리드이다.

즉, 각 디자인을 위한 간격 및 모든 수치를 8px 단위로 맞추는 것이다.

아래의 그림은 8px그리드를 사용한 디자인 예시이다.

이렇게 8의 배수라는 규칙을 따르면 웹의 디자인 퀄리티가 좋아질 뿐만 아니라 사용자에게도 일관된 서비스를 보여줄 수도 있다.
또한 디자이너와 개발자와도 협업이 용이할 수도 있다.

꼭 8이라는 숫자인 이유는 모든 디스플레이에서 완벽하게 확장할 수 있기 때문이다.

하지만 8px 그리드의 한계가 점점 나타나기 시작했고
사용할 수 있는 옵션을 높여 사용자의 경험을 극대화하기 위해
4px 그리드가 탄생한다.

4px 그리드

4px 그리드는 8px 그리드를 사용하는 이유와 규칙은 동일한 상태에서 4의 배수로 간격을 통일시키는 것이다.

이렇게 되면 요소의 간격 등이 세분화 되고 나타낼 수 있는 옵션이 많아지면서 사용자의 경험을 높이고 UI에 유연성을 더해준다.

아래는 4px 그리드를 사용해 디자인한 예시이다.

8px 그리드가 안고 있는 한계를 극복하기 위해 4px 그리드가 탄생하게 되었지만 4px 그리드가 모든 것을 해결해주는 것은 아니다.

무조건적으로 4px 그리드에 따르는 규칙을 따르며 디자인을 해야하는 건 아니다.
4px 그리드의 규칙을 따르되 예외인 경우에만 4의 배수을 사용하지 않더라도 괜찮다.





참고자료

https://zoeylog.com/540
https://www.insilicogen.com/blog/385

profile
프론트엔드 개발자

0개의 댓글