브라우저 간 호환성 문제

요즘 서비스 오픈전이라 정신없는 하루를 보내고 있다. 곧 오픈일정이 다가와 QA에서 발견한 오류들을 해결하는데 시간을 쏟고 있다. 그러던 와중에 느즈막하게 프론트 영역에서 날짜 데이터가 NaN(Not a Number)으로 비정상적이게 출력되는 현상이 발견되었다. 해당오류 발견 과정과 늦게 발생된 이유는 다음과 같았다.

1. 해당 오류는 하이브리드 앱에서 발생하였다.
2. 그런데 모든 사용자에게 발생하지 않아서 QA까지 통과된 상태였다. 이 때 테스터는 안드로이드 기기 사용자였다.
3. 테스트용 앱은 안드로이드 앱이 우선 배포되었고, 시간이 지나서 아이폰용 앱이 배포되었기 때문에 아이폰에서의 테스트는 상대적으로 늦게 이루어졌다.
4. 최종 QA에서 이 오류가 발견되었는데 해당 테스터는 아이폰 사용자였다.
5. 사파리(Safari) 브라우저가 기본 브라우저라서 발생한 것으로 보였다.

오류가 발생된 곳에서 만들어지는 날짜 형식은 '2024-05-09' 가 아닌 '2024-5-9' 였다(JS라서...). 다른 브라우저(Edge, Chrome)에서는 Date객체 생성 이후 getTime() 메서드를 사용할 때 앞의 두 형식 모두 문제가 되지 않았지만, 사파리 브라우저에서는 문제가 발생한 것이다.

 

웹 개발자라면 다양한 브라우저에서 일관되게 동작되는 웹 어플리케이션을 만들어야 한다. 하지만 위 경우처럼 각 브라우저마다 다르게 동작될 수 있는 요소 때문에 호환성을 종종 겪곤 한다. 그래서 이번기회에 내가 그동안 겪거나 보았던 브라우저 호환성 문제와 그 해결 방법에 대해 정리해 보려고 한다.

 

1. 날짜 형식 호환성 문제

특정 브라우저, 특히 Safari에서는 날짜 형식이 '2024-5-9'와 같이 월이나 일이 한 자리 숫자인 경우 문제가 발생할 수 있다. 이를 해결하기 위해 날짜 형식을 일관되게 변환해야 한다.

function formatDate(date) {
    const d = new Date(date);
    let month = '' + (d.getMonth() + 1);
    let day = '' + d.getDate();
    const year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
}

// 예시 사용법
const date1 = '2024-5-9';
const formattedDate1 = formatDate(date1);
console.log(formattedDate1); // 2024-05-09

 

2. CSS 호환성 문제

브라우저마다 CSS 속성 지원이 다를 수 있다. 예를들어, flexbox나 grid 레이아웃의 경우 일부 오래된 브라우저에서 지원하지 않거나 부분적으로만 지원할 수도 있다.

이러한 이유 때문에 퍼블리셔 분들이나 프론트 개발자 분들이 CSS초기화를 위해 자기만에 리셋 CSS 파일을 갖고 있는 것을 보았다.

3. JavaScript API 호환성 문제

JavaScript API의 일부 기능은 특정 브라우저에서 지원되지 않을 수 있다. 예를 들어, fetch API는 오래된 버전의 IE에서 지원되지 않을 수 있다.

해결 방법

• 폴리필 사용 : JS 버전문제로 호환되지 않거나 제공되지 않는 함수들을 사용하고 싶을 때 폴리필을 사용한다. 폴리필은 보통 친절하게 제공받았던 기억이 있다.
• 호환성 라이브러리 사용
  

  if (!window.fetch) {
      var script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/fetch.umd.js';
      document.head.appendChild(script);
  }

4. HTML5 기능 호환성 문제

HTML5의 새로운 입력 타입이나 속성은 일부 브라우저에서 완벽하게 지원되지 않을 수 있다. input 요소의 date 타입은 일부 브라우저에서 제대로 작동하지 않는 등의 예시가 있다.

해결 방법

• 적절한 폴백 제공
• Feature Detection 사용
  

  <input type="date" id="dateInput" placeholder="YYYY-MM-DD">
  <script>
      if (!Modernizr.inputtypes.date) {
          var dateInput = document.getElementById('dateInput');
          dateInput.type = 'text';
          $(dateInput).datepicker({
              dateFormat: 'yy-mm-dd'
          });
      }
  </script>

 

5. 쿠키 및 로컬 저장소 호환성 문제

쿠키나 localStorage, sessionStorage 등의 웹 스토리지 기능은 일부 브라우저에서 제한적일 수 있다.

해결 방법

• 쿠키 설정에 주의
• 스토리지 API 사용 시 예외 처리
  

  try {
      localStorage.setItem('key', 'value');
  } catch (e) {
      if (e instanceof DOMException && (e.code === 22 || e.code === 1014)) {
          console.warn('LocalStorage is full or not supported.');
      } else {
          console.error('LocalStorage error:', e);
      }
  }

 

 

다양한 브라우저에서 일관된 기능을 제공하기 위해서는 이러한 문제점들을 미리 알고 대응해 놓는 것이 중요할 것이다. 또한 미처 대응하지 못했던 오류가 발생했을 경우에도 훨씬 대처가 쉽고 빠를 것이라고 생각한다.

웹 개발자 입장에서 브라우저 간의 호환성 문제는 피할 수 없을 것이다. 이번 정리로 나와 다른 개발자들이 브라우저 호환성을 해결하는데 도움이 되면 좋겠다.

 

 

브라우저 호환성과 그 문제를 표현하는 그림 그려줘