2019 Google I/O Extended

[BKJang]

Session1. What’s new in web

신속성

• 이미지 레이지 로딩
• google chrome hands on update (canalia)
• light house / peformance budget

확장성

• web perception toolkit
• Sharing API
• Duplex on the web - google io keynote 25:00)

안정성

• HTTP vs HTTPS
• 프라이버시 제어를 더 쉽게(사용자가 자신의 데이터의 사용 정보에 대한 접근성 향상)
• Same site Cookie(CSRF에 대한 보호) = 쿠키 헤더 : ‘sameSite:strict’
• Fingerprinting Protection

현재 웹의 한계 & 극복

• Native app vs Web (App Gap) : PWA(Progressive Web App)

Session2. Flutter 알아보기

크로스 플랫폼

• 하나의 코드로 다양한 플랫폼에서 동작
• 기존의 Native 경험을 해친다
• 크러블 슈팅의 어려움

크로스 플랫폼 언어의 종류

• Xamarin
• RN(React Native) : JS bridge를 통해 통신하기 때문에 성능 고려 필요
• Flutter
• Electron
• Kotlin/Native

Flutter

• Fuchsia OS의 애플리케이션을 만들기 위해 만들어졌다가 발전
• Dart라는 언어를 기반으로 개발
• Skia를 통해 캔버스에 바로 렌더링(Skia : 안드로이드 내부에서 화면을 그릴 때 쓰는 그래픽 엔진)
• 낮은 버전의 os도 지원 가능
• Cupertino(iOS), Material UI(Android) 를 주로 쓰지만 꼭 쓰진 않아도 됨
• Platform 구분으로 Widget 구현
• Row, Column으로 화면 구성(RN의 flex)
• 플랫폼을 모든 위젯마다 나눠서 개발해줘야 하는게 가장 큰 단점이 아닐까?(모듈화가 필수)
• 비동기 호출은 async/await를 사용하며 JS의 async/await와 구현 방식은 동일
• Flutter desktop의 상용성이 높아진다면 꽤나 강력할 수 있을 것 같음

Flutter Web

• Skia가 아닌 js 컴파일러를 통해 브라우저에서 그리게 됨
• 아직 지원하지 않는 Widget이 꽤 됨
• 아직은 프리뷰 버전
• 디버그 모드에서만 동작
• 아직은 사용하지 말자.

Session3. Google Search and Javascript sites

우리가 만든 사이트는 어떻게 구글 검색에 노출될까

Javascript의 사용성

• 전통적인 웹 사이트: 사용자의 인터렉션만을 위해서만 사용
• 현대의 웹사이트: ajax로 데이터만 주고 받고 콘텐츠를 js로 생성한다. 자바스크립트를 이해하지 않고는 콘텐츠를 이해할 수 없다.(google bot + pupeteer)
• 즉, 우리가 만든 spa사이트는 검색 결과에 더 이상 노출에 영향을 미치지 않는다.
• 상위 노출의 문제 : SEO(검색엔진 최적화)

[SEO]Robots.txt

• 구글 봇이 어디까지 크롤링할 것인가 => 보통 크롤링을 막기 위해 사용하지 더 검색이 잘되기 위해 사용하진 않음
• 검색이 아예 되지 않게 하려면 : 도메인을 통째로 나누는게 어떨까
• 검색이 되지 않아야 하는 내부 페이지 : 인증을 거쳐야만 볼 수 있도록 하면 크롤링 되지 않음

[SEO] 올바른

• 적절한 콘텐츠를 설명하면서도 사이트를 잘 설명하도록

[SEO] 올바른 description의 사용

• 선언과 충분한 설명이 필요
• 제대로 해놓지 않으면 컨텐츠의 일부 내용들을 가져와 검색 결과에 노출

[SEO] 올바른 HTML 사용

• navigation : 구글 검색은 기본적으로 검색을 기반으로 크롤링
• 제목 : 태그를 주로 사용

[SEO] 반응형 웹 디자인

• 모바일을 지원하는 페이지를 우선적으로 노출
• 모바일을 지원하는지 아닌지 판단하는 기준은 pupeteer에서 나름대로의 알고리즘으로 판단하는데 이는 light house를 한 번 돌려보면 가능

[SEO] Structured Data 사용

• 데이터를 통해 컨텐츠를 소개(schema.org) => 구글 서치에서 지원하는 structured data는 검색!

[SEO] Light house

• 현재 웹 페이지의 성능 등을 분석해주는 Tool (web.dev로 들어가면 light house 지원 항목 확인 가능)

[SEO] 그 이외..

• 속도!
• 모바일 지원!
• 국내 웹 사이트 : 나무 위키가 가장 잘 되어있음...(SEO와 컨텐츠의 관련성은 없음..)
• festa도 Good 👍

즉, SPA는 검색 결과에 영향을 주지 않는다!