T-Mobile은 실제 사용자의 웹 바이탈을 분석하여 Core Web Vitals를 개선하면 사용자 환경과 비즈니스 측정항목 모두에 상당한 영향을 미칠 수 있음을 확인했습니다.

RUMvision에서 기준 정보를 RUM 데이터에 통합한 방법

Ray-Ban에서 Speculation Rules API를 사용하여 LCP를 개선하고 Ray-Ban의 전자상거래 플랫폼 비즈니스 실적을 개선한 방법을 알아보세요.

QuintoAndar는 다음 페인트에 대한 상호작용 (INP)을 80% 줄여 웹 성능을 크게 개선했으며, 그 결과 전년 대비 전환수가 36% 증가했습니다.

이 사례 연구에서는 Netflix에서 컨테이너 쿼리를 채택한 이점을 설명합니다.

일본의 철도 회사인 Tokyu가 어떻게 패스키로 12배 더 빠른 로그인 속도를 달성하여 매일 수천 명의 통근자를 지원했는지 알아보세요.

Google Sheets의 계산은 처음에는 서버에서 수행되었고, 그 다음 JavaScript로 클라이언트에서 계산되었고, 이제 WebAssembly 가비지 컬렉션의 클라이언트에서 계산되었습니다. 이 우수사례에서는 그 방법과 이유를 설명합니다.

이 우수사례에서는 Google Meet팀이 권한을 개선한 방법과 사용자에게 미치는 영향을 설명합니다.' 달성할 수 있습니다.

고객이 실제 제품을 이해하고 탐색할 수 있도록 웹을 통해 몰입형 3D 경험을 제공하는 방법을 알아보세요.

스마트 TV 및 셋톱 박스 기기용 앱인 Disney+ Hotstar가 INP를 줄이기 위한 노력을 통해 시청자 참여도를 크게 높인 방법을 알아보세요.

고객이 실제 제품을 이해하고 탐색할 수 있도록 웹을 통해 몰입형 3D 경험을 제공하는 방법을 알아보세요.

PubTech의 동의 관리 플랫폼이 고객 웹사이트의 INP를 최대 64% 줄이고 광고 조회가능성을 최대 1.5% 개선한 방법

지난 2년 동안 Goodnotes 엔지니어링팀은 성공적인 iPad 메모 작성 앱을 다른 플랫폼에 제공하기 위한 프로젝트를 진행해 왔습니다. 이 우수사례에서는 2022년 올해의 iPad 앱이 웹 기술을 기반으로 하는 웹, ChromeOS, Android, Windows에 적용되었으며 WebAssembly가 팀에서 10년 이상 작업해온 것과 동일한 Swift 코드를 재사용한 방법을 다룹니다.

콘텐츠 추천 제공업체인 Taboola가 LoAF를 사용해 게시자 파트너 웹사이트의 INP를 최대 36% 개선한 방법

모바일용으로 가장 인기 있는 동영상 편집 앱 중 하나가 모든 기능을 갖춘 웹 버전을 만든 방법.

pixiv는 일러스트레이터와 일러스트 애호가가 콘텐츠를 통해 서로 소통할 수 있는 온라인 커뮤니티 서비스입니다. 사용자가 직접 만든 삽화를 게시할 수 있습니다. 전 세계적으로 8,400만 명 이상의 사용자가 있으며 2023년 5월 현재 1억 2,000만 개가 넘는 아트워크가 게시되어 있습니다. pixiv Sketch는 pixiv에서 제공하는 서비스 중 하나입니다. 손가락이나 스타일러스를 사용하여 웹사이트에 아트워크를 그리는 데 사용됩니다.

이 게시물에서는 Mitra Tokopedia가 머신러닝을 사용하여 판매자 웹 앱을 개선하여 운영 비용을 절감한 방법을 설명합니다.

이 우수사례에서는 PageSpeed Insights (PSI), Chrome DevTools, scheduler.yield API와 같은 Google 도구를 활용하여 Trendyol에서 사용하는 React의 INP를 디버깅하고 개선하는 단계별 워크플로를 설명합니다.

이 우수사례에서는 비영리 단체인 Kiwix가 프로그레시브 웹 앱 기술 및 File System Access API를 사용하여 사용자가 오프라인에서 사용하기 위해 대용량 인터넷 아카이브를 다운로드하고 저장할 수 있도록 하는 방법을 살펴봅니다.

Yahoo! JAPAN의 패스키 채택 및 사용자 경험 개선을 위한 접근방식입니다.

프리페치는 가까운 미래에 필요할 가능성이 있는 리소스 또는 전체 페이지를 다운로드하여 페이지 로드 속도를 높이는 데 사용되는 기술입니다. 연구에 따르면 로드 시간이 빨라지면 전환율과 사용자 환경이 개선됩니다.

Yahoo! 일본에서 가장 인기 있는 뉴스 플랫폼 중 하나인 JAPAN News는 bfcache 적중률을 개선하기 위해 공동으로 노력한 결과, 사용자 환경과 비즈니스가 크게 개선되었습니다. 진행한 A/B 테스트에 따르면 bfcache가 있는 페이지의 광고 수익이 9% 증가했습니다.

redBus는 INP 최적화를 통해 매출을 약 7% 늘렸습니다.

TBT를 30배 줄이고 Next.js로 이전한 결과 The Ecomonic Times는 INP를 거의 4배 줄였으며 이탈률은 50% 감소하고 페이지뷰는 43% 상승했습니다.

이 캐주얼 드라이빙 게임에서 절차적으로 생성된 무한한 풍경을 통해 WebGL의 잠재력을 발견해 보세요. Slow Roads 는 끝없이 절차적으로 생성되는 풍경을 강조하는 캐주얼 드라이빙 게임으로, 모두 브라우저에서 WebGL 애플리케이션 으로 호스팅됩니다. 많은 사용자에게 이러한 집중적인 환경은 제한된 브라우저 컨텍스트에 적합하지 않은 것처럼 보일 수 있습니다. 실제로 이러한 태도를 바로잡는 것이 이 프로젝트의 목표 중 하나였습니다. 이

이 도움말은 '더 나은 YouTube 웹 구축'에 관한 새로운 시리즈의 1부입니다.

또한 실제 사용자의 웹 바이탈을 측정한 결과, 최대 콘텐츠 렌더링 시간 (LCP)이 좋으면 전환율이 61.13% 증가할 수 있는 것으로 나타났습니다.

GoDaddy에서 수백만 개의 웹사이트 성능을 개선하여 PageSpeed Insights 및 코어 웹 바이탈 점수를 향상시키기 위해 GoDaddy에서 구현한 변경사항의 우수사례입니다.

럭셔리 소매업체인 Farfetch가 코어 웹 바이탈 개선을 위한 투자를 통해 어떻게 비즈니스 성과를 향상했는지

Yahoo! JAPAN은 비밀번호 없는 ID 시스템을 구축했습니다. 그들의 접근 방식과 노력의 결과를 알아보세요.

코어 웹 바이탈에서 높은 성능 점수의 전체 효과와 이점을 측정하는 우수사례입니다.

프로그레시브 웹 앱은 최신 웹의 기능을 활용합니다. Adobe는 Workbox를 사용하여 이러한 기능을 Adobe Experience Manager에 포함했습니다.

MishiPay PWA가 거래를 10배 늘리고 2.5년의 대기 시간을 절약한 방법을 알아보세요.

