우수사례
CSS 컨테이너 쿼리의 잠재력 활용: Netflix팀의 경험담
이 사례 연구에서는 Netflix에서 컨테이너 쿼리를 채택한 이점을 설명합니다.
패스키로 12배 더 빠른 로그인을 달성한 Tokyu
일본의 철도 회사인 Tokyu가 어떻게 패스키로 12배 더 빠른 로그인 속도를 달성하여 매일 수천 명의 통근자를 지원했는지 알아보세요.
Google Sheets에서 계산 작업자를 JavaScript에서 WasmGC로 포팅한 이유
Google Sheets의 계산은 처음에는 서버에서 수행되었고, 그 다음 JavaScript로 클라이언트에서 계산되었고, 이제 WebAssembly 가비지 컬렉션의 클라이언트에서 계산되었습니다. 이 우수사례에서는 그 방법과 이유를 설명합니다.
불편함이 줄어들고 더 많은 제어 기능: Google Meet에서 오디오 및 동영상 권한을 개선한 방법
이 우수사례에서는 Google Meet팀이 권한을 개선한 방법과 사용자에게 미치는 영향을 설명합니다.' 달성할 수 있습니다.
MediaPipe의 온디바이스 웹 AI 솔루션을 활용하여 동영상 스트림 UX를 개선하고 세션 시간을 30% 늘린 BILIBILI
고객이 실제 제품을 이해하고 탐색할 수 있도록 웹을 통해 몰입형 3D 경험을 제공하는 방법을 알아보세요.
Disney+ Hotstar가 INP를 61% 줄여 거실 기기에서 주간 카드 조회수를 100% 늘린 방법
스마트 TV 및 셋톱 박스 기기용 앱인 Disney+ Hotstar가 INP를 줄이기 위한 노력을 통해 시청자 참여도를 크게 높인 방법을 알아보세요.
Google 하드웨어를 활용한 양방향 3D 웹에서: 차세대 제품 교육 경험
고객이 실제 제품을 이해하고 탐색할 수 있도록 웹을 통해 몰입형 3D 경험을 제공하는 방법을 알아보세요.
PubTech의 동의 관리 플랫폼이 고객 웹사이트의 INP를 최대 64% 줄이고 광고 조회가능성을 최대 1.5% 개선한 방법
PubTech의 동의 관리 플랫폼이 고객 웹사이트의 INP를 최대 64% 줄이고 광고 조회가능성을 최대 1.5% 개선한 방법
모든 위치에서 유용한 메모
지난 2년 동안 Goodnotes 엔지니어링팀은 성공적인 iPad 메모 작성 앱을 다른 플랫폼에 제공하기 위한 프로젝트를 진행해 왔습니다. 이 우수사례에서는 2022년 올해의 iPad 앱이 웹 기술을 기반으로 하는 웹, ChromeOS, Android, Windows에 적용되었으며 WebAssembly가 팀에서 10년 이상 작업해온 것과 동일한 Swift 코드를 재사용한 방법을 다룹니다.
WebAssembly와 WebCodecs를 사용해 완전한 기능을 갖춘 웹 앱을 빌드하여 자연 트래픽을 83% 늘린 CapCut
모바일용으로 가장 인기 있는 동영상 편집 앱 중 하나가 모든 기능을 갖춘 웹 버전을 만든 방법.
콘텐츠 추천 제공업체인 Taboola가 LoAF를 사용해 게시자 파트너 웹사이트의 INP를 최대 36% 개선한 방법
콘텐츠 추천 제공업체인 Taboola가 LoAF를 사용해 게시자 파트너 웹사이트의 INP를 최대 36% 개선한 방법
일러스트레이터를 위한 웹의 힘: pixiv가 그리기 앱에 웹 기술을 활용하는 방법
pixiv는 일러스트레이터와 일러스트 애호가가 콘텐츠를 통해 서로 소통할 수 있는 온라인 커뮤니티 서비스입니다. 사용자가 직접 삽화를 게시할 수 있습니다. 전 세계적으로 8,400만 명 이상의 사용자가 있으며 2023년 5월 현재 1억 2,000만 개 이상의 아트워크가 게시되어 있습니다. pixiv Sketch는 pixiv에서 제공하는 서비스 중 하나입니다. 손가락이나 스타일러스를 사용하여 웹사이트에 아트워크를 그리는 데 사용됩니다. 다양한
Tokopedia에서 머신러닝을 사용해 판매자 웹 앱을 개선하여 운영 비용을 절감한 방법
이 게시물에서는 Mitra Tokopedia가 머신러닝을 사용하여 판매자 웹 앱을 개선하여 운영 비용을 절감한 방법을 설명합니다.
Trendyol이 INP를 50% 줄여 클릭률을 1% 높인 방법
이 우수사례에서는 PageSpeed Insights (PSI), Chrome DevTools, scheduler.yield API와 같은 Google 도구를 활용하여 Trendyol에서 사용하는 React의 INP를 디버깅하고 개선하는 단계별 워크플로를 설명합니다.
Kiwix PWA를 통해 사용자가 오프라인에서 사용하기 위해 인터넷의 데이터를 GB 단위로 저장할 수 있는 방법
이 우수사례에서는 비영리 단체인 Kiwix가 프로그레시브 웹 앱 기술 및 File System Access API를 사용하여 사용자가 오프라인에서 사용하기 위해 대용량 인터넷 아카이브를 다운로드하고 저장할 수 있도록 하는 방법을 살펴봅니다.
Yahoo! JAPAN은 패스키 채택률을 11% 까지 늘리고 SMS OTP 비용을 절감했습니다.
Yahoo! JAPAN의 패스키 채택 및 사용자 경험 개선을 위한 접근방식입니다.
테라가 광고 클릭률을 30% 높이고 최대 콘텐츠 렌더링 시간을 늘리는 데 프리패치를 사용한 방법
프리페치는 가까운 미래에 필요할 가능성이 있는 리소스 또는 전체 페이지를 다운로드하여 페이지 로드 속도를 높이는 데 사용되는 기술입니다. 연구에 따르면 로드 시간이 빨라지면 전환율과 사용자 환경이 개선됩니다.
뒤로-앞으로 캐시가 Yahoo! JAPAN 뉴스의 모바일 수익 9% 증대
Yahoo! 일본에서 가장 인기 있는 뉴스 플랫폼 중 하나인 JAPAN News는 bfcache 적중률을 높이기 위한 공동의 노력을 기울였고, 그 결과 사용자 경험과 비즈니스가 크게 개선되었습니다. 특히 A/B 테스트 결과에 따르면 bfcache를 사용하는 페이지에서 광고 수익이 9% 증가했습니다.
redBus에서 웹사이트의 'Next Paint(다음 페인트)에 대한 상호작용(INP)'을 개선하고 판매를 7% 늘린 방법
redBus는 INP 최적화를 통해 매출을 약 7% 늘렸습니다.
INP 문제 해결을 위한 Economic Times 퀘스트
TBT를 30배 줄이고 Next.js로 이전한 결과 The Ecomonic Times는 INP를 거의 4배 줄였으며 이탈률은 50% 감소하고 페이지뷰는 43% 상승했습니다.
브라우저 내 3D의 놀라운 기능을 조명하면서 슬로우 로드가 게이머와 개발자 모두를 놀라게 하는 방법
이 캐주얼 운전 게임에서 끊임없이 생성되는 무한한 풍경을 통해 WebGL의 잠재력을 발견해 보세요. Slow Roads 는 끊임없이 생성된 경치에 중점을 둔 캐주얼 드라이빙 게임으로, 브라우저에서 WebGL 애플리케이션 으로 호스팅됩니다. 많은 경우 브라우저의 제한된 맥락에서 이처럼 집약적인 경험을 하는 것은 적절하지 않은 것처럼 보일 수 있습니다. 이 프로젝트를 통해 이러한 경험을 바로잡는 것이 저의 목표 중 하나였습니다. 이 문서에서는 웹
더 나은 웹 만들기: 더 빨라진 YouTube
이 도움말은 '더 나은 YouTube 웹 구축'에 관한 새로운 시리즈의 1부입니다.
Rakuten 24에서 코어 웹 바이탈에 투자하여 방문자당 수익을 53.37%, 전환율을 33.13% 늘린 방법
또한 실제 사용자의 웹 바이탈을 측정한 결과, 최대 콘텐츠 렌더링 시간 (LCP)이 좋으면 전환율이 61.13% 증가할 수 있는 것으로 나타났습니다.
GoDaddy의 웹사이트 + 마케팅 서비스에서 고객 코어 웹 바이탈을 75% 개선한 방법
GoDaddy에서 수백만 개의 웹사이트 성능을 개선하여 PageSpeed Insights 및 코어 웹 바이탈 점수를 향상시키기 위해 GoDaddy에서 구현한 변경사항의 우수사례입니다.
코어 웹 바이탈이 개선되어 전환율이 높아진 럭셔리 소매업체 Farfetch
럭셔리 소매업체인 Farfetch가 코어 웹 바이탈 개선을 위한 투자를 통해 어떻게 비즈니스 성과를 향상했는지
Yahoo! JAPAN은 비밀번호를 사용하지 않는 인증으로 문의량이 25% 감소하고 로그인 시간이 2.6배 빨라졌습니다.
Yahoo! JAPAN은 비밀번호 없는 ID 시스템을 구축했습니다. 그들의 접근 방식과 노력의 결과를 알아보세요.
RebelMouse 코어 웹 바이탈을 최적화하여 충성도와 참여도를 높인 방법
코어 웹 바이탈에서 높은 성능 점수의 전체 효과와 이점을 측정하는 우수사례입니다.
WorkBox가 포함된 Adobe Experience Manager의 최신 웹 환경
프로그레시브 웹 앱은 최신 웹의 기능을 활용합니다. Adobe는 Workbox를 사용하여 이러한 기능을 Adobe Experience Manager에 포함했습니다.
MishiPay PWA로 거래 10배 증가, 대기 시간 2.5년 단축
MishiPay PWA가 거래를 10배 늘리고 2.5년의 대기 시간을 절약한 방법을 알아보세요.
The Economic Times가 코어 웹 바이탈 기준점을 통과하고 전반적으로 43% 더 높은 이탈률을 달성한 방법
The Economic Times 웹사이트에서 코어 웹 바이탈을 최적화한 후 사용자 환경이 크게 개선되었고 전체 웹사이트의 이탈률이 크게 감소했습니다.