프로그레시브 웹 앱 소개
이 과정에서는 네이티브 애플리케이션이 제공하는 많은 기능을 활용할 수 있는 첫 번째 프로그레시브 웹 앱 작업을 시작합니다. 서비스 워커를 사용하여 오프라인에서 작동하는 웹 앱을 만드는 경험도 더 쌓을 수 있습니다. 마지막으로 웹 앱 매니페스트 파일로 사용자의 홈 화면에 앱을 설치할 수 있게 합니다.
이 과정은 다음 과정을 통해 무료로 제공됩니다. Udacity
과정 수강하기웹 접근성
이 과정에서는 웹 애플리케이션에 액세스할 수 있는 방법을 직접 체험해 봅니다. 사용자에게 접근성이 필요한 경우와 이유를 이해할 수 있습니다. 그런 다음 스크린 리더에서 페이지가 올바르게 작동하도록 하고 입력 포커스를 관리하는 방법 (예: 양식을 탭할 때 강조표시되는 강조표시)에 관해 알아봅니다. '의미 체계'와 '시맨틱 마크업'이 웹페이지에 의미하는 바를 이해하고 ARIA 마크업을 추가하여 다양한 보조 기기로 인터페이스를 탐색할 수 있도록 합니다. 마지막으로 부분 시각 장애인이 페이지를 쉽고 안정적으로 탐색할 수 있도록 도와주는 스타일 지정 기법을 알아봅니다.
이 과정은 다음 과정을 통해 무료로 제공됩니다. Udacity
과정 수강하기브라우저 렌더링 최적화
성능은 사용자에게 중요합니다. 웹 개발자는 빠르게 반응하고 원활하게 렌더링되는 앱을 빌드해야 합니다. Google 성능 전문가인 Paul Lewis가 버벅거림을 제거하고 초당 60프레임 성능을 유지하는 웹 앱을 만들 수 있도록 지원해 드립니다. 앱을 프로파일링하고 버벅거림의 원인을 파악하는 데 필요한 도구를 사용하여 이 과정에서는 나가겠습니다. 브라우저의 렌더링 파이프라인을 살펴보고 성능 높은 앱을 쉽게 빌드할 수 있는 패턴을 알아봅니다.
이 과정은 다음 과정을 통해 무료로 제공됩니다. Udacity
과정 수강하기반응형 웹 디자인
이 과정에서는 Google의 Pete LePage와 함께 하는 반응형 웹 디자인의 기본 사항을 배웁니다. 스마트폰, 태블릿, 데스크톱 등 모든 기기에서 원활하게 작동하는 반응형 웹페이지를 직접 만들 수 있습니다.
먼저 사이트를 반응형으로 만드는 요소와 여러 기기에서 일반적인 반응형 디자인 패턴이 작동하는 방식을 살펴보겠습니다. 여기에서 표시 영역 태그와 CSS 미디어 쿼리를 사용하여 자체 반응형 레이아웃을 만드는 방법을 알아보세요. 계속 진행하면서 주요 중단점과 소규모 중단점을 실험하고 텍스트를 읽을 수 있도록 최적화합니다.
이 과정은 다음 과정을 통해 무료로 제공됩니다. Udacity
과정 수강하기주요 렌더링 경로
모바일 및 데스크톱 브라우저가 페이지를 렌더링하는 방법을 자세히 알아보면서 웹사이트의 속도를 최적화하는 방법을 알아봅니다.
핵심 렌더링 경로 또는 브라우저에서 HTML, CSS, 자바스크립트를 살아있는 숨쉬는 웹사이트로 전환하기 위해 수행해야 하는 단계에 대해 알아볼 수 있습니다. 그런 다음 가능한 한 빨리 첫 번째 픽셀을 화면에 전달하는 성능 및 간단한 전략을 측정하는 도구를 탐색하고 실험합니다. 즉시 실적을 향상하는 데 필요한 데이터를 찾기 위해 PageSpeed Insights의 권장사항 및 Chrome 개발자 도구의 타임라인 보기를 자세히 살펴보는 방법을 배웁니다.
이 과정은 다음 과정을 통해 무료로 제공됩니다. Udacity
과정 수강하기반응형 이미지
이미지가 웹페이지를 로드하는 데 필요한 평균 바이트의 60% 이상을 차지한다는 것을 알고 계셨나요?
이 과정에서는 이미지가 모든 기기에서 멋지게 보이고 빠르게 로드되도록 최신 웹에서 이미지를 사용하는 방법을 알아봅니다.
그 과정에서 반응형 이미지를 개발 워크플로에 원활하게 통합하는 다양한 기술과 기법을 익히게 됩니다. 이 과정을 마치면 다양한 표시 영역 크기와 사용 시나리오에 맞게 조정되고 응답하는 이미지로 개발하게 됩니다.
이 과정은 다음 과정을 통해 무료로 제공됩니다. Udacity
과정 수강하기오프라인 웹 애플리케이션
이 과정은 사용자 경험에 초점을 맞추고 있으며 오프라인을 우선으로 생각하는 것이 애플리케이션이 이상적인 시나리오가 아닌 모든 시나리오에서 최고의 성능을 발휘할 수 있는 가장 좋은 방법임을 보여주기 위해 마련되었습니다. 여기서는 연결 상태가 양호, 나쁨, 간헐적, 결여됨의 차이를 인식하고 이러한 조건을 탐색하는 애플리케이션을 쉽게 만드는 방법을 알아봅니다.
이 과정에서 습득한 기술을 사용하여 온라인과 오프라인에서 모두 작동하고 가능한 경우 새 데이터를 로드하는 앱을 빌드하여 마무리합니다. 웹 앱은 기본 앱처럼 네트워크와 상호작용합니다. 이로 인해 기차 터널에 갇히거나 과부하된 컨퍼런스 Wi-Fi에 의존하거나 셀룰러 '통신 사각지대'를 통해 이동해야 하는 등 전통적으로 어려운 연결 상황에서도 사용자 환경이 개선됩니다.
이 과정은 다음 과정을 통해 무료로 제공됩니다. Udacity
과정 수강하기웹 도구 및 자동화
이 과정에서는 개발을 최적화하고 일상적인 작업 및 반복 중에 생산성을 발휘하며 자신과 사이트의 재해를 예방하고 자동 최적화 및 자동화로 많은 시간과 노력을 절약할 수 있는 방법을 알아봅니다. 마지막으로, 이 모든 작업을 하면서 실제 세계의 수많은 기기에서 코드가 실행되는지 확인하는 방법을 알아봅니다.
이 과정은 다음 과정을 통해 무료로 제공됩니다. Udacity
과정 수강하기전환율이 높은 웹 양식 작성
웹에서 의미 있는 경험을 하는 데에는 한 가지 양식이 있습니다. 텍스트 상자, 전환, 버튼, 체크박스, 터치 가능한 위젯 등 어떤 형태로든 웹 개발자는 사용자를 만족시키고 전환율을 높일 수 있도록 양식을 신중하게 작성해야 합니다.
이 과정에서는 최신 양식의 권장사항을 알아봅니다. 전자상거래 결제 및 이벤트 플래너 앱을 비롯한 몇 가지 자기 주도형 프로젝트를 통해 기술을 연습해 볼 수 있습니다.
또한 Google 제품 이사이자 웹 양식 디자인의 저자인 루크 브로블스키와 함께 인터뷰하는 시리즈를 시청하여 현대 웹에서의 상호작용을 소개합니다.
이 과정은 다음 과정을 통해 무료로 제공됩니다. Udacity
과정 수강하기