The Economic Times 웹사이트에서 코어 웹 바이탈을 최적화한 후 사용자 환경이 크게 개선되었고 전체 웹사이트의 이탈률이 크게 감소했습니다.

이 도움말에서는 '다크 모드' 동질 집단의 크기를 파악하고 맞춤 어두운 테마를 적용하며 마지막으로 이 구현이 주요 KPI에 미치는 영향을 측정하는 단계까지 테라의 여정을 분석합니다.

코어 웹 바이탈을 최적화하고 Next.js로 이전하는 데 중점을 둔 한 프로젝트의 전환율은 5%, 세션당 페이지 수는 87% 증가했습니다.

Kapwing과 같은 회사는 강력한 API (예: IndexedDB 및 WebCodecs)와 성능 도구를 사용하여 웹에서 바로 이러한 모든 동영상 콘텐츠를 만들 수 있도록 지원합니다.

컬러 또는 흑백 비트맵 이미지 (PNG, JPG, JPEG, WEBP, AVIF, GIF 등)를 컬러 또는 흑백 벡터 이미지 (SVG)로 변환합니다.

Mail.ru 홈페이지에서 코어 웹 바이탈을 개선하기 위해 수개월 동안 노력한 결과, 누적 레이아웃 변경 (CLS)의 75번째 백분위수가 60% 증가했고, 평균 세션 시간은 2.7%, 핵심 섹션의 전환율은 10% 이상 증가했습니다.

이 게시물에서는 Renault와 글로벌 데이터 파트너인 fty-5가 코어 웹 바이탈을 측정하고 최적화하는 방법을 설명합니다. 이 팀은 방문 페이지 방문수 1,000만 회에서 발생한 데이터를 분석한 결과, 최대 콘텐츠 렌더링 시간(LCP)과 전환 간에 밀접한 상관관계가 있는 것으로 확인되었고, 최적화에 두 배의 노력을 기울였습니다. 이러한 데이터 포인트를 살펴보고 팀이 최적화를 위해 어떻게 구성했는지 파악할 것입니다.

이 우수사례에서는 Swappie팀이 코어 웹 바이탈에 맞게 웹 앱을 최적화하여 전환수와 수익을 늘린 방법을 설명합니다.

이 도움말에서는 사용자와 비즈니스에 이미 긍정적인 영향을 미친 기업의 예를 탐색하여 코어 웹 바이탈과 주요 비즈니스 측정항목의 상관관계를 이해하는 데 도움을 드립니다.

독일 뉴스 게시자인 Netzwelt에서 코어 웹 바이탈을 최적화하여 사용자 경험과 광고 수익을 개선한 방법을 알아보세요.

Blibli가 이탈률 42% 감소, 모바일 전환율 8배 향상, 세션당 페이지 2.5배 증가를 달성한 방법

영국의 선도적인 뉴스 웹사이트인 Telegraph는 몇 달 만에 75번째 백분위수 CLS를 0.25에서 0.1로 250% 개선할 수 있었습니다.

또한 새로운 PWA는 이전 사이트보다 평균 로드 시간이 30% 더 빠르고 이탈률은 12%, 세션 심도는 18% 개선되었습니다.

Mainline Menswear는 프로그레시브 웹 앱 (PWA)을 구현하여 캐싱 및 오프라인 기능을 갖춘 앱을 설치한 사용자의 전환율이 55% 증가하는 효과를 보고 있습니다.

Zalando의 웹팀은 Lighthouse CI를 통합한 덕분에 사전 예방적인 접근 방식을 사용할 수 있고, 자동화된 상태 확인을 통해 현재 커밋을 기본 브랜치와 비교하여 성능 저하를 방지할 수 있다는 사실을 발견했습니다.

Lowe's Site Speed팀은 자동화된 성능 테스트 및 모니터링 시스템을 구축하여 성능 예산에 대한 pull 요청을 테스트하고, 성능 저하가 프로덕션 단계로 돌아가는 것을 방지합니다.

Vodafone은 특히 웹 바이탈 최적화에 중점을 둔 A/B 테스트를 진행한 결과 LCP가 31% 개선되어 판매가 8%, 방문율로 이어지는 리드가 15% 개선되었으며, 장바구니에서 방문율이 11% 개선되었음을 확인했습니다.

수백만 개의 사이트에서 웹사이트 로드 성능을 개선하고 PageSpeed Insights 및 코어 웹 바이탈 점수를 얻기 위한 경로를 개선하기 위해 Wix에 도입된 몇 가지 주요 변경사항에 관한 우수사례입니다.

Search Console과 Lighthouse를 사용하여 코어 웹 바이탈을 모니터링한 결과 CLS 점수를 0.2 최적화할 기회를 발견했으며 그 결과 세션당 페이지 조회수는 15% 증가하고 세션 시간은 13% 늘어났으며 이탈률은 1.72%포인트 감소했습니다.

Agrofy에서 코어 웹 바이탈에 집중하여 로드 이탈률을 개선한 방법을 알아보세요.

Excalidraw는 가상 공동작업 화이트보드로, 손으로 그린 것처럼 쉽게 다이어그램을 스케치할 수 있습니다. Excalidraw 프로젝트에서는 Excalidraw용 Electron 래퍼인 Excalidraw Desktop을 지원 중단하고 항상 excalidraw.com에서 찾을 수 있는 웹 버전을 사용하기로 결정했습니다. Google은 신중한 분석 끝에 PWA (Progressive Web App)를 개발해야 할 미래로 판단했습니다.

웹 기반 동영상 편집기가 PWA, WebAssembly, ChromeOS를 통해 1,200만 명의 사용자에게 더 나은 성능과 몰입도 높은 경험을 제공하는 방법

또한 PWA 사용자는 다른 모든 설치 유형보다 활동량이 24% 더 높으며, 다른 모든 플랫폼에 비해 31% 더 많은 재방문 사용자가 됩니다.

JD.ID가 전체 모바일 전환율 (mCVR)을 53%, 설치 사용자의 mCVR을 200%, 일일 활성 사용자를 26% 높인 방법을 소개합니다.

웹 앱을 설치 가능하게 만든 결과 트래픽, 방문자 유지, 고객당 매출, 전환수가 증가했습니다.

NDTV팀은 PageSpeed Insights , web.dev/measure, WebPageTest와 같은 도구를 사용하여 개선의 여지가 있는 부분을 분석하고 코어 웹 바이탈에 투자하여 비즈니스 성공을 달성했습니다.

비즈니스 성공을 위해 웹 성능 대시보드를 만들고 자바스크립트, 리소스, 홈페이지를 최적화합니다.

ZDF에서 오프라인 지원, 설치 가능성, 어두운 모드와 같은 최신 기능을 갖춘 프로그레시브 웹 앱 (PWA)을 어떻게 만들었는지 알아보세요.

인도 최고의 온라인 여행사인 Goibibo가 PWA와 iOS/Android 앱 간에 안정적인 사용자 환경을 구축하여 전환수를 60% 늘린 방법을 알아보세요.

TBT를 프록시 측정항목으로 사용하여 FID를 최적화하기 위해 Mercado Libre의 프런트엔드 아키텍처 팀에서 수행한 작업의 요약입니다.

4가지 속도 측정항목을 0.1초 개선하면 전체 구매 유입경로에서 진행률을 높일 수 있습니다.

요리 사이트 BettyCrocker.com의 Wake Lock API 구현 경험에 대한 우수사례입니다.

