언어:
페이지 정보
태그:
수준별:
엔진 버전:
언리얼 엔진

다양한 디바이스용 스케일 UI

언리얼 엔진

이 글은 UMG UI 디자이너 에 대한 일반적인 이해가 있는 분들을 대상으로 합니다.

프로젝트에 UI 작업을 할 때, 이미 프로젝트를 릴리즈하고자 하는 타깃 디바이스를 염두에 두고 있을 것입니다. 사실, 프로젝트를 릴리즈하고자 하는 플랫폼이나 디바이스가 여럿일 수도 있습니다. 그럴 때 DPI 스케일링 규칙을 사용한 해상도 무관 자동 UI 스케일이 사용됩니다.

요약하자면, 이 옵션으로 (어떤 스케일을 적용할지 정하는 데 사용되는) DPI Scale Rule (DPI 스케일 규칙)과 (미리 정의해 둔 다양한 해상도와 그 각각의 스케일 값이 들어있는) DPI Curve (DPI 커브)를 정의하여 다양한 해상도에 대한 UI 요소 스케일을 자동으로 조절할 수 있습니다. 이를 통해 폰에서 태블릿이나 PC, 또는 다양한 해상도의 디바이스로 빠르고 쉽게 전환할 수 있습니다.

이번 비법에서는 단순 UI 화면을 다양한 디바이스에 디플로이할 수 있도록 DPI 스케일 규칙을 구성하는 법을 안내해 드리겠습니다.

단계

여기서는 일인칭 템플릿 을 사용하고 있지만, 아무 프로젝트나 사용해도 됩니다.

  1. 위젯 블루프린트 를 엽니다.

  2. 디자이너 탭에서, 비주얼 디자이너 창 우하단 구석의 현재 DPI 스케일 을 적습니다.

    WidgetBlueprint.png

    전형적으로 UI 요소 작업은 스케일 1.0 에서 한 다음 DPI 스케일 규칙을 사용해서 크기를 늘이거나 줄이는 것이 최선입니다.

  3. 기어 아이콘을 클릭하여 사용자 인터페이스 세팅 창을 엽니다.

    OpenUserInterfaceSettings.png

    사용자 인터페이스 세팅 창은 프로젝트의 프로젝트 세팅 에서도 접근할 수 있습니다.

  4. DPI Scaling 아래 사용하고자 하는 DPI 스케일 규칙 을 선택합니다 (여기서는 뷰포트의 Shortest Side (최단 측면)을 사용합니다).

  5. DPI Curve 에서 스케일 값 1.0 을 반영하는 키를 찾습니다.

    Scale.png

    여기서는 1080 이 스케일 1 이 되도록 설정되어 있지만 변경할 것입니다.

  6. 위젯 블루프린트 로 돌아와서 디자이너 탭에, 화면 크기 드롭다운 메뉴를 클릭한 다음 Apple iPhone 6 (Portrait) (애플 아이폰 (세로)) 를 선택합니다.

    iPhone6Screensize.png

    여기서는 아이폰 6 를 타깃 디바이스로 하지만, 원하는 대로 설정해도 됩니다.

    화면 크기를 선택하면, 비주얼 디자이너 창이 작업중인 화면 크기를 반영하도록 업데이트되는 것이 보일 것입니다.

    VisualDesignerUpdated.png

    DPI 스케일 규칙이 최단 측면 으로 설정되었으므로, 아이폰 6 (세로) 의 최단 측면은 750 이 스케일 1 이 됩니다.

  7. DPI 커브 에 대한 사용자 인터페이스 세팅에 돌아와서, Resolution (해상도) 750 을 스케일 1 로 설정합니다.

    UpdatedResolution1.png

    입력된 값이 조정되어 750.000061 처럼 되는 것이 보일 것입니다. 이렇게 되면 다른 해상도로 이동하기 시작할 때 UI 요소 일부가 살짝 이동될 것이므로, UI 의 스케일 1 에 사용할 해상도 범위를 제공해 주도록 하겠습니다.

  8. 스케일 1 에 대한 해상도749 로 설정합니다.

  9. Shift 를 누르고 좌클릭 하여 그래프에 키를 하나 더 만든 뒤, 그 해상도760 으로, 스케일1.0 으로 설정합니다.

    SecondKeyAdded.png

    위는 범위를 볼 수 있도록 줌 인한 것입니다 (이 범위는 원하는 대로 높이고 낮출 수 있습니다).

  10. 위젯 블루프린트 로 돌아가 보면 아이폰 6 (세로) 의 DPI 스케일이 이제 1.0 인 것이 보입니다.

    UpdatedScale.png

  11. 화면 크기 드롭다운을 선택한 다음 다른 종횡비를 선택합니다 (예를 들어 삼성 갤럭시 S4 (세로)).

    S4Screen.png

    DPI 스케일 값이 변합니다. 이 종횡비에 맞춰 UI 스케일을 제대로 잡기 위해 원하는 해상도 최단 측면 (1080) 을 타깃 디바이스의 최단 측면 (750) 으로 나누면 스케일 값이 1.44 가 나옵니다.

  12. DPI 커브 에 대한 사용자 인터페이스 세팅으로 돌아가서, Shift + 좌클릭 으로 새 키를 두 개 만듭니다.

  13. 한 키의 해상도1079 (스케일 1.44) 로, 다른 키의 해상도1090 (스케일 1.44) 로 설정합니다.

  14. 지원하고자 하는 디바이스 각각에 대해 11 단계에서 13 단계를 반복합니다.

그러면 DPI 스케일링 세팅에 정의된 규칙에 따라 UI 요소의 스케일을 자동으로 조정해 줍니다. 위젯 배치시 화면에서 벗어나면 뷰포트 위치에 맞게 위젯 앵커 설정 작업을 계속 해 줘야 할 수 있습니다.