Resizer

디지털 제품이, 데스크톱, 모바일 및 태블릿에 걸쳐서, 머티어리얼 디자인 브레이크포인트에 어떻게 적응하는지를 보고 테스트하기 위한 대화형 뷰어.
An interactive viewer to see and test how digital products respond to material design breakpoints across desktop, mobile, and tablet.

What is Resizer?

디지털 제품의 디자이너 및 개발자 입장에서, 가장 큰 과제 중 하나는 사용자에게 적합한 UI를 적시에 제공하는 방법을 파악하는 것입니다.
사용자가 애플리케이션을 어떻게 사용하든 관계없이, 전화이든 또는 VR을 통한 것이든, 최신 및 최대 기술 또는 핸드-미-다운 2G 위에서, 제스처 또는 마우스로 애플리케이션을 조작하든, 고객이 제품에 접근할 수 있게 하는 것은 우리의 책임이며 -  그것은 매우 어려운 주문입니다.
모든 필요에 적합한 간단한 디자인 솔루션은 없습니다.
As designers and developers of digital products, one of our greatest challenges is figuring out how to serve the right UI to our users at the right time. No matter how they’re using an application, be it a phone or through VR, manipulating it with gesture or a mouse, on the latest and greatest tech or a hand-me-down 2G, it is our responsibility to make our products accessible to everyone—and that’s a pretty tall order. There’s no simple design solution to fit every need.

브레이크포인트, 응답 그리드, 표면 행동 및 UI 패턴 주위에 머티어리얼 디자인 지침을 제공하기 시작했습니다.
지금 Resizer로, 그 지침을 테스트하는 다이나믹한 방식을 갖게 되었고, 반응형 UI에 관한  디자이너, 개발자, 이해 관계자 간의 의미있는 대화가 속도를 낼 수 있도록 도움이 줍니다.
We’ve started to offer Material Design guidance around breakpoints, responsive grids, surface behaviors, and user interface patterns. Now with Resizer, we have a dynamic way to test out that guidance and help spur meaningful conversations between designers, developers, and stakeholders about responsive UI..

Resizer로 사용자 정의 URL을 입력할 수 있고 또는 선택된 웹사이트 및 데모를 미리 볼 수 있습니다.
액션 아이콘을 사용하여, 데스크톱 및 모바일을 위한 머티어리얼 디자인 브레이크포인트에 걸쳐서  사이트를 볼 수 있습니다.
With Resizer you can input a custom URL, or preview selected websites and demos. Using the action icons, you can view a site across Material Design breakpoints for desktop and mobile.

UI 패턴 개발하기    Exploring UI Patterns

스크린 크기가 특정 컴포넌트의 위치를 변경시킬 때 따라야 할 잠재적 패턴이 너무 많이 있습니다 - revealing,  변화시키기, 나누기, 재흐름하기, 확장하기 등.
Resizer는 어떤 패턴이 그들에게 최적으로 작동하는지를 디자이너와 개발자가 시각화하는 것을 도와줍니다.
이들 패턴의 일부를 보여주기 위하여, Resizer 메뉴에서 볼 수 있는 몇 가지 데모를 디자인했습니다.
There are so many potential patterns to follow when a screen size changes the position of specific components—revealing, transforming, dividing, reflowing, expanding, etc. Resizer helps designers and developers visualize which patterns will work best for them. To showcase some of these patterns, we designed a few demos that can be found in the Resizer menu.

Pesto Demo

Pesto는 약간의 반응형 패턴을 데모하기 위한 recipe app 입니다.
이것은 스크린 크기에 근거하여 재흐름하는 grid list를 사용합니다.
app bar 안의 로고는 toolbar의 높이에 근거하여 변형됩니다.
FAB는 desktop or mobile 위의 앱을 보고 있는지 여부에 근거하여 위치가 바뀝니다—see what I did there?
Resizer의 다른 특징은 특정 크기로 보여지고 있는 특정 사이트에 연결할 수 있다는 점입니다.
Pesto is a recipe app demonstrating a few responsive patterns. It uses a grid list that reflows based on screen size. The logo in the app bar transforms based on the height of the toolbar. The FAB changes position based on whether you’re viewing the app on desktop or mobile—see what I did there? Another feature of Resizer is that you can link to a specific site being viewed at a specific size.

