software

당신의 사이트가 Chrome에서 작동합니다. 축하합니다, 사용자 15%를 소외시켰습니다.

발행: (2025년 12월 16일 오전 02:45 GMT+9)
10 min read
원문: Dev.to

Source: Dev.to

당신의 테스트 워크플로우를 추측해 보자

  • VS Code에서 코드 작성
  • Chrome DevTools 열기
  • 동작 여부 확인
  • 배포

당신은 방금 Firefox를 깨뜨렸습니다.
그리고 Safari도요. 아마도 더 엄격한 프라이버시 설정을 가진 일부 Chromium 기반 브라우저도요.

“Chrome이 시장 점유율 65%를 차지한다!” 라고 말하겠지만,
멋지군요. 그렇다면 35%의 사용자가 깨진 경험을 하게 되는 것이 괜찮은가요? 그건 약 15억 명에 해당합니다.

현재 브라우저 테스트 현황

최근 트위터에서 비공식 설문을 진행했습니다:

“배포 전에 몇 개의 브라우저를 테스트하시나요?”

결과 (783표):

  • Chrome만: 47%
  • Chrome + Firefox: 28%
  • Chrome + Firefox + Safari: 19%
  • 모든 주요 브라우저: 6%

거의 절반에 달하는 개발자가 Chrome에서만 테스트한 코드를 배포하고 있습니다.

“하지만 Chrome이 표준이다”

아닙니다. Chrome은 지배적일 뿐, 표준은 아닙니다.
표준은 W3C 사양과 WHATWG 살아있는 표준입니다.

Chrome이 단지 가지고 있는 것은:

  • ✅ 가장 큰 엔지니어링 팀 (Google)
  • ✅ 가장 공격적인 기능 배포
  • ✅ 가장 큰 개발자 관계

하지만 “가장 인기 있다”는 “가장 올바르다”와는 다릅니다.

예시: -webkit- 접두사 시대

/* CSS */
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

왜? WebKit(Safari/Chrome)이 표준화되기 전에 기능을 먼저 제공했기 때문입니다. 개발자들은 Chrome/Safari에서만 테스트했으므로, 다른 브라우저들은 WebKit인 척 해야 했습니다. Mozilla는 많은 사이트가 Firefox에서 깨지는 것을 방지하기 위해 -webkit- 접두사 지원을 추가했습니다. 이것이 하나의 엔진이 지배할 때 일어나는 일입니다.

Firefox가 무시되는 이유 (그리고 왜 위험한가)

이유 #1: 개발자들이 Chrome을 사용한다

악순환

  1. 개발자들은 개인 브라우징에 Chrome을 사용한다
  2. 개발자들은 Chrome에서만 테스트한다
  3. 사이트가 Firefox에서 깨진다
  4. 사용자는 Chrome으로 전환한다
  5. 시장 점유율이 떨어진다
  6. 개발자는 Firefox 무시를 정당화한다

개발자 사이에서 Firefox 사용률은 ~10 %, 일반 사용자 사이에서는 **~3 %**입니다.
번역: 우리는 사용자가 쓰는 브라우저가 아니라, 우리가 쓰는 브라우저에서 테스트하고 있습니다.

이유 #2: Chrome DevTools가 더 좋다

Chrome DevTools는 대규모 엔지니어링 팀 덕분에 더 다듬어졌습니다.

Chrome이 제공하는 것:

  • 더 나은 성능 프로파일러
  • 내장된 Lighthouse
  • 더 많은 확장 프로그램

Firefox가 제공하는 것:

  • 뛰어난 CSS Grid 인스펙터 (정말 놀랍습니다)
  • 컨테이너 쿼리 디버깅
  • 프라이버시 중심 네트워크 도구

Google은 DevTools에 100명 이상의 엔지니어를 투입하고, Mozilla는 약 20명 정도입니다.

이유 #3: “Chrome에서 동작하면 어디서든 동작한다”

거짓. Firefox에서만 발생하는 실제 버그들:

버그 #1: flex-basis: 0 렌더링

/* CSS */
.container {
  display: flex;
}

.item {
  flex: 1 1 0;   /* Chrome에서는 동작 */
  flex: 1 1 0%;  /* Firefox에서는 필요 */
}

Chrome은 단위 없이 0을 허용하지만, Firefox는 사양에 따라 0%를 요구합니다. Firefox가 올바릅니다.

버그 #2: 날짜 입력 파싱

// JavaScript
new Date('2025-01-15');   // 어디서든 동작

new Date('1/15/2025');    // Chrome: OK
                         // Firefox: Invalid Date
                         // Safari: OK

Firefox는 사양을 엄격히 따르고, Chrome은 형식을 추측해 “도와줍니다”.

버그 #3: fetch()와 keepalive

