폼 팩터 및 UX를 위해 Windows Phone Silverlight를 UWP로 포팅하기

  • 아티클

이전의 토픽은 비즈니스 및 데이터 계층 포팅하기입니다.

Windows 앱은 일반적인 모양과 느낌을 PC, 모바일 장치 및 기타 다양한 종류의 장치에서 공유합니다. 사용자 인터페이스, 입력 및 상호 작용 패턴은 매우 유사하고, 장치 간에 이동하는 사용자는 익숙한 환경을 환영합니다. 물리적 크기, 기본 방향 및 유효 픽셀 해상도 요소 등의 장치 간 차이는 Windows 10에서 UWP(Universal Windows Platform) 앱을 렌더링하는 방식과 다릅니다. 좋은 소식은 무거운 리프팅의 대부분은 효과적인 픽셀 등의 스마트 개념을 사용하여 시스템에 의해 당신을 위해 처리된다는 것입니다.

다양한 폼 팩터 및 사용자 환경

다양한 장치에는 다양한 가로 세로 비율의 여러 가능한 세로 및 가로 해상도가 있습니다. UWP 앱의 인터페이스, 텍스트 및 자산의 시각적 측면은 어떻게 확장될까요? 터치와 마우스 및 키보드 입력을 어떻게 지원할 수 있나요? 또한 보기 거리가 서로 다른 다양한 크기의 장치에서 터치를 지원하는 앱을 사용하면 어떻게 컨트롤이 서로 다른 픽셀 밀도에서 오른쪽 크기의 터치 대상이 되고 다른 거리에서 콘텐츠를 읽을 수 있을까요? 다음의 섹션은 알아야 할 사항을 다룹니다.

실제 화면의 크기가 얼마나 될까요?

짧은 대답은 디스플레이의 목표 크기뿐만 아니라 얼마나 멀리 떨어져 있는지에 따라 달라지므로 주관적이라는 것입니다. 주관성은 우리가 사용자의 관점에서 보아야 한다는 것을 의미하며, 경우에 따라 좋은 애플리케이션의 개발자가 할 수 있는 것입이다.

객관적으로 화면은 인치 단위 및 물리적(원시) 픽셀로 측정됩니다. 인치에 맞는 픽셀 수를 알려면 두 메트릭을 모두 알아야 합니다. 즉, PPI(인치당 픽셀)라고도 하며 DPI(인치당 점)라고도 하는 픽셀 밀도입니다. 또한 DPI의 상호는 픽셀의 물리적 크기(1인치의 분수)입니다. 픽셀 밀도를 해상도라고도 하지만, 이 용어는 픽셀 수를 의미하기 위해 느슨하게 사용되는 경우가 많습니다.

보기 거리가 늘어나면 이러한 모든 목표 메트릭이 작아 보이고 화면의 유효 크기와 효과적인 해상도로 확인됩니다. 일반적으로 휴대폰은 눈에 가장 가깝게 유지됩니다. 그 다음이 태블릿, 그리고 PC 모니터이고 가장 멀리 떨어진 곳에 Surface Hub 장치 및 TV가 있습니다. 장치는 이를 보완하기 위해 보기 거리와 함께 객관적으로 커지는 경향이 있습니다. UI 요소에서 크기를 설정하는 경우, 유효 픽셀(epx)이라는 단위로 해당 크기를 설정합니다. 또한 최상의 보기 환경을 제공하기 위해 Windows 10은 DPI 및 장치와의 일반적인 보기 거리를 고려하여 물리적 픽셀에서 UI 요소의 가장 큰 크기를 계산합니다. 보기/유효 픽셀, 보기 거리 및 배율 인수를 참조하십시오.

그럼에도 불구하고 다양한 장치로 앱을 테스트하여 각 환경을 직접 확인할 수 있도록 하는 것이 권장됩니다.

터치 해상도 및 보기 해상도

어포던스(UI 위젯)는 터치하기 적합한 크기여야 합니다. 그러므로 터치 대상은 픽셀 밀도가 다를 수 있는 여러 장치에서 물리적 크기를 다소 유지해야 합니다. 효과적인 픽셀은 터치 대상에 이상적인 일정한 물리적 크기를 달성하기 위해 (픽셀 밀도를 고려하여) 다양한 장치에서 크기 조정됩니다.

