크로스 브라우징(Cross Browsing)

unzinzanda·2024년 5월 22일

프론트엔드 기술 면접

목록 보기

1/3

크로스 브라우징(Cross Browsing)이란?

웹 페이지 또는 웹 어플리케이션이 다양한 브라우저와 버전에서 개발자의 의도대로 올바르게 작동하도록 하는 기술
특정 브라우저/기기 환경에 최적화되지 않고, 공통 요소를 사용하여 웹 페이지를 제작하는 기법으로 다양한 환경으로부터 동등한 수준의 정보, 기능 접근이 가능하도록 하는 것에 초점을 맞춘다.

크로스 브라우징이 필요한 이유

브라우저마다 렌더링 엔진이 다르기 때문이다.

렌더링 엔진의 종류

렌더링 엔진 : 페이지를 렌더링할 때 실질적으로 작업을 하게 되는 엔진

엔진		회사
트라이던트(Trident)	IE, 아웃룩 이메일 클라이언트나 윈도우 프로그램의 미니 브라우저 등에 사용된다.	마이크로 소프트
게코(Gecko)	파이어 폭스, 모질라 재단의 이메일 클라이언트인 선더버드에 사용된다.	모질라
웹킷(Webkit)	- 초기 애플사가 사파리 엔진으로 사용하기 위해 차용했으나 현재는 웹킷 프로젝트로 분리되어 개발되고 있다. - 크롬에서도 사용되었던 엔진이며 iOS나 안드로이드의 기본 브라우저들이 이 웹킷 엔진을 사용한다. - 점유율이 높은 엔진이다.	애플사
프레스토(Presto)	오페라 15버전부터 더이상 사용하지 않는다.	오페라 소프트웨어
블링크(Blink)	- 웹킷 엔진을 사용하던 구글이 크롬이 개발, 사용하고 있는 엔진이다. - 웹킷에서 줄기를 가져왔기 때문에 웹킷 엔진과 비슷한 모습이 보여진다. - 프레스토 엔진을 버린 오페라가 블링크 엔진을 사용하고 있다.	구글
듀얼 엔진	- 국내 이스트소프트의 스윙(Swing) 브라우저를 예로 들면 크롬과 같으면서도 액티브X를 지원하는데, 독자적인 엔진이 아닌 두 가지 엔진을 번갈아 사용하는 방식이기 때문에 가능하다. - 보통 트라이던트와 웹킷 or 블링크 엔진을 사용한다.

렌더링 엔진에 따라

작동하지 않는 HTML5, Javascript 코드
해석하지 못하는 CSS 코드
브라우저 버그들
브라우저 자체적인 CSS 스타일

이 존재하기 때문에 모든 브라우저가 100% 동일하게 작동하도록 만드는 것은 불가능한 일이다. 따라서 동등한 수준으로 작동하도록 하기 위해 크로스 브라우징이 필요하다.

크로스 브라우징 작업

1. Dont't Repeat Yourself (DRY)

정보의 반복을 줄이는 거을 목표로 하는 개발의 기본 원칙이다.

웹 사이트를 개발할 때 코드를 단순하고 재사용 가능하게 유지하는 것이 바람직하다. 여러 파일에서 코드를 복사, 붙여넣기 하는 대신 필요할 때 호출할 수 있는 재사용 가능한 함수(Javascript 함수나 Sass mixin)을 작성하여 사용한다. 이러면 문제가 발생하였을 때, 여러 파일을 수정하는 대신 하나의 기능만 수정하면 되기 때문에 실수할 가능성을 최소화할 수 있다.

2. CSS 속성의 브라우저 호환성 검토

서로 다른 브라우저는 CSS 속성을 동일하게 지원하지 않는다.
한 브라우저에서 완벽하게 사용할 수 있는 것이 다른 브라우저에서는 사용할 수 없을수도 있다. 따라서 Can I Use와 같은 사이트를 사용하여 브라우저 호환성을 확인한 후 작업을 해야 한다.

3. 브라우저별 Vender Prefix

브라우저마다 따로 놀던 CSS3의 속성을 각각의 브라우저들이 인식할 수 있게 해주기 위해 사용한다.
CSS 표준안으로 확정되지 않았거나 특정 브라우저에서만 지원되는 CSS 속성을 사용하고 싶을 때, 벤더 프리픽스를 사용하면 그 기능이 포함되어 있지 않은 브라우저에서도 사용할 수 있게 해준다.

1. 크롬 : -webkit-
2. 사파리 : -webkit-
3. 파이어폭스 : moz-
4. 오페라 : -o-, -webkit-
5. 익스플로러 : -ms-

벤더 프리픽스가 붙은 속성과 표준 속성이 모두 있을 경우, 나중에 나오는 속성이 적용되므로 표준 속성을 가장 마지막에 둬야 한다는 걸 주의해야 한다.

4. CSS 초기화 작업

'웹 브라우저'마다 default 값으로 스타일이 적용되어 있기 때문에 브라우저마다 스타일의 차이를 줄이기 위해 default 값을 초기화 해주어야 한다.
CSS 초기화를 통해 HTML 요소에 내장된 고유 CSS 스타일 속성을 제거하여 스타일이 0인 상태에서 디자인을 만들어 나갈 수 있게 해준다.
크로스 브라우징을 구현할 때 유용하다.

