4의 배수로 작업해주세요

디자인에도 법이 있는걸까

Table Of Contents

📏 읽기전에

왜 규칙적인 디자인이 중요한가요?

규칙적인 디자인은 서비스의 일관성 유지, 코드의 유지보수 측면에서 도움이 됩니다.

📏 8 point grid / 4 point grid

8 point grid란 무엇인가요?

디자인의 일관성을 맞추는 방법 중 한 가지입니다. 모든 요소를 8의 배수(8, 16, 24, ...)로 만드는 것입니다. 예를 들어, font size / margin / padding / border radius등의 요소를 8의 배수가 되도록 설정하면 됩니다.

8 point grid의 장점

8 point grid의 한계

4 point grid

이를 극복하기 위해서 요즘은 4 point grid를 사용하는 사람이 늘어나고 있습니다. 4 point grid는 모든 요소를 4의 배수(4, 8, 12, 16, ...)로 만드는 것입니다.

아래는 제가 최근에 Figma로 작업한 블로그 디자인입니다. 예시

font size, padding, gap에 값을 줄 때는 4의 배수를 벗어나지 않도록 하고 있습니다. 추가로 4px = 0.25rem, 8px = 0.5rem처럼 rem으로 변환해서 사용하면 반응형 페이지를 구성하는 데도 도움이 됩니다 🤸🤸

📏 결론

모든 디자인 요소의 크기를 4의 배수로 지정하는 시스템을 항상 적용하라고 하는 것은 아닙니다. 하지만 4 point grid는 선택의 폭을 좁혀 줌으로써 디자인에 시간을 덜 쏟을 수 있게 도와줍니다. 만약 당신이 급하게 디자인을 해야 하는 프론트 개발자라면 이 시스템 안에서 디자인해보세요😊

📏 참고

8-Point 그리드 시스템

8px 그리드 시대가 끝나고, 4px 그리드의 시대가 열릴까?

8 Point Grid, 더 적은 결정 = 더 적은 시간