---

# 서론 – “내 사이트는 Chrome에서만 정상이다” 라는 착각

개발을 시작하면 대부분 VS Code와 Chrome DevTools를 손에 쥐고 바로 코딩을 시작합니다. “코드 작성 → Chrome에서 확인 → 문제 없으면 배포” 라는 흐름은 빠르고 편리하지만, Chrome 전용으로 테스트한다는 것은 곧 15% 이상의 사용자를 배제한다는 뜻이 될 수 있습니다.

특히 한국에서는 네이버 웨일, Microsoft Edge, Safari 등 다양한 브라우저가 공존하고, 구형 브라우저를 사용하는 고령층이나 기업 환경에서도 웹 접근성이 보장되어야 합니다. 이번 글에서는 Chrome 호환성에만 의존하지 않고, 모든 사용자를 만족시키는 브라우저 테스트 방법을 초보자도 이해하기 쉬운 단계별 가이드로 정리합니다.

---

# 1️⃣ 주요 브라우저와 그 비중 파악하기

# 1‑1. 국내 브라우저 점유율 확인

• Chrome: 55%

• 네이버 웨일: 15%

• Safari (iOS): 12%

• Microsoft Edge: 8%

• 구형 Internet Explorer: 5%

※ 위 수치는 2024년 기준 StatCounter와 네이버 데이터랩을 종합한 결과이며, 실제 서비스에 따라 차이가 있을 수 있습니다.

# 1‑2. 타깃 사용자 정의

• 연령대: 60대 이상은 사파리(iOS)와 구형 Edge 사용 비중이 높음

• 기업 환경: 사내 정책으로 IE11을 고정 사용하는 경우 존재

• 모바일 vs 데스크톱: 모바일 사용자는 사파리와 웨일 비중이 크게 상승

SEO 키워드: Chrome 호환성, 브라우저 테스트, 웹 접근성

---

# 2️⃣ 로컬 환경에서 다중 브라우저 테스트 구현하기

# 2‑1. VS Code 확장 프로그램 활용

• Live Server: 실시간 리로드 제공, 모든 브라우저와 연동 가능

• Browser Preview: VS Code 내부에서 Chrome, Edge, Firefox 등을 동시에 미리 보기

# 2‑2. 크로스 브라우저 자동화 도구

| 도구 | 특징 | 설치 명령 |

|------|------|-----------|

| BrowserStack | 클라우드 기반, 실제 디바이스 테스트 지원 | npm install -g browserstack-local |

| Sauce Labs | 다양한 OS·브라우저 매트릭스 제공 | npm install -g saucectl |

| Playwright | 최신 Chromium, WebKit, Firefox 지원, 스크립트 작성 쉬움 | npm i -D @playwright/test |

Tip: Playwright는 npm test 명령 하나로 모든 브라우저에서 동일한 테스트를 실행할 수 있어 초보자도 손쉽게 적용할 수 있습니다.

# 2‑3. 간단한 Playwright 테스트 예시

js

// example.test.js

const { test, expect } = require('@playwright/test');

test('홈페이지 레이아웃 확인', async ({ page }) => {

  await page.goto('https://your-site.com');

  // 공통 요소 검증

  await expect(page.locator('header')).toBeVisible();

  // 브라우저별 CSS 차이 확인

  const bgColor = await page.evaluate(() => getComputedStyle(document.body).backgroundColor);

  console.log('Background color:', bgColor);

});

위 코드를 npx playwright test 로 실행하면 Chromium, Firefox, WebKit(Safari 엔진) 모두에서 테스트가 진행됩니다.

---

# 3️⃣ 실제 사용자 환경을 반영한 테스트 전략

# 3‑1. 폴백(Fallback) 스타일 적용

• CSS 변수 대신 전통적인 px, em 사용

• @supports 를 활용해 최신 기능 미지원 브라우저에 대비

css

/* 최신 브라우저 */

@supports (display: grid) {

  .container { display: grid; }

}

/* 구형 브라우저 폴백 */

.container { display: block; }

# 3‑2. 폰트와 이미지 포맷 호환성

• WebP는 Chrome에서만 지원, JPEG/PNG를 기본으로 제공하고, WebP는 picture 요소로 대체

html

<picture>

  <source srcset='image.webp' type='image/webp'>

  <img src='image.jpg' alt='예시 이미지'>

</picture>

# 3‑3. 접근성(Accessibility) 체크

• ARIA 속성은 대부분 브라우저가 지원하지만, 스크린리더 호환성은 별도 테스트 필요

• Lighthouse(Chrome DevTools) → Accessibility 탭에서 점수 확인

---

# 4️⃣ 배포 전 최종 검증 체크리스트

| 체크 항목 | 확인 방법 | 비고 |

|----------|----------|------|

| 크로스 브라우저 레이아웃 | Playwright / BrowserStack | 주요 브라우저 5종 이상 |

| CSS/JS 폴백 | 수동 테스트 + 자동화 | IE11, Edge Legacy 포함 |

| 이미지 포맷 | picture 태그 적용 여부 | WebP 지원 여부 |

| 접근성 점수 | Lighthouse (≥90점) | 색 대비, 키보드 네비게이션 |

| 성능 | 페이지 로드 타임 < 3초 | 모바일 네트워크 시뮬레이션 |

---

# 결론 – 모든 사용자를 위한 “Chrome 외 테스트” 실천법

“Chrome에서만 정상 작동”이라는 착각은 이제 그만!

1. 브라우저 점유율을 파악하고 타깃을 정의하고,

2. VS Code와 Playwright 같은 도구로 로컬에서 다중 브라우저를 자동화하며,

3. 폴백 스타일과 이미지 포맷을 적절히 적용하고,

4. 접근성·성능까지 검증하면 15% 이상의 사용자를 놓치지 않을 수 있습니다.

지금 바로 플레이그라운드 프로젝트에 Playwright를 도입하고, BrowserStack 무료 체험을 신청해 보세요. 여러분의 웹사이트가 모든 브라우저에서 일관된 경험을 제공한다면, 사용자 만족도와 SEO 순위 모두 상승할 것입니다.

행동 유도: 오늘 소개한 체크리스트를 다운로드하고, 팀 회의에서 “Chrome 외 테스트”를 공식 개발 프로세스에 추가해 보세요! 🚀