이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 CSS 그리드 도구

Changhao Han

Twitter GitHub

CSS 그리드 도구를 만든 이유는 무엇일까요?

CSS 그리드는 웹 개발자가 복잡한 2차원 레이아웃을 빌드하고 그리드의 모든 하위 항목 크기, 정렬, 정렬 방식에 관한 규칙을 설정할 수 있는 매우 강력한 CSS 레이아웃 시스템입니다. CSS 그리드는 Flexbox가 대중화된 이후 도입되었으며, 함께 사용하면 개발자가 복잡한 정렬 해킹이나 자바스크립트 지원 레이아웃 없이도 더 나은 반응형 디자인을 구현할 수 있습니다.

비교적 새로운 레이아웃 시스템이므로 CSS 그리드도 올바르게 사용하기 어렵습니다. 구문은 매우 다재다능하며 (그리드 요약본만 검색), 동일한 레이아웃을 구현할 수 있는 다양한 방법이 있으며 유연한 크기 조절과 암시적 트랙으로 인해 레이아웃이 예상대로 작동하지 않거나 작동하지 않는 이유를 추론하기가 더 어려워집니다. 이러한 이유로 DevTools에서 전용 CSS 그리드 도구를 제공하기로 했습니다. 따라서 개발자는 CSS 코드의 역할과 올바른 레이아웃 방법을 더 잘 이해할 수 있습니다.

도구 설계

Chrome과 Edge의 공동 노력

CSS 그리드 도구는 Chrome DevTools와 Edge DevTools 모두에서 사용자의 관심을 끌었습니다. 우리는 처음부터 협력하기로 결정했습니다. Google은 양측의 제품, 엔지니어링, 설계 리소스를 공유하고 이를 실현하기 위해 매주 조율했습니다.

기능 요약

CSS 그리드 도구에는 세 가지 주요 기능이 있습니다.

차원 및 순서 정보를 지정하는 데 도움이 되는 그리드별 영구 오버레이
CSS 그리드 컨테이너를 강조표시하고 그리드 오버레이를 전환하는 DOM 트리의 배지
개발자가 DOM 오버레이 표시를 맞춤설정 (예: 규칙의 색상 및 너비 변경)할 수 있는 사이드바 창
스타일 창의 CSS 그리드 편집기

이제부터 자세히 살펴보겠습니다.

그리드 영구 오버레이

DevTools에서 오버레이는 개별 요소의 레이아웃과 스타일 정보를 제공하는 강력한 도구입니다.

ALT_TEXT_HERE

이 추가 정보는 관심 있는 요소 위에 오버레이됩니다. 이전에는 DevTools가 열린 상태에서 그리드 위로 마우스를 가져가면 오버레이에 상자 모델 정보가 표시되었지만, 그 이유를 설명하지 않고 콘텐츠 강조 표시를 그리드 항목으로 제한했습니다. CSS 그리드 오버레이에 추가하고 싶은 두 가지 주요 부분이 있습니다.

작성된 측정기준, 간격 등 그리드에 관한 유용한 정보를 표시할 수 있음
오버레이를 고정하여 동시에 여러 그리드를 볼 수 있도록 합니다. 또한 요소 스타일을 변경할 때 오버레이가 그리드 정보를 업데이트하는지 확인할 수 있습니다.

이 두 가지 목표를 어떻게 실현했는지 살펴보겠습니다.

작성된 크기와 계산된 크기 비교

CSS 그리드 디버깅에서 어려운 부분 중 하나는 그리드 트랙 크기를 정의하는 다양한 방법입니다. 예를 들어 픽셀 값, 비율 값, 분수, 반복 함수, 최소 최대 함수를 조합하여 다양한 트랙 크기를 만들 수 있습니다.

