창의적통합설계 프로젝트 제안서 (LG전자) 프로젝트 과제명: W3C 웹 표준 기술을 활용한 웹 앱 개발 과제 배경 네이티브 앱(C, Java) 대비 웹 앱은 성능, UX 등의 한계가 있음 구글, 모질라 등 브라우저 벤더의 노력으로 점점 개선 중 최근 Google I/O, Apple WWDC 등의 행사에서 신규 웹 기술에 대한 소개가 많음 IoT, Wearable, Car 등 다양한 기기에서 웹 앱 실행 환경을 지원함 (웹 영향력 증대) 과제를 통해 얻을 수 있는 것 최신 기술이 녹아든 웹 앱을 만들어 봄을 통해 현재 웹 기술의 발전 속도 확인 구글, 애플 등에서 어떤 웹 기술을 개발해서 브라우저에 적용하는지에 대한 기술 내용 파악 Progressive Web App 개념 및 가치를 이해하고 이를 활용한 웹 앱 개발 경험 습득 최신 웹 기술을 활용한 앱 개발을 통해 향후 웹 기술의 발전 방향 이해 필요 지식 Front-end(Web App): HTML5, CSS, JavaScript Back-end(Web Server): Node.js, Python 등 ※ 프로그래밍 언어 자체에 대한 진입 장벽은 크지 않음
창의적통합설계 프로젝트 제안서 (LG전자) 수행해야 하는 과제 내용 명시된 W3C 웹 표준 기술 8개가 모두 적용된 웹 앱 개발 및 성능 최적화 (필수기술 5개, 선택기술 3개 반드시 포함) 웹 앱에 꼭 포함시켜야 하는 기술 (필수기술) Presentation API(★): https://www.w3.org/TR/presentation-api/ Media Queries: https://www.w3.org/TR/mediaqueries-4/ Service Worker: https://www.w3.org/TR/service-workers/ Push Notification: https://www.w3.org/TR/push-api/ Web App Manifest: https://www.w3.org/TR/appmanifest/ 웹 앱에 선택적으로 포함시켜야 하는 기술 (선택기술, 6개 중 4개 선택) Web Components: https://www.w3.org/wiki/WebComponents/ Fetch API: https://fetch.spec.whatwg.org/ Background Sync API: https://wicg.github.io/BackgroundSync/spec/ Performance Timeline: https://www.w3.org/TR/performance-timeline/ CSS Flexible Box Layout: https://www.w3.org/TR/css-flexbox-1/ CSS Fonts: https://drafts.csswg.org/css-fonts/Fonts.html
창의적통합설계 프로젝트 제안서 (LG전자) 과제 진행 일정 1단계: W3C 표준 기술 이해 (과제 수행) 2단계: 웹 앱 설계하기 (참고자료 제공) 3단계: 웹 앱 개발하기 (성능 최적화 가이드 제공) 참고 사항 특정 서비스를 제공하는 완성된 형태의 웹 앱이어야 하며, 서버쪽 프로그래밍은 최소화 할 것 최신 웹 기술 활용을 위해서는 Canary or Beta 버전의 크롬 브라우저를 활용해야 함 Presentation API 활용을 위해 Chromecast 단말 제공 (기기간 연동 기술 구현 필수) PC 및 Mobile을 모두 고려하는 Responsive design이 고려되어야 함 (Media Queries 활용) 참고 사이트 최근에 크롬 브라우저에 들어간 기능(API) 조회: https://www.chromestatus.com 프로그레시브 웹 앱 기술 소개 페이지: https://developers.google.com/web/progressive-web-apps/ (프로그레시브 웹 앱 개발을 위해 필요한 기술 3가지가 필수 구현 기술 목록에 포함되어 있음) 과제 담당자 성명: 송효진 주임연구원 (現 CSS Round Display 표준 스펙 에디터) 소속: LG전자 CTO부문 Software Platform 연구소 연락처: 010-9165-5603 / hyojin22.song@lge.com