요약
메리 픽마스: 3D CSS 변환으로 즐거운 크리스마스를 보내세요.
어떤 점이 마음에 드시나요?
데스크톱과 모바일 모두에서 효과적인 크리스마스 테마 데모를 즐길 수 있습니다. 새로운 테마 색상 지원과 전체 화면을 실행하는 홈 화면 환경을 위한 웹 매니페스트도 제공됩니다.
고급 기능 사용 팁: 휴대전화를 흔들어 눈이 내리게 하세요.
가능한 개선사항
데모 버전이지만 애셋 및 렌더링을 차단하지 않는 JavaScript에 지정된 몇 개의 캐시 헤더를 사용하면 인지되는 로드 시간이 상당히 개선되었을 수 있습니다.
짐 새비지의 Q &A
웹이 중요한 이유
도쿄에서는 오래전부터 반응형 및 모바일 웹을 선호해 왔습니다. Pixmas는 프로젝트 사이의 다운타임 동안 HTML5 및 CSS3 실험을 진행한 결과였습니다. 우리는 항상 지식을 최신으로 유지하기 위해 새로운 것을 시도하고 있습니다. 따라서 프런트엔드 개발자 팀은 모든 연구가 기본 플랫폼이 아닌 웹에 중점을 뒀을 것입니다.
브라우저가 계속 발전함에 따라 Google에서는 네이티브와 유사한 기능을 발견하고 있습니다. 위치정보, 카메라 액세스, 로컬 데이터베이스 저장소 등 네이티브 개발을 통해서만 사용할 수 있었던 함수입니다. 이러한 기능은 모두 사용자의 전반적인 네이티브와 유사하지만 크로스 플랫폼 및 빠른 반복 개발이라는 이점이 있습니다. 물론 네이티브 개발에는 여전히 장점이 있으며 새 프로젝트를 진행할 때는 웹과 네이티브 옵션 모두를 신중하게 고려해야 합니다. 당연하게 들릴지도 모르지만, 클라이언트에게는 코딩에 선호하는 코딩을 위해 모든 프로젝트를 감추기보다는 작업에 가장 적합한 플랫폼을 추천하는 것이 중요합니다.
개발 중에 가장 잘한 것은 무엇입니까?
Pixmas에서는 3D Transforms와 CSS를 실제로 얼마나 활용할 수 있는지에 중점을 두었습니다. 따라서 픽셀화된 삽화 스타일은 브라우저에서 잘 작동했고, 프런트엔드 개발자는 브라우저의 자연스러운 동작이 사각형에 친숙하다고 말할 것입니다. 그래서 정사각형 기반 문제에 전반적인 스타일과 3D 수학의 기초를 두는 것이 정말 잘 작동했습니다. 3D 변환 및 HTML을 사용하여 정육면체를 만드는 것은 다른 어떤 원시 형태보다 훨씬 쉽습니다. 하지만 상호작용과 애니메이션을 원활하게 처리하는 데 약간의 시행착오가 있었습니다.
가장 놀라웠던 점은 모바일 플랫폼, 특히 상대적으로 덜 알려진 Android 기기에서 3D의 원활함과 브라우저 성능이었습니다.
앱을 개선할 수 있는 API가 있다면 어떤 API를 사용하고 싶은가요?
Pixmas를 다시 쓰려면 WebGL 기반 API를 사용할 것입니다. CSS를 통해 3D로 HTML DOM 요소를 조작하는 것이 재미있었지만 웹 기반 3D의 진정한 강점은 WebGL과 같은 전용 하드웨어 가속 기술이어야 합니다. CSS 3D는 기본 웹페이지 효과와 전환에 적합하지만 Pixmas를 코딩할 때 브라우저 성능에는 한계가 있습니다.
Google은 Chrome 실험용을 통해 훌륭한 WebGL 프로젝트를 진행하고 있습니다.