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

DevTools의 CSS 그리드 도구

Changhao Han

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

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

비교적 새로운 레이아웃 시스템인 CSS 그리드 역시 올바르게 사용하기 어렵습니다. 구문은 매우 다양하며 (그리드 치트시트 검색) 동일한 레이아웃을 얻을 수 있는 다양한 방법이 있으며 유연한 크기 조정 및 암시적 트랙을 사용하면 레이아웃이 제대로 작동하거나 작동하지 않는 이유를 추론하기가 더 어려워집니다. 이것이 바로 개발자가 CSS 코드가 수행하는 작업과 올바른 레이아웃에 도달하는 방법을 더 잘 이해할 수 있도록 DevTools에 전용 CSS 그리드 도구를 제공하기로 한 이유입니다.

도구 설계

Chrome과 Edge의 공동 노력

CSS 그리드 도구는 Chrome DevTools와 Edge DevTools 모두에서 관심을 끌었습니다. 우리는 처음부터 협업하기로 결정했습니다. 두 팀의 제품, 엔지니어링, 디자인 리소스를 공유했으며 이를 위해 매주 조율했습니다.

기능 요약

CSS 그리드 도구의 세 가지 주요 기능은 다음과 같습니다.

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

다음 단계에서 좀 더 자세히 살펴보겠습니다.

그리드 영구 오버레이

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

ALT_TEXT_HERE

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

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

이 두 가지 목표를 어떻게 달성할 수 있었는지 살펴보겠습니다.

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

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

.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));
}

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

ALT_TEXT_HERE

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

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

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

영구 오버레이

CSS 그리드 도구를 사용하기 전에는 DevTools의 오버레이가 간단했습니다. DevTools의 DOM 트리 창이나 검사된 페이지에서 직접 요소에 마우스를 가져가면 이 요소를 설명하는 오버레이가 표시됩니다. 마우스를 올려 놓으면 오버레이가 사라집니다. 그리드 오버레이의 경우 다른 점을 원했습니다. 여러 그리드가 동시에 강조표시될 수 있고, 그리드 오버레이가 계속 켜져 있는 동안에도 일반적인 마우스 오버 오버레이는 계속 작동합니다.

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

ALT_TEXT_HERE

그러나 DevTools의 오버레이는 이러한 다중 요소 영구 메커니즘을 염두에 두고 설계된 것이 아닙니다 (수년 전에 만들어졌습니다). 따라서 이 기능이 작동하도록 오버레이 디자인을 리팩터링해야 했습니다. 기존 강조표시 도구 모음에 새 GridHighlightTool를 추가했으며, 나중에 모든 영구 오버레이를 동시에 강조표시할 수 있는 전역 PersistentTool로 진화했습니다. 각 종류의 지속적 오버레이 (Grid, Flex 등)에 대해 Persistent Tool 내에 각 구성 필드를 유지합니다. 오버레이 하이라이터가 그릴 내용을 확인할 때마다 이러한 구성도 포함됩니다.

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 카테고리에 속합니다.

또한 처음부터 접근성 지원 기능이 기본적으로 제공됩니다. 모든 대화형 배지는 기본 및 활성 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, 컨테이너 쿼리)도 여기에 배치할 수 있습니다.

계산된 스타일로 요소 찾기

Layout 창에 CSS 그리드 컨테이너 목록을 표시하려면 계산된 스타일로 DOM 노드를 찾아야 합니다. 이 역시 간단하지 않은 것으로 나타났습니다. DevTools가 열려 있을 때 DevTools가 모든 DOM 노드를 알고 있는 것은 아니기 때문입니다. 대신 DevTools는 Devtools DOM 트리를 시작하기 위해 일반적으로 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 디자인 도구 프로젝트 중 하나였습니다. 영구 오버레이, DOM 트리 배지, Layout 창 등 DevTools에 많은 기본 도구를 선보였으며, Flexbox 및 컨테이너 쿼리와 같은 Chrome DevTools의 향후 레이아웃 도구를 위한 토대를 마련했습니다. 또한 개발자가 대화형 방식으로 그리드 및 Flexbox 정렬을 변경할 수 있도록 Grid 및 Flexbox 편집기를 위한 기반을 마련했습니다. 이 부분은 나중에 살펴보겠습니다.

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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