본문으로 건너뛰기
피드

“98% 지원”이 생각보다 별로 안 넉넉한 이유

frontend 약 4분
vote
0
댓글
북마크

브라우저 기능 지원률 98%는 얼핏 높아 보이지만, 실제 서비스에서는 2%의 사용자를 깨진 화면 앞에 세우는 숫자일 수 있다는 글이다. 특히 일반 통계와 내 서비스 방문자 분포는 다를 수 있고, 실제 사례로 어떤 사이트는 최신 중첩 CSS 기능 지원 브라우저가 방문자의 약 70%뿐이었다.

  • 1

    98% 지원은 기본 기대치가 걸린 기능에서는 충분한 숫자가 아닐 수 있음

  • 2

    전체 인구 기준 지원률과 실제 서비스 방문자 브라우저 분포는 다를 수 있음

  • 3

    중첩 CSS처럼 표준화된 최신 기능도 특정 고객 사이트에서는 약 30% 방문자를 놓칠 수 있음

  • 4

    우아한 성능 저하가 안 되는 기능은 널리 지원된다고 부르기 어렵다는 주장

  • “98% 지원”은 듣기엔 압도적으로 좋아 보이지만, 기본 기능에서는 전혀 다른 의미가 됨

    • 복권을 98% 확률로 맞히면 미친 행운이지만, 식당이 98% 확률로만 식중독을 피하게 해준다면 그 식당은 매달 또는 매주 사람을 아프게 하는 곳임
    • 회사가 월급을 98% 확률로만 준다거나, 내가 식당에서 98% 확률로만 계산한다면 아무도 그걸 ‘충분히 좋다’고 안 봄
  • 웹사이트에서 98%는 곧 “약 1억 5천만 명은 안 될 수 있음”이라는 뜻임

    • 전 세계 인구나 브라우저 사용자를 기준으로 보면 2%는 작은 숫자가 아니라 거대한 사용자 집단임
    • 어떤 사이트가 새 기능을 넣고 98% 방문자에게만 동작한다면, 사실상 기존 사용자 2%를 문전박대하는 셈이라는 비유가 나옴

중요

> 98%라는 숫자는 “대부분 된다”가 아니라 “100명 중 2명은 깨진 화면을 볼 수 있다”로 읽어야 할 때가 있음.

  • 더 큰 함정은 “전체 인구의 98%”가 “내 서비스 사용자의 98%”가 아닐 수 있다는 점임

    • 어떤 기술이 일반 통계로는 널리 지원돼도, 내 실제 방문자층에서는 지원률이 훨씬 낮을 수 있음
    • 저자는 고객 사이트에서 중첩 CSS 지원 여부를 직접 확인했는데, 최근 1년 방문 브라우저 중 약 70%만 해당 기능을 지원했음
    • 즉 “표준이고 안전하게 써도 됨”처럼 보였던 기능이 실제로는 방문자의 30%를 놓치는 선택이 될 수 있었음
  • 결론은 최신 기능을 쓰지 말자는 얘기가 아니라, 깨졌을 때의 실패 방식을 설계하자는 쪽에 가까움

    • 새 브라우저 기능이 지원되지 않아도 핵심 사용 흐름이 유지되면 괜찮음
    • 반대로 우아한 성능 저하 없이 화면이나 기능이 망가지면, 그 기능은 “널리 지원됨”이라는 말로 포장하기 어려움
    • 글쓴이는 98% 통계를 게으른 지름길이라고 부름. 진짜 견고한 엔지니어링은 대부분이 아니라 경계 사례를 어떻게 다루는지에서 갈린다는 주장임