.grid-cards {
    display: grid;
    width: 200px;
    height: 300px;
    grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

하지만 작성된 트랙 크기를 브라우저에서 계산한 계산된 트랙 크기에 매핑하기는 어렵습니다. 이러한 간극을 메우기 위해 Google은 오버레이에 다음 두 가지 정보를 나란히 배치합니다.

ALT_TEXT_HERE

점 앞에 있는 문자열은 작성된 값이고 점 뒤의 문자열은 실제 계산된 값을 나타냅니다.

이전에는 DevTools에 작성된 값을 가져오는 기능이 없었습니다. 이론적으로는 직접 DevTools에서 작성된 값을 파싱하고 CSS 그리드 사양에 따라 이 값을 계산할 수 있습니다. 여기에는 여러 복잡한 시나리오가 수반될 수 있으며 기본적으로 Blink의 작업이 중복될 뿐입니다. 따라서 Blink의 스타일팀의 도움을 받아 '캐스케이딩 값'을 노출하는 스타일 엔진의 새 API를 얻었습니다. 캐스케이드 값은 CSS 속성의 CSS 캐스케이딩 후 최종 유효 값입니다. 이 값은 스타일 엔진이 모든 스타일시트를 컴파일한 후, 실제로 값(예: 비율, 분수)을 계산하기 전에 우수한 값입니다.

이제 이 API를 사용하여 작성된 값을 그리드 오버레이에 표시합니다.

영구 오버레이

CSS 그리드 도구를 사용하기 전에는 DevTools의 오버레이가 간단했습니다. DevTools의 DOM Tree 창에서, 또는 검사한 페이지에서 직접 요소에 마우스를 가져가면 이 요소를 설명하는 오버레이가 표시됩니다. 마우스를 다른 곳으로 이동하면 오버레이가 사라집니다. 그리드 오버레이에는 색다른 기능이 필요했습니다. 여러 개의 그리드를 동시에 강조표시할 수 있고, 그리드 오버레이는 계속 마우스 오버 시 오버레이가 작동하는 동안 유지될 수 있다는 점입니다.

예를 들면 다음과 같습니다.

ALT_TEXT_HERE

그러나 DevTools의 오버레이는 이와 같은 다중 요소의 영구적 메커니즘을 염두에 두고 설계된 것이 아닙니다 (수년 전에 제작됨). 따라서 이 기능을 구현하기 위해 오버레이 디자인을 리팩터링해야 했습니다. 기존 강조 표시 도구 모음에 새로운 GridHighlightTool를 추가했으며, 나중에 모든 영구 오버레이를 동시에 강조표시하기 위한 전역 PersistentTool로 발전했습니다. 각 유형의 영구 오버레이 (그리드, Flex 등)에 대해 각각의 구성 필드가 영구 도구 내에 유지됩니다. 오버레이 하이라이터가 그릴 항목을 확인할 때마다 이러한 구성도 포함됩니다.

DevTools가 강조 표시해야 할 항목을 제어할 수 있도록 그리드 영구 오버레이에 대한 새로운 CDP 명령어를 만들었습니다.

# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
  parameters
    # An array of node identifiers and descriptors for the highlight appearance.
    array of GridNodeHighlightConfig gridNodeHighlightConfigs

여기서 각 GridNodeHighlightConfig에는 그릴 노드와 그리는 방법에 관한 정보가 포함됩니다. 이를 통해 현재의 마우스 오버 시 동작을 중단하지 않고도 다중 항목 영구 메커니즘을 추가할 수 있습니다.

실시간 그리드 배지

개발자가 그리드 오버레이를 쉽게 켜고 끌 수 있도록 DOM 트리의 그리드 컨테이너 옆에 작은 배지를 추가하기로 했습니다. 이러한 배지는 개발자가 DOM 구조에서 그리드 컨테이너를 식별하는 데도 도움이 됩니다.

ALT_TEXT_HERE

DOM 트리 변경사항

Grid 배지뿐만 아니라 DOM 트리에 표시하려는 배지도 있으므로 배지를 최대한 쉽게 추가할 수 있도록 만들고자 합니다. DevTools에서 개별 DOM 트리 요소를 만들고 관리하는 클래스인 ElementsTreeElement가 배지를 구성하는 여러 가지 새로운 공개 메서드로 업데이트되었습니다. 하나의 요소에 배지가 여러 개 있는 경우 배지의 카테고리별로 정렬됩니다. 같은 카테고리에 있는 경우 이름이 알파벳순으로 정렬됩니다. 사용 가능한 카테고리에는 Security, Layout 등이 있으며 Grid는 Layout 카테고리에 속합니다.

또한 Google은 처음부터 접근성 지원 기능을 기본으로 제공합니다. 모든 대화형 배지는 기본값의 활성 aria-label를 제공해야 하며 읽기 전용 배지는 배지 이름을 aria-label로 사용합니다.

실시간 스타일 업데이트를 어떻게 받았나요?

많은 DOM 변경사항이 DevTools DOM 트리에 실시간으로 반영됩니다. 예를 들어 새로 추가된 노드가 DOM 트리에 즉시 나타나고 삭제된 클래스 이름도 즉시 사라집니다. 그리드 배지 상태에도 동일한 최신 정보가 반영되기를 바랍니다. 그러나, 이 방법은 구현하기가 어려웠습니다. DOM 트리에 표시된 요소가 계산된 스타일 업데이트를 가져올 때 DevTools에서 알림을 받을 방법이 없었기 때문입니다. 요소가 그리드 컨테이너로 전환되거나 그 기능을 중단하는 시점을 알 수 있는 유일한 기존 방법은 브라우저에 각 요소의 최신 스타일 정보를 지속적으로 쿼리하는 것입니다. 금지적으로 비용이 많이 듭니다.

요소의 스타일이 업데이트되었을 때 프런트엔드가 쉽게 알 수 있도록 스타일 업데이트 폴링을 위한 새로운 CDP 메서드를 추가했습니다. DOM 노드의 스타일 업데이트를 받으려면 먼저 어떤 CSS 선언을 추적할지 브라우저에 알립니다. 그리드 배지의 경우 브라우저에 다음을 추적하도록 요청합니다.

{
  "display": "grid",
  "display": "inline-grid",
}

그런 다음 폴링 요청을 보내고, Elements 패널에 DOM 노드에 대한 추적된 스타일 업데이트가 있으면 브라우저가 DevTools에 업데이트된 노드 목록을 전송하고 기존 폴링 요청을 확인합니다. DevTools는 스타일 업데이트에 대한 알림을 다시 받고자 할 때마다 모든 노드에서 백엔드를 지속적으로 폴링하는 대신 이 폴링 요청을 보낼 수 있습니다. 또한 DevTools는 브라우저에 새 목록을 전송하여 추적 중인 CSS 선언을 변경할 수 있습니다.

레이아웃 창

DOM 트리 배지가 CSS 그리드의 검색 가능성에 도움이 되기는 하지만, 특정 페이지에서 모든 CSS 그리드의 목록을 확인하고 쉽게 영구 오버레이를 켜고 꺼서 레이아웃을 디버그하고자 할 때가 있습니다. 따라서 레이아웃 도구만을 위한 전용 사이드바 창을 만들기로 했습니다. 이를 통해 모든 그리드 컨테이너를 수집하고 그리드 오버레이의 모든 옵션을 구성할 수 있는 전용 공간이 제공됩니다. 이 Layout 창을 사용하면 향후 레이아웃이 많이 사용되는 도구 (예: Flexbox, Container 쿼리)도 여기에 배치할 수 있습니다.

계산된 스타일로 요소 찾기

Layout 창에 CSS 그리드 컨테이너 목록을 표시하려면 계산된 스타일별로 DOM 노드를 찾아야 합니다. 이 역시 간단하지 않은 것으로 밝혀졌습니다. DevTools가 열려 있을 때 DevTools에서 모든 DOM 노드를 알 수 있는 것은 아니기 때문입니다. 대신 DevTools는 Devtools DOM Tree를 시작하기 위해 일반적으로 DOM 계층 구조의 최상위 수준에 있는 노드의 작은 하위 집합만 인식합니다. 성능상의 이유로 다른 노드는 추가 요청 시에만 가져옵니다. 즉, 페이지의 모든 노드를 수집하고 계산된 스타일로 필터링하려면 새 CDP 명령어가 필요합니다.

# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
  parameters
    # Node ID pointing to the root of a subtree.
    NodeId nodeId
    # The style to filter nodes by (includes nodes if any of properties matches).
    array of CSSComputedStyleProperty computedStyles
    # Whether or not iframes and shadow roots in the same target should be traversed when returning the
    # results (default is false).
    optional boolean pierce
  returns
    # Resulting nodes.
    array of NodeId nodeIds

이를 통해 DevTools 프런트엔드가 페이지의 CSS 그리드 컨테이너 목록을 가져와 iframe 및 섀도우 루트를 통해 피어싱하고 Layout 창에서 렌더링할 수 있습니다.

결론

CSS 그리드 도구는 웹 플랫폼 기능을 지원하는 최초의 DevTools 설계 도구 프로젝트 중 하나입니다. 이 도구는 DevTools에서 영구 오버레이, DOM 트리 배지, Layout 창과 같은 여러 기본 도구를 선보였고, Flexbox 및 Container 쿼리와 같은 Chrome DevTools의 향후 레이아웃 도구를 위한 기반을 닦았습니다. 또한 개발자가 대화형 방식으로 그리드 및 Flexbox 정렬을 변경할 수 있는 그리드 및 Flexbox 편집기의 기반을 마련했습니다. 이 부분은 나중에 살펴보겠습니다.

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools 팀에 문의하기

다음 옵션을 사용하여 게시물의 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 모든 것에 대해 논의합니다.

crbug.com을 통해 제안이나 의견을 제출해 주세요.
DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 보고를 사용하여 DevTools 문제를 신고합니다.
@ChromeDevTools로 트윗을 보냅니다.
DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 의견을 남겨주세요.