Safari 브라우저에서 크로스브라우징 하기

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

다양한 웹 브라우저에서 동일한 사용자 경험을 제공하기 위한 웹 개발 방법론

우리가 사용하는 대표적인 브라우저들은 Google Chrome, Mozilla Firefox, Microsoft Edge, Safari 등이 있습니다. 브라우저 간에 렌더링 엔진과 기능의 차이로 인해 호환성 이슈가 발생할 수 있는데, 여러 가지 브라우저와 버전과 기기 등에서 웹 사이트를 접속하였을 때 일관된 UI/UX를 제공할 수 있어야 합니다.

크로스 브라우징은 모든 브라우저에서 100% 동일하게 보이게 하는 것이 아니라, 다양한 브라우저에서 원활하게 작동하며 사용자에게 동등한(등가성) 경험을 제공하는 것을 목표로 한다는 것을 알아야 합니다.

이번에는 Safari 브라우저에서 크로스브라우징을 실현하기 위한 방법들과 모바일 서비스에서 발생할 수 있는 호환성 이슈 해결하는 방법에 대해 알아보겠습니다.

---

📌모바일 서비스에서의 호환성 이슈

Safari 브라우저와 함께 다양한 모바일 브라우저들에서의 호환성 이슈가 발생할 수 있습니다. 이를 해결하기 위해 다음과 같은 방법을 사용할 수 있습니다.

1. CSS 프로퍼티 및 속성

Safari에서 지원되지 않는 CSS 프로퍼티나 속성 사용을 피하거나, 필요한 경우 벤더 접두사(vendor prefixes)를 사용하는 방법입니다. 예를 들어 -webkit-animation이나 -webkit-transform과 같은 것들입니다.

.example {
  -webkit-border-radius: 5px; /* Chrome, Safari, Opera */
  -moz-border-radius: 5px; /* Firefox */
  -o-border-radius: 5px; /* 구버전 Opera */
  -ms-border-radius: 5px; /* Internet Explorer 및 Edge */
  border-radius: 5px; /* 표준 속성 */
}

---

2. JavaScript 기능

Safari와 다른 브라우저에서 지원되지 않는 JavaScript 기능을 사용하지 않도록 주의하세요. 필요한 경우, 기능 감지(feature detection)를 사용해 해당 기능을 지원하는 브라우저만 실행하도록 할 수 있습니다.

기능 감지(feature detection)란?

웹 브라우저에서 특정 기능이 지원되는지 여부를 검사하는 웹 개발 방법

이는 브라우저의 종류나 버전, 디바이스의 종류와 상관없이 지원 여부를 확인할 수 있는 안정적이고 유연한 방법입니다. 예를 들어, 브라우저의 JavaScript 엔진에서 지원하는 querySelector 메서드를 사용하여 DOM 요소를 선택할 때, 기능 감지를 사용할 수 있습니다.

if (document.querySelector) {
  /* 지원하는 브라우저에서는 실행 */
  var element = document.querySelector(".my-class");
}
else {
  /* 지원하지 않는 브라우저에서는 다른 방법을 사용 */
  var element = document.getElementById("my-id");
}

위의 예시에서 document.querySelector 메서드가 지원되는 경우, 해당 메서드를 사용하여 .my-class 클래스를 갖는 DOM 요소를 선택합니다. 그렇지 않은 경우라면 document.getElementById 메서드를 사용하여 my-id ID를 갖는 DOM 요소를 선택합니다. 다시 말해 기능 감지를 사용하면 지원 여부에 따라 자동으로 메서드를 선택할 수 있습니다.

---

3. 브라우저 버전

Safari의 구형 버전에서 발생할 수 있는 호환성 문제를 해결하기 위해 테스트하고 조건부 코드(conditional code)를 작성하여 최신 버전 브라우저에서도 정상 작동하도록 할 수 있습니다.

HTML에서 조건부 코드 사용하기

HTML에서는 <!-- [조건부 주석] --> 의 형태로 조건부 코드를 작성할 수 있습니다. 이때, [조건부 주석]에는 조건문을 작성합니다. 대표적인 조건부 주석은 다음과 같습니다.

<!--[if Safari]> [코드] <![endif]--> : Safari 브라우저를 위한 조건부 코드
<!--[if !Safari ]><!--> [코드] <!--<![endif]--> : Safari 이외의 브라우저를 위한 조건부 코드

예를 들면 Safari 에서만 적용되는 스타일을 작성할 때는 아래와 같이 조건부 주석을 사용할 수 있습니다.

<!--[if Safari]>
  <style>
    /* Safari에서만 적용되는 스타일 */
    .my-element {
      background-color: green;
    }
  </style>
<![endif]-->

위의 코드는 Safari에서만 my-element 요소의 배경색이 녹색으로 지정되는 코드입니다.

---

📌Meta 태그를 활용한 Safari 최적화

Meta 태그를 활용하여 Safari 브라우저의 동작과 모바일 서비스의 화면 크기를 최적화할 수 있습니다.

1. 뷰포트 설정: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">와 같은 meta 태그를 사용하여 모바일 디바이스의 화면 크기와 해상도에 맞게 웹 페이지를 최적화할 수 있습니다.

2. 브라우저 모드: <meta http-equiv="X-UA-Compatible" content="IE=edge">와 같은 meta 태그를 사용하여 Safari 브라우저가 최신 렌더링 모드로 웹 페이지를 렌더링하도록 지시할 수 있습니다.

3. 웹 앱 모드: 웹 페이지를 모바일 디바이스에서 전체 화면으로 실행할 때, <meta name="apple-mobile-web-app-capable" content="yes">와 같은 meta 태그를 사용하여 웹 앱처럼 동작하게 할 수 있습니다.

4. 상태바 스타일: 웹 페이지가 전체 화면 웹 앱으로 실행될 때, <meta name="apple-mobile-web-app-status-bar-style" content="black">과 같은 meta 태그를 사용하여 상태바의 스타일을 변경할 수 있습니다.

---

📌결론

마지막으로 정리하자면, 크로스 브라우징의 목표는 모든 브라우저에서 100% 동일하게 보이게 하는 것이 아니라, 다양한 브라우저에서 원활하게 작동하며 사용자에게 동등한 경험을 제공하는 것입니다.

Safari 브라우저에서의 크로스브라우징은 웹 개발자들에게 중요한 과제입니다. 이를 위해 벤더 접두사를 사용한 CSS 조정, 태그를 활용한 Safari 최적화와 웹 표준 준수, 시멘틱 태그 활용 등 다양한 방법을 적용하여 호환성 이슈를 해결하고 웹 페이지를 최적화할 수 있습니다. 이렇게 구현된 웹 페이지는 사용자에게 동등한 경험을 제공할 것입니다. 크로스 브라우징은 웹 개발자와 비즈니스 모두에게 가치를 창출할 수 있는 중요한 요소이므로, 모든 웹 개발 프로젝트에서 고려되어야 합니다.

---

📌END.