Firefox의 새롭고 실험적인 CSS DevTools 가이드

지난 몇 년 동안 Firefox의 우리 팀은 최첨단 기술과 오래된 좌절을 모두 해결하는 새로운 CSS 도구를 개발해 왔습니다. 우리는 Firefox 개발자 도구의 하위 집합인 레이아웃 도구 팀이며 우리의 탐구는 현대적인 웹 디자인 워크플로를 개선하는 것입니다.

웹은 지난 10년 동안 새로운 HTML/CSS 기능, 브라우저 개선, 디자인 기술 등 놀라운 발전을 이루었습니다. 우리 팀은 디자이너와 개발자가 현재 가능한 효율성과 창의성을 더 많이 활용할 수 있도록 이러한 혁신과 일치하는 도구를 구축하는 데 전념하고 있습니다.

이 가이드에서는 디자인 프로세스의 이야기와 각 도구를 시험해 보기 위한 실용적인 단계와 함께 7개의 새로운 도구에 대한 개요를 공유합니다.

1. 그리드 인스펙터

이 모든 것은 3년 전 우리의 CSS 레이아웃 전문가이자 개발 옹호자인 Jen Simmons가 Firefox DevTools 회원과 협력하여 사용자가 CSS 그리드 레이아웃을 검사하는 데 도움이 되는 도구를 구축하면서 시작되었습니다.

현대 웹의 가장 강력한 새 기능 중 하나인 CSS Grid는 빠른 속도로 적절한 브라우저 채택을 얻었지만 여전히 웹 사이트 채택이 낮았습니다. 학습 곡선이 가파르고 특정 브라우저에 대한 대체가 여전히 필요합니다. 따라서 우리 목표의 일부는 개발자에게 그리드를 보다 실습할 수 있는 방법을 제공하여 그리드를 대중화하는 데 도움이 되는 것이었습니다.

이 도구의 핵심은 페이지에 오버레이된 그리드 윤곽선으로 개발자가 그리드가 요소를 배치하는 방법과 스타일을 조정할 때 레이아웃이 어떻게 변경되는지 시각화하는 데 도움이 됩니다. 각 그리드 선을 식별하기 위해 번호가 매겨진 레이블, 한 번에 최대 3개의 그리드를 볼 수 있는 기능, 오버레이에 대한 색상 사용자 지정을 추가했습니다. 최근에 우리는 또한 Firefox와 곧 더 많은 브라우저에서 구현된 새로운 CSS 사양인 subgrid에 대한 지원을 추가했습니다.

Grid Inspector는 이후의 모든 도구에 영감을 주었습니다. 새로운 팀인 레이아웃 도구에 영감을 주기도 했습니다. 2017년 말에 결성된 우리는 4개 시간대에 걸쳐 분포되어 있으며 렌더링 엔진 개발자 및 MDN의 좋은 사람들과 같은 Mozilla의 다른 많은 사람들과 협력합니다.

Grid Inspector 사용해 보기

1. Firefox에서 Grid 예제 사이트를 방문하십시오.
2. Cmd + Shift + C 로 인스펙터를 엽니다.
3. 다음 세 가지 방법 중 하나를 통해 그리드 오버레이를 켭니다.
• 레이아웃 패널 :
  그리드 섹션에서 .content.grid-content 옆에 있는 확인란을 선택합니다.
• 마크업 보기 :
  <div class="content grid-content"> 옆에 있는 "그리드" 배지를 토글합니다.
• 규칙 보기 :
  클릭 display:grid; #page-intro .grid-content 내부 ;
4. Grid Inspector로 실험:
• 보라색 오버레이 색상을 빨간색으로 변경합니다.
• "줄 번호" 또는 "줄 무한대로 확장"을 전환합니다.
• 더 많은 그리드 오버레이를 켭니다.
• 규칙에서 grid-gap: 15px 를 비활성화하면 어떻게 되는지 확인하세요.

Grid 이후로 우리는 브라우저 CSS 도구의 가능성을 확장하기 위해 노력해 왔습니다.

"

2. 모양 경로 편집기

우리가 작업한 다음 프로젝트는 첫 번째 시각적 편집 도구인 모양 경로 편집기였습니다.

