레이아웃의 와이어프레임 만들기

레이아웃의 와이어프레임 만들기는 다양한 워크플로우에서 UI를 통해 전달하고자 하는 정보의 구조와 흐름을 설계하는 과정입니다. 이 튜토리얼의 중요한 단계는 UI 요소의 배치를 반복적으로 검토하고 문제 지점을 발견하며, 문제 있는 디자인에 시간과 자원을 투자하기 전에 플레이어의 경험을 개선할 수 있게 해줍니다.

샘플 레이저 태그 경험 .rbxl 파일을 참고하여, 사용자 인터페이스 커리큘럼의 이 섹션에서는 화면에 UI 요소를 구조화하는 방법을 보여줍니다. 여기에는 다음에 대한 안내가 포함됩니다:

• 플레이어가 경험을 성공적으로 수행하는 데 필요한 기능과 정보를 직관적으로 안내하는 UI의 시각적 계층 계획.
• Roblox의 핵심 UI 및 터치 제어와 함께 UI 요소의 구성을 검토하기 위해 기본 도형으로 UI 요소를 차단.
• 플레이어가 목표를 달성하기 위해 수행해야 하는 필수 작업을 고려한 사용자 흐름 개발.

이 섹션을 완료하면, 아트 스타일과 와이어프레임을 존중하는 UI를 Studio에서 구성하고 설정하는 방법을 배우게 됩니다.

시각적 계층 계획

시각적 계층은 UI 요소의 중요도에 따라 강조하는 조직 구조입니다. 경험의 다양한 워크플로우에 대한 시각적 계층을 계획하는 것은 플레이어가 목표를 달성하는 데 성공할 수 있도록 설정하기 때문에 중요하며, 이는 특히 목표가 순간마다 바뀌는 1인칭 슈팅 게임의 빠른 게임 플레이에 필요합니다.

효과적인 시각적 계층은 플레이어가 워크플로우를 완료하기 위해 자연스럽게 화면을 보는 위치에 따라 필요한 기능과 정보를 안내합니다. 예를 들어, 샘플 레이저 태그 경험의 시각적 계층은 플레이어가 맵을 탐색하고 적 팀의 플레이어를 태그할 때 다음과 같은 UI 요소 범주를 안내해야 합니다:

1. 경험의 목표에 대한 정보.
2. 블래스터에 대한 정보.
3. 플레이어의 상태에 대한 정보.

이러한 각 범주의 화면 내 위치는 그 중요도를 강조합니다:

• 첫 번째 범주는 상단에 가깝게 배치되어 있으며, 게임에서 승리하기 위한 방법에 대한 UI 요소가 가장 중요하기 때문입니다.
• 두 번째 범주는 중간에 많은 화면 공간을 차지하고 있으며, 3D 공간 내의 행동으로 플레이어의 주의를 끌기 위한 중심점 역할을 하며, 게임 플레이에 가장 큰 중요성을 가집니다.
• 세 번째 범주는 측면에 가깝게 배치되어 플레이어가 게임 플레이의 주의가 산만해지지 않고 주변 정보를 읽을 수 있습니다.

일부 경험 장르는 한 번에 한 종류의 정보만 표시하면 충분할 수 있지만, 1인칭 슈팅 경험에서는 플레이어가 동시에 필요로 하는 정보, 즉 팀 점수, 블래스터의 쿨다운 시간, 라운드에서 태그된 여부 등 여러 범주의 UI 요소를 동시에 확인해야 합니다.

자신의 경험의 워크플로우에 대한 시각적 계층을 계획할 때 다음을 고려하세요:

• 화면에 서로 다른 범주의 UI 요소를 그룹화하면 플레이어는 필요한 정보를 어디서 찾아야 할지 모릅니다. 플레이어가 경험을 탐색하는 데 도움을 주기 위해 동일 범주의 UI 요소를 함께 그룹화하세요.
• 한 번에 화면에 너무 많은 범주가 있을 경우, 플레이어는 주의를 기울여야 하는 정보가 무엇인지 모를 수 있습니다. 플레이어가 혼잡함에 압도당하지 않도록 하기 위해 다양한 워크플로우에 따라 UI 요소를 맥락에 맞게 표시하세요.
• 유사하게, 범주당 UI 요소가 너무 많으면 플레이어가 작업이나 과정 완료 방식을 이해하는 데 방해가 될 수 있습니다. 이러한 이유로 이상적인 상호작용 순서를 위해 아트 스타일을 사용하여 시각적 강조를 제공하는 것이 중요합니다.

