#witinweb

by 스키머

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

Resizer 란?

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

Resizer 중단점

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

사용방법

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

결론

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

참고

by 스키머

구글 폴리머(Polymer) 1.0 버전이 나왔습니다.

위트인웹에서 작년 9월 0.3.5 버전의 “시작하기” 를 번역해서 최근까지도 많은 분들과 공유하고 있었습니다.

버전이 올라가면서 문서가 조금씩 바뀌었는데 약간의 바쁨과 귀찮음을 핑계로 계속 미루고 있었는데 1.0 버전이 공개 되었네요.

자세한 내용은 Googled Developer Korea Blog 글을 참고하세요.

조만간 1.0 버전 “시작하기(Get Started)” 문서 업데이트 하겠습니다.

추가적으로 2015 Google I/O 에서 폴리머 관련한 영상링크 공유하겠습니다.

Google I/O 2015 - Polymer and modern web APIs: In production at Google scale

2014.9.2

폴리머 시작하기 번역 프로젝트가 막바지에 다달았다. 

몇주간에 영어와 씨름하며 미흡하지만 끝까지 진행한점에 뿌듯함과 즐거움이 가득한 작업이였다.

공잠님의 도움이 없었다면 불가능 했을것이다.. 

감사합니다.