CSS 모양을 사용하면 원, 삼각형 또는 다각형 다각형과 같이 텍스트가 흐르는 모양을 정의할 수 있습니다. 요소를 동일한 모양으로 트리밍할 수 있는 clip-path 속성과 함께 사용할 수 있습니다. 이 두 가지 기술은 함께 매우 독특한 그래픽 디자인에서 영감을 받은 레이아웃의 가능성을 열어줍니다.

그러나 때때로 이러한 복잡한 모양을 만드는 것은 어려울 수 있습니다. 모든 좌표를 수동으로 입력하고 올바른 CSS 단위를 사용하는 것은 오류가 발생하기 쉬우며 Shapes가 허용하는 창의적 사고 방식에서 멀리 떨어져 있습니다. 따라서 페이지에서 도형을 직접 클릭하고 드래그하여 코드를 편집할 수 있는 도구를 만들었습니다.

이러한 유형의 기능(시각적 편집)은 우리와 일반적으로 브라우저 도구에 새로운 기능이었습니다. 그것은 우리가 검사와 디버깅을 넘어 디자인의 영역으로 나아갈 수 있는 방법의 한 예입니다.

모양 경로 편집기 사용해 보기

1. Firefox에서 An Event Apart 웹사이트의 이 페이지를 방문하십시오.
2. Cmd + Shift + C 로 Inspector를 열고 첫 번째 원형 이미지를 선택합니다.
3. 규칙에서 shape-outside 속성 옆에 있는 아이콘입니다.
4. 페이지에서 모양의 점을 클릭하고 모양을 크거나 작게 만들기 위해 끌면 어떻게 되는지 확인합니다. 보기에 좋은 크기로 변경하십시오.

시각적 편집은 우리가 검사와 디버깅을 넘어 디자인 영역으로 나아가는 방법의 한 예입니다.

"

3. 글꼴 편집기

수년 동안 우리는 웹사이트에서 사용된 모든 글꼴의 정보 목록을 보여주는 Firefox의 글꼴 패널을 사용했습니다. 브라우저에서 디자인하는 주제를 계속하면서 우리는 이것을 글꼴 속성을 미세 조정하기 위해 글꼴 편집기로 바꾸기로 결정했습니다.

이 프로젝트의 원동력은 Firefox 렌더링 엔진 팀이 지원을 추가하는 동시에 가변 글꼴을 지원하는 우리의 목표였습니다. 가변 글꼴은 글꼴 디자이너가 하나의 글꼴 파일 내에서 가중치와 같은 축을 따라 미세한 변형을 제공할 수 있는 방법을 제공합니다. 또한 글꼴 작성자와 웹 디자이너 모두에게 놀라운 유연성을 제공하는 사용자 지정 축을 지원합니다. 우리 도구는 이러한 사용자 정의 축을 자동으로 감지하고 조정 및 시각화할 수 있는 방법을 제공합니다. 그렇지 않으면 Axis-Praxis와 같은 전문 웹사이트가 필요합니다.

또한 페이지에서 특정 글꼴이 사용되는 위치를 강조표시하기 위해 글꼴 이름 위에 마우스를 올려놓는 기능을 제공하는 기능을 추가했습니다. 이것은 브라우저가 텍스트를 렌더링하는 데 사용되는 글꼴을 선택하는 방식이 복잡하고 컴퓨터에 따라 달라질 수 있기 때문에 유용합니다. 일부 문자는 글꼴 하위 설정으로 인해 예기치 않게 다른 글꼴로 교체될 수 있습니다.

글꼴 편집기를 사용해보십시오

1. Firefox에서 이 가변 글꼴 데모 사이트를 방문하십시오.
2. Cmd + Shift + C 를 사용하여 Inspector를 열고 제목에서 "변수"라는 단어를 선택합니다(요소의 선택기는 .title__variable-web__variable ).
3. 인스펙터의 세 번째 창에서 글꼴 패널로 이동합니다.
• 강조 표시되는 것을 보려면 글꼴 이름 Output Sans Regular 위로 마우스를 가져갑니다.
• 무게 와 경사 슬라이더를 사용해보십시오.
• 인스턴스 드롭다운 메뉴에서 사전 설정된 글꼴 변형을 살펴보십시오.

4. 플렉스박스 인스펙터