샘플 레이저 태그 경험의 시각적 계층에 대한 전체 검토는 다음 표를 참조하십시오:

UI 요소 차단하기

이제 시각적 계층을 염두에 두면서, 기본 도형을 사용하여 개별 UI 요소를 차단하고 여러 장치에서 Roblox의 핵심 UI와 함께 사용자 정의 UI 레이아웃의 구성을 검토할 수 있습니다. 이 과정은 플레이어가 경험에 접근할 때 사용할 수 있는 모든 화면 크기에서 디자인이 효과적이도록 요구되는 수정이 필요한 위치를 확인할 수 있게 해 줍니다. 예를 들어 기본적으로 Roblox는 모든 경험에서 다음 UI 요소를 표시합니다:

• 경험 내 플레이어 목록.
• 캐릭터의 건강 바.
• 캐릭터의 배낭.
• 채팅 창.
• 캡처 버튼.
• 캐릭터 이모트의 팝업 메뉴.

이러한 요소 중 게임 플레이 요구 사항을 충족하지 않는 요소를 비활성화하여 사용자 정의 UI를 위한 화면 공간을 확보할 수 있습니다. 예를 들어 샘플 레이저 태그 경험에서는 플레이어가 단일 블래스터만 선택할 수 있으므로 배낭이 필요하지 않습니다. 그러나 플레이어가 한 번에 여러 블래스터를 선택할 수 있다면, 플레이어가 재생성될 때 블래스터 선택기가 항상 공간을 가질 수 있도록 이 핵심 UI를 비활성화하고, 인벤토리에서 선택할 다른 위치를 제공할 수 있습니다.

Roblox의 핵심 UI 외에도 Roblox의 기본 터치 제어를 위한 필요한 화면 공간도 고려해야 합니다. 예를 들어, 플레이어가 모바일 장치를 사용하여 경험에 접근할 때, 화면의 하단 왼쪽 모서리에 가상 조이스틱이 나타나고, 하단 오른쪽 모서리에 점프 버튼이 표시됩니다. 이는 플레이어가 키보드나 컨트롤러에 접근할 수 없더라도 항상 경험을 탐색할 수 있도록 보장합니다.

게임 플레이에 필요한 Roblox의 핵심 UI 요소와 터치 제어의 가능성을 모두 고려하면, 하나의 디자인에서 모든 장치에 적응할 수 있는 사용자 정의 UI 요소를 차단할 수 있습니다. 이는 경험을 업데이트할 때 UI의 별도 버전을 유지할 필요가 없음을 의미하기 때문에 중요합니다.

이 방법을 보여주기 위해, 샘플 레이저 태그 경험의 사용자 정의 UI 요소가 모바일 및 PC 장치에서 어떻게 차단되는지에 대한 다음 두 이미지를 검토하세요. 두 이미지 모두 포함되어 있습니다:

• 기본 도형을 사용하여 사용자 정의 UI를 나타내며, 최종 디자인에 도달하기 전에 여러 번 반복할 수 있게 해줍니다.
• 정보가 색상 배경 환경의 방해 없이 전달될 수 있도록 회색 음영.
• 채팅 창과 활성 플레이어 목록의 열려 있는 상태를 보여주어 화면에서 얼마나 많은 공간을 차지하는지 볼 수 있습니다.
• 모바일 장치에서 필요하지 않더라도 모바일 컨트롤의 공간을 확보합니다.

이런 방식으로 레이아웃을 설계하면서 화면에 동시에 존재할 수 있는 UI 요소의 수를 고려하면, 플레이어의 장치와 워크플로우에 따라 모든 잠재적인 레이아웃을 위해 미래 지향적인 준비를 할 수 있습니다.

레이아웃을 위한 UI 요소를 차단할 때 다음을 고려하십시오:

• UI 요소를 차단하는 위치와 방법이 레이아웃의 구성을 좌우할 수 있습니다. Roblox의 핵심 UI와 함께 사용자 정의 UI 요소의 양과 크기에서 균형과 대칭을 목표로 하세요.
• 일부 모바일 및 태블릿 장치의 하단 모서리에 멀리 있는 UI와 상호작용하는 것은 불편하거나 불가능합니다. 엄지의 자연스러운 휴식 위치와 가까운 접근이 쉬운 영역에 상호작용 요소를 배치하세요.
• 플레이어가 환경을 탐색할 때 3D 공간이 화면상의 UI에서 산만해질 수 있습니다. 다양한 배경과 대조하여 레이아웃을 테스트하여 화면의 UI 요소가 명확하고 가독성이 있도록 하세요.

