📐웹 UI 여백 체계(8pt Grid) 계산기

기준 단위 기반 여백 체계 자동 생성

기준 단위

확인할 값

8pt 그리드란 무엇일까?

8pt 그리드는 모든 여백과 크기를 8의 배수로 설계하는 디자인 규칙입니다. iOS, Android, Material Design 등 대부분의 플랫폼이 8px 배수를 기본 단위로 채택하고 있어서, 8의 배수로 값을 맞추면 다양한 화면 해상도에서도 픽셀이 어긋나지 않고 깔끔하게 정렬됩니다. 세밀한 조정이 필요한 아이콘이나 텍스트 여백에는 4pt 그리드를 함께 사용하는 경우도 많습니다.

이 계산기는 기준 단위를 입력하면 0.5배부터 12배까지의 표준 여백 스케일을 자동으로 생성합니다. 또한 확인하고 싶은 임의의 값을 입력하면 가장 가까운 그리드 값을 위아래로 알려줘서, 디자인 시스템을 만들 때 임의의 숫자 대신 일관된 값을 선택할 수 있도록 도와줍니다. Figma나 CSS 변수로 spacing 토큰을 정의할 때 참고 자료로 활용해보세요.

자주 묻는 질문

8pt 그리드가 뭔가요?

8의 배수로 여백과 크기를 정하는 디자인 규칙으로, 다양한 화면 해상도에서 일관된 정렬을 유지하기 쉽게 해줍니다.

4pt 그리드와 8pt 그리드 중 뭘 써야 할까요?

아이콘처럼 세밀한 조정이 필요하면 4pt, 일반적인 레이아웃 여백에는 8pt가 널리 사용됩니다.

8pt 그리드란 무엇일까?

자주 묻는 질문

같은 카테고리 도구