columns: 동적 그리드 열 수 조절

Macy.js에서 columns 옵션은 레이아웃의 기본 열 개수를 정의합니다. 기본값은 4열이며, 필요에 따라 다양한 디자인 요구사항에 맞게 조정할 수 있습니다.

const macy = Macy({
  container: '#grid-container',
  columns: 5 // 5열로 설정
});

반응형 환경에서는 breakAt과 함께 사용해 화면 크기에 따라 자동으로 열 수를 변경할 수 있습니다. 예를 들어, 대형 스크린에서는 4열, 태블릿에서는 3열, 스마트폰에서는 1열로 전환하는 방식입니다.

margin: 간격 세부 제어

margin은 요소 간의 수평 및 수직 여백을 조절하며, 레이아웃의 시각적 밀도와 가독성을 결정합니다.

일괄적인 간격 설정:

const macy = Macy({
  container: '#grid-container',
  margin: 12 // 모든 방향에 12px 적용
});

수평/수직 간격 별도 지정:

const macy = Macy({
  container: '#grid-container',
  margin: {
    x: 20, // 수평 간격
    y: 25  // 수직 간격
  }
});

Macy.js는 내부적으로 각 열의 너비를 계산할 때 margin 값을 반영하므로, 정확한 레이아웃을 유지할 수 있습니다.

breakAt: 반응형 레이아웃 점단 설정

breakAt은 특정 화면 너비 기준으로 레이아웃 규칙을 재설정하는 핵심 옵션입니다. 각 단계마다 다른 열 수와 간격을 적용 가능합니다.

const macy = Macy({
  container: '#grid-container',
  breakAt: {
    1400: { columns: 6 },
    1000: { columns: 4, margin: { x: 16, y: 20 } },
    768:  { columns: 3, margin: 10 },
    500:  { columns: 2 },
    320:  { columns: 1, margin: 8 }
  }
});

이 설정은 화면 크기 변화에 따라 자동으로 최적의 레이아웃을 선택하며, 브라우저의 윈도우 리사이즈 이벤트를 감지해 실시간으로 조정됩니다.

종합적인 반응형 구성 예제

const macy = Macy({
  container: '#macy-grid',
  columns: 4,
  margin: { x: 18, y: 24 },
  breakAt: {
    1200: { columns: 4 },
    960:  { columns: 3, margin: { x: 14, y: 20 } },
    720:  { columns: 2, margin: { x: 12, y: 16 } },
    480:  { columns: 1, margin: 10 }
  }
});

이 구성은 다양한 기기에서 일관된 시각적 경험을 제공하며, 콘텐츠의 자연스러운 흐름을 보장합니다.

내부 로직은 src/modules/calculations.js와 src/helpers/getResponsiveOptions.js에서 처리되며, 원하는 경우 직접 코드를 분석해 작동 방식을 깊이 이해할 수 있습니다.