Grid/Flex Visualizer는 웹 페이지의 모든 CSS Grid와 Flexbox 컨테이너를 자동으로 감지하고, 레이아웃 구조를 페이지 위에 색상 오버레이로 렌더링합니다. 그리드 라인, 트랙 크기, 갭 값, 플렉스 방향, 정렬 축, 자식 요소 크기 등을 DevTools를 열지 않고도 시각적으로 확인할 수 있습니다.
CSS Grid와 Flexbox는 현대 웹 레이아웃의 기반이지만 기본적으로 보이지 않습니다. 페이지만 보고는 그리드 라인, 플렉스 축, 갭 값을 알 수 없습니다. 브라우저 DevTools에도 그리드 오버레이 기능이 있지만, Elements 패널에서 컨테이너를 먼저 찾아야 하고, 수동으로 활성화해야 하며, 한 번에 하나의 컨테이너만 볼 수 있습니다. Grid/Flex Visualizer는 이 과정을 완전히 자동화합니다. 페이지를 스캔하여 display: grid 또는 display: flex를 가진 모든 컨테이너를 찾아 레이아웃 구조를 시각적 오버레이로 표시합니다. 그리드 컨테이너는 열과 행 라인을 보여주고 트랙 크기를 라벨로 표시합니다. 플렉스 컨테이너는 메인 축 방향, 크로스 축 정렬, 공간 분배 방식을 시각화합니다. 갭은 픽셀 값이 표시된 색상 밴드로 강조됩니다. 컨테이너를 클릭하면 모든 레이아웃 속성이 나열된 상세 속성 패널을 볼 수 있습니다.
그리드 컨테이너에 모든 행과 열 트랙에 색상 라인이 표시됩니다. 각 라인에 트랙 크기(1fr, auto, 200px)가 라벨로 표시됩니다. 갭 영역은 반투명 밴드로 강조되어 픽셀 값이 표시됩니다. 암시적 트랙과 명시적 트랙은 실선과 점선으로 구분됩니다.
플렉스 컨테이너에 메인 축이 화살표(row, row-reverse, column, column-reverse)로 표시되고, 크로스 축은 수직으로 표시됩니다. justify-content와 align-items가 라벨이 붙은 정렬 표시기로 시각화되어 자식 사이에 공간이 어떻게 분배되는지 보여줍니다.
도구가 페이지 전체를 자동으로 스캔하여 display: grid 또는 display: flex(inline 변형 포함)를 가진 모든 요소를 찾습니다. 배지 카운트에 총 감지된 수가 표시됩니다. 요소를 수동으로 선택할 필요 없이 모두 자동으로 찾아 목록에 표시됩니다.
컨테이너를 클릭하면 완전한 레이아웃 속성을 볼 수 있습니다: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap, 그리고 모든 자식 크기 속성(flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
그리드 또는 플렉스 컨테이너 안의 각 자식 요소에 실제 렌더링된 크기, flex-grow/shrink 값, 그리드 영역 배치가 표시됩니다. 각 자식이 얼마나 많은 공간을 차지하고 왜 그런지 정확히 알 수 있습니다.
다른 Grid/Flex 컨테이너 안에 중첩된 Grid와 Flex 컨테이너를 감지합니다. 오버레이는 각 중첩 레벨을 다른 색상으로 렌더링하여 전체 레이아웃 계층 구조를 보여줍니다.
그리드 열이 예상보다 넓거나 좁은가요? 오버레이가 실제 트랙 크기(1fr이 342px로 해석됨, auto가 156px로 해석됨)를 보여주므로 브라우저가 어떻게 크기를 계산했는지 정확히 확인할 수 있습니다.
한 플렉스 자식이 다른 자식보다 넓은 이유가 궁금한가요? 비주얼라이저가 각 자식의 flex-grow, flex-shrink, flex-basis 값을 보여주므로 공간 분배 논리가 시각적으로 드러납니다.
브라우저 창 크기를 조정하며 그리드 오버레이가 실시간으로 업데이트되는 것을 지켜보세요. 데스크톱에서는 "1fr 1fr 1fr"이 모바일에서는 "1fr"로 어떻게 변경되는지, 각 브레이크포인트에서 전환이 올바른지 확인할 수 있습니다.
잘 만들어진 웹사이트를 방문하여 프로덕션에서 Grid와 Flex 레이아웃을 어떻게 사용하는지 확인하세요. 시각적 오버레이가 fr 단위, auto-fit, justify-content 같은 추상 개념을 구체적이고 인터랙티브하게 만들어줍니다.
페이지의 모든 카드 그리드가 동일한 열 수와 갭 값을 사용하는지 확인하세요. 오버레이 덕분에 불일치가 즉시 드러납니다. 한 섹션은 20px 갭을 사용하고 다른 섹션은 24px을 사용하는 경우가 한눈에 보입니다.
DevSuite Pro 플로팅 독을 열고 Grid/Flex Visualizer 아이콘을 클릭하세요. 도구가 페이지를 스캔하여 모든 Grid와 Flex 컨테이너를 감지합니다.
모든 Grid와 Flex 컨테이너에 색상 테두리 오버레이가 표시됩니다. 패널에 타입(Grid 또는 Flex)과 요소 선택자가 포함된 목록이 나타납니다.
컨테이너를 클릭하면 완전한 레이아웃 속성이 표시됩니다. 그리드 컨테이너는 트랙 라인과 크기를, 플렉스 컨테이너는 축 방향과 정렬을 보여줍니다.
각 자식 요소에 계산된 크기와 레이아웃별 속성(flex-grow, grid-area)이 표시됩니다. 공간이 자식들 사이에 어떻게 분배되는지 이해할 수 있습니다.
도구 아이콘을 다시 클릭하면 모든 오버레이가 제거되고 정상 페이지 뷰로 돌아갑니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