details of a recipe를 볼 때, 위 오른쪽 위의 overflow 아이콘을 클릭해보십시오.
데스크탑의 동일한 액션이 메뉴를 call 할 때, 모바일의 이것은 bottom sheet를 call합니다.
When looking at the details of a recipe, try clicking the overflow icon on the top right. On mobile, this calls a bottom sheet, while the same action on desktop calls a menu.

Pesto: recipes를 발견하고, 공유하고, 저장하는 것을 돕는 현대적 요리 앱.
Demonstrating material responsive UI patterns.
Pesto: A contemporary cooking app that helps you discover, share, and store recipes. Demonstrating material responsive UI patterns.

Shrine Demo

Shrine은 화면 크기나 기기에 따라 구성요소들을 단순히 확장하는 것과 반대로, 실제로 탐색 패턴을 변경시키는 것의 중요성을 강조합니다.
Shrine는 원활한 쇼핑 경험을 제공하기 위해 여러 가지 타입의 반응형 그리드 목록을 사용합니다.
탭은 하나의 컴포넌트가 다른 것으로 변환되는 방법을 보여줍니다.
Resizer를 사용하여, window large에서 window small로, 그리고 tablet에서 mobile로 변형되는 방법을 살펴보십시오.
Shrine emphasizes the importance of actually changing navigation patterns as opposed to simply scaling components based on screen size or device. Shrine uses a different type of responsive grid list to create a seamless shopping experience. The tabs demonstrate how one component can transform into another. Using Resizer, take a look at how they transform from window large to window small, and tablet to mobile.

Shrine: independent, small-batch retail에 관심있는, young, DIY-maker 및 -shopper를 지향하는,  쇼핑 앱. material responsive UI patterns을 데모하고 있습니다.

Shrine: A shopping app geared toward the young, DIY-maker and -shopper interested in independent, small-batch retail. Demonstrating material responsive UI patterns.

What’s next

반응형 UI 관련 건전한 지침을 개발하는 것은 계속되는 process로, Material Design guidance에서 처리하고 지속적으로 노력하는 것 중의 하나입니다.
Resizer는 이러한 솔루션에 보여주기 위한 dynamic visual resource 이기 때문에, 거기에 당신의 URLs를 붙인 다음, your products가 screen sizes에 걸쳐 어떻게 작동하는지 보십시오.
Developing sound guidelines around responsive UI is an ongoing process, one that we are consistently trying to address in our Material Design guidance. Resizer is a dynamic visual resource for showcasing these solutions, so, paste your URLs in there, and see how your products work across screen sizes.

또한 design.google.com/resources에서 사용할 수 있는 다른 상호작용적 리소스를 보십시오.
library of over 900 system icons를 방문해서 our icon font를 배우십시오. 
Device Metrics, sizing, resolution, and more across multiple devices를 위한 광범위한 리소스를 체크아웃 하십시오.
그리고 리소스 페이지로부터 연결된 프레임웍을 통하여 브라우징 함으로써 right component를 찾으십시오.
이들 리소스 모두 Material로 사물을 만드는 것을 약간 쉽게 만들기 위한 목적으로 생긴 것들입니다.
Also take a look at our other interactive resources available through design.google.com/resources. Visit our library of over 900 system icons and learn more about our icon font. Check out Device Metrics, a comprehensive resource for sizing, resolution, and more across multiple devices. And find the right component by browsing through the frameworks linked from the resources page. All of these resources were created with the aim of making it a little easier to make things with Material.

Note: The Pesto and Shrine demos included in the Resizer menu were built in Angular, check out the same demos built with Polymer here.

Launch Resizer and start playing.