서비스 타겟 환경 및 브라우저 지원 범위
S-HOOK은 모바일 환경 사용자를 최우선으로 두고 있습니다. 노래의 킬링파트를 즐기는 서비스로서 유저들이 짧은 시간에 최대한 많은 재미를 주는 것이 목표입니다. 따라서 출퇴근 대중 교통을 이용하거나 카페에서 잠시 쉴 때 등 짧은 시간에 S-HOOK을 이용하기 위해서는 데스크탑보다는 모바일에 집중하는 것이 필요하다고 생각했습니다. 즉, 모바일 브라우저 사용자를 타겟으로 두었고 데스크탑 이용자도 사용가능하게 끔 고려하여 브라우저 지원 범위를 선정했습니다.
모바일 2023년 7월 기준 한국에서 가장 많이 사용하는 브라우저는 Chrome이고 38.7% 점유율을 갖고 있습니다. 그 다음으로 Safari 25.6%, Samsung Internet 25.0% 입니다. 그리고 Whale이 9.3%이며 그 외 브라우저는 1% 미만이었습니다. 1%미만인 브라우저는 고려 대상에서 제외하였고, 따라서 Chrome, Safari, Samsung Internet, Whale 브라우저 환경을 고려하는 것을 목표로 두었습니다.
데스크탑 2023년 7월 기준 한국에서 Chrome이 70%로 가장 많이 사용되고 있습니다. 그 다음으로 17.3%로 Edge, 5.8% Whale, 3.2% Safari입니다. 그리고 그 외 브라우저는 유의미한 점유율을 갖고 있지 않다고 판단하여 해당 네 개의 브라우저를 고려 대상으로 두었습니다.
한국내 전체 브라우저 사용자 기준 대략 90% 이상 사용자가 S-HOOK을 사용할 수 있도록 브라우저 버전을 정하려 했습니다. 해당 통계는 모바일, 데스크탑 포함하여 브라우저 버전별 점유율을 나타내고 있습니다. Chrome 기준으로 114, 110 버전은 2023년에 출시되었습니다. 100버전은 2022년, 86버전이 2020년입니다. 해당 통계를 바탕으로 현재로 부터 2년을 기준으로 출시된 브라우저 버전에서 S-HOOK이 안정적으로 이용할 수 있도록 고려하였습니다. 따라서 Chrome의 경우 93버전부터, Safari의 경우 15버전부터 지원하도록 했습니다.
CSS의 경우 다양한 브라우저에서 스타일의 일관성을 유지하기 위해 reset-css를 사용하여 기본 스타일을 초기화할 수 있습니다. 이렇게 하면 브라우저마다 약간씩 다른 기본 스타일을 제거할 수 있습니다. JS의 경우에는, Babel을 사용하여 최신 JavaScript 문법을 더 오래된 브라우저에서도 실행 가능한 형태로 변환합니다. Babel의 targets 옵션을 통해 특정 브라우저와 버전을 명시할 수 있으며, 필요한 경우 polyfill을 추가하여 브라우저가 기본적으로 지원하지 않는 기능들도 사용할 수 있게 해줍니다.
{
presets: [
[
'@babel/preset-env',
{
targets: 'last 2 years, not dead',
useBuiltIns: 'entry',
corejs: '3.31.1',
},
],
],
};