🔗Reset CSS

5. 브라우저별 CSS 파일와 브라우저 테스트

브라우저별로 CSS 파일을 분리하여 제공하는 방법이다. 이를 통해 각 브라우저에 맞는 스타일을 적용할 수 있으므로 크로스 브라우징 이슈를 줄일 수 있다.

또한 각 브라우저에서 테스트를 진행하여 문제를 파악하고 수정해야 한다.
BrowserStack, CrossBrowserTesting, Sauce Labs 등의 테스트 툴이 있다.

6. 핵(Hack)

스타일을 줄 때 특수문자를 넣어서 다른 브라우저들에서는 인식이 안되지만 IE 특정 버전에서는 인식되도록 하는 방법이다.
하지만 IE8 이상의 브라우저에서 구분해내기 어려우며 CSS 유지 보수를 어렵게 하기 때문에 추천하지 않는 방법이다.

7. DOCTYPE 정의

DOCTYPE
: Document Type의 약자로 HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹 브라우저가 내용을 올바르게 표시할 수 있도록 해준다.

<!DOCTYPE html>

을 선언하지 않으면 '비표준 모드'로 동작하여 문서 제작자가 의도한 레이아웃이 깨지게 되어 크로스 브라우징 이슈가 더 심해지게 된다.
따라서 DOCTYPE을 선언하여 현재 사용되고 있는 모든 브라우저들이 '표준 모드'로 해당 문서를 인식하게 하고 문서 제작자가 의도한 방향대로 화면을 렌더링하게 해주어야 한다.

8. 코드 유효성 검사

잘못된 HTML 및 CSS 코드로 인해 웹사이트가 모든 브라우저에서 다양한 방식으로 오작동할 수 있다.
이를 방지하기 위해 코드의 유효성 검사를 해야 한다.

9. 반응형 웹사이트 만들기

반응형 웹 디자인으로 데스크톱에서 모바일, 그 사이의 모든 장치에 이르기까지 모든 장치에 맞게 디자인을 조정할 수 있다.
모든 기능이 가능하고 크기에 관계없이 모든 장치와 브라우저에서 모든 정보를 액세스 할 수 있는지 확인하는 것이 중요하다.
Wix Studio나 media 쿼리를 통해 반응형 웹사이트를 만들 수 있다.

@media only screen and (max-width: 600px) {
	.container {
		margin: 0 16px;
	}
}

10. meta 태그를 이용하여 크로스 브라우징 이슈를 해결하는 방법

meta 태그
: 브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함하고 있는 HTML 태그를 의미한다.
HTML 문서의 맨 위쪽에 위치하는 태그로 HEAD 태그 사이 또는 뒤에 있어도 되지만 반드시 BODY 태그 앞쪽에 위치 해야 한다.

1) 문서 호환성 지정

다양한 브라우저에서 웹 페이지를 동일하게 보이도록 하는 것은 문제가 될 수 있다. 따라서 meta 태그를 사용하여 문서 호환성 지정을 해주는 것이 좋다. 아래 코드는 브라우저가 최신 IE 버전으로 렌더링하도록 한다.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

최신 브라우저만 지원하는 환경이라면 위 태그가 필요하지 않지만 일부 웹사이트는 오래된 버전의 브라우저까지 모두 지원하기도 하기 때문에 그런 경우 필요할 태그이며 IE 에서의 호환성 보기와 관련된 태그이다.

2) 뷰포트 설정하기

뷰포트는 웹 페이지가 사용자에게 보여지는 영역을 말한다. PC에서는 브라우저의 크기를 변경함에 따라서 뷰포트의 크기를 바꿀 수 있다. 반면 모바일에서는 화면 크기가 고정되어 있기 때문에 뷰포트의 배율을 조절하여 내용을 봐야 한다. 따라서 pc에서 보는 화면을 모바일로 봤을 때도 잘 볼 수 있도록 뷰포트 설정을 해주는 것이 좋다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 설정은 뷰포트의 너비를 장치 너비로 하고, 스케일을 1.0(100%)로 하는 코드이다.

3) 문자 인코딩 설정

다양한 브라우저에서 문자 인코딩이 다르게 처리될 수 있다. 이로 인해 문자 깨짐 현상 등 심각한 오류가 발생할 수 있다. 따라서 meta 태그를 사용하여 문자 인코딩을 설정하는 것이 좋다.

<meta charset="UTF-8">

위 코드는 UTF-8 문자 인코딩을 사용한다는 코드이다.

크로스 브라우징 작업을 할 때 고려해야 할 점

1. 어떤 브라우저에 초점을 맞춰야 할까?

타겟이 되는(가장 점유율이 높은) 브라우저에 맞추는 것이 좋다.

2. 어느 정도까지 맞춰야 할까?

서비스하려는 대상에 따라 달라지며 정답은 없다.
점유율이 압도적으로 높은 크롬 브라우저는 기본적으로 최적화 작업이 필요할 것으로 보인다.
또한 국내 모바일 기기는 삼성과 애플 사용자 수가 월등히 높아서 국내 반응형 사이트를 제작할 때 크롬을 기본으로 삼성 인터넷과 사파리를 지원하는 것이 효과적으로 보인다.
IE의 경우, IE 하위버전에서 html5를 사용하려고 라이브러리를 사용하는 것은 성능을 저하시킬 수 있다.