그리드, 모양 및 가변 글꼴 도구는 함께 웹에서 일부 고급 그래픽 디자인을 지원하지만 브라우저 지원을 기반으로 하는 여전히 다소 최첨단입니다. (그들은 거의 다 왔지만 여전히 폴백이 필요합니다.) 우리는 새로운 기능에 대해서만 작업하고 싶지 않았습니다. 우리는 대부분의 웹 개발자가 매일 직면하는 문제에 끌렸습니다.

그래서 우리는 Flexbox Inspector에 대한 작업을 시작했습니다. 디자인 면에서 이것은 우리의 가장 야심찬 프로젝트였으며 우리 팀을 위한 몇 가지 새로운 사용자 연구 전략을 싹틔웠습니다.

Grid와 마찬가지로 CSS Flexbox는 처음 시작할 때 상당히 가파른 학습 곡선을 가지고 있습니다. 그것을 실제로 이해하는 데 시간이 걸리고 우리 중 많은 사람들이 우리가 원하는 레이아웃을 달성하기 위해 시행착오에 의존합니다. 프로젝트 초기에 우리 팀은 Flexbox를 스스로 이해하고 있는지조차 확신하지 못했고 주요 과제가 무엇인지도 몰랐습니다. 그래서 우리는 이해도를 높이고 Flexbox와 관련하여 사람들이 가장 필요로 하는 것이 무엇인지 알아보기 위해 설문조사를 실시했습니다.

그 결과는 우리의 계획에 큰 영향을 미쳤으며, 성장/축소 및 최소/최대와 같은 복잡한 시각화 사례를 만들었습니다. 우리는 피드백을 진화하는 시각적 프로토타입 및 Nightly 빌드에 통합하여 프로젝트 전반에 걸쳐 커뮤니티와 계속 협력했습니다.

이 도구에는 Grid Inspector와 매우 유사하게 작동하는 형광펜과 Inspector 내부의 상세한 Flexbox 도구의 두 가지 주요 부분이 있습니다. 도구의 핵심은 크기 정보가 포함된 플렉스 항목 다이어그램입니다.

Gecko 레이아웃 엔지니어의 도움으로 렌더링 엔진의 단계별 크기 결정을 보여주어 사용자에게 플렉스 항목이 특정 크기로 끝나는 이유와 방법에 대한 전체 그림을 제공할 수 있었습니다.

참고 : "Flexbox Inspector 설계"에서 설계 프로세스의 전체 스토리를 알아보십시오.

Flexbox Inspector 사용해 보기

1. Firefox에서 Mozilla의 Bugzilla를 방문하십시오.
2. Cmd + Shift + C 를 사용하여 Inspector를 열고 div.inner 요소를 선택합니다(헤더 표시줄 바로 안쪽).
3. 다음 세 가지 방법 중 하나를 통해 Flexbox 오버레이를 켭니다.
• 레이아웃 패널 :
  Flex Container 섹션에서 스위치를 켭니다.
• 마크업 보기 :
  <div class="inner"> 옆에 있는 "flex" 배지를 토글합니다.
• 규칙 보기 :
  클릭 display:flex 옆에 있는 버튼
4. Flex 컨테이너 패널을 사용하여 nav#header-nav 라는 Flex 항목으로 이동합니다.
• 다이어그램과 크기 차트에 표시된 크기를 확인하십시오.
• 브라우저의 너비를 늘리거나 줄이고 다이어그램이 어떻게 변경되는지 확인합니다.

막간: 연구에 두 배로

공식적인 사용자 연구 지원이 없는 소규모 팀으로서, 우리는 종종 design-by-dogfooding에 의존해 왔습니다. 즉, 도구 사용에 대한 우리 자신의 경험에 기반한 의견입니다. 그러나 Flexbox 설문 조사를 성공적으로 마친 후 우리는 우리를 안내할 데이터를 더 잘 수집하고 싶다는 것을 알게 되었습니다. 다음 단계를 알리는 데 도움이 되도록 새로운 설문조사를 실시했습니다.

우리는 웹 개발자가 직면한 20가지 가장 큰 문제 목록을 크라우드소싱하고 커뮤니티에 max-diff 형식을 사용하여 순위를 매길 것을 요청했습니다.

도전 과제의 가장 큰 승자는 CSS 레이아웃 디버깅이라는 것을 알았을 때 특정 CSS 버그에 대한 후속 설문 조사를 실행하여 가장 큰 문제점을 발견했습니다. 사용자 인터뷰와 사용자 테스트를 통해 이러한 설문조사를 보완했습니다.