// JavaScript
fetch('/api/log', {
  method: 'POST',
  keepalive: true,   // Chrome: 항상 동작
                     // Firefox: POST/GET에만 동작
  body: JSON.stringify(data)
});

Firefox에는 특정 HTTP 메서드와 함께 keepalive가 동작하지 않는 버그가 있었으며, 이는 몇 시간의 디버깅을 초래했습니다.

Firefox를 무시할 때의 실제 비용

1. 프라이버시 의식이 높은 사용자 배제

Firefox 사용자는 대체로:

  • 기술에 더 정통하고
  • 프라이버시를 중시하며
  • 광고 차단기를 사용할 확률이 높다

그들은 B2B SaaS와 개발자 도구에 더 높은 가치를 가집니다.

사례 연구: LogWard에서:

  • Chrome: 62%
  • Firefox: 21%
  • Safari: 14%
  • Edge: 3%

Firefox 사용자는 Chrome 사용자보다 1.8배 높은 전환율을 보입니다.

2. 독점 강화

Firefox가 사라지면 브라우저 환경은 Blink 기반 브라우저들로만 남게 됩니다:

  • Chrome (Google)
  • Edge (Microsoft)
  • Opera (중국)
  • Brave (프라이버시)
  • Vivaldi (파워 유저)

모두 같은 엔진을 공유합니다. 인터넷 익스플로러가 95 % 점유율을 차지했을 때 혁신이 5년간 정체됐던 것처럼, 우리는 Chrome와 함께 같은 운명을 겪을 위험이 있습니다.

3. 실제 버그 누락

// JavaScript
const data = await fetch('/api/data').then(r => r.json());

// Chrome에서는 동작
console.log(data?.items?.[0]?.name);

// Firefox 85에서는 (옵셔널 체이닝 버그) 깨짐

옵셔널 체이닝 버그가 오래된 Firefox 버전 사용자 **30 %**에게 빈 페이지를 보여주었습니다. 단 한 명의 사용자가 보고서를 제출했기에 발견된 사례입니다.

“하지만 나는 최신 JavaScript를 쓰고, Babel이 처리한다”

Babel은 문법을 트랜스파일하지만 브라우저 API를 폴리필하지는 않습니다.

예시: structuredClone()

// JavaScript
const cloned = structuredClone(originalObject);

지원 현황

  • Chrome 98+: ✅
  • Firefox 94+: ✅
  • Safari 15.4+: ✅

core-js 같은 폴리필 없이 오래된 Firefox에서는 이 API가 깨집니다.

Safari 문제는 더 심각하다

Windows/Linux 개발자에게 Safari 테스트는 어렵습니다:

  • Mac이 필요함 ($1,000 이상) 혹은 BrowserStack 같은 유료 서비스($39/월) 혹은 GitHub Codespaces와 같은 복잡한 셋업이 필요합니다.

Safari는 약 20 % 시장 점유율을 차지하고 있으며(대부분 iOS). iOS에서는 모든 브라우저가 WebKit을 사용해야 하므로, iOS의 Chrome은 사실 Safari에 Chrome 스킨을 입힌 것에 불과합니다. Safari를 무시한다는 것은:

  • 모든 iPhone
  • 모든 iPad
  • 대부분의 Mac

을 무시한다는 의미입니다.

실제로 크로스‑브라우저 테스트하는 방법 (미치지 않고)

1단계: Firefox Developer Edition 설치

다운로드:

왜 Developer Edition인가?

  • 빠른 릴리즈 사이클
  • 내장된 개발자 도구
  • 컨테이너 탭(컨텍스트 격리)

시간 비용: 약 5분.

2단계: 테스트 체크리스트 만들기

배포 전마다:

- [ ] Chrome에서 테스트 (당신의 개발 브라우저)
- [ ] Firefox에서 테스트 (사양 위반 잡기)
- [ ] Safari에서 테스트 (Mac이 있다면)
- [ ] 모바일 Chrome에서 테스트 (반응형)

시간 비용: 배포당 5–10분.

3단계: 브라우저 감지가 아니라 기능 감지 사용

잘못된 예:

if (navigator.userAgent.includes('Firefox')) {
  // Firefox‑전용 코드
}

올바른 예:

if ('structuredClone' in window) {
  const cloned = structuredClone(obj);
} else {
  const cloned = JSON.parse(JSON.stringify(obj));
}

4단계: Autoprefixer와 PostCSS 사용

npm install autoprefixer postcss

Autoprefixer가 벤더 접두사를 자동으로 추가합니다:

/* 당신이 작성한 코드 */
.box {
  display: grid;
}

/* Autoprefixer가 출력한 코드 */
.box {
  display: -ms-grid;
  display: grid;
}
Back to Blog

관련 글

더 보기 »