이 우수사례에서는 Google에서 어떻게 비활성 및 재검증을 통해 서드 파티 광고 스크립트의 실적을 최적화하여 주요 광고 비즈니스 측정항목을 높였는지 설명합니다.

이 우수사례에서는 eBay가 웹 및 앱 환경의 성능을 최적화하여 주요 비즈니스 측정항목을 개선한 방법을 설명합니다.

한 숙박업체 스타트업이 웹 콘텐츠를 사용해 사용자 참여도를 크게 높이고 파일 크기를 작게 유지하는 Android 앱을 빌드한 방법

AirSHIFT팀이 테이블 가상화, RUM 데이터, 레이지 로드, 웹 작업자, 성능 예산, 해커톤을 사용하여 React 앱의 런타임 성능을 최적화한 방법을 알아보세요.

이 우수사례에서는 Truebil팀이 웹 앱의 속도와 안정성을 최적화하여 전환수와 참여도를 높인 방법을 설명합니다.

OpenSooq가 권장사항을 활용하여 안정적이고 매력적인 마켓플레이스 프로그레시브 웹 앱을 만든 방법을 알아보세요.

Google에서 어떤 주제든 검색하면 의미 있고 관련성 높은 검색결과가 표시됩니다. 이 검색결과 페이지가 서비스 워커라고 하는 강력한 웹 기술을 통해 제공될 수 있다는 사실은 몰랐을 것입니다.

WebAssembly를 이용하여 Google 어스에 대한 브라우저 간 액세스 개선

Media Capabilities API를 사용하면 사용자 기기의 기능에 따라 동영상 코덱, 프레임 속도 및 해상도를 더 정확하게 타겟팅할 수 있습니다.

140년 이상의 출판 역사를 자랑하는 Nikkei는 일본에서 가장 공신력 있는 미디어 기업 중 하나입니다. Nikkei는 더 나은 사용자 환경을 제공하고 웹에서 비즈니스를 가속화하기 위해 2017년 11월에 프로그레시브 웹 앱을 출시했으며 이 새로운 플랫폼에서 놀라운 성과를 거두고 있습니다.

George.com 은 ASDA Walmart의 일부인 영국의 선도적인 의류 브랜드입니다. 사이트를 프로그레시브 웹 앱 (PWA)으로 업그레이드한 후 모바일 전환이 31% 증가했습니다. 모바일 쇼핑 경험에 대한 소비자의 기대가 사상 최고로 높아지자 Asda George는 오래된 모바일 솔루션을 개편하여 고객 서비스 개선이 필요하다는 사실을 깨달았습니다. 팀은 모바일 전환을 유도하기 위해 디자인, 속도, 기능에 초점을 맞춘 모바일 중심 접근

BookMyShow는 월간 방문자가 5천만 명에 달하는 인도 최대의 티켓 판매 회사입니다. 프로그레시브 웹 앱 (PWA)을 사용하여 모바일 웹사이트를 개선하여 속도를 최적화하고 데이터 제약을 없앱니다. 그 결과 전환수가 80% 증가했습니다.

Ele.me는 중국에서 가장 큰 음식 주문 및 배달 회사입니다. 프로그레시브 웹 앱 (PWA)은 모바일 웹 환경을 개선하기 위해 멀티 페이지 앱으로 빌드되었습니다. 이를 통해 불안정한 연결에서도 빠르고 안정적인 앱을 제공하는 동시에 고객에게 최상의 서비스를 제공하기 위한 운영 요구사항을 충족할 수 있었습니다.

Dance Tonite는 LCD Soundsystem 및 밴드의 팬들과 함께하는 끊임없이 변화하는 VR 공동작업입니다. WebVR을 기반으로 빌드된 이 프로젝트는 VR 유무와 관계없이 여러 플랫폼에서 작동하므로 기기에 따라 사용자에게 다양한 경험을 선사합니다. 프로젝트 크리에이터 Jonathan Puckey, Moniker 및 Google의 Data Arts Team이 제안한 창의적인 결정과 고급 최적화 기법을 통해 3DoF의 경우 60FPS, 6DoF의 경우 90FPS에 가까운 높은 품질의 성능을 얻을 수 있었으며, 단일 코드베이스를 사용해 모든 플랫폼에서 매력적인 사용자 경험을 제공할 수 있었습니다.

Twitter Lite 프로그레시브 웹 앱은 빠른 로드, 사용자 참여 발생 시간, 데이터 소비 절감을 위한 명확한 목표를 가지고 보다 강력한 환경을 제공하기 위해 최고의 최신 웹 기능과 네이티브 기능을 결합합니다.

Ola는 인도의 선도적인 택시 애그리게이터로, 10억 인도인의 이동성을 높이겠다는 끊임없는 사명을 가지고 있습니다. 이 회사는 약 60만 명의 운전자 파트너 네트워크를 통해 100개가 넘는 인도 도시에 서비스를 제공하고 있습니다. 인도에서 가장 가치가 높은 스타트업 중 하나인 Ola는 매일 100만 건 이상의 탑승을 완료하고 인도에서 매일 3억 건의 택시 운행이 많이 발생하는 것으로 추정되는 3억 건에 이르렀습니다. 2단계 및 3단계 도시

OLX의 경우 프로그레시브 웹 앱을 제작하여 사용자 참여가 250% 증가하고 상호작용으로의 페이지 시간을 23% 단축

0h h1 은 모바일에서도 바로 즐길 수 있는 재미있고 중독성 있는 게임입니다. 저는 항상 웹 기술의 무궁무진한 가능성을 좋아했습니다. 지난 몇 년 동안 데스크톱과 모바일 모두에서 웹 기술이 크게 발전한 것을 볼 수 있었기 때문에, 이를 수년 전부터 받아들인 점도 운이 좋다고 생각합니다. JavaScript도 있습니다. 세상에! 괴짜들을 위한 플레이도입니다. Play-Doh와 JavaScript 모두 스파게티를 조금 쌓을 수 있기 때문이죠.

Infobae는 서비스 워커를 활용하여 불안정한 네트워크에서도 안정적인 성능을 제공했습니다. 이 회사의 최고 사양인 PWA는 웹페이지 품질 측정을 위한 자동화 도구인 Lighthouse에서 100점 만점에 93점의 성능 점수를 달성했습니다.

Forbes는 프로그레시브 웹 앱 기술을 통해 현대 웹 개발을 재정립하고 있습니다.

프로그레시브 웹 앱을 출시한 후 MakeMyTrip.com의 모바일 웹에서 전환율은 3배로 증가했고 페이지 로드 속도는 38% 향상했습니다.

Jumia의 PWA로 유입되는 트래픽은 네이티브 앱의 트래픽을 12배 이상 앞섰으며 지금도 계속 증가하고 있습니다. 또한 Jumia에서는 이탈률이 50% 감소했습니다.

Mynet은 매달 3,400만 명 이상의 사이트 방문자에게 뉴스, 동영상, 게임, 금융, 정보, 엔터테인먼트 콘텐츠와 서비스를 제공하고 있습니다. 콘텐츠에 AMP (Accelerated Mobile Pages)를 사용하는 프로그레시브 웹 앱 (PWA)을 출시한 후 평균 페이지 로드 시간이 4배 감소했습니다. 또한 Mynet의 모바일 사이트 평균 이용 시간이 43% 증가하는 등 사용자 참여가 크게 증가했습니다. 모바일 트래픽의 85% 이상이