텍스트는 읽기 적합한 크기여야 하며(20인치 보기 거리에 있는 12포인트 텍스트는 엄지 썸네일의 좋은 규칙임), 이미지는 보기 거리에 적합한 크기와 효과적인 해상도여야 합니다. 서로 다른 장치에서 동일한 유효 픽셀 크기 조정은 UI 요소의 크기를 올바르게 조정하고 읽을 수 있게 유지합니다. 텍스트 및 기타 벡터 기반 그래픽은 자동으로 확장되며 매우 잘 조정됩니다. 개발자가 큰 단일 크기로 자산을 제공하는 경우에도 래스터(비트맵) 기반 그래픽의 크기는 자동으로 조정됩니다. 그렇지만 개발자는 각 자산을 다양한 크기로 제공하여 대상 장치의 배율 인수에 적합한 자산을 자동으로 로드할 수 있도록 하는 것이 좋습니다. 자세한 정보를 보려면 보기/유효 픽셀, 보기 거리 및 배율 인수를 참조하세요.

레이아웃 및 적응형 Visual State Manager

화면 크기에 대한 의미 있는 이해와 관련된 요인을 설명했습니다. 이제 앱의 레이아웃, 또한 사용 가능한 경우 추가 화면 공간을 사용하는 방법을 살펴보겠습니다. 좁은 모바일 장치에서 실행되도록 설계된 매우 간단한 앱에서 이 페이지를 고려합니다. 이 페이지는 더 큰 화면에서 어떻게 표시되어야 할까요?

the ported windows phone store app

모바일 버전은 책 목록에 가장 적합한 가로 세로 비율이기 때문에 세로 전용 방향으로 제한됩니다. 또한 모바일 장치에서 단일 열에 가장 잘 보관되는 텍스트 페이지에 대해 동일한 작업을 수행합니다. 하지만 PC 및 태블릿 화면은 어느 방향으로든 크므로, 모바일 장치 제약 조건은 더 큰 장치에서는 불필요한 제한처럼 보입니다.

앱을 광학적으로 확대/축소하여 모바일 버전처럼 보이도록 하는 것은 장치 및 추가 공간을 활용하지 않으며 사용자에게 도움이 되지 않습니다. 동일한 콘텐츠를 더 키우기 보다는 더 많은 콘텐츠를 표시할 생각을 해야 합니다. 패블릿에서도 더 많은 콘텐츠 행을 표시할 수 있습니다. 추가 공간을 사용하여 광고와 같은 다양한 콘텐츠를 표시하거나, 목록 상자를 목록 보기로 변경하고 항목을 여러 열로 래핑하여 공간을 사용할 수 있습니다. 목록 및 그리드 보기 컨트롤에 대한 지침을 참조하세요.

목록 보기 및 그리드 보기와 같은 새로운 컨트롤 외에도 Windows Phone Silverlight에서 설정된 대부분의 레이아웃 형식은 UWP(Universal Windows Platform)에 해당합니다. 예를 들어 Canvas, Grid 및 StackPanel입니다. 이러한 형식을 사용하는 UI의 대부분을 포팅하는 것은 간단해야 하지만, 항상 이러한 레이아웃 패널의 동적 레이아웃 기능을 활용하여 크기가 다른 장치의 크기를 자동으로 조정하고 다시 배치하는 방법을 찾습니다.

시스템 컨트롤 및 레이아웃 패널에 기본 제공되는 동적 레이아웃을 넘어 적응형 Visual State Manager라는 새로운 Windows 10 기능을 사용할 수 있습니다.

입력 형식

Windows Phone Silverlight 인터페이스는 터치를 특징으로 하는 인터페이스입니다. 또한 포팅된 앱의 인터페이스는 터치도 지원해야 하지만, 마우스 및 키보드 등의 다른 입력 형식도 지원하도록 선택할 수 있습니다. UWP에서 마우스, 펜 및 터치 입력은 포인터 입력으로 통합됩니다. 자세한 정보를 보려면 포인터 입력 처리 및 키보드 상호 작용을 참조하세요.

태그 및 코드 재사용 최대화하기

다양한 폼 팩터를 사용하여 대상 장치에 UI를 공유하는 기술에 대한 태그 및 코드 재사용 최대화하기 목록을 다시 참조하세요.

자세한 정보 및 디자인 지침