Safari 브라우저 에서 Cross-browser 신경써보기

Safari 브라우저 아이콘

 

최근 몇 년 동안 브라우저 간 호환성 테스트는 브라우저들의 업데이트 이후,

사용자가 뒤처지지 않도록 하는 데 도움이 되므로 많은 주목을 받았다.

기술 발전이 기하급수적으로 증가하여 업그레이드와 변경도 빨라졌다.

따라서, 크로스 브라우징에도 개발자들의 많은 관심이 쏟아졌다.

 

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

크로스 브라우징이란,

서로 다른 브라우저에서 웹사이트나 애플리케이션이 동일한 방식으로 동작할 수 있도록 보장해 주는 것이다.

서로 다른 브라우저마다 자체적으로 지원하는 기술이나 표준이 다른데다가,

브라우저마다 버전별로 지원하는 기술이나 표준이 다르기 때문에, 

동일한 방식으로 동작하지 않을 가능성이 높다.

 

왜 크로스 브라우징이 필요한가?

크로스 브라우징이 필요한 이유는 크게 두 가지가 있다고 말할 수 있다.

 

첫 번째는,

모든 사용자에게 동일한 경험을 제공하기 위해서이다.

만약 서로 다른 브라우저에서 웹사이트나 애플리케이션이 서로 다른 방식으로 동작한다면,

사용자들은 서로 다른 경험을 할 수도 있다.

이는 사용자들의 만족도를 낮출 뿐만 아니라, 사용자들이 사용하기 어렵거나 불편하다고 느낄 수 있다.

 

두 번째는,

모든 환경에서 웹사이트나 애플리케이션이 정상적으로 동작하기 위해서이다.

맨 위에서 말했듯이, 서로 다른 브라우저마다 자체적으로 지원하는 기술이나 표준이 다르기 때문에,

동일한 방식으로 동작하지 않을 가능성이 높다.

 

이는 서로 다른 브라우저에서 똑같은 웹사이트나 애플리케이션이

제대로 동작하지 않을 수 있다는 것을 의미하기도 한다.

 

만약 사용자들이 서로 다른 브라우저를 사용한다면,

웹사이트나 애플리케이션이 서로 다른 방식으로 동작할 가능성이 높다.

 

 

.

 

특히나 Safari 브라우저는 다른 브라우저들과 비교해보면,

JavaScript 엔진이 웹킷 엔진을 사용하고 있기 때문에,

더더욱 크로스브라우징을 신경써야 한다.

 

그로 인해, Safari 브라우저에서는 JavaScript 코드를 실행할 때, strict 모드를 사용하는 것을 권장한다.

strict 모드를 사용하면 코드 작성 시 에러를 줄일 수 있고, 보안을 강화할 수 있기 때문이다.

 

 

 

Safari browser 에서 적용시켜야할 cross-browser를 위한 설정을 알아보자

 

 

1. Metatag 설정

알다시피 Metatag는 브라우저에게 문서 정보를 전달하는 역할을 한다.

Safari 브라우저에서는 다음과 같은 Metatag 설정을 권장한다.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


/*
위 설정은 모바일 기기에서 뷰포트를 전체 화면으로 설정하고, 
초기 화면 배율을 1로 지정하며, 확대/축소가 불가능하도록 설정해준다.
*/

 

 

2. CSS 속성 

모바일 기기에서는 너비가 작기 때문에, 가로 스크롤이 생기지 않도록 CSS 속성을 적용해야 한다.

Safari 브라우저에서는 다음과 같은 CSS 속성을 권장한다.

 

body {
    overflow-x: hidden;
}


위 설정은 가로 스크롤이 생기지 않도록,
body 요소에 overflow-x: hidden; 속성을 적용한다.





또한, 모바일 기기에서는 사용자가 화면을 터치하고 드래그를 하면 
화면이 움직이는 문제가 발생할 수 있다.

이를 방지하기 위해 다음과 같은 CSS 속성을 권장한다.


body {
    -webkit-overflow-scrolling: touch;
}


위 설정은 모바일 기기에서 스크롤이 부드럽게 처리되도록 
-webkit-overflow-scrolling: touch; 속성을 적용한다.

 

 

3. JavaScript 의 "use strict";

Safari 브라우저에서는 JavaScript 코드를 실행할 때, strict 모드를 사용하는 것을 권장한다.

strict 모드는 코드 작성 시 에러를 줄이고, 보안을 강화하는 역할을 해준다.

 

// 맨 위 상단
"use strict";

// 코드 작성시작

다른 브라우저들도 마찬가지로 strict 모드를 권장하지만,

Safari 브라우저에서는 특히나 strict 모드를 사용하는 것이 중요하다.

 

Safari 브라우저는 다른 브라우저들과 달리

JavaScript 엔진이 별도로 존재하지 않고,

웹킷 엔진을 사용하기 때문이다.

 

웹킷 엔진은 strict 모드를 사용하는 것을 권장하고, 이를 사용하면 코드를 더욱 효율적으로 처리할 수 있다.

따라서 Safari 브라우저에서는 JavaScript 코드를 작성할 때, 반드시 strict 모드를 사용하는 것을 권장한다.

 

 

4.  Flash 콘텐츠를 확인해야한다.

Flash 플레이어는 여전히 Opera, Microsoft Internet Explorer, Microsoft Edge,

Mozilla Firefox, Google Chrome에서 지원된다. 

그러나 응용 프로그램에 Flash 콘텐츠가 있으면 iPhone에서 지원하지 않는다.

따라서 iOS에서 애플리케이션 동작을 테스트하고

필수 콘텐츠가 Flash를 통해 제공되지 않는지 확인하는 것이 중요하다.

 

 

5. 그리고 Cross-browser 처리를 위해서 JS에서 navigator.userAgent 프로퍼티를 활용하기도 한다.

window.navigator에 포함된 값으로 userAgent라는 값에 접근이 가능한데,

userAgent는 HTTP 요청을 보내는 디바이스와 브라우저 등의 사용자 식별 정보를 담고 있는 header의 한 종류이다.

 

흔히 HTTP 요청에 대한 로그 및 에러가 발생했을 때의 환경을 분석하기 위해 사용됨.

 

navigator.userAgent의 내용은 보통 Mozilla 버전(정보)   OS 정보   렌더링 엔진 정보   브라우저 이름 형태로 이루어 진다.

 

Windows에서 Chrome 브라우저를 사용하는 경우에는 다음과 같은 userAgent 값을 얻을 수 있다.

 

Brave browser에서의 navigator.userAgent 프로퍼티 값들 (chrome 엔진 사용해서 같음)

 

Edge 에서의 userAgent 값

 

각 브라우저 별 userAgent 값 예시

Firefox

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:99.0) Gecko/20100101 Firefox/99.0

 

Chrome

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36

Chrome과 Safari가 함께 표시되어 있다.

 

Safari

Mozilla/5.0 (iPhone; CPU iPhone OS 13_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Mobile/15E148 Safari/604.1

크롬과 비슷하나 모바일 Safari로 접속한 경우에는 Mobile이라고 명시된다.

 

Edge

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.36

크롬과 비슷하나 끝에 Edg라고 명시된 부분을 확인할 수 있다.

 

IE

IE11 : Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko