#schemr

by 스키머

최근 구글 디자인 팀에서는 Resizer 서비스를 시작했습니다. 간략히 Resizer에 관한 내용을 정리했습니다.

Resizer 란?

Resizer는 데스크탑, 모바일, 태블릿에서 머터리얼 디자인 중단점(breakpoint)에 어떻게 응답하는지 테스트 할수 있는 인터렉티브 뷰어 입니다.

Resizer 중단점

이미 구글의 머터리얼 디자인 가이드에서 중단점에 대한 가이드를 제공하고 있습니다. 최적의 사용자 경험을 위해서 머터리얼 디자인의 사용자 인터페이스는 480, 600, 840, 960, 1280, 1440, 1600dp 의 레이아웃을 적용합니다. Resizer에서도 동일한 원칙으로 데스크탑, 모바일, 태블릿의 각 중단점을 제공합니다.

사용방법

Resizer에서는 사용자가 직접 URL을 입력해서 사용할 수 있으며, URL 입력 필드를 클릭하면 미리 등록된 몇개의 데모 사이트를 확인 할 수 있습니다. 웹사이트 접속후 상단 아이콘을 클릭해 데스크탑+모바일 / 데스크탑 / 모바일 화면을 볼수 있고, 사이트 상단에 있는 사이즈 바 에서 원하는 사이즈의 중단점을 클릭하여 변화하는 모습을 테스트 할 수 있습니다.

결론

이미 잘 알려진 반응형 웹 테스트 툴인 다음의 트로이나 Screenfly 등 다양한 에뮬레이터들과의 큰 차이점은 느끼지 못했습니다. 다만 Resizer는 머터리얼 디자인의 가이드라인을 기반으로 반응형 UI 의 표준 가이드를 제시하고 테스트 할수 있는 툴이라고 보여집니다.

참고

by 스키머

설날의 긴 연휴중 하루. 위트인웹 맴버중 프론트엔드 개발자 3명이 모여서 말로만듣던 글로만 보던 버닝데이를 진행하였습니다. 각자 하고싶은 주제를 가지고 진행하게 되었습니다. 

막상 시작을 하려하니 어떤주제를 가지고 어떻게 해야할지 막막했습니다. 일단 시작하자는 마음으로 기존에 기획했던 프로젝트를 테스트로 구현해보기로 했습니다. ionic+angularjs+firebase 를 이용해서 구성하고 첫화면을 구현하다가 막히는 부분이 발생했고, 맨붕이 오기 시작했습니다. 한동안 고민하다가 다음 버닝데이를 기약하며 처음으로 돌아가기로 했습니다. 

두번째로 시작한 내용은 공잠님이 버닝중인 밑줄긋기를 angular 버전으로 따라해 보았습니다. 기본적인 화면구성을 하고 api 테스트를 하다보니 어느새 사정상 마무리해야할 시간이 되고 말았습니다.     

버닝데이 동안 만들어낸 결과물은 없었지만 고민하고 직접 구현하면서 많은 공부가 되었고 “버닝” 했다는 성취감을 맛보았습니다. 

by 스키머

AngularJS 블로그에 포스팅 된 Angular Material 1.0 릴리즈에 대한 글의 요약 입니다.

Angular Material 1.0

32가지의 코어 UI 컴포넌트를 탑제한 Angular Material 1.0 라이브러리가 공식적으로 릴리즈

문서와 CodePen 샘플 업데이트

전체 문서와 데모 : http://material.angularjs.org

이전 버전과 1.0 버전의 차이점

stable CSS 와 API surface : 컴포넌트에 대한 API 확정, 변경 계획 없음

플랫폼 지원 : IE 11+, 크롬, 사파리, 파이어폭스, 안드로이드 4.2+, iOS 8+ 에서 테스트

Angular 1.5-ready : AngularJS 1.3 이상에서만 사용 가능, 새 버전으로 업데이트 되어 ngMaterial 컴포넌트 계속 사용 가능

github CHANGELOG 에서 0.11 부터 변경된 전체 내용 확인

향후계획

지속적인 버그 수정, github queue에서 알려진 문제를 통해서 버전 1.0을 정기적으로 업데이트 예정

다음 버그 수정버전은 1.0.1

레이아웃을 별도의 라이브러리로 만들고 이미 알려진 flexbox 브라우저 이슈를 개선하여 payload 크기를 줄이는 1.1 버전에 대한 작업 시작 (2016년 초 예정)

Material Design Specification의 발전에 따라서 컴포넌트 추가

Material 애니메이션, 트렌지션, 적응형 레이아웃의 주요 개선과 기능을 추가할 예정

by 스키머

AngularJS 블로그에 포스팅 된 Angular 2 Beta 릴리즈에 대한 글의 요약 입니다.

Angular 2 Beta

beta의 의미

Angular 2를 이용해서 대규모 어플리케이션을 성공적으로 구축할 수 있다고 확신

개발자 프리뷰와 알파를 통해 에드워즈, GreenTea(구글 내부 CRM 시스템), 구글 Fiber 등 구글의 대규모 프로젝트와 Ionic2, NativeScript, Batarangle 등의 외부에서 개발중

실제로 새로운 Angular 2 코드 기반의 구글 Fiber가 출시

시작하기

angular.io에 Quickstart와 Tutorial 을 업데이트

developer guides 와 chetsheet 를 통해서 Angular 2의 주요 기능을 확인

Angular 1 에서 업그레이드

ngUpgrade

가능한 기존 어플리케이션을 활용하고 Angular 2로 업그레이드 할 수 있도록 지원

Angular 1 어플리케이션에서 Angular 1 코드를 수정하지 않고 Angular 2 코드 혼합 사용 가능

참고

thoughtram blog

primer on Angular 2

ngForward

다운로드 크기에 민감할 경우 Angular 1 과 Angular 2 라이브러리를 동시에 실행 하는것을 방지하기 위해서 Angular 1 어플리케이션에서 Angular 2 문법을 사용 가능하게 함

현재 어플리케이션에서 Angular 2 구문과 스타일을 사용하고 준비가 완료되면 Angular 2의 전체 업그레이드를 단시간에 할수 있음

피드백 제시

Github, Stack Overflow, Gitter 를 통해서 이슈 제출

angular.io 각 페이지 좌측 상단에 ! 아이콘을 클릭하여 개선할 내용 전송

진행중인 내용과 향후계획

Angular 2의 payload 크기 감소

개발 프로세스 전반에 걸쳐 쉽게 사용할 수 있는 Angular CLI 개발

개발 친화적인 컴포넌트 라우터의 정의와 링크 API 개발

애니메이션 지원

I18n, L10n 지원

ES5/ES6 사용법에 대한 더 많은 문서

startup / 런타임 성능 개선

구성 스타일 가이드

단위, 종단 테스트 개선

모바일 웹과 모바일 앱에 대한 추가 지원

추가내용