# Chrome에서만 정상 작동? 15% 사용자를 놓치지 않는 웹 브라우저 테스트 완전 가이드

---

# # 서론 – “내 사이트는 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 외 테스트”를 공식 개발 프로세스에 추가해 보세요! 🚀