[FE] 크로스 브라우징(Cross-Browsing)이란?

jiny·2024년 7월 31일

기술 면접 준비 프론트엔드(FE)

기술 면접

목록 보기

8/60

🗣️ 크로스 브라우징이 무엇인가요?

의도: 웹 브라우저 간 예외 처리가 필요하다는 점을 알고 있는지 확인하는 질문
팁: 간단한 에피소드를 소개해도 좋다.
나의 답안

크로스 브라우징은 웹 사이트나 웹 애플리케이션이 다양한 웹 브라우저와 플랫폼에서 일관된 동작과 모양을 유지하도록 하는 작업입니다.
사용자가 어떤 브라우저를 사용하든 동일한 사용자 경험을 제공하기 위해 필수적입니다.
제공된 답안 (모범 답안)

크로스 브라우징에서 앞에 크로스는 보통 개발 업계에서 무언가의 "사이"를 뜻하곤 합니다.
그래서 크로스 브라우징을 지원한다는 말은 여러 브라우저 사이에 오류 없이 같은 경험을 제공한다는 의미와 같습니다.

한때 개발하다가 이러한 일이 있었습니다.
저는 갤럭시 유저이기 때문에 크롬으로만 웹을 테스트해서 문제가 없었습니다.
그래서 자신만만하게 PR을 올렸는데, 동료 분이 오셔서 화면 레이아웃이 깨진다고 알려주셨습니다.
알고 보니, 동료 분은 아이폰의 사파리 브라우저를 사용하고 있었고, 특정 CSS 속성이 크롬과 사파리 브라우저에서 다르게 작동하고 있어서 생긴 문제였습니다.

그래서 이후로는 크로스 브라우징에 대해 관심을 좀 더 가지게 되었고, 나중에는 cypress같은 E2E 테스트 도구를 사용해 각 브라우저 환경에서 테스트를 진행해보고 싶은 마음도 가지고 있습니다.

📝 개념 정리

🌟 크로스 브라우징의 개념

웹 사이트나 웹 애플리케이션이 다양한 웹 브라우저와 플랫폼에서 일관된 동작과 모양을 유지하도록 하는 작업
사용자가 어떤 브라우저를 사용하든 동일한 사용자 경험을 제공하기 위해 필수적이다.

🌟 크로스 브라우징의 중요성

다양한 브라우저 사용
- 사용자는 Chrome, Firefox, Safari, Edge, Opera 등 다양한 브라우저를 사용한다.
- 각 브라우저는 HTML, CSS, JavaScript의 해석 방식이 조금씩 다를 수 있다.
플랫폼 차이
- 같은 브라우저라 하더라도 운영체제나 기기에 따라 동작이 다를 수 있다.
- 예를 들어, 데스크탑과 모바일 브라우저 사이에는 차이가 존재한다.
사용자 경험
- 일관된 UI와 기능성을 제공함으로써 사용자 경험을 향상시키고, 다양한 사용자층을 만족시킬 수 있다.

🌟 크로스 브라우징을 위한 기술

HTML과 CSS 표준 준수
- 표준을 준수하는 코드를 작성하면 대부분의 브라우저에서 일관된 결과를 얻을 수 있다.
- 최신 웹 표준을 사용하는 것이 중요하다.
JavaScript 라이브러리 사용
- jQuery와 같은 라이브러리는 브라우저 간의 호환성을 개선하는 데 도움을 줄 수 있다.
- 최신 JavaScript 기능을 사용할 때는 Babel과 같은 트랜스파일러를 사용해 구형 브라우저에서도 호환되도록 할 수 있다.
폴리필(Polyfill)
- 최신 브라우저에서만 지원되는 기능을 구형 브라우저에서도 사용할 수 있도록 구현한 스크립트이다.
CSS 리셋
- 브라우저 간의 기본 스타일 차이를 없애기 위해 CSS 리셋이나 노멀라이즈(또는 유사한 것)를 사용한다.
반응형 디자인
- 다양한 화면 크기와 해상도에 대응할 수 있도록 미디어 쿼리 등을 사용하여 디자인을 유연하게 만든다.