Safari 버전별 대응 타겟 설정

유재민·2022년 9월 5일
etc
0

# Safari 버전별 대응 타겟 설정


# Browser / Mobile OS 점유율

2022년 08월의 세계 브라우저 점유율과 영국 브라우저 점유율입니다.
두 차트 모두 Chrome과 Safari가 압도적인 점유율을 나타내고 있습니다.

GlobalUnited Kingdom
브라우저점유율_202208_세계브라우저점유율_202208

또한 Mobile OS도 마찬가지로 예상한 바와 같이 Android와 iOS가 압도적인 점유율을 나타내고 있습니다.

GlobalUnited Kingdom
모바일OS점유율_글로벌모바일OS점유율_영국



# Issue : Safari 버전이 다른 경우 Cross-browser compatibility issue 발생

Safari QA 작업 진행 중 아래 이미지와 같이 동일한 Safari 브라우저임에도 불구하고 Safari 버전에 따라 스타일이 다르게 적용되는 문제점이 발생하였습니다.
좌측 이미지는 safari 특정 버전에서 스타일 관련 이슈이며 우측은 정상적으로 스타일이 적용 된 모습입니다.

safari크로스브라우징이슈

Apple 공식 홈페이지에서 확인해보면 Safari의 버전은 MacOS / iOS 버전을 따라가게 됩니다.
즉 사용자의 OS 버전에 따라 Safari 버전은 달라지게 되고 이에 따라 크로스 브라우징 이슈가 발생할 수 있다는 것을 알 수 있습니다.

애플공홈Safari업데이트방법

아래와 같은 환경에서 크로스 브라우징 이슈 테스트가 진행되었습니다.
아래 표를 보면 알 수 있듯이 OS 버전에 따라 이슈가 발생하지 않거나, 일부 발생하거나, 또 여러 부분에 발생하기도 하였습니다.

Testing VersionJayKylie (1st test)Kylie (2st test)
MacOSBig Sur 11.6.6 (issue X, Only MAT-675)Big sur 11.6.8 (issue O, All)Monterey (issue O, MAT-675, 682, 687, 688)
iOS15.6.1 (issue X, Only MAT-675)15.6.1 (issue O, All)15.6.1 (issue O, MAT-675, 682, 687, 688)



# MacOS / iOS 출시 날짜 및 점유율

크로스 브라우징 타깃을 선정하기 위해 현재 날짜를 기준으로 글로벌 / 영국의 MacOS, iOS 출시 날짜 및 점유율을 조사한 결과입니다.
두 OS 모두 가장 최근에 릴리즈 된 버전에 점유율이 가장 높은 것으로 나타났습니다.

  • MacOS 출시 날짜

    GlobalUnited Kingdom
    MacOS점유율_202208_국가(카탈리나에빅서몬테레이포함)MacOS점유율_202208_영국(카탈리나에빅서몬테레이포함)
    MacOSCatalinaBigSurMontereyHigh SierraMojave
    Release2019.10.072020.11.122021.10.252017.09.262018.09.24
    Share85.11%85.11%85.11%5.34%3.06%

  • iOS 출시 날짜 : 22/08 기준 상위 3개 버전 합산 점유율 80.76%

    GlobalUnited Kingdom
    IOS점유율_202208_국가IOS점유율_202208_영국
    iOS15.615.512.515.414.8
    Release2022.05.312022.05.162020.12.152022.03.142021.09.14
    Share56.36%20.3%4.1%3.16%2.95%



# 크로스 브라우징 타깃 선정 사례

  • 라인(LINE) : https://engineering.linecorp.com/ko/blog/the-baseline-for-web-development-in-2022

    1. 브라우저의 세계 시장 점유율과 타깃 국가의 시장 점유율을 파악합니다.

      세계 시장 점유율타깃 국가 시장 점유율
      Line_브라우저와OS의시장점유율Line_Japanese-Browser-Share-Bar-1

    1. Mobile OS의 세계 시장 점유율과 타깃 국가의 시장 점유율을 파악합니다.

      세계 시장 점유율타깃 국가 시장 점유율
      Line_Global-Mobile-OS-Share-1Line_Japanese-Mobile-OS-Share-1

    1. Safari와 iOS와의 긴밀한 관계를 고려하여 iOS 버전 릴리즈에 따른 따른 시장 점유율을 파악합니다.

      Line_iOS-Share-1

      2019년 1분기부터 3분기까지 iOS 12의 점유율은 점차 증가했지만, 3분기에 iPhone 11과 iOS 13이 출시되면서 점유율이 급감했습니다. 그 다음 해에 iOS 12의 점유율은 20% 아래로 떨어졌습니다. 2020년 3분기에 iPhone 12와 iOS 14가 출시되자마자 iOS 12의 점유율은 급격히 하락해 2021년 2분기에는 미미한 수준이 되었습니다. iOS 12의 이와 같은 점유율 패턴은 iOS 13과 14에서도 관찰할 수 있었습니다. 결론적으로, 앞으로 iOS 시장 점유율의 90% 이상은 지난 2년간 출시된 주요 버전으로 구성될 것이라고 안심하고 가정할 수 있습니다. 즉, 최근 2년 이내에 출시된 Safari 버전만 지원하면 되는 것입니다.


  • 야놀자(yanolja) : https://www.theteams.kr/teams/528/post/64942

    GA를 통해 실시간 유입 사용자의 OS 버전을 확인하여 크로스 브라우징 타깃을 선정합니다. 야놀자의 경우 특이점은 라인과는 다르게 1%의 낮은 점유율의 버전도 대응하는 것을 알 수 있었습니다.

    야놀자_타깃선정



# 결론

  • 저는 타깃 설정의 방법을 두 가지 방법으로 나누어보았습니다.

    첫번째는 영국 전체의 OS 점유율에 따른 대응 버전을 설정하는 방법과 두번째는 사용자 접속 브라우저 버전 정보를 수집하여 그에 따른 대응 버전을 설정하는 방법으로 나누었습니다.

    이 때 각 방법들은 단점이 존재하는데 첫번째 영국 전체의 OS 점유율에 따른 대응 버전을 설정하는 방법의 경우 실제 서비스를 사용하는 사용자의 통계가 아니기 때문에 정확한 통계라고 할 수 없습니다. 또 두번째 사용자 접속 브라우저 버전 정보를 수집하여 그에 따른 대응 버전을 설정하는 방법의 경우 데이터를 수집해야하므로 시간적 비용이 소모될 수 있으므로 즉시 적용이 불가능하다는 단점이 있습니다.

    이러한 문제점들을 고려해보았을 때 가장 효율적인 해결책이라고 생각되는 방법은 2년 이내에 상대적으로 최신버전을 우선적으로 대응하되 그 외 하위버전도 함께 검토해보며 크리티컬한 이슈에 대해서는 함께 대응해주는 것이 좋은 해결책이라고 생각됩니다. 또한 다른 하위 버전에 경우에는 사용자가 접속한 브라우저 버전 데이터를 수집해나가며 점진적으로 대응할 버전을 결정하고 대응하는 것이 최선의 방법이라고 생각됩니다.

profile
유재민
프론트엔드 개발자
이전 포스트

[study] 20220823 - Next.js _app과 _document

다음 포스트

Safari 버전별 대응 타겟 설정

0개의 댓글