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

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

샘플 레이저 태그 게임 .rbxl 파일을 참조하여, 이 사용자 인터페이스 커리큘럼의 이 섹션에서는 화면에서 UI 요소를 구조화하는 방법을 보여주며, 다음과 같은 지침을 포함합니다:

• 플레이어가 게임에서 성공하는 데 필요한 기능과 정보를 직관적으로 안내하는 UI의 시각적 계층 구조 계획하기.
• 기본 도형으로 UI 요소를 차단하여 Roblox의 핵심 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의 별도 버전을 유지할 필요가 없음을 의미하므로 중요합니다.

이 방법을 시연하기 위해, 샘플 레이저 태그 게임이 모바일 및 PC 장치 모두에 대해 사용자 정의 UI 요소를 차단하는 방법에 대한 두 이미지를 검토하세요. 두 이미지 모두 다음을 포함합니다:

• 최종 디자인에 도달하기 전에 여러 번의 반복을 쉽게 거칠 수 있도록 사용자 정의 UI를 나타내는 기본 도형.
• 정보가 화려한 배경 환경의 방해 없이 따라갈 수 있도록 하는 그레이스케일 색상.
• 채팅 창과 활성 플레이어 목록의 열린 상태를 보여주어 화면에서 차지하는 공간을 확인합니다.
• PC 장치에 필요하지 않더라도 모바일 컨트롤을 위한 공간.

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

레이아웃을 위한 UI 요소를 차단할 때 다음 사항을 고려하세요:

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

사용자 흐름 개발하기

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

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

플레이어가 게임에서 할 수 있는 모든 작업에 대한 사용자 흐름을 개발하는 것은 중요합니다. 이는 플레이어가 작업을 완료하는 방법과 위치를 평가하고, 스스로 경로를 따르는 사람들을 위해 문제점을 완화할 수 있는 위치를 예측할 수 있게 해줍니다. 예를 들어, 샘플 레이저 태그 게임에 대한 추가 사용자 흐름을 개발한다면, 플레이어가:

• 종료 조건이 충족되기 전에 라운드를 종료할 경우 어떻게 됩니까?
• 팀에 참여하는 동안 게임을 떠날 경우 어떻게 됩니까?
• 라운드 중간에 전화가 올 경우 어떻게 됩니까?
• 15초 미만으로 라운드와의 연결이 끊길 경우 어떻게 됩니까?

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

자신의 게임에 대한 사용자 흐름을 개발할 때 다음 사항을 고려하세요:

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

와이어프레임 디자인을 최종 확정한 후, Studio로 이동하여 UI를 실현할 시간입니다.