사용자 흐름 개발

사용자 흐름은 플레이어가 경험 내에서 작업을 완료하기 위해 취할 수 있는 경로의 모음입니다. 예를 들어 무기를 선택하거나, 아이템을 구매하거나, 캐릭터를 치유하는 작업 등이 있습니다. 사용자 흐름은 일반적으로 플레이어가 작업을 시작할 것으로 예상하는 위치에서 시작하여, 작업의 마지막 행동 또는 성과로 끝납니다. 또한 효과적인 사용자 흐름은 플레이어가 스스로 원하는 비정상적인 경로를 고려합니다.

다음 흐름 차트는 플레이어가 샘플 레이저 태그 경험에 들어가고 플레이하는 사용자 흐름을 보여줍니다. 플레이어가 경험을 열면 로비에 합류합니다. 라운드가 아직 진행 중이지 않으면 라운드 루프가 시작될 때까지 기다리며, 그렇지 않으면 현재 게임을 하고 있는 팀에 합류합니다. 종료 조건이 충족되지 않으면(예: 시간 제한에 도달하거나 팀당 10명의 플레이어를 태그), 플레이어는 블래스터를 선택하고 적 팀에 의해 태그되거나 태그하는 주요 게임 플레이를 경험합니다. 아레나 내에서 새로운 블래스터를 장착하거나 태그된 후 다시 생성합니다. 플레이어가 종료 조건을 충족하면 라운드를 마치고 다시 로비에 합류합니다.

플레이어가 경험에서 할 수 있는 모든 작업에 대한 사용자 흐름을 개발하는 것이 중요합니다. 이는 그들이 작업을 완료하기 위해 어디에서 어떻게 해야 할지 평가하고, 자신의 경로를 따르는 플레이어의 고충점을 완화할 수 있는 곳을 예견하게 해 줍니다. 예를 들어, 샘플 레이저 태그 경험을 위해 추가적인 사용자 흐름을 개발한다면, 플레이어가 다음과 같은 경우에 어떻게 되는지 고려할 수 있습니다:

• 종료 조건이 충족되기 전에 라운드를 포기할 경우?
• 팀에 합류하는 동안 경험을 떠날 경우?
• 라운드 중간에 전화가 올 경우?
• 라운드와의 연결이 15초 미만으로 끊길 경우?

플레이어가 작업을 완료하는 동안 취할 수 있는 모든 잠재적 행동이나 발생할 수 있는 시나리오를 시각화함으로써, UI 요소의 배치가 사용자 경험에 부정적인 영향을 미치는 방식을 더 잘 파악할 수 있고, Studio에서 디자인을 구현하기 전에 조정할 수 있습니다. 작업이 직관적이고, 방해가 되지 않으며, 편리하게 느껴지면 플레이어는 경험에서 더 많은 시간을 보내고 나중에 다시 돌아올 가능성이 높아집니다.

자신의 경험을 위한 사용자 흐름을 개발할 때 다음을 고려하세요:

• 플레이어가 경험에서 하고자 하는 것과 그들이 실제로 하고자 하는 것이 완전히 다를 수 있습니다. 여러 유형의 플레이어와 함께 레이아웃을 테스트하여 그들이 목표를 달성하는 데 원하는 경로를 이해하는 것이 가장 좋습니다.
• 흐름 차트는 다이어그램 내에서 여러 시나리오를 동시에 포착하려고 할 경우 읽기 어려워지고 비효율적이 될 수 있습니다. 각 작업에 대한 주의를 집중하기 위해, 흐름 차트를 한 번에 하나의 주요 작업으로 제한하세요.
• 상호작용 패턴은 플레이어가 터치 제어, 게임패드 또는 컴퓨터 마우스를 사용하여 경험과 상호작용하는 방식에 따라 달라질 수 있습니다. 여러 장치에 대해 설계하는 경우, 각 장치에 대해 고유한 사용자 흐름을 개발하여 고충점을 식별하고 워크플로우를 단순화하세요.

와이어프레임 디자인을 최종 결정한 후에는 Studio로 이동하여 UI를 구현할 시점을 정하세요.