기술 맥락

  • 여기서 중요한 선택은 최신 CSS나 브라우저 API를 쓸지 말지가 아니라, 지원하지 않는 환경에서 어떤 경험을 남길지예요. 기능이 안 보이는 정도인지, 핵심 플로우가 막히는지에 따라 같은 98%도 완전히 다른 리스크가 되거든요.

  • 특히 브라우저 지원률은 전역 통계보다 서비스 로그가 더 중요해요. 글에 나온 중첩 CSS 사례처럼 일반적으로는 널리 지원된다고 해도, 실제 방문자 브라우저 분포에서는 70% 수준일 수 있어요. 이러면 빌드 파이프라인에서 Sass를 걷어내는 결정이 꽤 큰 장애로 바뀔 수 있죠.

  • 그래서 실무에서는 기능 지원표만 보는 게 아니라, 내 사용자 분석 데이터와 실패 시나리오를 같이 봐야 해요. 결제, 로그인, 문서 열람, 검색 같은 핵심 기능이면 2% 실패도 제품 입장에서는 꽤 큰 손실이 될 수 있거든요.

  • 현실적인 해법은 Progressive Enhancement에 가까워요. 기본 동작은 오래된 환경에서도 살려두고, 최신 기능은 가능한 환경에서 경험을 개선하는 층으로 올리는 방식이에요.

프론트엔드에서 지원률 숫자는 의사결정의 시작점이지 결론이 아님. 특히 공공성, 결제, 로그인, 핵심 탐색처럼 깨지면 안 되는 플로우라면 ‘대부분 됨’은 꽤 위험한 말임.

댓글

댓글

댓글을 불러오는 중...

frontend

메타, AI가 읽고 쓰는 디자인 시스템 ‘Astryx’ 오픈소스로 공개

메타가 내부 디자인 시스템 Astryx를 오픈소스로 공개했다. React와 StyleX 기반의 150개 이상 접근성 지원 컴포넌트, 디자인 토큰, 테마, 템플릿, CLI를 제공하며, 특히 AI 에이전트가 컴포넌트 구조를 이해하고 UI를 생성·수정할 수 있도록 MCP 서버까지 포함한 점이 핵심이다.

frontend

shadcn/ui, 기본 컴포넌트 라이브러리를 Radix에서 Base UI로 변경

shadcn/ui가 새 프로젝트의 기본 컴포넌트 라이브러리를 Radix가 아니라 Base UI로 바꿨어. Radix 지원은 계속되지만, Base UI가 안정화됐고 주간 다운로드 600만 이상, shadcn/create 신규 프로젝트 선택 비율 2대1이라는 이유로 기본값을 바꾼 거야. 동시에 채팅 UI용 MessageScroller와 관련 컴포넌트, headless 패키지인 @shadcn/react도 공개됐어.

frontend

버튼의 일은 딱 하나다: 눌렀으면 실행돼야 함

사진 회전 버튼처럼 단순해 보이는 UI도 빠르게 반복 입력하면 제품 철학이 드러남. 아이폰은 탭을 기억해 순서대로 처리하지만, 일부 안드로이드 앱은 애니메이션 중 들어온 입력을 무시해서 사용자가 기다리게 만듦. 저자는 이걸 접근성과 비슷한 ‘상황적 파워유저’ 문제로 봄.

frontend

유아용 그림판 만들다가 flood-fill 셀룰러 오토마타를 발견한 이야기

저자는 3살 아이와 함께 쓰기 위한 초단순 협동 그림판 ‘Mr. Baby Paint’를 만들다가, 여러 flood fill이 동시에 자라며 충돌하는 과정에서 새로운 셀룰러 오토마타 같은 패턴을 발견했다. 글은 유아용 UX 설계, CPU 기반 flood fill의 의도적 느림, Catmull-Rom spline 브러시, 비트맵 폰트 굵게 만들기 실험까지 꽤 알찬 제작기를 담고 있다.

frontend

프로즈미러 제작자가 새 브라우저 리치 텍스트 에디터 ‘Wordgard’를 공개

Wordgard는 브라우저 안에서 구조화된 리치 텍스트 에디터를 만들기 위한 오픈소스 자바스크립트 라이브러리다. 자유 HTML 편집기가 아니라, 앱이 지원할 문서 구조를 스키마로 정확히 통제하는 방향을 택했다.