웹에서 놀라운 사용자 경험을 제공할 수 있는 새로운 방법이 있습니다. 여행사인 Wego는 성공적인 AMP 기반 프로그레시브 웹 앱 (PWA)을 빌드했습니다.

트래픽과 재참여를 모두 유도하기 위해 럭셔리 화장품 브랜드인 Lancôme은 프로그레시브 웹 앱 (PWA)을 출시하여 모바일 웹에서 앱과 같은 빠른 경험을 제공합니다.

Voot.com은 인도에서 미디어 Progressive Web App을 출시합니다. 구현 후 며칠 만에 사용자당 세션 시간이 39%, 사용자당 일일 조회수가 15% 증가했습니다. Voot은 네이티브 앱과 모바일 웹 앱으로 제공되는 인도 최고의 VOD 제품 중 하나입니다. Voot은 Colors, MTV 등의 네트워크,Voot Originals, 8, 000개 이상의 어린이용 동영상을 포함해 온라인에서 35,000시간에 달하는 프리미엄 콘텐츠를

사이트 보기 Santa Tracker는 2016년 연말연시 시즌에 오프라인 프로그레시브 웹 앱으로 빠르게 업그레이드되었습니다. 기존 장면 디자인 덕분입니다 산타 추적기 는 Google의 연말연시 전통입니다. 매년 12월 한 달 동안 게임과 교육 경험을 통해 연말연시를 기념할 수 있습니다. 산타가 잠시 쉴 수 있는 동안 엘프 친구들은 산타 추적기를 공개하기 위해 웹 에서 오픈소스로 Android. 웹의 산타 추적기는 대형 대화식 사이트로서 많은

사이트 보기 Matterport에서는 WebVR 지원을 추가하여 몰입형 가상 현실에서 실제 장소를 더 쉽게 탐색할 수 있습니다. 다운로드할 앱이 없으므로 WebVR은 중도 이탈을 줄이고 파트너가 자체 웹사이트에 사용자를 유지할 수 있도록 지원합니다. WebVR은 Matterport 전략의 주요 요소 로, VR 콘텐츠 소비와 검색 증가를 촉진합니다. Matterport VR 을 사용하면 수천 개의 실제 장소를 대화형 가상 현실에서 경험할 수

다큐멘터리 보기 WebVR은 브라우저에 내장된 API 로, 스테레오 렌더링과 실시간 머리 추적이 결합되어 있으면 온라인에서 VR 콘텐츠를 빠르고 쉽게 즐길 수 있습니다. WebVR을 사용하면 콘텐츠 크리에이터는 온라인에서 다양한 VR 하드웨어에서 실행되는 몰입형 VR 콘텐츠를 만들 수 있습니다. 베어 71 은 캐나다 국립영화위원회(NFB)에서 제작한 대화형 다큐멘터리입니다. 원래 플래시로 빌드된 Bear 71 은 2011년에 출시되어 평단의

실습 보기 웹사이트 디자이너는 스마트폰, 태블릿, 컴퓨터 등 다양한 기기 및 다양한 화면 해상도 및 픽셀 비율에서 작동하는 반응형 디자인이라는 개념에 익숙합니다. WebVR 은 반응형 디자인 개념에 새로운 도전과제를 도입합니다. WebVR 환경은 몰입도 수준과 입력 수준이라는 두 가지 측정항목으로 분류할 수 있습니다. 이러한 수준은 '자유도'(DOF)로 구분됩니다. 6 DOF는 위치와 방향을 모두 추적하는 것을 의미하고 3 DOF는 방향만

안에는 가상 현실에서 스토리텔링을 할 수 있는 플랫폼이 있습니다. VR이 있는 곳이면 어디에서나 이용할 수 있습니다. 웹도 마찬가지입니다. WebVR을 활용하면 시청자는 웹사이트로 이동하여 링크를 클릭한 후 고급 헤드 마운트 디스플레이 등 몰입형 VR로 내부의 영화를 즉시 볼 수 있습니다. 팀은 개발 프로세스를 진행하는 동안 이 새로운 환경에서 텍스트 렌더링이 어렵다는 것을 발견했으며, 프로세스를 더 원활하게 하기 위해 셰이더를 사용한 예를 만들었습니다.

유선선은 동작을 통해 Google 어스 위성 이미지를 탐색할 수 있는 실험 기능입니다. 머신러닝, 최적화된 알고리즘, 그래픽 카드 성능을 조합하여 백엔드 서버가 없어도 실험을 휴대전화의 웹브라우저에서 효율적으로 실행할 수 있습니다. 지금까지 Google의 개발 과정과 최종 결과를 얻기까지 노력한 다양한 접근 방식을 살펴봤습니다.

Alibaba.com은 200개 국가 및 지역에서 서비스를 제공하는 세계 최대의 온라인 B2B (기업 간 거래) 플랫폼입니다. 사이트를 프로그레시브 웹 앱 (PWA)으로 업그레이드한 후 모든 브라우저에서 총 전환수가 76% 증가했습니다.

Carnival Cruise Line은 푸시 알림을 통해 고객에게 흥미로운 맞춤형 커뮤니케이션 서비스를 제공합니다. PDF 우수사례 다운로드 세계 최대의 레저 여행사 중 하나인 Carnival Cruise Line은 고객의 재참여를 유도하고자 했습니다. 즉, 고객의 받은편지함에서 관심을 끌기 위해 경쟁할 필요 없이 모든 기기에서 작동하며 간편하게 조치를 취할 수 있는 시의적절한 맞춤설정된 정보를 전송하는 것이 목표였습니다. Carnival은

IBM 비즈니스인 The Weather Company는 사람들이 매일 평균 400억 건의 예보 요청을 처리하고 날씨에 따라 일상 생활을 계획하고 더 나은 결정을 내릴 수 있도록 돕고 있습니다.

PDF 우수사례 다운로드 Guardian News & Media (GNM)는 세계 최대 규모의 영어 품질 뉴스 웹사이트 중 하나인 theguardian.com 을 게시합니다. 2011년과 2013년에 각각 미국과 오스트레일리아의 디지털 버전을 출시한 이후 영국 외부에서 유입되는 트래픽은 Guardian 전체 디지털 잠재고객의 3분의 2 이상을 차지합니다. 영국에서 GNM은 1821년에 처음 발행된 Guardian 신문이자 세계에서 가장

PDF 우수사례 다운로드 2010년 4월에 시작된 AliExpress는 전 세계 소비자를 대상으로 하는 글로벌 소매 마켓플레이스입니다. 이 플랫폼을 통해 전 세계 소비자는 경쟁력 있는 가격으로 중국의 도매업체와 제조업체로부터 직접 제품을 구매할 수 있습니다. AliExpress는 Alibaba Group 내의 비즈니스입니다. 200여 개 국가 및 지역의 쇼핑객이 AliExpress 앱을 다운로드하거나 데스크톱 및 모바일 웹사이트를 사용했습니다.

PDF 우수사례 다운로드 Housing.com은 인도 최고의 스타트업 중 하나입니다. 올해 방문객이 5천만 명에 달할 정도로 인도 최고의 온라인 부동산 플랫폼 중 하나가 되었습니다. 프로그레시브 웹 앱 (PWA)인 Housing Go 를 빌드한 후 모든 브라우저에서 총 전환수가 38% 증가했습니다. 또한 새로운 PWA는 가치가 더 높은 사용자를 확보했습니다. 방문자는 세션당 10% 더 오래 보내고 재방문 빈도도 더 많았습니다.

