방망이 깎는 코모
크로스 브라우징(Cross Browsing) II 본문
Safari 브라우저에서의 크로스 브라우징
이전 포스팅에서 크로스 브라우징의 개념과 필요성, 테스트 기준, 테스트 도구에 대해 알아보았다.
다양한 기기와 운영체제에 따라 동작하는 브라우저의 종류도 다양하기 때문에 프론트엔드 개발시 브라우저의 사용현황을 체크하는 것이 중요하다. 2023년 11월 세계 브라우저 사용 현황을 살펴보면 전체 플랫폼 기준으로 Chrome 브라우저가 약 62.85%의 점유율을 차지하고 있다.
Safari는 역시 20.04%의 점유율을 차지하고 있기 때문에 웹 개발시 반드시 고려해야할 중요한 브라우저다. Safari는 자체적인 Webkit 렌더링 엔진과 기능을 갖고 있기 때문에 호환성 문제가 자주 발생한다. 특징 중 하나는 특정 CSS속성에 별도의 webkit- 프리픽스를 요구한다는 것이다. 또한 Flexbox 레이아웃이나 특정 Javascript API가 다르게 작동하는 경우도 있다고 한다. 나는 애플 기기가 없어 직접 확인할 수가 없어 해당 이슈에 대해 정리된 다른 블로그를 참고했다.
https://jthcast.dev/posts/cross-browsing-issue-in-chrome-and-safari/
크롬과 사파리에서 겪은 크로스 브라우징 이슈
얼마 전까지 개인 프로젝트를 진행할 때, 기존에 사용하던 크롬에서만 테스트하고 맥 환경은 전혀 신경 쓰지 않았었습니다. 하지만 남들에게 공개하며 사파리에서 이슈가 발생하고 있었음을 피
jthcast.dev
모바일 서비스의 호환성 문제, 그리고 Meta 태그
모바일 서비스에서의 호환성 문제는 다양한 화면 크기와 운영체제에서 발생한다. 예를 들어 안드로이드와 iOS에서의 터치 이벤트 처리 방식에 차이가 존재하는 것 처럼 말이다. 따라서 이러한 호환성 문제를 해결하기 위해서는 반응형 웹 디자인과 유연한 CSS 레이아웃, 그리고 크로스 플랫폼을 고려한 자바스크립트 동작등을 고려해야 한다. 호환성을 향상시키기 위한 방법 중 하나는 Meta태그를 이용하는 것이다.
Meta태그는 브라우저에게 웹 페이지를 어떻게 해석해야 하는지 알려주는 기능을 담당하고 있기 때문에 웹 페이지의 뷰포트 설정, 문자 인코딩, 호환성 모드 등을 정의하는데 사용된다. 예를 들어 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 로 정의하여 모바일 화면에 맞게 컨텐츠를 조정함으로써 반응형 디자인을 최적화하고 호환성 문제를 줄일 수 있다.
참고 문헌
1 statcounter, Browser Market Share Worldwid - November 2023 : https://gs.statcounter.com/browser-market-share,
2. JTHCAST, 크롬과 사파리에서 겪은 크로스 브라우징 이슈 : https://jthcast.dev/posts/cross-browsing-issue-in-chrome-and-safari/
'개념정리' 카테고리의 다른 글
| 반응형 디자인 / 미디어 쿼리를 최소로 잡는 방법 (2) | 2023.12.28 |
|---|---|
| 애니메이션을 최적화 하는 방법 (2) | 2023.12.27 |
| 폰트를 Preoload하는 방법 (0) | 2023.12.25 |
| 크로스 브라우징(Cross Browsing) I (1) | 2023.12.10 |
| 시멘틱 태그와 웹 표준에 대하여 (2) | 2023.12.01 |
