답변.

질문 역사

브라우저의 다양성은 사이트의 표시 및 작동 방식에 차이를 가져옵니다. 프론트엔드의 신뢰성은 다양한 브라우저에서 주요 시나리오가 제대로 작동하는지에 따라 다르며, 특히 제품이 넓은 대중을 대상으로 할 경우 더더욱 그렇습니다.

문제

모든 목표 구성을 빠르게 확인하는 것은 어렵습니다. 불명확한 버그는 종종 특정 브라우저 버전이나 운영 체제에서만 나타납니다. 이러한 결함을 놓치면 사용자 충성도에 영향을 미칩니다.

해결책

수동 크로스 브라우저 테스트는 필요한 브라우저(예: Chrome, Firefox, Edge, Safari)와 해당 최신 버전을 선택하는 것에서 시작됩니다. 테스트는 다음을 포함합니다:

• 레이아웃 및 요소 표시.
• 양식 및 동적 구성 요소의 기능.
• 확장 프로그램 및 스크립트와의 상호작용.

버그 문서화는 브라우저, 버전 및 재현 단계의 정확한 명시가 중요합니다.

주요 특징:

• 가장 인기 있는 소프트웨어에만 의존해서는 안 되며, 덜 사용되는 브라우저와 모바일 플랫폼도 반드시 포함해야 합니다.
• 불명확한 결함(렌더링의 차이, 이벤트 처리, css/js의 동작)에 주의해야 합니다.
• 모든 장치에 물리적으로 접근할 수 없는 경우 원격 테스트 도구(Browserstack, SauceLabs)를 사용하는 것이 좋습니다.

함정 질문.

사이트가 최신 버전의 Chrome에서 제대로 작동하면 Safari나 Edge에서 문제가 없을까요?

네, 문제가 있을 수 있습니다. 각 브라우저는 특히 css 렌더링, javascript 동작 및 네트워크 요청의 특성과 관련된 표준 지원을 다르게 구현할 수 있습니다.

하나의 운영 체제에서만 테스트해도 될까요?

아니요. 동일한 브라우저라도 Windows와 macOS에서 다르게 작동하기 때문에 운영 체제가 렌더링 및 이벤트 처리에 영향을 줍니다.

페이지의 시각적 검사가 충분한가요?

아니요. 불명확한 버그는 데이터 처리, 캐시 또는 쿠키에 정보 저장, API와의 상호작용과 관련될 수 있습니다.

일반적인 실수 및 안티 패턴

• 사용 시나리오 확인 없이 시각적인 요소만 평가하는 것.
• 기본 플랫폼에서만 테스트하는 것(예: Windows + Chrome에서만).
• 브라우저 및 버전별로 버그 리포트의 세부 정보 부족.

실제 사례

부정적인 사례

테스터가 모바일 브라우저와 Safari의 동작을 신경 쓰지 않고 오직 데스크탑에서 Chrome에서만 사이트를 테스트했습니다.

장점:

• 기본 스모크 테스트를 빠르게 통과했습니다.

단점:

• iPhone에서 양식 표시와 관련된 심각한 버그를 놓쳤습니다.
• 다른 플랫폼을 사용하는 고객을 잃었습니다.

긍정적인 사례

테스터가 Browserstack을 사용하여 주요 데스크탑 및 모바일 브라우저에서 사이트를 테스트하고, 단계를 기록하며 모든 불일치를 스크린샷으로 찍었습니다.

장점:

• 최대한 많은 시나리오를 커버했습니다.
• 비정상 작동이 발견되었을 때 빠르게 대응했습니다.

단점:

• 검사의 수가 증가해서 과정이 느려졌습니다.