서비스 워커의 실제 성능에 미치는 영향 측정

AMP는 Washington Post에서 모바일 검색을 통한 재사용자를 23% 늘린 데 도움이 되었습니다. PDF 우수사례 다운로드 트래픽의 약 55% 가 휴대기기에서 발생하는 워싱턴 포스트는 휴대기기에서 우수한 독서 환경을 제공하는 것이 장기적인 성공에 매우 중요하다는 사실을 알고 있습니다. 데이터에 따르면 콘텐츠가 빠르게 로드되지 않으면 3초 만에 웹사이트를 이탈하는 것으로 나타나므로 게시물은 모바일 콘텐츠를 최대한 빠르게 로드하는 데

웹 구성요소를 사용하여 Google I/O 2016 PWA 빌드

새로운 프로그레시브 웹 앱을 통해 신규 사용자의 전환율을 104% 높인 AliExpress PDF 우수사례 다운로드 '스마트한 쇼핑, 생활 개선'은 쇼핑객이 중국에서 유아복부터 냉장고까지 모든 제품을 직접 구매할 수 있는 웹사이트 AliExpress의 모토입니다. 글로벌 온라인 소매 마켓플레이스는 Alibaba Group에 속해 있으며 현재 미국, 러시아, 브라질에서 인기 있는 전자상거래 사이트가 되었습니다. 모바일 상거래가 전자상거래보다 3배

United eXtra Electronics, 웹 푸시 알림을 통해 전자상거래 매출 100% 증대 PDF 우수사례 다운로드 eXtra는 사우디아라비아에서 가장 빠르게 성장하고 있는 소비자 가전 및 가전제품 소매업체입니다. 사우디아라비아, 오만, 바레인 전역의 40개 이상의 매장에서 1,200만 명이 넘는 쇼핑객에게 제품을 제공합니다. 사우디아라비아는 세계에서 가장 큰 스마트폰 시장 중 하나입니다. 매달 250만 명이 넘는 쇼핑객이

푸시 알림을 통해 Jumia는 장바구니 이탈을 취소하고 전환을 9배 늘렸습니다 PDF 우수사례 다운로드 Jumia는 아프리카의 유명 전자상거래 웹사이트입니다. 대부분의 고객이 휴대기기를 사용하고 있으며, 이는 가장 큰 트래픽 소스와 사용자 증가 소스이기도 합니다. Jumia의 모바일 사이트에서 매일 발생하는 장바구니의 약 4분의 1이 이탈합니다. 이 문제에 대응하기 위해 고객에게 이메일을 통해 구매를 완료하라고 상기시켰습니다. 하지만 사람들이

BaBe의 교차 브라우저 프로그레시브 웹 앱은 네이티브 앱의 성능에 견줄 만합니다. PDF 우수사례 다운로드 2013년에 출시된 BaBe는 인도네시아 최대의 뉴스 통합 앱으로, 이 앱은 백만 명 이상의 사용자가 다운로드했습니다. 이 앱 전용 비즈니스는 2016년 초 처음으로 웹으로 이전하면서 기본 앱과 거의 동일한 기능 패리티와 디자인을 갖춘 교차 브라우저 프로그레시브 웹 앱을 빌드했습니다. 사용자가 앱을 다운로드하게 만드는 것은 항상 중요한

새로운 프로그레시브 웹 앱을 통해 데이터 사용량을 92% 절감한 Konga PDF 우수사례 다운로드 2012년에 문을 연 Konga는 책부터 냉장고, 휴대전화까지 모든 상품을 판매하는 나이지리아의 선도적인 전자상거래 웹사이트입니다. 휴대기기는 트래픽과 사용자 증가의 가장 큰 소스를 제공합니다. 아프리카는 독특한 이동성을 가진 대륙입니다. 세상의 다른 많은 지역과 달리 인터넷 사용은 데스크톱에서 모바일로 급증했습니다. 연결 불량, 보급형 기기

새로운 프로그레시브 웹 앱을 통해 이탈률을 50% 줄이고 전환율을 60% 증대한 5miles PDF 우수사례 다운로드 '구매한 물건을 팔아서 원하는 물건을 구매하세요!'는 5마일이라는 모토로, 쇼핑객들이 가구에서 다이아몬드 귀걸이까지 모든 것을 살 수 있는 모바일 마켓플레이스입니다. 베이징에 R&D 센터를 두고 댈러스에 본사를 둔 스타트업은 700만 건 이상의 앱 다운로드를 기록하고 있습니다. 신규 쇼핑객의 절반 이상이 모바일 웹을 통해

일본 최고의 부동산 사이트는 웹 푸시 알림을 통해 신규 등록정보를 더욱 강화했으며, 알림 수신률이 31% 를 기록했습니다. PDF 우수사례 다운로드 SUUMO는 일본 인구의 약 11% 를 대상으로 하는 일본 최고의 부동산 사이트입니다. 1,400만 명의 순 사용자가 대부분 스마트폰을 사용하며 SUUMO에서 새 주택을 검색합니다. 점점 더 많은 사용자가 점점 더 많은 수의 온라인 주택 매물을 파악하기 위해 검색엔진을 사용하고 있습니다. 즉,

6명의 예술가가 VR로 그림을 그리며 디자인하고 조각하는 프로그램에 초대받았습니다.

Google Polymer 라이브러리로 개발 시간을 절약한 Net-A-Porter NET-A-PORTER는 Google의 Polymer 라이브러리를 사용하여 온라인 속성에 구성요소 기반 디자인을 구현했습니다. 그 결과 개발 시간을 크게 절약하고 사이트 전반에서 코드를 표준화했으며 구조화된 데이터를 사용하여 검색엔진 최적화 실적을 개선할 수 있었습니다. PDF 우수사례 다운로드 2000년 6월에 설립된 NET-A-PORTER는 온라인 럭셔리

2015년, 인도 최대의 전자상거래 사이트인 Flipkart는 앱 전용 전략을 채택하고 모바일 웹사이트를 일시적으로 폐쇄했습니다. Flipkart는 자사의 모바일 앱만큼 빠르고 매력적인 사용자 환경을 제공하는 것이 점점 더 어려워지고 있다는 사실을 깨달았습니다. 그러나 Flipkart는 개발 접근 방식을 재고하기로 했습니다. 이 회사는 모바일 웹을 즉시 실행하고 오프라인에서 작업하며 사용자의 재참여를 유도할 수 있는 기능을 도입하면서 모바일 웹에 다시 관심을 보였습니다.

Polymer로 고성능 FPS WebGL 프로젝트를 설정하는 방법

우리는 한 번에 6만 개 이상의 HTML, 6만 개 이상의 자바스크립트 및 6만 개의 CSS를 절대로 다운로드하지 않겠다는 목표를 달성했습니다.

Beyond the Rack은 모바일 웹에서 사용자의 재참여를 유도하고 푸시 알림을 통해 방문당 수익을 26% 늘렸습니다.

AirHorner는 단순하지만 강력한 프로그레시브 웹 앱으로, 서비스 워커와 Web Audio API의 힘을 보여줌으로써 나만의 에어혼을 제공합니다. 온라인이든 오프라인이든, 취약한 2G 네트워크를 통해서든 친구 또는 동료들을 짜증 나게 할 수 있습니다.

