Search results for 'Animation'

DevTools in 2016: Accelerate your workflow 요약

2016.06.06 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.07.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, 구글, 성능, 크롬