2021년에 살펴볼 법한 브라우저 개발자 도구의 유용한 스타일 관련 기능
들어가며
웹 프론트엔드 개발을 하면서, 자바스크립트나 앱의 성능을 디버깅할 수 있는 자료는 쉽게 찾아볼 수 있다. 심지어 본 FE개발팀에서도 자바스크립트 디버깅 방법을 안내하는 문서를 작성하였다. CSS(Cascading Style Sheets)를 디버깅할 때도 개발자 도구의 기본적인 활용 방법은 쉽게 발견할 수 있지만, 워낙 기능이 많아 꼼꼼히 살펴보지 않는 한 자주 사용하는 기능만 사용하기 마련이다.
브라우저의 개발자 도구도 점진적으로 발전하는 하나의 소프트웨어라서 우리가 미처 알아차리지 못한 사이에 배포된 유용한 기능이 배포되어왔다. 거기다 이미 구현되어 있지만 유용한 기능을 지나치고 제대로 활용하지 못하는 경우도 존재한다.
이번 글은 여러 브라우저의 개발자 도구에서 CSS를 디버깅할 때 유용한 기능과 그 사용 방법을 소개한다. 작년 State of CSS 설문에 따르면 프론트엔드 개발자들이 Chrome 브라우저를 가장 높은 비율로 활용하고 있다는 것을 고려하여, Chrome 브라우저의 개발자 도구 위주로 소개한다.
또한 Chrome 브라우저의 개발자 도구뿐 아니라 Firefox, Edge 브라우저의 개발자 도구에서 다른 브라우저의 개발자 도구와 차별화된 기능도 살펴볼 것이다. 아쉽게도 Safari는 CSS에 관련지어 소개할만한 차별화 기능을 찾지 못했다.
참고 사항
- 기능 소개를 하며
(Chrome, Firefox, Edge, Safari)와 같이 해당 기능을 활용할 수 있는 브라우저를 명시한다. Chrome이라 표시된 내용은 대부분의 Chromium 기반 브라우저에도 공통적으로 활용할 수 있겠지만, 브라우저 제조사별로 적용 범위가 다를 수 있으므로 별도로 확인해야 한다.-
글 작성 시점에서 조사한 브라우저의 버전은 아래와 같다.
- Chrome 95
- Firefox 93
- Edge 95
- Safari 15
Flexbox 디버깅 도구 (Chrome, Firefox)
2009년 Flexbox의 명세가 나오고 나서 DOM 엘리먼트의 레이아웃을 잡는 것이 훨씬 수월해졌다. 하지만 display: flex 를 컨테이너에 선언하는 것으로 바로 아래에 있는 자손 엘리먼트에 직접적인 영향을 미치기도 하고, 정해진 속성에 따라 브라우저가 레이아웃을 알아서 조정한다는 점 때문에 의도치 않은 레이아웃 문제를 겪을 수 있다.
그럴 때마다 개발자 도구의 스타일 패널에서 엘리먼트의 속성을 하나하나 바꿔가며 어떻게 Flexbox의 영향을 받는 엘리먼트의 위치가 바뀌는지 덜 직관적인 방식으로 확인할 수밖에 없었다.
그래서 Firefox의 Flexbox Inspector를 시작으로 Chrome 개발자 도구도 올 2월부터 Flexbox 디버깅 도구가 적용되었다.
[Chrome의 Flexbox 도구 1]
엘리먼트 중 display: flex 혹은 display: inline-flex 가 적용된 엘리먼트는 Elements 패널에서 flex 라고 붙은 배지가 표시된다. 이 배지는 단순히 Flexbox 컨테이너임을 알려줄 뿐 아니라, 배지를 클릭할 때 해당 영역의 자손 엘리먼트가 실제로 차지하고 있는 영역도 표시해준다.
[Chrome의 Flexbox 도구 2]
또한 직접 Styles 패널에서 속성을 입력하지 않고 각종 위치 관련 속성을 적용해줄 수도 있다.
[Firefox의 Flexbox 도구 1]
Firefox 개발자 도구는 더욱 향상된 기능을 제공한다. Chrome이 제공하는 기능에 더하여 레이아웃 패널에서 해당 Flexbox 컨테이너에 포함된 자손 엘리먼트의 목록을 확인할 수 있다.
[Firefox의 Flexbox 도구 2]
그리고 위에서 본 목록에서 자손 엘리먼트를 클릭하면 더 자세한 정보와 함께 어떤 속성이 적용되고, 실제 계산된 크기까지 확인할 수 있다.
Grid 디버깅 도구 (Chrome, Firefox)
CSS Grid는 Flexbox보다 훨씬 늦은 시기인 2017년부터 메이저 브라우저에서 사용할 수 있게 되었다. Flexbox와 Grid를 비교할 때 가장 큰 특징 중 하나는 Flexbox가 행 혹은 열로 구분되는 하나의 차원에 걸쳐서만 레이아웃을 정의할 수 있는데 반해 Grid는 행과 열 모두 한꺼번에 정의할 수 있다는 점이다. 그래서 개발자 도구로 레이아웃을 수정해보면서 어떤 형태로 각각의 엘리먼트가 영역을 차지하고 있는지 시각적인 피드백을 얻을 수 있다면 큰 도움이 된다.
[Chrome의 Grid 도구 1]
Flexbox 도구와 마찬가지로, display: grid 혹은 display: inline-grid 속성이 적용된 엘리먼트에는 grid 라는 이름의 배지가 나타난다. 그 배지를 클릭하면 그리드가 어떻게 자리를 잡고 있는지 표시하는 오버레이 레이어가 표시된다. Layout 탭에서 더 자세한 정보를 보기 위한 설정을 할 수 있다. 트랙의 크기를 직접 보거나, 특정 영역에 직접 이름을 지정해두었을 경우 이름도 볼 수 있다.
[Chrome의 Grid 도구 2]
Flexbox, Grid 모두 공통으로 현재 보고 있는 페이지의 모든 Flexbox, Grid 컨테이너를 한 번에 보고, 오버레이를 표시할 수 있는 UI가 제공되고 있으나 어디에 위치한 엘리먼트인지 분간하기 어려울 수 있으므로 직접 엘리먼트 패널에서 flex 혹은 grid 배지를 눌러가며 오버레이를 확인하는 게 나을 수 있다.
[Firefox의 Grid 도구]
Firefox의 Grid 도구는 Chrome의 Grid 도구보다 더 많은 정보를 표현해주는데, 그중에 단연 눈에 띄는 것이 미니 레이아웃 오버레이 영역이다. Layout 패널에서 오버레이를 확인하고자 하는 Grid 컨테이너를 체크하면 해당 컨테이너의 오버레이를 작은 화면으로 볼 수 있고, 각 칸에 마우스를 가져다 대면 어떻게 표시되는지도 바로 확인할 수 있다.
폰트 도구 (Firefox)
타이포그래피는 웹 사이트 및 애플리케이션의 스타일을 구성하는 중요한 요소 중 하나이다. 하지만 개발중인 웹사이트의 폰트를 변경해보는 작업은 별다른 도구의 지원 없이 단순히 수치를 변경해볼 뿐이었다.
Firefox 63버전부터 개발자 도구의 엘리먼트 탭 안에 폰트를 원하는 대로 변경해볼 수 있는 도구가 생겼다. 또한 이 도구를 통해 현재 웹 사이트 안에서 어떤 폰트가 활용되고 있는지도 한 번에 살펴볼 수 있다. 다른 브라우저에서도 현재 어떤 폰트 패밀리가 사용되고 있는지 확인할 수는 있지만 좀 더 직관적인 인터페이스로 폰트를 변경해볼 수 있는 도구를 제공하는 것은 Firefox뿐이다.
[Firefox의 폰트 도구 1]
개발자 도구에서 특정 엘리먼트를 선택한 뒤 폰트 탭을 열어보면 이렇게 어떤 폰트가 적용되었는지, 페이지 전체에 걸쳐 어떤 폰트가 사용되고 있는지 한눈에 확인할 수 있다. 또한 폰트의 크기, 굵기, 자간 등을 바로 적용해보면서 어떻게 결과물이 표시되는지 바로 확인할 수 있다. 다른 개발자 도구에서는 일일이 속성을 찾아서 변경해주거나 직접 입력해주어야 하는 부분이지만, 훨씬 직관적으로 조정해볼 수 있어서 유용하다.
[Firefox의 폰트 도구 2]
만약 가변 폰트(Variable Fonts)가 적용되어 있다면 폰트 에디터에서 수정해볼 수 있는 항목이 더 늘어난다. 변형 축(Variation axes)을 마음대로 조정해볼 수도 있고, 폰트 디자이너가 사전에 정의해둔 인스턴스를 바꿔가면서 적용해볼 수도 있다.
CSS Overview (Chrome)
현재 개발 중인 페이지에 어떤 컬러와 폰트, 미디어 쿼리가 사용되고 있고, 사용되지 않는 CSS 선언 부분을 한 번에 확인할 수 있는 도구이다. Chrome 96에 적용 예정인 실험적 기능으로서, Chrome 95버전에서는 개발자 도구의 설정을 열어 실험적 기능을 활성화해야 사용할 수 있다. 그리고 Cmd(Ctrl)+Shift+P 로 실행 가능한 커맨드 팔레트에서 'Show CSS Overview' 메뉴를 선택하여 불러온다.
[CSS Overview 설정하기]
CSS Overview 패널에서 'Capture Overview' 버튼을 누르면 금새 페이지의 주요 CSS 적용 정보를 표시해준다.
[CSS Overview에서 표시되는 정보 1]
그저 정의된 스타일의 개수를 표시해주는 것만 있는 게 아니라 사용되고 있는 횟수를 클릭하면 어떤 요소에 사용되고 있는지도 바로 확인하고 해당 엘리먼트로 이동하는 것도 가능하다.
[CSS Overview에 표시되는 정보 2]
아직 실험적 기능이고 계속 개발자들의 의견을 수렴하고 있으니 앞으로도 더 유용한 정보를 한 번에 볼 수 있도록 발전하리라 기대된다.
코드 커버리지 살펴보기 (Chrome)
일정 규모 이상의 애플리케이션 개발을 하다 보면, 스타일시트가 변경되면서 이전에 작성했다가 더는 사용되지 않는 스타일시트가 방치되는 경우가 생긴다. 하지만 실제로 그 스타일이 사용되고 있는지 일일이 확인하기도 어렵다.
Chrome의 개발자 도구에서 제공하는 Coverage 탭을 이용하면 자바스크립트 코드뿐 아니라 CSS도 커버리지를 확인하여 어떤 스타일이 사용되고 있고 사용되지 않는지 확인할 수 있다.
Coverage 탭을 활성화하려면 개발자 도구에서 Cmd(Ctrl)+Shift+P 를 입력하여 커맨드 팔레트를 연 다음 'Show Coverage' 메뉴를 선택한다.
[Chrome의 Coverage 탭 열기]
이후 Reload 버튼을 눌러서 JS, CSS가 모두 로드될 때까지 기다리면 페이지에 사용되는 JS, CSS 파일들의 커버리지 정보를 확인할 수 있다. 'Unused Bytes' 항목에서 사용되지 않고 있는 코드의 비율이 표시된다.
[Coverage 조사 결과]
어떤 부분이 사용되지 않는지 확인하려면 해당 파일을 클릭하면 개발자 도구의 Source 탭이 활성화되면서, 사용되는 코드는 녹청색(#57A2B6), 사용되지 않는 코드는 적색(#D42A20)으로 표시되어 소스 코드를 보여준다.
[Coverage 확인]
쌓임 맥락 디버깅하기 (Edge, Safari)
웹 애플리케이션을 만들면서 다양한 UI를 구성하면서 부주의하게 z-index 속성을 적용하다 보면 의도된 위치에 요소가 랜더링 되지 않아 어려움을 겪는 경우가 있다. 이때 쌓임 맥락이 어떻게 구성되어있는지 살펴보려면 각 엘리먼트의 연관 스타일을 살펴보면서 머릿속으로 3D 공간을 상상해야 하는 수밖에 없는데, 애플리케이션이 복잡하여 엘리먼트가 많아질 수록 디버깅하는 것이 훨씬 어려워질 것이다.
그래서 쌓임 맥락 디버깅을 하기 용이하도록 브라우저 확장 프로그램이 나와 있기도 하지만, 시인성이 떨어지고 완벽하게 모든 상황을 커버할 수 없다는 아쉬움이 있다. 하지만 Edge와 Safari는 별도로 쌓임 맥락을 디버깅하기 좋은 도구를 제공하고 있다.
Edge의 3D View 도구도 Chrome의 커버리지 도구처럼 Cmd(Ctrl)+Shift+P 로 실행할 수 있는 커맨드 팔레트에서 실행할 수 있다. z-index 수치가 어떻게 표시되고, 쌓임 맥락에 따라 어떤 레이어 계층을 가지게 되는지 직관적으로 볼 수 있다.
[Edge의 3D View - z-index]
'DOM' 탭을 클릭하면 z-index 속성만 고려하는 것이 아니라 전체 DOM 구조가 어떻게 계층화되는지 표시해준다.
[Edge의 3D View - DOM]
'Composited Layers' 탭은 직접적으로 쌓임 맥락과는 관계가 없지만, 페이지 안에서 별도의 레이어를 구성하고 있는 엘리먼트를 한 번에 보고 선택할 수 있게 도와주는 도구이다. Safari도 비슷한 기능을 제공하지만 전반적인 인터페이스가 불편 해서 사용하기 어려웠다.
[Edge의 3D View - Composited Layers]
그 외에 소소하지만 유용한 기능들
Computed 탭에서 CSS 속성을 그룹으로 모아 보기 (Chrome)
CSS를 작성할 때 속성을 나열하는 순서를 정하는 데 다양한 의견이 있다. 속성의 알파벳 순서대로 작성한다거나, CSS 스펙에서 명시적으로 그룹이 나뉘어있지 않지만, 의미 있는 속성끼리 모아서 작성해야 한다는 의견도 있다. 그래서 속성을 그룹별로 나누어줄 것을 권장하는 Stylelint 설정도 있다.
Chrome의 개발자 도구에서 Computed 탭을 열어 현재 보고 있는 엘리먼트의 속성을 살펴볼 때도 속성을 그룹 단위로 묶어서 볼 수 있는 기능을 제공한다. 그러면 Layout, Text, Appearance, Other 그룹으로 나누어 속성을 표시해준다.
[Computed 탭에서 속성 그루핑을 적용]
웹 페이지를 프린트할 때 적용되는 CSS 미리보기 (Chrome, Firefox, Safari)
개발하고 있는 웹 사이트가 프린트로 출력되어야 하는 경우 print 미디어 쿼리를 적용해야 할 수 있다. 그 결과물을 손쉽게 살펴볼 수 있도록 개발자 도구에서 미디어 타입을 임의로 변경할 수 있다.
Firefox와 Safari는 개발자 도구의 툴바에서 손쉽게 프린트 모양의 아이콘을 클릭하여 미디어 타입을 print 로 적용해볼 수 있다.
[Firefox의 미디어 타입 적용 버튼]
[Safari의 미디어 타입 적용 버튼]
하지만 Chrome은 별도로 'Rendering' 탭을 열어야 미디어 타입 변경이 가능하다.
[Chrome 개발자 도구에서 미디어 타입 변경]
마치며
이외에도 많은 개발자 도구와, 그 개발자 도구의 기능을 보완하기 위한 확장 프로그램들을 찾아볼 수 있을 것이다. 대체로 Chrome만 이용해도 편리한 CSS 디버깅을 할 수 있겠지만, Flexbox나 Grid 레이아웃을 수정할 때 Firefox를 이용해보거나, 쌓임 맥락 문제를 해결하는데 Edge 브라우저를 이용해보면서 다른 브라우저 개발자 도구의 새로운 가치를 느낄 수 있으리라 기대한다.
네트워크, 퍼포먼스, 자바스크립트 관련 디버깅 도구도 대부분 준수한 기능을 가지고 있지만, 현재 개발자들로부터 많은 사랑을 받는 에디터인 Visual Studio Code가 Edge 브라우저의 개발자 도구와 잘 통합하는 모습을 보여주고 있어 Edge 브라우저의 개발자 도구가 Chrome과는 어떤 방향으로 다르게 발전할지 주목할만하다.
마지막으로 Chrome 개발자 도구의 더 자세한 활용 방법이 궁금하다면 2020년 NHN FORWARD에서 발표된 '천천히 읽어보는 Chrome 개발자 도구 설명서'를 참고하기 바란다.