서비스 워커 라이브러리를 사용하여 Google I/O 2015 웹 앱을 빠르고 오프라인 우선으로 만드는 방법을 알아보세요. 올해의 Google I/O 2015 웹 앱 은 멋진 오디오/시각적 실험 을 작성한 Instrument 의 친구들이 디자인한 것을 바탕으로 Google의 개발자 관계팀에서 작성했습니다. 저희 팀의 임무는 I/O 웹 앱 (코드네임: IOWA)이 최신 웹에서 할 수 있는 모든 기능을 보여주는 것이었습니다. 필수 기능 목록의

Hummingbird 라이브러리: 인기 애니메이션 시계 추적 및 탐색 사이트인 Hummingbird의 새로운 프런트엔드입니다. 저와 같은 애니메이션 팬들은 오랫동안 자신이 시청한 동영상을 추적하는 데 매료되어 왔습니다. 이 분야에서 인기 있는 사이트로는 AniDB와 MyAnimeList가 있지만, 그중에서도 Hummingbird 가 가장 잘 보입니다. 하지만 기존 Hummingbird API를 기반으로 하는 Hummingbird 라이브러리 는

Madeon Adventure Machine 은 재미있는 드럼 머신인 Madeon의 새 앨범을 위한 영리한 프로모션입니다. Adventure Machine은 정말 간단한 앱이지만 꽤 잘 작동합니다. 웹 오디오 및 선택적으로 Web Midi(예: 자체 신시사이저를 연결할 수 있음)를 활용하면 버튼을 터치하여 새로 생성된 루프가 완벽하게 동기화되고 인터페이스가 모바일에서(특히 홈 화면에 설치 시) 잘 작동합니다. 모든 비트와 루프의 사전 캐싱을

Adsy.me 는 모바일 마이크로사이트를 빠르고 쉽게 만드는 방법입니다. Adsy.me는 누구나 모바일 (마이크로) 웹사이트를 만들 수 있는 도구로, 자체 dogfood를 먹어봄으로써 즉시 저의 신뢰를 얻었습니다. 모든 도구는 반응 속도가 빠르고 직관적인 환상적인 모바일 웹 앱입니다. 지연 로드 기법을 더 많이 활용하면 앱이 훨씬 더 빠르게 로드될 수 있으며 전체 화면 API와 함께 오프라인으로 전환할 때 ServiceWorker를 활용하면

Little Alchem: Alchemy의 후속작으로, 재미있고 모바일 친화적인 조합 게임입니다. Little Alchemy는 웹 플랫폼의 최신 기능을 최대한 활용하는 대표적인 예입니다. 웹 앱 매니페스트 를 사용하여 설치 시 전체 화면으로 실행되며 theme-color 를 사용하여 Android와 조화를 이룹니다. 첫 번째 로드는 매우 반응이 빠르며 즉시 로드 미리 로더를 표시합니다. 또한 AppCache를 사용하여 완전히 오프라인으로

Hacker News Reader: Hacker News에 최적화된 놀랍도록 최적화된 리더입니다. Hacker News에 고도로 최적화된 아름다운 읽기 환경인 이 앱은 잘 작동하며 모바일, 태블릿, 데스크톱에서 멋지게 표시됩니다. 속도가 빠르고 모바일에서 테스트하면 전환이 매끄러워집니다. Android에 통합할 때 테마 색상을 매우 효율적으로 사용하며 웹 앱 매니페스트 를 사용하여 설치할 수 있습니다. 설치되면 기본 HN 뉴스리더 앱처럼 보이고

메리 픽마스: 3D CSS 변환으로 즐거운 크리스마스를 보내세요. 데스크톱과 모바일 모두에서 효과적인 크리스마스 테마 데모를 즐길 수 있습니다. 새로운 테마 색상 지원과 전체 화면을 실행하는 홈 화면 환경을 위한 웹 매니페스트도 제공됩니다. 고급 기능 사용 팁: 휴대전화를 흔들어 눈이 내리게 하세요. 데모 버전이지만 애셋 및 렌더링을 차단하지 않는 JavaScript에 지정된 몇 개의 캐시 헤더를 사용하면 인지되는 로드 시간이 상당히 개선되었을

Chrome Dev Summit 2014 웹사이트는 Google의 Paul Lewis가 사내에서 구축했으며, CDS 웹사이트에서는 컨퍼런스 방문자를 위한 훌륭한 모바일 웹 환경을 구축하는 방법을 보여주었습니다.

SVGOMG: SVGO를 위한 아름답고 물질적이며 반응형 프런트엔드입니다. Google의 Jake Archibald 이 빌드한 SVGOMG는 웹 기술로 작성된 완전히 반응형이며 기능이 뛰어난 도구의 거의 완벽한 예입니다. 멋진 Material Design 디자인을 사용하며 ServiceWorker를 통해 앱이 빠르게 로드되고 오프라인에서도 사용할 수 있으며 모바일에서 전환이 원활합니다. 유일하게 지적할 수 있는 점은 기본 UI가 누락되어 초기

웹 필터: 빠르고 빠른 더티 카메라 필터입니다. 실시간으로 필터를 적용할 수 있는 멋진 웹 기반 카메라 앱입니다. 이미지는 자동으로 로컬 기기에 저장됩니다. 즉, 일반적으로 선택한 클라우드 저장소 제공업체 (예: G+)와 동기화되므로 쉽게 이미지를 공유할 수 있습니다. 앱을 홈 화면에 설치할 수 있지만 적어도 Android에서는 앱이 실행될 때마다 사용자에게 카메라 사용 권한을 요청하는 메시지가 표시됩니다. 이는 분명한 개발자 측의 문제가

Hobbit 환경에 WebRTC 게임플레이 추가 새로운 호빗 영화 '호빗: 다섯 군대의 전투' 개봉에 맞춰 작년의 Chrome 실험인 중간계 여행 을 새로운 콘텐츠로 확장했습니다. 이번 업데이트의 주요 목표는 더 많은 브라우저와 기기에서 콘텐츠를 볼 수 있도록 WebGL의 사용 범위를 확대하고 Chrome 및 Firefox의 WebRTC 기능을 사용하는 것입니다. 올해 실험의 목표는 세 가지였습니다. 게임 로직은 게임 보드에서 병사가 이동하는

멀티스크린 웹에 LEGO® 블록 가져오기 원래 오스트레일리아에서 출시 된 데스크톱 Chrome 사용자를 위한 재미있는 실험인 Build with Chrome은 2014년에 전 세계에서 사용할 수 있게 되었으며, THE LEGO® MOVIE™와의 제휴, 모바일 기기 지원을 새로 추가했습니다. 이 도움말에서는 특히 데스크톱 전용 환경에서 마우스와 터치 입력을 모두 지원하는 멀티스크린 솔루션으로 전환하는 것과 관련하여 프로젝트에서 얻은 몇 가지

멀티스크린 개발 둘러보기 Chrome 실험 중간계 여행 개발에 관한 첫 번째 도움말 에서는 휴대기기용 WebGL 개발에 중점을 두었습니다. 이 도움말에서는 나머지 HTML5 프런트엔드를 만들 때 발생한 문제, 문제점, 해결 방법을 설명합니다. 먼저 화면 크기와 기기 기능 관점에서 이 실험을 데스크톱 컴퓨터와 휴대기기에서 모두 작동하도록 조정하는 방법을 알아보겠습니다. 전체 프로젝트는 매우 '영화 같은' 스타일을 기반으로 하며, 디자인 측면에서는