우리는 또한 사람들에게 브라우저 개발자 도구에 대한 불만의 순위를 매기도록 요청했습니다. 가장 큰 문제는 CSS 변경 사항을 다시 편집기로 옮기는 것이었습니다. 이것이 우리의 다음 프로젝트가 되었습니다.

5. 변경 패널

브라우저 개발자 도구에서 편집기로 작업을 전송하는 데 따른 어려움은 우리 모두가 익숙해진 오래된 문제 중 하나입니다. 우리는 간단하고 즉시 사용할 수 있는 솔루션을 만들게 되어 기쁩니다.

Edge 및 Chrome DevTools는 먼저 이 도구의 변형과 함께 출시되었습니다. 우리는 광범위한 CSS 워크플로를 지원하는 데 중점을 둡니다. DevTools를 시작하고 원하는 스타일을 변경한 다음 전체 변경 세트(협업용) 또는 변경된 규칙 하나(코드에 붙여넣기용)를 복사하여 변경 사항을 내보냅니다.

이는 다른 레이아웃 도구를 포함하여 전체 워크플로의 견고성을 향상시킵니다. 그리고 이것은 시작에 불과합니다. 우리는 실수로 페이지를 새로 고치고 탐색하는 것이 데이터 손실의 큰 원인임을 알고 있으므로 도구에 지속성을 가져오는 방법이 중요한 다음 단계가 될 것입니다.

변경 패널을 사용해보십시오

1. Firefox에서 웹사이트로 이동합니다.
2. Cmd + Shift + C 로 Inspector를 열고 요소를 선택합니다.
3. CSS를 다음과 같이 변경합니다.
• 규칙 창에서 스타일을 수정합니다.
• 글꼴 창에서 글꼴을 조정합니다.
4. Inspector의 오른쪽 창에서 변경 탭으로 이동하여 다음을 수행합니다.
• 모든 변경 사항 복사 를 클릭한 다음 텍스트 편집기에 붙여넣어 출력을 봅니다.
• 선택기 이름 위에 마우스를 놓고 규칙 복사 를 클릭한 다음 붙여넣으면 출력이 표시됩니다.

6. 비활성 CSS

비활성 CSS 기능은 특정 CSS 버그에 대한 레이아웃 디버깅 설문조사의 주요 문제 중 하나를 해결합니다.

"왜 이 CSS 속성이 아무 것도 하지 않는 이유는 무엇입니까?"

디자인 면에서 이 기능은 매우 간단합니다. 페이지에 영향을 주지 않는 CSS를 회색으로 표시하고 속성이 효과가 없는 이유를 설명하는 도구 설명을 표시합니다. 그러나 이것이 효율성을 높이고 좌절감을 줄일 수 있다는 것을 알고 있습니다. 우리는 유사한 도구를 만든 Sarah Lim과 그녀의 동료들의 연구에 의해 강화되었습니다. 그들의 연구에서 그들은 초보 개발자가 관련 없는 코드를 무시할 수 있는 도구를 사용할 때 CSS로 빌드하는 속도가 50% 더 빠르다는 것을 발견했습니다.

어떤 면에서 이것은 우리가 가장 좋아하는 기능입니다. 거의 기능으로 등록되지 않지만 실제로 발견하거나 배울 필요 없이 전체 워크플로를 개선하는 덜 매달린 UX 과일입니다.

비활성 CSS는 Firefox 70에서 시작되지만 지금은 Developer Edition, Beta 및 Nightly를 포함한 Firefox의 시험판 버전에서 사용할 수 있습니다.

비활성 CSS 사용해보기

1. Firefox 개발자 에디션을 다운로드하십시오.
2. Firefox를 열고 wikipedia.org로 이동합니다.
3. Cmd + Shift + C 를 사용하여 Inspector를 열고 central-featured 이라고 하는 중앙 콘텐츠 영역을 선택합니다.
4. 회색으로 표시된 vertical-align 선언에 유의하십시오.
5. 정보 아이콘 위에 마우스를 올려 놓고 관심이 있는 경우 "자세히 알아보기"를 클릭하십시오.

7. 접근성 패널

그 과정에서 우리는 대부분 한 사람으로 구성된 별도의 팀에서 개발한 접근성 기능을 갖게 되었습니다. Yura Zenevich는 올해 인턴 Maliha 이슬람과 함께 했습니다.

