Paul Lewis에서 자체적으로 구축한 CDS 웹사이트는 콘퍼런스 방문자를 위한 훌륭한 모바일 웹 환경을 구축하는 방법을 보여주었습니다.
비하인드 스토리
다양한 모바일 브라우저에서 사이트가 원활히 실행됩니다. 가능한 최선의 방식으로 브라우저의 레이아웃과 페인트 주기를 활용합니다.
새로운 웹 플랫폼 기능 사용
- 서비스 워커
- 매니페스트
- 테마 색상
패턴
- 카드 지출
- 반응형 그리드
- Material Design
소스 코드
더 인터뷰
개발
폴이 사이트를 구축할 때 핵심 우선순위는 점진적인 개선을 수용하는 것이었습니다. 데스크톱에 맞게 디자인하는 대신 먼저 작은 화면에 맞게 앱을 빌드한 다음 큰 화면에 맞게 빌드하여 단계적으로 성능을 저하시키는 것이 아니라 점차적으로 개선해 나갔습니다. 여기에는 많은 미디어 쿼리가 필요했지만 주요 중단점 간의 작은 변경사항을 어느 정도 자유롭게 살펴볼 수 있었습니다. 여러 화면 크기를 오가며 추적하면서 콘텐츠가 어디에서 오류가 발생하는지 파악하고 빠르게 문제를 해결할 수 있었습니다.
PE의 또 다른 중요한 측면은 가능한 한 이전 버전과의 호환성입니다. 폴은 Flexbox에서 부동 소수점 수를 사용하면 사이트에서 작동하는 브라우저의 수가 늘어날 수 있다고 생각했기 때문에 사용하기로 결정했습니다. 사이트의 특정 레이아웃에서는 아무 문제가 없는 것으로 나타났습니다. Flexbox가 필요하다면 PE를 사용하여 Flexbox를 추가했을 것입니다.
이 사이트의 주요 과제는 애니메이션 작업을 실행하는 완전히 새로운 방법을 생각해 봐야 하는 카드 확장 및 축소 기능이었습니다. 폴은 플립이라고 부르는 전략을 세웠습니다. 이 전략은 애니메이션 요소를 최종 상태로 설정하는 것입니다. 여기에서 변형 및 불투명도와 같은 컴포지터 친화적인 속성을 적용하여 변경사항을 반전하고 요소를 시작 위치로 되돌립니다. 마지막으로 변형 및 불투명도에 전환을 사용 설정하고 이러한 변경사항을 삭제합니다. 이렇게 하면 요소가 한 번 더 최종 위치로 이동합니다. 폴은 이 상황이 예상치 못한 결과라는 것을 인정하지만, 뛰어난 성능을 발휘하고 성능을 크게 향상시킵니다.
성능
폴 루이스가 성능 전문가라는 사실을 알았을 때, 사이트를 구축할 때 파워포밍이 매우 중요한 고려사항이라는 사실에 놀랄 일이 없었습니다. 그는 WebPageTest에 크게 의존하여 Speed Index 값을 최대한 낮게 얻었습니다. YouTube를 삽입하지 않고도 케이블 연결로 1,000회 미만에 동영상을 시청할 수 있었습니다. 즉, 대부분의 사용자가 1초 이내에 초기 렌더링을 시도합니다.
이를 달성하기 위한 대부분의 작업은 Grunt 태스크에서 최대한 많이 이미지를 연결, 축소 및 압축했습니다. 또한 사이트에서는 실제 콘텐츠가 화면에 더 빠르게 렌더링되도록 필수가 아닌 이미지를 페이지 로드 후에 연기합니다.
페이지 로드 시간을 훨씬 개선하기 위해 폴은 서비스 워커를 드롭했습니다. 이를 통해 온라인 상태가 아니어도 캐시에서 페이지 방문을 제공할 수 있으므로 연결이 불안정해도(컨퍼런스 Wi-Fi 연결 시 매우 중요함) 콘텐츠에 액세스할 수 있습니다. CDS 사이트는 새 기능을 사용한 최초의 프로덕션 사이트 중 하나였는데, 이로 인해 폴은 여러 '얼리 어답터 문제'를 경험했지만, 엄청난 성능 향상 덕분에 이를 보완했다고 말했습니다. 실제로 이제 그는 자신이 빌드하는 모든 사이트에 이 도구를 적용하고 있습니다.
물론 성능은 사이트의 로드 속도뿐만 아니라 얼마나 잘 실행되는지도 아닙니다. 폴은 애니메이션이 도전할 것이라는 사실을 알고 플립을 떠올렸습니다. 또한 터치 입력이나 스크롤에 방해가 되지 않도록 하기 위해 나갔습니다. 사이트가 그다지 복잡하지는 않지만, 빌드에 수정된 RAIL 방법론을 채택했고 (유휴 시간이 많이 필요하지 않음) 많은 도움이 되었습니다.
디자인
이 사이트는 단 한 사람이 만든 것이기 때문에 폴이 프로젝트의 설계자이자 개발자였기 때문에 두 '팀'의 서로의 우려사항에 대해 전례 없는 수준의 이해가 발생했습니다. 그는 데스크톱을 아래로 디자인하는 것을 좋아합니다 (개발 중에 사용한 점진적 개선의 반대). 그는 프로젝트에 필요한 요소를 파악할 수 있기 때문입니다. 이후 폴은 모바일 뷰로 이동합니다. 이렇게 하면 세부적인 내용을 조정하고 가장 중요한 항목에 가장 많은 관심을 끌 수 있습니다. 그런 다음 데스크톱 버전에 알립니다. 항상 정보 아키텍처와 우선순위를 업데이트해야 하기 때문입니다.
모든 것이 순조롭게 진행되지 않았습니다. 당시에는 머티리얼 디자인 가이드라인에는 콘텐츠 사이트를 만드는 방법이 나와 있지 않았기 때문에 그는 부족한 부분이 있었습니다. 또한 관련 있는 일정과 세션 정보를 고려하지 못했습니다. 그리고 결국 UX로 인해 사람들이 일정을 보고 바로 세션 정보를 확인할 수 없어서 실망하게 되었습니다.
하지만 폴이 Material Design 사양을 콘텐츠 사이트에 옮기는 일을 훌륭하게 해낸 것 같습니다. 저는 시각적 요소와 모션에 정말 만족합니다. 머티리얼 디자인 고유의 느낌을 주며 정보와 디자인이 상호작용과 계층 구조를 장려합니다.
성공
- GitHub에서 전체 사이트 (별 200개 이상)를 성공적으로 출시해 웹 개발자에게 상용구와 아이디어 역할을 했습니다.
- 최고의 최신 웹 플랫폼인 서비스 워커, 웹 매니페스트, 동적 테마 색상이 통합되었습니다. 순 효과는 Android 기기에서 실행할 때 플랫폼과 정말 통합된 느낌을 줍니다. 사용자의 홈 화면에 이 앱이 추가되면 사용자가 사용할 앱과 매우 흡사하며 정말 멋진 일입니다.
- 페이지 조회수 ~73.7k회, 사이트 하위 섹션으로 연결되는 클릭수 ~73.7k가 실제로 사용자가 예상보다 훨씬 많이 사이트를 사용하고 참여했음을 의미했습니다.
결과적으로 오늘날의 웹 개발자에게 큰 영감이 되었고 매우 성공적인 컨퍼런스 웹사이트가 되었습니다.