모바일 WebGL로 중간계 구현하기 지금까지는 모바일과 태블릿에 양방향 웹 기반 멀티미디어 환경을 제공하는 것이 쉽지 않았습니다. 주요 제약사항은 성능, API 가용성, 기기의 HTML5 오디오 제한, 원활한 인라인 동영상 재생의 부족이었습니다. 올해 초 Google과 Warner Bros. 의 친구들과 함께 새로운 호빗 영화 호빗: 스마우그의 황폐화 를 위한 모바일 중심 웹 환경을 만드는 프로젝트를 시작했습니다. 멀티미디어를 많이 사용하는

Racer 는 멀티플레이어, 멀티스크린 Chrome 실험입니다. 여러 화면에서 플레이할 수 있는 레트로 스타일의 슬롯 카 게임입니다. Android 또는 iOS 스마트폰/태블릿 누구나 참여할 수 있습니다. 앱 없음 다운로드 항목이 없습니다. 모바일 웹만 Plan8 은 14islands 의 친구들과 함께 조르조 모로더의 원곡을 바탕으로 역동적인 음악과 사운드 환경을 만들었습니다. Racer는 반응형 엔진 소리, 레이스 음향 효과를 제공하지만,

Racer 는 Active Theory 에서 개발한 웹 기반 모바일 Chrome 실험입니다. 최대 5명의 친구가 휴대전화나 태블릿을 연결하여 모든 화면에서 경주할 수 있습니다. Google Creative Lab의 개념, 디자인, 프로토타입과 Plan8의 사운드를 바탕으로 I/O 2013 출시에 앞서 8주 동안 빌드를 반복했습니다. 게임이 출시된 지 몇 주가 지났으므로 작동 방식에 관한 개발자 커뮤니티의 질문을 받을 수 있었습니다. 다음은 주요

World Wide Maze 는 스마트폰을 사용하여 웹사이트에서 만든 3D 미로를 통해 굴러가는 공을 탐색하여 목표 지점에 도달하는 게임입니다. 이 게임은 HTML5 기능을 많이 사용합니다. 예를 들어 DeviceOrientation 이벤트는 스마트폰에서 기울기 데이터를 가져와 WebSocket을 통해 PC로 전송합니다. PC에서 플레이어는 WebGL 및 Web Worker 로 빌드된 3D 공간을 통해 길을 찾습니다. 이 도움말에서는 이러한

Roll It 은 휴대전화와 컴퓨터의 브라우저만 사용하여 기존의 보드게임을 재해석한 Chrome 실험 입니다. 휴대전화의 브라우저를 사용하면 손목을 튕겨 공을 조준하고 굴릴 수 있으며, 컴퓨터의 브라우저는 WebGL 및 Canvas로 Roll It 레인의 실시간 그래픽을 렌더링합니다. 두 기기는 WebSocket을 통해 통신합니다. 앱 없음 다운로드 항목이 없습니다. 토큰이 없습니다. 최신 브라우저만 있으면 됩니다. Legwork 는

CSS 및 브라우저 레이아웃의 도구를 사용하면 웹 콘텐츠에 멋진 시각화를 적용할 수 있습니다. CSS 필터, WebGL, HTML5 동영상, SVG, 캔버스와 같은 웹 기능과 CSS 영역, CSS 도형, CSS 맞춤 필터와 같은 진화하는 미래 기술을 사용하면 창의적인 환경이 크게 확장될 것입니다. Adobe는 레이아웃과 디자인에 열정적인 콘텐츠 크리에이터와 오랜 기간 협력해 왔으며, 이러한 지식을 웹에 적용하기 위해 노력해 왔습니다. 그 결과,

컨퍼런스 등록이 시작되기 전에 Google I/O 2013 웹사이트에 대한 개발자의 관심을 유도하기 위해 터치 상호작용, 생성형 오디오, 탐색의 즐거움에 중점을 둔 일련의 모바일 우선 실험과 게임을 개발했습니다. 코드의 잠재력과 놀이의 힘에서 영감을 얻은 이 양방향 환경은 새 I/O 로고를 탭할 때 'I'와 'O'의 간단한 소리로 시작됩니다. I 및 O 애니메이션을 HTML5 상호작용에서 자주 볼 수 없는 흔들리는 유기적 효과로 구현하기로

2010년 여름, 휴대전화용 HTML5 게임 대회에 참가하기 위해 Sand Trap이라는 게임을 만들었습니다. 하지만 대부분의 휴대전화는 게임의 일부만 표시하거나 게임이 너무 작아서 플레이할 수 없었습니다. 따라서 모든 해상도에 맞게 게임이 원활하게 조정되도록 했습니다. 약간의 재프로그래밍과 이 도움말에 설명된 아이디어를 사용한 결과, 데스크톱에서 실행되든 휴대기기에서 실행되든 모든 최신 브라우저에서 확장되는 게임을 만들었습니다. 이 접근

'오즈로 가는 길 찾기' 는 디즈니가 웹에 제공하는 새로운 Google Chrome 실험입니다. 이 앱을 사용하면 대규모 폭풍에 휩쓸려 오즈의 땅으로 이어지는 캔자스 서커스를 통해 대화형 여정을 떠날 수 있습니다. Google의 목표는 영화의 풍부함과 브라우저의 기술적 기능을 결합하여 사용자가 강한 유대감을 형성할 수 있는 재미있고 몰입도 높은 환경을 만드는 것이었습니다. 이 작업은 한 번에 전체를 다루기에는 너무 방대하므로 흥미롭다고 생각되는

UI를 멋지게 만든 방법 Chrome으로 음악 만들기 는 Google에서 만든 웹 기반 음악 프로젝트입니다. Chrome의 JAM을 사용하면 전 세계 사용자가 밴드를 결성하고 브라우저 내에서 실시간으로 연주할 수 있습니다. DinahMoe 는 Chrome의 Web Audio API 로 가능한 한계를 넓혔으며, Tool of North America 의 팀은 컴퓨터를 마치 악기처럼 연주하고, 연주하고, 연주할 수 있는 인터페이스를 제작했습니다.

안녕하세요. 저는 Google의 데이터 아트팀에서 근무하는 마이클 장입니다. 최근에는 근처 별을 시각화하는 Chrome 실험 인 100,000 Stars 를 완료했습니다. 이 프로젝트는 THREE.js 및 CSS3D로 빌드되었습니다. 이 사례에서는 발견 프로세스를 간략히 설명하고 몇 가지 프로그래밍 기법을 공유한 후 향후 개선을 위한 몇 가지 생각을 마무리로 전달하겠습니다. 여기에서 다루는 주제는 상당히 광범위하며 THREE.js에 대한 약간의

오디오를 멋지게 만드는 방법 Chrome으로 음악 만들기 는 Google에서 만든 웹 기반 음악 프로젝트입니다. JAM with Chrome을 사용하면 전 세계 사람들이 밴드를 결성하고 브라우저 내에서 실시간으로 연주할 수 있습니다. DinahMoe 는 이 프로젝트에 참여하게 되어 기쁩니다. Google의 역할은 애플리케이션용 음악을 제작하고 음악 구성요소를 설계 및 개발하는 것이었습니다. 개발은 세 가지 주요 영역으로 구성되었습니다. 미디

