Search results for 'Animation'

DevTools in 2016: Accelerate your workflow 요약

2016. 6. 6. 01:13

DevTools에 새롭게 추가된 기능에 대한 세션입니다.


- 새로운 기능은 chrome canary 버전에서 chrome://flags 에서 Enable Developer Tools experiments를 활성화해야 사용할 수 있음

- Authoring

    - Device mode

        - Mobile first를 먼저 하길 권장. 이에 맞춰 개선했음

        - responsive design을 쉽게 확인하도록 다양한 사이즈를 쉽게 선택해서 볼 수 있음

        - 디바이스 회전 아이콘을 클릭하면 키보드 노출 화면도 확인 가능

        - settings - show the device frame 을 선택하면 기기의 프레임을 보여줌. 

        - 스크린샷 촬영 가능

        - 기기를 추가할 수 있고

        - device pixel ratio 지정 가능

        - network throttling 설정 가능. 네트워크 패널에 있는 것과 동일

        - 줌 레벨을 낮추면 4K 모니터에서도 어떻게 보이는지 확인 가능

        - 랩탑의 디바이스 타입 설정 가능 (터치 유무)

        - show media queries를 선택하면 media query에 지정된 너비를 선택해서 볼 수 있음

    - color

        - css variable 사용 가능

        - 클래스를 설정해서 클래스 선택에 따라 스타일이 달라지는 모습을 확인할 수 있음

    - animation

        - 새로운 bezier curve editor

        - animation inspector

    - devtools의 기능을 쉽게 찾고 싶을 때

        - sublime text edtor에서 처럼 command + shift + p 를 누르고 키워드를 입력해서 기능을 쉽게 찾을 수 있음

- 새로운 기능

    - source diff - element에서 변경하면 소스코드에서 변경된 부분을 표시해줌

    - quick source - source와 동일. element에서 style tab에 해당하는 부분을 동시에 보여줌

    - css source map을 on 하면 scss 원본 파일과 연결해줌. 이 상태에서 수정해도 반영됨.

        - 변수에 지정된 값을 변경 가능

        - 저장하면 원본 파일도 같이 변경됨. 파일을 변경해도 스타일 반영됨.

- application

    - resources 패널이 변경됨

    - manifest를 시각적으로 표현

    - service worker 를 다양하게 테스트 가능

    - sw에서 생성하는 로그의 색을 변경하는 데모 보여줌

    - clear storage

- lighthouse

    - progressive web app을 만들기 위한 체크리스트 역할을 하는 프로젝트

- DevTools에 node.js를 디버깅할 수 있는 기능 추가 


이 세션의 후반부인 Application 패널부터는 Great libraries and tools for great Progressive Web Apps 의 후반부와 내용이 같습니다. Node.js 프로그램을 DevTools에서 디버깅하는 데모도 동일합니다. 둘 중 하나의 영상만 봐도 충분합니다. 다만 Application 패널에 대한 설명은 service worker pane에 대한 데모가 추가되어 있는 이 동영상이 더 낫습니다. 나머지는 거의 비슷하니 두 개 중 하나만 보셔도 충분할 것입니다.



잘못된 부분이 있을 수 있으니, 꼭 원본 동영상을 참고하시기 바랍니다.









nundefined ETC Animation, application, Canary, Chrome, device mode, devtools, google io, google io 2016, LIGHTHOUSE, node.js, service worker, 서비스 워커, 크롬

Performance Guide RAIL 요약

2015. 7. 15. 00:48

지난 5월 초 라스베가스에서 열렸던 LoopConf의 세션 중 Performance Guide RAIL를 요약했다. 동영상은 여기서 볼 수 있다.



Performance

- Performance는 성공적으로 실행되는 방법의 관점에서 살펴보는 행동, 작업, 활동이다.

- 성공의 의미: 성공이란 인간 두뇌의 지각 반응이 기대하는 바를 충족시키는 것이며, 사용자에게 초점을 맞추면 다른 것들은 따라온다는 것


RAIL 성능 모델 - Response, Animation, Idle, Load


Response

- 목적: 즉각적이라고 느끼도록 100ms 내에 반응

- 반응 속도에 따른 느낌을 알 수 있는 비디오: https://www.youtube.com/watch?v=vOvQCPLkPt4 (Applied Sciences Group: High Performance Touch on YouTube)


Animation

- 목적: 16ms 마다 프레임을 갱신

- 일정한 속도를 내는 쪽이 좋은 성능을 낸다고 받아들이게 된다.

- 따라서 0.5초 동안 아무것도 안하고 나머지 0.5초 동안 16ms마다 그리는 것보다 32ms마다 지속적으로 그리는 것이 사용자에게는 더 좋다.


Idle

- 목적: 가능한 긴 유휴시간을 확보

- 100ms 이내에 즉각적으로 반응하려면 100ms보다 짧은 시간마다 메인 쓰레드가 실행될 수 있도록 해야 한다. 따라서 유휴시간은 길 수록 좋다.


Load

- 목적: 사용자가 계속 집중할 수 있도록 1000ms 이내에 인터랙티브한 내용을 노출

- 1000ms (=1s) 내에 모든 내용을 보여줘야 한다는 의미는 아님. 일부라도 노출되어야 한다.


기타

서버와 통신하는 작업동안 긴 시간을 기다려야 하므로 이 시간에 트랜지션을 이용하여 사용자에게 즉각 반응하는 모습을 보여주는 것은 좋다. 그러나 트랜지션에는 수백 ms의 긴 시간이 걸리므로 주의해야 한다.


참고자료

- 슬라이드: bit.ly/perf-rails

- https://paulbakaus.com/tutorials/performance/the-illusion-of-motion/

- speed, performance and human perception

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

- Platform Success Model Explainer : chrome, blink가 performance에 대해 생각하는 내용을 알 수 있음




nundefined HTML5_JS_CSS Animation, Chrome, Google, IDLE, load, Performance, Rail, response, 구글, 성능, 크롬