그들은 함께 Firefox의 새로운 접근성 패널을 강력한 검사 및 감사 도구로 만들었습니다. 접근성 트리 및 속성을 표시하는 것 외에도 이제 페이지에서 다양한 유형의 검사를 실행할 수 있습니다. 지금까지 검사에는 색상 대비, 텍스트 레이블 및 키보드 포커스 스타일이 포함됩니다.

이제 Nightly에서 곧 출시될 WebRender 기술을 활용하는 새로운 색맹 시뮬레이터를 사용해 볼 수 있습니다.

접근성 패널을 사용해보십시오

1. Firefox 개발자 에디션을 다운로드하십시오.
2. metup.com으로 이동합니다.
3. 개발자 도구에서 접근성 탭으로 이동하여 "접근성 기능 켜기" 버튼을 클릭합니다.
4. "문제 확인" 옆에 있는 드롭다운 메뉴를 클릭하고 "모든 문제"를 선택합니다.
5. 다양한 대비, 키보드 및 텍스트 레이블 문제를 살펴보고 관심이 있는 경우 "자세히 알아보기" 링크를 클릭하십시오.

다음

우리는 현재 MDN의 정보를 사용하여 선택한 요소에 대한 브라우저별 문제를 표시하는 브라우저 호환성 도구에 대해 열심히 노력하고 있습니다. GitHub에서 팔로우하여 자세히 알아볼 수 있습니다.

미래

우리는 최신 웹을 지원하기 위해 최선을 다하고 있으며, 이는 지속적으로 변화하고 성장하는 것을 의미합니다.

브라우저 공급업체는 항상 새로운 사양을 구현합니다. 점진적 개선, 응답성 및 접근성에 대한 지침과 모범 사례는 지속적으로 발전합니다. 우리 도구 제작자도 계속 발전해야 합니다.

그리고 웹을 만드는 데 있어 오래 지속되고 항상 존재하는 문제는 무엇입니까? 어떤 일상적인 사용자 인터페이스를 재고해야 합니까? 이것들은 우리를 계속 진행시키는 몇 가지 질문입니다!

페이지의 DOM 트리를 탐색하는 더 좋은 방법은 무엇입니까? DevTools의 해당 부분은 Firebug 시대 이후로 본질적으로 변경되지 않았습니다.

우리는 최근에 방문한 요소 사이를 쉽게 탐색할 수 있는 뒤로 및 앞으로 버튼과 같은 기능을 실험해 왔습니다.

우리가 논의하고 있는 보다 극적인 변화는 HTML 템플릿 엔진과 유사한 구문을 사용하는 컴팩트 DOM 보기를 추가하는 것입니다. 소스 보기/편집보다는 CSS로 이동하는 가장 일반적인 사용 사례에 중점을 둡니다.

우리는 또한 더 나은 요소 선택기에 대해 생각했습니다. DevTools로 왔다 갔다 하는 횟수를 줄이면서 페이지 내에서 작업하는 것이 어떻게 더 생산적일 수 있는지 알고 있습니다. 요소 선택기를 더 강력하고 지속적으로 만들 수 있습니다. 아마도 페이지에서 공백을 선택하고 그 공백의 원인을 알려주거나 다른 요소 간의 관계를 밝힐 수 있습니다.

이것들은 커뮤니티의 도움을 받아 더 탐구하고자 하는 많은 아이디어 중 두 가지에 불과합니다.

귀하의 의견이 필요합니다!

우리는 개발자나 디자이너로서 당신의 삶을 더 쉽게 만들어주는 멋진 도구를 계속 만들고 싶습니다.

여기에 도움을 줄 수 있는 쉬운 방법이 있습니다. 다음 주에 Firefox 개발자 에디션을 다운로드하고 일부 작업에 사용해 보세요.

그런 다음 1페이지 분량의 설문조사에 참여하여 귀하의 생각을 알려 주십시오.

우리는 항상 개선을 위한 아이디어, 특히 정기적인 좌절에서 우리 모두를 구할 수 있는 덜 매달린 과일에 대한 아이디어를 듣는 데 관심이 있습니다. 우리는 공개된 상태에서 작업을 수행하므로 팔로우하고 참여할 수 있습니다. @FirefoxDevTools에서 계속 업데이트하겠습니다.

이 기사에 기여한 Patrick Brosset에게 감사드립니다.