Flexbox 기반 그리드 레이아웃 마이그레이션 작업

배경

회사 어드민 페이지의 레이아웃이 여전히 float과 clearfix를 사용하고 있었다. IE10 지원을 드롭하기로 결정되면서 Flexbox로 전환할 수 있는 기회가 생겼다.

기존 코드의 문제점

float 기반 그리드는 코드가 복잡하고 수직 정렬이 어려웠다.

.row::after {
  content: "";
  display: table;
  clear: both;
}

.col {
  float: left;
  width: 33.33%;
}

매번 clearfix를 추가해야 했고, 같은 높이의 컬럼을 만들기 위해 JavaScript를 사용하는 경우도 있었다.

Flexbox 적용

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.col {
  flex: 1;
  min-width: 0;
}

.col-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

clearfix가 불필요해졌고, 수직/수평 정렬이 간단해졌다. gap 속성은 아직 브라우저 지원이 부족해서 margin으로 대체했다.

마이그레이션 과정

기존 .row, .col 클래스의 스타일만 수정
HTML 구조는 유지 (마크업 변경 최소화)
각 페이지별로 QA 진행

일부 페이지에서 레이아웃이 깨지는 현상이 있었는데, 기존에 float의 특성에 의존하던 부분들이었다. flex-shrink: 0를 추가하거나 명시적인 width 지정으로 해결했다.

결과

CSS 코드가 30% 정도 줄었고, 반응형 처리가 훨씬 직관적으로 변경되었다. flex-direction: column을 활용해 모바일 레이아웃 전환도 간편해졌다.

Flexbox는 이제 프로덕션에서 충분히 사용할 수 있는 수준이라고 판단된다.