디자인에서 여백, svg 아이콘 등의 크기를 8의 배수로 사용하는 이유(24px, 32px 등)

UI 디자인의 8-Point Grid System과 SVG 아이콘 가이드

1. 8-Point Grid System 개요

정의

디자인 요소의 크기와 간격을 8의 배수로 설정하는 디자인 원칙

기본 수치

• 8px: 기본 단위
• 16px: 2배수
• 24px: 3배수
• 32px: 4배수
• 40px: 5배수
• 48px: 6배수

2. SVG 아이콘 크기 표준

기본 크기

• 24px: 기본 UI 아이콘 (8×3)
• 32px: 강조된 아이콘 (8×4)

선택 이유

1. 해상도 최적화
   • 레티나 디스플레이 대응
   • 선명한 렌더링
2. 접근성
   • 터치 영역 확보
   • 가시성 보장

3. 여백 시스템

//기본 여백
.component {
  /* 기본 여백 */
  padding: 8px;
  margin: 8px;

  /* 컴포넌트 간격 */
  gap: 16px;

  /* 섹션 구분 */
  margin-bottom: 24px;
}

용도별 권장 크기

1. 최소 여백: 8px
2. 요소 간 간격: 16px
3. 섹션 패딩: 24px
4. 큰 구분: 32px

4. 적용 이점

디자인 측면

1. 일관성
   • 통일된 시각적 리듬
   • 정돈된 레이아웃
2. 효율성
   • 디자인 의사결정 단순화
   • 컴포넌트 재사용성

기술 측면

1. 구현 용이성
   • 명확한 수치 기준
   • 반응형 대응 편의
2. 성능 최적화
   • 픽셀 완벽 렌더링
   • 메모리 효율성

5. 실제 적용 예시

SVG 아이콘 구현

.icon-container {
  /* 기본 크기 */
  width: 24px;
  height: 24px;

  /* 여백 */
  padding: 8px;
  margin: 8px;
}

/* 크기 변형 */
.icon-large {
  width: 32px;
  height: 32px;
}

레이아웃 구성

.layout {
  /* 기본 여백 */
  padding: 16px;

  /* 요소 간격 */
  gap: 8px;

  /* 섹션 구분 */
  margin-bottom: 32px;
}

6. 주의사항

예외 케이스

1. 타이포그래피 관련 여백
2. 특수 디자인 요구사항
3. 미세 조정이 필요한 경우

대응 방안

• 4px 단위 사용 가능
• 필요시 개별 조정
• 디자인 의도 우선

7. 결론

8-Point Grid System은 현대 UI 디자인의 근간으로, SVG 아이콘과 여백 시스템에 체계적으로 적용됨으로써 일관되고 효율적인 디자인 구현을 가능하게 합니다.