Movi.Kanti.Revo 는 Cirque du Soleil에서 제작하고 Subatomic Systems에서 개발한 새로운 감각적 Chrome 실험으로, 최신 웹 기술을 통해 Cirque du Soleil의 경이로움을 웹에 제공합니다. 이 실험은 HTML5만 사용하여 만들었으며 환경은 마크업과 CSS로 완전히 빌드됩니다. 무대의 세트 조각처럼 div, img, 작은 video 및 기타 요소는 CSS를 사용하여 3D 공간에 배치됩니다. 새로운

작년 여름에는 SONAR 라는 상용 WebGL 게임의 기술 책임자로 일했습니다. 이 프로젝트는 완료하는 데 약 3개월이 걸렸으며 JavaScript로 처음부터 완전히 완성되었습니다. SONAR를 개발하는 과정에서는 테스트되지 않은 새로운 HTML5 환경에서 발생하는 여러 문제에 대한 혁신적인 솔루션을 찾아야 했습니다. 특히 간단해 보이는 문제에 대한 해결책이 필요했습니다. 플레이어가 게임을 시작할 때 70MB가 넘는 게임 데이터를 다운로드하고

Technitone.com 은 WebGL, Canvas, Web Sockets, CSS3, JavaScript, Flash, Chrome의 새로운 Web Audio API 를 융합한 것입니다. 이 도움말에서는 계획, 서버, 사운드, 시각적 요소, 대화형 디자인에 활용하는 일부 워크플로 등 제작의 모든 측면을 다룹니다. 대부분의 섹션에는 코드 스니펫, 데모, 다운로드가 포함되어 있습니다. 기사 끝에 다운로드 링크가 있어 모든 파일을 하나의 ZIP

작년 말에 iOS 및 Android용 Bouncy Mouse를 게시한 후 몇 가지 중요한 교훈을 얻었습니다. 그중에서도 기존 시장에 진입하기가 어렵다는 점이 가장 중요했습니다. 포화 상태에 이른 iPhone 시장에서는 관심을 얻기가 매우 어려웠습니다. 포화 상태가 덜한 Android 마켓플레이스에서는 진행이 더 쉬웠지만 여전히 쉽지 않았습니다. 이러한 경험을 바탕으로 Chrome 웹 스토어에서 흥미로운 기회를 발견했습니다. 웹 스토어에 게임이

PalaSoftware 애플리케이션인 iPad용 MathBoard 는 미묘하지만 자연스러운 애니메이션과 독특한 사실적인 디자인을 갖춘 매우 세련된 애플리케이션입니다. 목표는 iPad 애플리케이션을 HTML5로 가장 정확하게 포팅하는 것이었습니다. N2N-Apps는 HTML5 기술로 차세대 웹 및 모바일 애플리케이션을 구축하는 데 중점을 둔 소프트웨어 개발 회사입니다. 이 회사는 Netscape, Oracle, Adobe에서 11년간 엔지니어링

Google 홈페이지는 코딩하기에 매력적인 환경입니다. 속도와 지연 시간에 대한 특별한 관심, 모든 종류의 브라우저를 지원하고 다양한 상황에서 작동해야 하는 까다로운 제한사항이 많습니다. 그리고 놀라움과 즐거움도 있습니다. 가끔 로고를 대체하는 특별한 일러스트인 Google 기념일 로고 를 말하는 것입니다. 펜과 브러시와의 관계는 오랫동안 금지 명령의 독특한 풍미가 있었지만, 저는 종종 양방향 금지 명령에 기여합니다. 제가 코딩한 모든 양방향

HTML5를 사용하면 WebSockets 및 EventSource 를 통해 개발자가 서버와 실시간으로 통신하는 웹 앱을 빌드할 수 있습니다. Stream Congress ( Chrome 웹 스토어 에서 사용 가능)는 미국 의회의 활동에 대한 실시간 업데이트를 제공합니다. 하원과 상원의 의안 업데이트, 관련 뉴스 업데이트, 하원의원들의 트윗, 기타 소셜 미디어 업데이트를 스트리밍합니다. 이 앱은 의회의 업무를 담아내기 위해 하루 종일 열어 두어야

Wordico 십자말풀이 게임을 플래시에서 HTML5로 변환할 때 가장 먼저 브라우저에서 풍부한 사용자 환경을 만드는 방법에 관해 알고 있던 모든 것을 잊어버려야 했습니다. Flash는 벡터 그리기에서 다각형 히트 감지, XML 파싱에 이르기까지 애플리케이션 개발의 모든 측면에 대해 단일의 포괄적인 API를 제공했지만 HTML5는 다양한 브라우저 지원과 함께 뒤죽박죽된 사양을 제공했습니다. 또한 문서용 언어인 HTML과 상자 중심 언어인

2010년 6월, 현지 출판 '잡지'인 Boing Boing 에서 게임 개발 대회 를 개최한다는 소식이 전해졌습니다. 이는 JavaScript 및 <canvas> 로 빠르고 간단한 게임을 만들기에 좋은 기회라고 생각하여 작업을 시작했습니다. 대회가 끝난 후에도 아이디어가 많았고 시작했던 일을 완료하고 싶었습니다. 다음은 이 결과에 관한 우수사례인 Onslaught! Arena. 칩튠 을 기반으로 게임을 개발한다는 대회 전제 를 고려할

2010년 F-i.com 과 Google Chrome팀은 브라우저 및 웹에 관해 배운 20가지( www.20thingsilearned.com )라는 HTML5 기반 교육 웹 앱을 공동으로 제작했습니다. 이 프로젝트의 핵심 아이디어 중 하나는 책의 맥락 에서 가장 잘 표현할 수 있다는 것이었습니다. 이 책의 내용은 공개 웹 기술에 관한 내용이므로 컨테이너 자체를 이러한 기술을 통해 오늘날 달성할 수 있는 작업의 예시로 만들어 이를 충실히 반영하는

지난 봄 (2010년) HTML5 및 관련 기술에 대한 지원이 급증하는 데 관심을 갖게 되었습니다. 당시 친구와 저는 프로그래밍 및 개발 기술을 연마하고 서로 주고받은 게임 아이디어를 구현하기 위해 2주간의 게임 개발 대회에서 서로 경쟁하고 있었습니다. 그래서 자연스럽게 HTML5 요소를 경쟁 출품작에 통합하여 작동 방식을 더 잘 이해하고 이전 HTML 사양을 사용하여 거의 불가능했던 작업을 할 수 있도록 했습니다. HTML5의 여러 새로운

2010년 8월 7일, deviantART는 창립 10주년을 맞았습니다. deviantART는 창립기념일을 맞아 HTML5 그리기 도구인 deviantART muro를 출시했습니다. 이 도구는 포럼 댓글에 사진을 추가하는 가벼운 그리기 도구로 사용할 수 있을 뿐만 아니라 독립형 웹 애플리케이션으로도 사용할 수 있습니다. deviantART 커뮤니티는 이 새로운 그리기 도구를 매우 열정적으로 받아들였으며, 이제 이 도구 자체가 상당한 규모의 웹

드래그 앤 드롭 (DnD)은 HTML 5의 여러 가지 훌륭한 기능 중 하나이며 Firefox 3.5, Safari, Chrome, IE에서 지원됩니다. Google은 최근 Google Chrome 사용자가 브라우저에서 데스크톱으로 파일을 드래그 앤 드롭할 수 있는 새로운 기능 을 출시했습니다. 매우 편리한 기능이지만 이 새로운 기능에 대한 역엔지니어링의 발견 에 관한 기사를 라이언 세든이 게시하기 전까지는 널리 알려지지 않았습니다.