Firefox 157 출시, 웹 서비스의 다크모드·CSS·화상통화 점검 필요

오늘의 핵심

Firefox 157이 대규모 화면 개편과 함께 출시됐다. 웹 페이지 기본 대화상자와 입력 UI의 색상 모드 연동, 새로운 CSS 기능, WebRTC 개선이 포함돼 국내 웹·앱 운영자는 브라우저별 회귀 테스트와 디자인 시스템 점검이 필요하다.

확인된 사실

• Firefox 157은 도구 모음, 탭, 사이드바와 메뉴를 아우르는 대규모 시각 개편을 적용했다. 근거 [1] [2]
• 웹 페이지의 alert·confirm·prompt 대화상자와 색상·날짜 선택기, 자동완성 목록이 페이지의 밝은색 또는 어두운색 배색에 맞춰 표시된다. 근거 [1]
• Firefox 157은 CSS @supports의 at-rule() 함수와 overscroll-behavior의 chain 값을 지원한다. 근거 [1]
• 지원되는 장치에서는 WebRTC 통화의 AV1 영상을 소프트웨어 대신 하드웨어로 디코딩할 수 있다. 근거 [1] [2]
• Tab 키를 눌렀을 때 주소창과 검색창의 입력 필드로 바로 초점이 이동하도록 키보드 동작이 변경됐다. 근거 [1] [2]

왜 중요한가

• 브라우저가 그리는 기본 폼 UI의 색상이 달라져 자체 다크모드와 대비, 브랜드 색상 조합에서 예상하지 못한 시각적 불일치가 생길 수 있다.
• 새 CSS 기능을 즉시 적용할 경우 구형 Firefox와 다른 브라우저에서 동작이 달라질 수 있으므로 기능 감지와 대체 스타일이 필요하다.
• WebRTC 기반 상담·회의·교육 서비스는 지원 장치에서 영상 처리 효율이 달라질 수 있어 실제 통화 품질을 다시 측정할 계기가 된다.

inxight의 관점

• 이번 변화의 핵심은 브라우저 외형보다 웹 콘텐츠와 맞닿는 네이티브 UI의 표현 방식 변화다. 디자인 시스템이 브라우저 기본 요소를 얼마나 사용하는지부터 파악해야 한다.
• 신규 CSS 지원은 점진적 향상 방식으로 도입해야 한다. 지원 여부를 감지한 뒤 개선된 동작을 제공하고, 미지원 환경에는 기존 경험을 유지하는 설계가 안전하다.
• 데스크톱의 표준·컴팩트 밀도와 분할 화면은 실제 콘텐츠 가용 면적을 바꾸므로 고정형 헤더와 반응형 중단점 검증에 포함할 가치가 있다.

실무 체크리스트

• Firefox 157에서 로그인, 가입, 결제, 예약 화면의 기본 대화상자·날짜 선택기·자동완성을 밝은색과 어두운색 모드로 회귀 테스트한다.
• 키보드만 사용해 주소창에서 서비스로 진입한 뒤 주요 폼과 검색 기능의 초점 순서 및 포커스 표시를 확인한다.
• at-rule()과 overscroll-behavior: chain을 도입할 때 @supports 기반 분기와 미지원 브라우저용 대체 동작을 함께 정의한다.
• WebRTC 서비스를 운영한다면 지원 장치에서 AV1 통화의 CPU 사용량, 발열, 영상 방향 및 음성·영상 동기화를 점검한다.