CSS Grid로 복잡한 레이아웃 마이그레이션 후기

배경

사내 관리자 대시보드의 레이아웃이 복잡해지면서 float와 flexbox 조합만으로는 한계가 있었다. 특히 반응형 처리 시 미디어 쿼리가 과도하게 중첩되고, 레이아웃 변경 시마다 여러 곳을 수정해야 하는 문제가 있었다.

CSS Grid 도입 결정

CSS Grid는 2017년 3월 주요 브라우저에서 지원을 시작했고, 1년 반이 지난 시점에서 안정화되었다고 판단했다. 다만 IE11 지원이 필수 요구사항이라 고민이 있었다.

IE11 대응 전략

/* Modern browsers */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  gap: 20px;
}

/* IE11 fallback */
@supports not (display: grid) {
  .dashboard {
    display: flex;
  }
  .sidebar {
    width: 250px;
  }
}

autoprefixer 설정을 통해 -ms-grid 속성을 자동으로 추가했다. IE11에서는 grid-gap 대신 margin으로 처리했다.

결과

• 레이아웃 코드 30% 감소
• 미디어 쿼리 중첩 제거
• 반응형 전환이 grid-template-areas로 직관적으로 변경

IE11에서도 테스트 완료했고, 일부 간격이 다르지만 사용성에는 문제없었다. 앞으로 새로운 레이아웃은 Grid 우선으로 설계할 예정이다.